// Product preview — auto-rotating carousel with manual control.
// One large screen + progress dots + side thumbnail strip. OpenAI-style minimal.

const { useState: useStateProd, useEffect: useEffectProd, useRef: useRefProd } = React;

const ROTATE_MS = 6500;

function Product({ copy }) {
  const [idx, setIdx] = useStateProd(0);
  const [paused, setPaused] = useStateProd(false);
  const [progress, setProgress] = useStateProd(0); // 0..1
  const startRef = useRefProd(performance.now());
  const rafRef = useRefProd(null);

  // Reset timer when index changes manually
  useEffectProd(() => {
    startRef.current = performance.now();
    setProgress(0);
  }, [idx]);

  // Auto-advance loop
  useEffectProd(() => {
    if (paused) {
      cancelAnimationFrame(rafRef.current);
      return;
    }
    const tick = (now) => {
      const elapsed = now - startRef.current;
      const p = Math.min(1, elapsed / ROTATE_MS);
      setProgress(p);
      if (p >= 1) {
        startRef.current = now;
        setIdx((i) => (i + 1) % copy.tabs.length);
      }
      rafRef.current = requestAnimationFrame(tick);
    };
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [paused, copy.tabs.length]);

  const active = copy.tabs[idx];
  const go = (i) => setIdx(((i % copy.tabs.length) + copy.tabs.length) % copy.tabs.length);

  return (
    <section className="section" id="product" data-screen-label="06 Product">
      <div className="container">
        <SectionHead kicker={copy.kicker} title={copy.title} />
        <Reveal><p className="lede" style={{ marginBottom: 64 }}>{copy.sub}</p></Reveal>

        <div
          className="carousel"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
        >
          {/* Left column — text + tabs */}
          <div className="carousel__side">
            <div className="carousel__count">
              <span className="carousel__count-cur">{String(idx + 1).padStart(2, '0')}</span>
              <span className="carousel__count-sep">/</span>
              <span className="carousel__count-tot">{String(copy.tabs.length).padStart(2, '0')}</span>
            </div>

            <div className="carousel__text">
              <Reveal key={'t-' + idx}>
                <h3 className="carousel__title">{active.title}</h3>
                <p className="carousel__desc">{active.desc}</p>
                <div className="carousel__cap">{active.caption}</div>
              </Reveal>
            </div>

            <div className="carousel__tabs">
              {copy.tabs.map((t, i) => (
                <button
                  key={t.id}
                  className={'carousel__tab' + (i === idx ? ' is-active' : '')}
                  onClick={() => go(i)}
                  aria-pressed={i === idx}
                >
                  <span className="carousel__tab-dot" aria-hidden="true">
                    <span style={{ transform: `scaleX(${i === idx ? progress : i < idx ? 1 : 0})` }} />
                  </span>
                  <span className="carousel__tab-label">{t.label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* Right column — stacked screens (rotating 3D) */}
          <div className="carousel__stage">
            <div className="carousel__deck">
              {copy.tabs.map((t, i) => {
                const offset = ((i - idx) + copy.tabs.length) % copy.tabs.length;
                // depth: 0 active, 1 next behind, 2 deeper, 3 deepest (or back)
                const d = Math.min(offset, copy.tabs.length - offset); // shortest path
                const dir = offset === 0 ? 0 : (offset <= copy.tabs.length / 2 ? 1 : -1);
                return (
                  <div
                    key={t.id}
                    className={'carousel__card' + (i === idx ? ' is-active' : '')}
                    style={{
                      transform: `translate3d(${dir * d * 26}px, ${d * 14}px, ${-d * 80}px) rotateY(${dir * d * -6}deg) scale(${1 - d * 0.06})`,
                      opacity: d > 2 ? 0 : 1 - d * 0.18,
                      zIndex: 10 - d,
                      pointerEvents: i === idx ? 'auto' : 'none',
                    }}
                  >
                    <div className="carousel__chrome">
                      <span className="cd" /><span className="cd" /><span className="cd" />
                      <span className="carousel__chrome-addr">{t.caption.toLowerCase()}</span>
                    </div>
                    <img src={t.image} alt={t.caption} draggable={false} />
                  </div>
                );
              })}
            </div>

            <div className="carousel__nav">
              <button className="carousel__arrow" aria-label="previous" onClick={() => go(idx - 1)}>
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M9 2L4 7l5 5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <button className="carousel__arrow" aria-label="next" onClick={() => go(idx + 1)}>
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M5 2l5 5-5 5" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Product });