// EYEQ — Film Reel + Color-Reveal "Director's Eye" sections

const { useRef: useRefR, useEffect: useEffectR, useState: useStateR } = React;

// ── Film Reel (sprocket-holed strip, auto-scrolling) ──────────────
const REEL_FRAMES = [
  { src: 'https://images.unsplash.com/photo-1485846234645-a62644f84728?w=900&q=80&auto=format&fit=crop', tc: '01:14:08', sc: 'SCN 14' },
  { src: 'https://images.unsplash.com/photo-1519741497674-611481863552?w=900&q=80&auto=format&fit=crop', tc: '02:08:21', sc: 'SCN 22' },
  { src: 'https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?w=900&q=80&auto=format&fit=crop', tc: '03:02:11', sc: 'SCN 31' },
  { src: 'https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=900&q=80&auto=format&fit=crop', tc: '04:18:02', sc: 'SCN 47' },
  { src: 'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=900&q=80&auto=format&fit=crop', tc: '05:22:18', sc: 'SCN 58' },
  { src: 'https://images.unsplash.com/photo-1542038784456-1ea8e935640e?w=900&q=80&auto=format&fit=crop', tc: '06:11:04', sc: 'SCN 64' },
  { src: 'https://images.unsplash.com/photo-1530021232320-687d8e3dba54?w=900&q=80&auto=format&fit=crop', tc: '07:04:19', sc: 'SCN 72' },
  { src: 'https://images.unsplash.com/photo-1604079628040-94301bb21b91?w=900&q=80&auto=format&fit=crop', tc: '08:00:00', sc: 'SCN 80' },
];

function FilmReel() {
  const frames = [...REEL_FRAMES, ...REEL_FRAMES]; // seamless loop
  return (
    <section className="reel-section">
      <div className="reel-head">
        <div className="section-idx" style={{ marginBottom: 0 }}>04c — 35MM · CONTACT SHEET</div>
        <div className="reel-head-meta mono">
          <span>STOCK · KODAK VISION3 500T</span>
          <span className="sep">·</span>
          <span>SCAN · 4K LOG</span>
          <span className="sep">·</span>
          <span className="reel-rec">● RUNNING</span>
        </div>
      </div>

      <div className="reel">
        <div className="reel-sprockets reel-sprockets-top" aria-hidden>
          {Array.from({ length: 36 }).map((_, i) => (
            <span key={i} className="sprocket" />
          ))}
        </div>

        <div className="reel-track">
          {frames.map((f, i) => (
            <div className="reel-frame" key={i}>
              <img src={f.src} alt="" loading="lazy" />
              <div className="reel-frame-tc mono">
                <span>{f.sc}</span>
                <span>{f.tc}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="reel-sprockets reel-sprockets-bot" aria-hidden>
          {Array.from({ length: 36 }).map((_, i) => (
            <span key={i} className="sprocket" />
          ))}
        </div>
      </div>

      <div className="reel-foot">
        <span className="mono">A001 · R002 · 24FPS · 35MM · 1.85:1</span>
        <span className="mono">EYEQ <em style={{ color: 'var(--gold)', fontStyle: 'italic', fontFamily: 'var(--serif)' }}>archive</em> — 482 reels · 14 yrs</span>
      </div>
    </section>
  );
}

// ── Color-Reveal "Director's Eye" ────────────────────────────────
const REVEAL_TILES = [
  {
    name: 'Studio · Bay 02',
    cat: 'CORPORATE',
    img: 'https://images.unsplash.com/photo-1485727749690-d091e8284ef3?w=1400&q=80&auto=format&fit=crop',
  },
  {
    name: 'Vows · Last Light',
    cat: 'WEDDING',
    img: 'https://images.unsplash.com/photo-1532712938310-34cb3982ef74?w=1400&q=80&auto=format&fit=crop',
  },
  {
    name: 'Render · Liquid',
    cat: '3D',
    img: 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=1400&q=80&auto=format&fit=crop',
  },
];

function ColorRevealTile({ tile, i }) {
  const ref = useRefR(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', `${((e.clientX - r.left) / r.width) * 100}%`);
    el.style.setProperty('--my', `${((e.clientY - r.top) / r.height) * 100}%`);
  };
  const onEnter = (e) => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty('--r', '38%');
    onMove(e);
  };
  const onLeave = () => {
    const el = ref.current;
    if (!el) return;
    el.style.setProperty('--r', '0%');
  };
  return (
    <div
      className="reveal-tile"
      ref={ref}
      onMouseMove={onMove}
      onMouseEnter={onEnter}
      onMouseLeave={onLeave}
      onTouchStart={onEnter}
      onTouchMove={(e) => {
        const t = e.touches[0];
        onMove({ clientX: t.clientX, clientY: t.clientY });
      }}
      onTouchEnd={onLeave}
    >
      <img className="reveal-bw" src={tile.img} alt={tile.name} />
      <img className="reveal-color" src={tile.img} alt="" aria-hidden />
      <div className="reveal-meta">
        <span className="reveal-cat mono">{tile.cat}</span>
        <span className="reveal-name serif">{tile.name}</span>
      </div>
      <div className="reveal-corner mono">№ {String(i + 1).padStart(2, '0')} / 03</div>
    </div>
  );
}

function ColorReveal() {
  return (
    <section className="section reveal-section" id="directors-eye">
      <div className="section-head">
        <div>
          <div className="section-idx">04d — DIRECTOR'S EYE · HOVER TO SEE</div>
          <h2 className="section-title">
            Most of life is <em>grey.</em><br />Cinema chooses the <em>color.</em>
          </h2>
        </div>
        <div className="section-sub">
          Move your cursor across a frame to see what our colorists do — pulling living color
          from neutral negatives. On phones, tap and drag.
        </div>
      </div>

      <div className="reveal-grid">
        {REVEAL_TILES.map((t, i) => (
          <ColorRevealTile tile={t} i={i} key={i} />
        ))}
      </div>

      <div className="reveal-foot">
        <span className="mono">DAVINCI RESOLVE 19 · ACES CCT · CST</span>
        <span className="mono">COLORIST · IRIS <em style={{ fontStyle: 'italic', color: 'var(--gold)', fontFamily: 'var(--serif)' }}>Tanaka</em></span>
      </div>
    </section>
  );
}

Object.assign(window, { FilmReel, ColorReveal });