/* global React */
const { useState, useEffect } = React;
const { HERO_SLIDES } = window;

function HeroSlider() {
  const [active, setActive] = useState(0);
  const total = HERO_SLIDES.length;
  useEffect(() => {
    const t = setInterval(() => setActive(a => (a + 1) % total), 5800);
    return () => clearInterval(t);
  }, [total]);
  return (
    <div className="hero-slider">
      <div className="hero-slide-dots">
        {HERO_SLIDES.map((_, i) => (
          <span key={i} className={i === active ? "active" : ""} onClick={() => setActive(i)}></span>
        ))}
      </div>
      {HERO_SLIDES.map((s, i) => (
        <div key={i} className={"hero-slide " + (i === active ? "active" : "")} style={{backgroundImage: `url(${s.img})`}}>
          <div className="hero-slide-content">
            <div className="kind">{s.kind}</div>
            <h3>{s.title}</h3>
            <p>{s.desc}</p>
          </div>
        </div>
      ))}
      <div className="hero-slide-controls">
        <button onClick={() => setActive((active - 1 + total) % total)} aria-label="prev">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 13L5 8L10 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <button onClick={() => setActive((active + 1) % total)} aria-label="next">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 3L11 8L6 13" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text reveal">
            <div className="meta">
              <span className="pill">Более 10 лет опыта</span>
              <span>м. Чертановская</span>
            </div>
            <h1 className="h-display">
              Лечение боли<br/>
              в мышцах и <em>суставах</em><br/>
              позвоночника
            </h1>
            <p className="lead" style={{marginTop: 28, maxWidth: 480}}>
              Результат после 1 сеанса. Комплексный подход при лечении хронических болей — от диагностики до реабилитации. Индивидуальные протоколы лечения, врачи с многолетним опытом, современное оборудование.
            </p>
            <div className="hero-cta">
              <a href="#contacts" className="btn btn-accent">
                Записаться на приём <span className="arrow">→</span>
              </a>
              <a href="#services" className="btn btn-ghost">
                Все услуги
              </a>
            </div>
            <div className="hero-promises">
              <div className="item">
                <div className="check"></div>
                <div>
                  <div className="num">Восстановление</div>
                  <div className="lbl">движения и подвижности суставов</div>
                </div>
              </div>
              <div className="item">
                <div className="check"></div>
                <div>
                  <div className="num">Устранение боли</div>
                  <div className="lbl">безопасно и без операций</div>
                </div>
              </div>
              <div className="item">
                <div className="check"></div>
                <div>
                  <div className="num">Индивидуальный подход</div>
                  <div className="lbl">протокол под каждого пациента</div>
                </div>
              </div>
              <div className="item">
                <div className="check"></div>
                <div>
                  <div className="num">Современная клиника</div>
                  <div className="lbl">рядом с метро Чертановская</div>
                </div>
              </div>
            </div>
          </div>
          <div className="reveal" style={{transitionDelay: "120ms"}}>
            <HeroSlider />
            <div className="promo-banner">
              <div className="promo-pct">−10%</div>
              <div>
                <strong>Скидка 10% на курс процедур</strong>
                <span>Ударно-волновая, магнитотерапия и лазеротерапия (от 3 процедур). Действует до 30 апреля 2026.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroSlider });