// waiv-card-3d.jsx — interactive metallic NFC card: cursor tilt, live finishes,
// and an x-ray "see inside" reveal exposing the chip + copper antenna coil.

const WAIV_FINISHES = {
  midnightgold: { name: 'Midnight Gold', logo: 'yellow', grad: 'linear-gradient(125deg,#050a16,#26406a 48%,#02060f)' },
  sapphire:     { name: 'Sapphire',      logo: 'yellow', grad: 'linear-gradient(125deg,#06143f,#2f6ff0 48%,#040d2b)' },
  seafrost:     { name: 'Sea Frost',     logo: 'navy',   grad: 'linear-gradient(125deg,#a7cdd6,#ffffff 48%,#9bc0cb)' },
  heritage:     { name: 'Heritage Cruiser', logo: 'light', grad: 'linear-gradient(125deg,#3a3320,#a08a4c 48%,#2a2414)' },
  mono:         { name: 'Monochrome',    logo: 'light',  grad: 'linear-gradient(125deg,#0c0c0e,#5d5f64 48%,#070708)' },
};
const WAIV_FINISH_ORDER = ['midnightgold', 'sapphire', 'seafrost', 'heritage', 'mono'];

const WaivCard3D = React.forwardRef(function WaivCard3D({ w = 600, finish = 'midnightgold', revealed = false }, tiltRef) {
  const h = w / 1.585;
  const cfg = WAIV_FINISHES[finish] || WAIV_FINISHES.midnightgold;
  return (
    <div className={`hb-stage ${revealed ? 'is-revealed' : ''}`} style={{ width: w, height: h }}>
      <div className="wv-ground-shadow" style={{ width: w * 0.82 }} />
      <div className="wv-card3d-float">
        <div className="wv-card3d-tilt" ref={tiltRef} style={{ width: w, height: h }}>
          <div className={`wv-card wv-card--${finish} ${revealed ? 'is-revealed' : ''}`} style={{ width: w, height: h }}>
            <div className="wv-card-gloss" />
            <div className="wv-card-brushed" />
            <div className="wv-card-sheen" />
            <div className="wv-card-grain" />

            {/* x-ray internals */}
            <div className="wv-nfc-x">
              <div className="wv-nfc-x-dim" />
              <div className="wv-coil"><span /><span /><span /><span /><span /><span /></div>
              <div className="wv-trace" />
              <div className="wv-chip"><i /><i /><i /><i /></div>
              <div className="wv-scanline" />
            </div>

            <div className="wv-card-face">
              <img className="wv-card-logo" src={`assets/waiv-${cfg.logo}.png`} alt="waiv" />
              <div className="wv-card-nfc" aria-hidden="true"><span /><span /><span /><span /></div>
              <div className="wv-card-meta">
                <span>{cfg.name.toUpperCase()}</span>
                <span className="wv-card-dot" />
                <span>NFC · ∞</span>
              </div>
            </div>
            <div className="wv-card-edge" />
          </div>
        </div>
      </div>

      <div className="hb-anno hb-anno-chip"><span className="hb-anno-dot" /><div><b>NTAG 424 DNA</b><br />secure NFC chip</div></div>
      <div className="hb-anno hb-anno-coil"><span className="hb-anno-dot" /><div><b>COPPER ANTENNA</b><br />13.56 MHz coil</div></div>
    </div>
  );
});

Object.assign(window, { WaivCard3D, WAIV_FINISHES, WAIV_FINISH_ORDER });