// waiv-nfc-scene.jsx — pinned scroll scene: the card's surface dissolves to
// reveal the copper antenna + NTAG 424 DNA chip, scrubbed by scroll progress.

function NFCScene() {
  const trackRef = React.useRef(null);
  const stickyRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const faceRef = React.useRef(null);
  const xrayRef = React.useRef(null);
  const chipRef = React.useRef(null);
  const scanRef = React.useRef(null);
  const coilRef = React.useRef(null);
  const annoChipRef = React.useRef(null);
  const annoCoilRef = React.useRef(null);
  const capRefs = React.useRef([]);
  const dotRefs = React.useRef([]);

  React.useEffect(() => {
    const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
    const smooth = (e0, e1, x) => { const t = clamp((x - e0) / (e1 - e0), 0, 1); return t * t * (3 - 2 * t); };
    let raf;
    const tick = () => {
      const track = trackRef.current, sticky = stickyRef.current;
      if (track && sticky) {
        const r = track.getBoundingClientRect();
        const vh = window.innerHeight;
        const p = clamp(-r.top / (r.height - vh), 0, 1);

        // card rotation
        const card = cardRef.current;
        const ry = -20 + p * 34;
        const rx = 9 - p * 6;
        const rz = 2 - p * 3;
        if (card) card.style.transform = `rotateX(${rx.toFixed(2)}deg) rotateY(${ry.toFixed(2)}deg) rotateZ(${rz.toFixed(2)}deg)`;

        // surface dissolve / xray rise
        if (faceRef.current) faceRef.current.style.opacity = (1 - smooth(0.1, 0.36, p)).toFixed(3);
        if (xrayRef.current) xrayRef.current.style.opacity = smooth(0.16, 0.42, p).toFixed(3);

        // antenna coil draws in ring by ring
        if (coilRef.current) {
          const rings = coilRef.current.children;
          for (let i = 0; i < rings.length; i++) {
            const o = smooth(0.26 + i * 0.028, 0.40 + i * 0.028, p);
            rings[i].style.opacity = (o * (0.55 + 0.45 * (1 - i / rings.length))).toFixed(3);
          }
        }
        // chip arrives + glows
        if (chipRef.current) {
          const c = smooth(0.5, 0.66, p);
          chipRef.current.style.opacity = c.toFixed(3);
          chipRef.current.style.transform = `scale(${(0.7 + 0.3 * c).toFixed(3)})`;
        }
        if (scanRef.current) {
          const s = smooth(0.18, 0.3, p) * (1 - smooth(0.9, 1, p));
          scanRef.current.style.opacity = s.toFixed(3);
          scanRef.current.style.top = (-18 + p * 118) + '%';
        }
        // annotations
        annoCoilRef.current && annoCoilRef.current.classList.toggle('is-on', p > 0.34 && p < 0.99);
        annoChipRef.current && annoChipRef.current.classList.toggle('is-on', p > 0.56);

        // live pulse near the end
        sticky.classList.toggle('is-live', p > 0.74);

        // captions + dots (4 phases)
        const phase = p >= 0.78 ? 3 : p >= 0.54 ? 2 : p >= 0.28 ? 1 : 0;
        capRefs.current.forEach((el, i) => el && el.classList.toggle('is-on', i === phase));
        dotRefs.current.forEach((el, i) => el && el.classList.toggle('is-on', i <= phase));
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const caps = [
    <>It looks like an ordinary <em>premium card.</em></>,
    <>Beneath the finish — a <em>full-card copper antenna.</em></>,
    <>At its heart, an <em>NTAG 424 DNA</em> secure chip.</>,
    <>13.56 MHz. AES-encrypted. <em>Impossible to clone.</em></>,
  ];

  return (
    <section className="nfc-track" ref={trackRef} id="inside">
      <div className="nfc-sticky" ref={stickyRef}>
        <div className="nfc-bg" aria-hidden="true">
          <div className="nfc-bg-grid" data-parallax="0.04" />
          <div className="nfc-bg-glow" data-parallax="0.06" />
        </div>

        <div className="nfc-head" data-reveal>
          <div className="wv-kicker"><span className="wv-kicker-mark" />ENGINEERED INSIDE</div>
        </div>

        <div className="nfc-stage">
          <div className="nfc-pulse" aria-hidden="true"><span /><span /><span /></div>

          <div className="nfc-card wv-card wv-card--midnightgold" ref={cardRef} style={{ transform: 'rotateX(9deg) rotateY(-20deg) rotateZ(2deg)' }}>
            <div className="wv-card-gloss" />
            <div className="wv-card-brushed" />
            <div className="wv-card-grain" />

            <div className="nfc-xray" ref={xrayRef}>
              <div className="nfc-xray-dim" />
              <div className="nfc-coil" ref={coilRef}><span /><span /><span /><span /><span /><span /><span /></div>
              <div className="nfc-trace" />
              <div className="nfc-chip" ref={chipRef}><i /><i /><i /><i /></div>
              <div className="nfc-scan" ref={scanRef} />
            </div>

            <div className="nfc-face" ref={faceRef}>
              <img className="wv-card-logo" src={(window.__resources&&window.__resources.logoYellow)||"assets/waiv-yellow.png"} alt="waiv" />
              <div className="wv-card-nfc" aria-hidden="true"><span /><span /><span /><span /></div>
              <div className="wv-card-meta"><span>MIDNIGHT GOLD</span><span className="wv-card-dot" /><span>NFC · ∞</span></div>
            </div>
          </div>

          <div className="nfc-anno nfc-anno-coil" ref={annoCoilRef}><span className="nfc-anno-dot" /><div><b>COPPER ANTENNA</b><br />13.56 MHz coil</div></div>
          <div className="nfc-anno nfc-anno-chip" ref={annoChipRef}><span className="nfc-anno-dot" /><div><b>NTAG 424 DNA</b><br />secure element</div></div>
        </div>

        <div className="nfc-caps">
          <div className="nfc-cap">
            {caps.map((c, i) => <p key={i} ref={el => capRefs.current[i] = el} className={i === 0 ? 'is-on' : ''}>{c}</p>)}
          </div>
          <div className="nfc-dots">
            {[0, 1, 2, 3].map(i => <i key={i} ref={el => dotRefs.current[i] = el} className={i === 0 ? 'is-on' : ''} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

window.NFCScene = NFCScene;