// ============= HERO =============
const { useEffect: useEffectH, useState: useStateH, useRef: useRefH } = React;

const HERO_SLIDES = [
  {
    img:   '/landing/uploads/pasted-1779823894067-0.png',
    title: 'Dashboard',
    desc:  'Ключевые метрики, воронка и лента активности в реальном времени',
  },
  {
    img:   '/landing/uploads/pasted-1779823904979-0.png',
    title: 'YouTube Leads',
    desc:  'AI генерирует 200 тем по нише и парсит каналы по фильтрам одним кликом',
  },
  {
    img:   '/landing/uploads/pasted-1779823924578-0.png',
    title: 'Верификация',
    desc:  'Прогоняем контакты через прокси-пулы и TG-чекер — только живые лиды',
  },
  {
    img:   '/landing/uploads/pasted-1779823947506-0.png',
    title: 'Рассылки',
    desc:  'Статистика, логи и прогресс каждой кампании в реальном времени',
  },
  {
    img:   '/landing/uploads/pasted-1779823995600-0.png',
    title: 'CRM Inbox',
    desc:  'Все переписки с лидами, сделки и воронка в одном пространстве',
  },
];

function HeroScreenshots() {
  const [active, setActive] = useStateH(0);
  const [paused, setPaused] = useStateH(false);
  const timerRef            = useRefH(null);

  useEffectH(() => {
    clearInterval(timerRef.current);
    if (!paused) {
      timerRef.current = setInterval(() => {
        setActive(a => (a + 1) % HERO_SLIDES.length);
      }, 4000);
    }
    return () => clearInterval(timerRef.current);
  }, [paused, active]);

  const go = (i) => {
    setActive(i);
    setPaused(true);
    setTimeout(() => setPaused(false), 6000);
  };
  const prev = () => go((active - 1 + HERO_SLIDES.length) % HERO_SLIDES.length);
  const next = () => go((active + 1) % HERO_SLIDES.length);

  return (
    <div
      className="hero-sc"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="hero-sc-glow" aria-hidden="true"></div>

      {/* macOS window */}
      <div className="hero-sc-window">
        <div className="sc-chrome">
          <div className="sc-chrome-dots">
            <span style={{ background: '#ff5f56' }}></span>
            <span style={{ background: '#ffbd2e' }}></span>
            <span style={{ background: '#27c93f' }}></span>
          </div>
          <div className="sc-chrome-url">
            <span className="sc-chrome-icon">
              <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                <circle cx="5" cy="5" r="4" stroke="currentColor" strokeWidth="1"/>
                <path d="M5 1v8M1 5h8" stroke="currentColor" strokeWidth=".8"/>
              </svg>
            </span>
            outforge.io · {HERO_SLIDES[active].title}
          </div>
          <div className="sc-chrome-actions">
            <span></span><span></span><span></span>
          </div>
        </div>

        <div className="sc-viewport">
          {HERO_SLIDES.map((s, i) => (
            <img
              key={i}
              src={s.img}
              alt={s.title}
              className={'sc-img' + (i === active ? ' is-on' : '')}
              draggable="false"
            />
          ))}
          {HERO_SLIDES.map((s, i) => (
            <div key={'cap' + i} className={'sc-caption' + (i === active ? ' is-on' : '')}>
              <div className="sc-caption-t">{s.title}</div>
              <div className="sc-caption-d">{s.desc}</div>
            </div>
          ))}

          <button className="sc-arrow sc-arrow-l" onClick={prev} aria-label="Назад">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M11 3.5L5.5 9 11 14.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
          <button className="sc-arrow sc-arrow-r" onClick={next} aria-label="Вперёд">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M7 3.5L12.5 9 7 14.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </button>
        </div>
      </div>

      {/* Dots below window */}
      <div className="hero-sc-footer">
        <div className="sc-dots">
          {HERO_SLIDES.map((_, i) => (
            <button
              key={i}
              className={'sc-dot' + (i === active ? ' is-on' : '')}
              onClick={() => go(i)}
              aria-label={'Слайд ' + (i + 1)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Hero section ───────────────────────────────────────────────────────────────
function Hero() {
  const { t, handleCta, isAuthed } = A.useApp();
  const revealRef = A.useReveal();
  const rightRef  = A.useReveal();

  return (
    <section id="hero" className="hero" data-screen-label="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy reveal" ref={revealRef}>
            <span className="eyebrow"><span className="dot"></span>{t('hero.badge')}</span>
            <h1 className="hero-title">
              {t('hero.title1')} <span className="grad-text">{t('hero.title2')}</span>
            </h1>
            <p className="hero-sub">{t('hero.sub')}</p>
            <div className="hero-cta">
              <button className="btn btn-primary btn-lg" onClick={handleCta}>
                {isAuthed ? 'Перейти в панель' : t('hero.cta')} <A.Ico.arrow />
              </button>
              <a href="#video" className="btn btn-ghost btn-lg">
                {t('hero.secondary')}
              </a>
            </div>
            <div className="hero-stats">
              <HeroStat display="2,8М+" label={t('hero.stat1')} />
              <div className="hero-stat-sep"></div>
              <HeroStat display="148+" label={t('hero.stat2')} />
              <div className="hero-stat-sep"></div>
              <HeroStat display="9,4%" label={t('hero.stat3')} />
            </div>
          </div>
          <div className="hero-dash-wrap reveal reveal-delay-2" ref={rightRef}>
            <HeroScreenshots />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroStat({ label, display }) {
  return (
    <div className="hero-stat">
      <div className="hero-stat-v">{display}</div>
      <div className="hero-stat-l">{label}</div>
    </div>
  );
}

window.Hero = Hero;