// ============= PRODUCT SCREENSHOTS CAROUSEL =============

const SC_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 Screenshots() {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const timerRef            = React.useRef(null);
  const revealRef           = A.useReveal();

  React.useEffect(() => {
    clearInterval(timerRef.current);
    if (!paused) {
      timerRef.current = setInterval(() => {
        setActive(a => (a + 1) % SC_SLIDES.length);
      }, 4500);
    }
    return () => clearInterval(timerRef.current);
  }, [paused, active]);

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

  const slide = SC_SLIDES[active];

  return (
    <section id="screenshots" className="sc-section" data-screen-label="screenshots">
      <div className="wrap">
        <div className="sc-layout reveal" ref={revealRef}>

          {/* ── LEFT ── */}
          <div className="sc-left">
            <span className="eyebrow"><span className="dot"></span>Интерфейс</span>
            <h2 className="sc-heading">Всё внутри <span className="grad-text">одного окна.</span></h2>
            <p className="sc-sub">
              От парсинга до закрытой сделки — без таблиц, CRM-переключений и ручной работы.
            </p>

            <div className="sc-slide-info">
              {SC_SLIDES.map((s, i) => (
                <div key={i} className={'sc-slide-text' + (i === active ? ' is-on' : '')}>
                  <div className="sc-slide-title">{s.title}</div>
                  <div className="sc-slide-desc">{s.desc}</div>
                </div>
              ))}
            </div>

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

          {/* ── RIGHT ── */}
          <div
            className="sc-right"
            onMouseEnter={() => setPaused(true)}
            onMouseLeave={() => setPaused(false)}
          >
            <div className="sc-bg-glow" aria-hidden="true"></div>

            <div className="sc-window">
              {/* macOS chrome */}
              <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
                </div>
                <div className="sc-chrome-actions">
                  <span></span><span></span><span></span>
                </div>
              </div>

              {/* Screenshot viewport */}
              <div className="sc-viewport">
                {SC_SLIDES.map((s, i) => (
                  <img
                    key={i}
                    src={s.img}
                    alt={s.title}
                    className={'sc-img' + (i === active ? ' is-on' : '')}
                    draggable="false"
                  />
                ))}

                {/* Arrows */}
                <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>
          </div>

        </div>
      </div>
    </section>
  );
}

window.Screenshots = Screenshots;