/* GoldYeld — "Lumen Gold": gold-dominant, warm-light, editorial serif.
   Layout from the centered/Stripe direction; gold pushed to dominant; usd.ai-style
   asset cards; dark video-well hero with an interactive gold-journey filmstrip.
   Exports window.LumenGoldLanding. Depends on goldyeld-assets.jsx + landing-core.jsx. */

const GC = {
  fonts: { d: "'Newsreader', Georgia, serif", b: "'Plus Jakarta Sans', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
  c: {
    bg: '#faf8f3', bg2: '#f3ecdd', panel: '#ffffff', cream: '#f4eee1',
    ink: '#1a1611', sub: '#6e6757', faint: '#a89e88',
    line: '#e8e1d1', lineSoft: '#efe9dc',
    gold: '#a9781f', goldSoft: '#c39a4e', goldHair: '#d8bd86',
    up: '#4a7d57',
    assetFill: '#d9cdb2', assetHi: '#f1e9d6', assetDark: '#c4b694', assetLine: '#a68d5c',
    dot: 'rgba(26,22,17,0.07)',
    shadow: '0 1px 2px rgba(26,22,17,0.04), 0 14px 44px rgba(26,22,17,0.07)',
    // dark hero
    dInk: '#0f0c07', dCream: '#f3ead4', dSub: '#b6a886', dLine: 'rgba(243,234,212,0.16)',
  },
  r: 14,
};
const F = GC.fonts;

/* curated font pairings — display (serif/sans) · UI sans · data mono. Switchable live. */
const PAIRINGS = [
  { id: 'editorial', name: 'Editorial', note: 'Newsreader · Jakarta', dw: 500,
    d: "'Newsreader', Georgia, serif", b: "'Plus Jakarta Sans', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
  { id: 'garamond', name: 'Haute', note: 'Cormorant · Hanken', dw: 600,
    d: "'Cormorant Garamond', Georgia, serif", b: "'Hanken Grotesk', system-ui, sans-serif", m: "'IBM Plex Mono', monospace" },
  { id: 'caslon', name: 'Caslon', note: 'Libre Caslon · Hanken', dw: 400,
    d: "'Libre Caslon Text', Georgia, serif", b: "'Hanken Grotesk', system-ui, sans-serif", m: "'IBM Plex Mono', monospace" },
  { id: 'spectral', name: 'Spectral', note: 'Spectral · Jakarta', dw: 500,
    d: "'Spectral', Georgia, serif", b: "'Plus Jakarta Sans', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
  { id: 'grotesk', name: 'Grotesk', note: 'Schibsted · Space Mono', dw: 600,
    d: "'Schibsted Grotesk', system-ui, sans-serif", b: "'Schibsted Grotesk', system-ui, sans-serif", m: "'Space Mono', monospace" },
  { id: 'lato', name: 'Lato', note: 'Lato · IBM Plex Mono', dw: 700,
    d: "'Lato', system-ui, sans-serif", b: "'Lato', system-ui, sans-serif", m: "'IBM Plex Mono', monospace" },
  { id: 'manrope', name: 'Manrope', note: 'Manrope · Space Mono', dw: 700,
    d: "'Manrope', system-ui, sans-serif", b: "'Manrope', system-ui, sans-serif", m: "'Space Mono', monospace" },
  { id: 'dmsans', name: 'DM Sans', note: 'DM Sans · DM Mono', dw: 600,
    d: "'DM Sans', system-ui, sans-serif", b: "'DM Sans', system-ui, sans-serif", m: "'DM Mono', monospace" },
  { id: 'sora', name: 'Sora', note: 'Sora · JetBrains Mono', dw: 600,
    d: "'Sora', system-ui, sans-serif", b: "'Sora', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
];

/* ---------------- shared bits ---------------- */
function GoldMark({ c, size = 20, light }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width={size * 0.92} height={size * 0.92} viewBox="0 0 24 24">
        <polygon points="3,8 21,8 19,16 5,16" fill={c.gold} />
        <polygon points="3,8 21,8 20,10 4,10" fill={light ? '#e7c889' : c.goldSoft} />
      </svg>
      <span style={{ fontFamily: F.d, fontWeight: 600, fontSize: size, letterSpacing: '-0.01em', color: light ? c.dCream : c.ink }}>GoldYeld</span>
    </div>
  );
}

function GButton({ c, kind, children, big }) {
  const pad = big ? '15px 26px' : '12px 20px';
  const fs = big ? 15.5 : 14.5;
  const base = { display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: F.b, fontWeight: 600, fontSize: fs, padding: pad, borderRadius: 999, cursor: 'pointer', transition: 'transform .15s ease, box-shadow .2s ease', whiteSpace: 'nowrap' };
  if (kind === 'gold') return <span className="gy-btn" style={{ ...base, background: c.gold, color: '#fff', boxShadow: '0 6px 18px rgba(169,120,31,0.28)' }}>{children}</span>;
  if (kind === 'ghostLight') return <span className="gy-btn" style={{ ...base, background: 'transparent', color: c.dCream, border: `1px solid ${c.dLine}` }}>{children}</span>;
  return <span className="gy-btn" style={{ ...base, background: 'transparent', color: c.ink, border: `1px solid ${c.line}` }}>{children}</span>;
}

function Eyebrow({ c, children, light }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: F.m, fontSize: 11, letterSpacing: '0.18em', color: light ? c.goldSoft : c.gold }}>
      <span style={{ width: 16, height: 1, background: 'currentColor', opacity: 0.6 }} />{children}
    </span>
  );
}

/* count-up on first scroll into view */
function useCountUp(end, { dur = 1400, decimals = 0 } = {}) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf, started = false;
    const run = () => {
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - t0) / dur);
        const e = 1 - Math.pow(1 - p, 3);
        setVal(end * e);
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    };
    const io = new IntersectionObserver((es) => {
      es.forEach((en) => { if (en.isIntersecting && !started) { started = true; run(); } });
    }, { threshold: 0.4 });
    if (ref.current) io.observe(ref.current);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [end, dur]);
  return [ref, decimals ? val.toFixed(decimals) : Math.round(val)];
}

/* ---------------- HERO: dark video well + journey filmstrip ---------------- */
const JOURNEY = [
  { k: 'Sourcing', sub: 'African Gold Belt · UGAASM', cap: 'Raw gold sourced at origin and assayed.', video: 'assets/journey-1.webm' },
  { k: 'Transport', sub: 'Secured convoy · export & compliance', cap: 'Moved under custody — details held back 72h.', video: 'assets/journey-2.webm' },
  { k: 'Refining', sub: 'LBMA · 999.9 fine', cap: 'Cast and refined to investment-grade bars.', video: 'assets/journey-3.webm' },
  { k: 'Vaulted', sub: 'Allocated & held in your name', cap: '10 kg secured, allocated to the batch.', video: 'assets/journey-4.webm' },
  { k: 'Yield', sub: 'Paid in gold every 36 days', cap: 'Each cycle distributes yield — you keep the upside.', video: 'assets/journey-5.webm' },
];

function JourneyFrame({ c, i, active }) {
  // a tiny abstract scene per stage, drawn from primitives — stands in for video footage
  const on = i === active;
  const stroke = on ? c.goldSoft : c.dLine;
  const fill = on ? 'rgba(195,154,78,0.22)' : 'rgba(243,234,212,0.05)';
  let art;
  if (i === 0) art = <><polygon points="14,34 26,16 38,34" fill={fill} stroke={stroke} strokeWidth="1.4" strokeLinejoin="round" /><polygon points="30,34 40,22 50,34" fill={fill} stroke={stroke} strokeWidth="1.4" strokeLinejoin="round" /></>;
  else if (i === 1) art = <><rect x="12" y="20" width="34" height="16" rx="2" fill={fill} stroke={stroke} strokeWidth="1.4" /><circle cx="20" cy="38" r="3.5" fill="none" stroke={stroke} strokeWidth="1.4" /><circle cx="40" cy="38" r="3.5" fill="none" stroke={stroke} strokeWidth="1.4" /></>;
  else if (i === 2) art = <><polygon points="18,34 46,34 42,22 22,22" fill={fill} stroke={stroke} strokeWidth="1.4" strokeLinejoin="round" /><line x1="24" y1="28" x2="40" y2="28" stroke={stroke} strokeWidth="1" /></>;
  else if (i === 3) art = <><rect x="16" y="18" width="32" height="20" rx="2" fill={fill} stroke={stroke} strokeWidth="1.4" /><circle cx="32" cy="28" r="5" fill="none" stroke={stroke} strokeWidth="1.4" /></>;
  else art = <><circle cx="32" cy="28" r="11" fill={fill} stroke={stroke} strokeWidth="1.4" /><circle cx="32" cy="28" r="5" fill="none" stroke={stroke} strokeWidth="1.2" /></>;
  return <svg viewBox="0 0 64 52" width="64" height="52" style={{ flexShrink: 0 }}>{art}</svg>;
}

const CYCLE_MS = 5000; // fallback only, if a clip has no readable duration

/* active-tile highlight treatments — switchable live */
const HILITES = {
  glow: { label: 'Glow' },
  fill: { label: 'Fill' },
  bar:  { label: 'Bar' },
};
function tileStyle(mode, on, c) {
  const base = {
    cursor: 'pointer', padding: '16px 14px 14px', borderRadius: 12,
    transition: 'all .3s ease', display: 'flex', flexDirection: 'column', gap: 10,
    position: 'relative', overflow: 'hidden',
    transform: on ? 'translateY(-3px)' : 'none',
    opacity: on ? 1 : 0.5,
  };
  if (mode === 'glow') return {
    ...base,
    background: 'rgba(195,154,78,0.10)',
    border: `1px solid ${on ? c.goldSoft : c.dLine}`,
    boxShadow: on ? '0 0 0 1px rgba(195,154,78,0.45), 0 10px 30px rgba(195,154,78,0.22)' : 'none',
  };
  if (mode === 'fill') return {
    ...base,
    background: on ? 'rgba(195,154,78,0.30)' : 'transparent',
    border: `1px solid ${on ? c.goldSoft : c.dLine}`,
    boxShadow: on ? 'inset 0 0 0 1px rgba(195,154,78,0.4)' : 'none',
  };
  // bar
  return {
    ...base,
    background: on ? 'rgba(243,234,212,0.07)' : 'transparent',
    border: `1px solid ${on ? 'rgba(195,154,78,0.5)' : c.dLine}`,
  };
}

function HeroVideo({ c }) {
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [progress, setProgress] = React.useState(0); // 0..1 of active clip
  const [hilite, setHilite] = React.useState(() => (typeof localStorage !== 'undefined' && localStorage.getItem('gy_hilite')) || 'fill');
  React.useEffect(() => { try { localStorage.setItem('gy_hilite', hilite); } catch (e) {} }, [hilite]);
  const vidRefs = React.useRef([]);
  const activeRef = React.useRef(0);
  activeRef.current = active;

  // preload all clips quietly; only the active one actually plays
  React.useEffect(() => {
    vidRefs.current.forEach((v, i) => {
      if (!v) return;
      v.muted = true;
      if (i !== 0) { try { v.pause(); } catch (e) {} }
    });
  }, []);

  // drive: when active changes, restart that clip from 0 and play; pause the rest
  React.useEffect(() => {
    setProgress(0);
    vidRefs.current.forEach((v, i) => {
      if (!v) return;
      if (i === active) {
        try { v.currentTime = 0; } catch (e) {}
        if (!paused) { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
      } else {
        try { v.pause(); } catch (e) {}
      }
    });
  }, [active]);

  // pause/resume active clip on hover
  React.useEffect(() => {
    const v = vidRefs.current[active];
    if (!v) return;
    if (paused) { try { v.pause(); } catch (e) {} }
    else { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  }, [paused, active]);

  // progress bar follows the ACTUAL clip playback, frame by frame
  React.useEffect(() => {
    let raf;
    const tick = () => {
      const v = vidRefs.current[activeRef.current];
      if (v && v.duration) setProgress(Math.min(1, v.currentTime / v.duration));
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const next = React.useCallback(() => setActive((a) => (a + 1) % JOURNEY.length), []);
  const st = JOURNEY[active];
  return (
    <div style={{ position: 'relative', background: c.dInk, overflow: 'hidden', borderRadius: 26, margin: '14px 14px 0' }}>
      {/* per-stage background footage — stacked & preloaded; the active clip drives timing */}
      {JOURNEY.map((s, i) => (
        <video key={i} ref={(el) => (vidRefs.current[i] = el)} muted playsInline preload="auto"
          autoPlay={i === 0}
          onEnded={() => { if (i === activeRef.current) next(); }}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, opacity: i === active ? 1 : 0, transition: 'opacity 0.7s ease' }}>
          <source src={s.video} type="video/webm" />
        </video>
      ))}
      {/* legibility overlays: darken + warm gold vignette + dot grain */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(180deg, rgba(15,12,7,0.78) 0%, rgba(15,12,7,0.62) 38%, rgba(15,12,7,0.74) 100%)' }} />
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'radial-gradient(120% 90% at 50% 18%, rgba(195,154,78,0.18), transparent 62%)' }} />

      {/* NAV */}
      <div className="lg-nav" style={{ position: 'relative', zIndex: 3, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '26px 40px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 44 }}>
          <GoldMark c={c} light />
          <div className="lg-nav-links" style={{ display: 'flex', gap: 26 }}>
            {GY_COPY.nav.map(n => <span key={n} style={{ fontFamily: F.b, fontSize: 14, color: c.dSub, fontWeight: 500, cursor: 'pointer' }}>{n}</span>)}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <div className="lg-ticker" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: F.m, fontSize: 12, color: c.dSub, border: `1px solid ${c.dLine}`, borderRadius: 999, padding: '6px 12px' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.up }} />XAU/USD <span style={{ color: c.dCream }}>$2,016.40</span> <span style={{ color: c.up }}>▲0.9%</span>
          </div>
          <span className="lg-login" style={{ fontFamily: F.b, fontSize: 14, color: c.dCream, fontWeight: 600, cursor: 'pointer', whiteSpace: 'nowrap' }}>Log in</span>
          <GButton c={c} kind="gold">Request allocation</GButton>
        </div>
      </div>

      {/* HEADLINE */}
      <div className="lg-hero-head" style={{ position: 'relative', zIndex: 3, textAlign: 'center', padding: '70px 40px 30px' }}>
        <Eyebrow c={c} light>{GY_COPY.eyebrow}</Eyebrow>
        <h1 className="lg-h1" style={{ fontFamily: F.d, fontWeight: 500, fontSize: 76, lineHeight: 1.03, letterSpacing: '-0.025em', color: c.dCream, margin: '24px auto 0', maxWidth: 920 }}>
          Own real gold.<br /><span style={{ fontStyle: 'italic', color: c.goldSoft }}>Earn yield every cycle.</span>
        </h1>
        <p style={{ fontFamily: F.b, fontSize: 18, lineHeight: 1.6, color: c.dSub, maxWidth: 600, margin: '26px auto 0' }}>{GY_COPY.sub}</p>
        <div className="lg-cta" style={{ display: 'flex', gap: 14, marginTop: 34, justifyContent: 'center' }}>
          <GButton c={c} kind="gold" big>Request allocation →</GButton>
          <GButton c={c} kind="ghostLight" big>How it works</GButton>
        </div>
      </div>

      {/* JOURNEY FILMSTRIP — the video storyboard, interactive */}
      <div className="lg-journey-wrap" style={{ position: 'relative', zIndex: 3, maxWidth: 1080, margin: '46px auto 0', padding: '0 40px 56px' }}>
        <div className="lg-journey-head" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
          <span style={{ fontFamily: F.m, fontSize: 11, letterSpacing: '0.14em', color: c.dSub }}>THE GOLD JOURNEY</span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ display: 'flex', gap: 4, padding: 3, borderRadius: 999, border: `1px solid ${c.dLine}`, background: 'rgba(15,12,7,0.4)' }}>
              {Object.entries(HILITES).map(([k, v]) => (
                <span key={k} onClick={(e) => { e.stopPropagation(); setHilite(k); }} style={{
                  fontFamily: F.m, fontSize: 10, letterSpacing: '0.04em', padding: '4px 10px', borderRadius: 999, cursor: 'pointer',
                  background: hilite === k ? c.goldSoft : 'transparent', color: hilite === k ? c.dInk : c.dSub, fontWeight: hilite === k ? 600 : 400,
                }}>{v.label}</span>
              ))}
            </div>
            <span style={{ fontFamily: F.m, fontSize: 11, color: c.goldSoft }}>{String(active + 1).padStart(2, '0')} / {String(JOURNEY.length).padStart(2, '0')}</span>
          </div>
        </div>
        <div className="lg-journey" style={{ display: 'grid', gridTemplateColumns: `repeat(${JOURNEY.length}, 1fr)`, gap: 10 }}>
          {JOURNEY.map((s, i) => {
            const on = i === active;
            return (
            <div key={s.k} onClick={() => setActive(i)} style={tileStyle(hilite, on, c)}>
              {hilite === 'bar' && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: on ? c.goldSoft : 'transparent' }} />}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: F.m, fontSize: 10.5, fontWeight: on ? 600 : 400, color: on ? c.goldSoft : c.dSub }}>{String(i + 1).padStart(2, '0')}</span>
                <JourneyFrame c={c} i={i} active={active} />
              </div>
              <div>
                <div style={{ fontFamily: F.d, fontSize: 19, color: on ? c.dCream : c.dSub, fontWeight: on ? 600 : 500 }}>{s.k}</div>
                <div style={{ fontFamily: F.b, fontSize: 11.5, color: on ? c.dCream : c.dSub, opacity: on ? 0.8 : 1, marginTop: 3, lineHeight: 1.4 }}>{s.sub}</div>
              </div>
              {/* progress underline — driven by the active clip's real playback */}
              <div style={{ height: 3, borderRadius: 2, background: c.dLine, overflow: 'hidden', marginTop: 2 }}>
                <div style={{ height: '100%', background: c.goldSoft, width: i < active ? '100%' : (on ? `${progress * 100}%` : '0%'), transition: 'width 0.08s linear' }} />
              </div>
            </div>
          );})}
        </div>
        <p style={{ fontFamily: F.b, fontSize: 13.5, color: c.dSub, marginTop: 18, textAlign: 'center', minHeight: 20 }}>{st.cap}</p>
      </div>
    </div>
  );
}

/* ---------------- SIGNATURE POSITION CARD + value chart ---------------- */
function ValueChart({ c }) {
  const pts = [10, 15, 13, 21, 27, 24, 35, 41, 39, 53, 61, 70, 74, 88];
  const W = 620, H = 188, ex = 0.27;
  const X = (i) => (i / (pts.length - 1)) * W;
  const Y = (p) => H - (p / 96) * H;
  const path = pts.map((p, i) => `${X(i)},${Y(p)}`).join(' ');
  const area = `0,${H} ${path} ${W},${H}`;
  // gold-price baseline (linear from entry) vs total — the split that proves "win twice"
  const base = pts.map((_, i) => 21 + (i / (pts.length - 1)) * 34);
  const basePath = base.map((p, i) => `${X(i)},${Y(p)}`).join(' ');
  const [hi, setHi] = React.useState(null);
  const svgRef = React.useRef(null);
  const move = (e) => {
    const rect = svgRef.current.getBoundingClientRect();
    const rx = (e.clientX - rect.left) / rect.width;
    setHi(Math.max(0, Math.min(pts.length - 1, Math.round(rx * (pts.length - 1)))));
  };
  const i = hi;
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ fontFamily: F.m, fontSize: 10.5, color: c.sub, letterSpacing: '0.08em', marginBottom: 12 }}>POSITION VALUE · GOLD PRICE + YIELD</div>
      <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" onMouseMove={move} onMouseLeave={() => setHi(null)}
        style={{ width: '100%', height: 188, display: 'block', overflow: 'visible', cursor: 'crosshair' }}>
        <polygon points={area} fill={c.gold} opacity="0.07" />
        <line x1={W * ex} y1="0" x2={W * ex} y2={H} stroke={c.line} strokeDasharray="3 4" />
        <polyline points={basePath} fill="none" stroke={c.faint} strokeWidth="1.5" strokeDasharray="4 4" vectorEffect="non-scaling-stroke" />
        <polyline points={path} fill="none" stroke={c.gold} strokeWidth="2.5" vectorEffect="non-scaling-stroke" strokeLinejoin="round" />
        <circle cx={W * ex} cy={Y(21)} r="3.5" fill={c.gold} />
        {i != null && <><line x1={X(i)} y1="0" x2={X(i)} y2={H} stroke={c.ink} strokeWidth="1" opacity="0.25" /><circle cx={X(i)} cy={Y(pts[i])} r="4.5" fill={c.gold} stroke="#fff" strokeWidth="2" /></>}
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: F.m, fontSize: 10.5, color: c.sub, marginTop: 10 }}>
        <span>ENTRY <span style={{ color: c.ink }}>$1,998</span> ↑</span>
        <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}><span style={{ width: 14, height: 1.5, background: c.faint, display: 'inline-block' }} />gold price</span>
        <span style={{ display: 'inline-flex', gap: 5, alignItems: 'center' }}><span style={{ width: 14, height: 2.5, background: c.gold, display: 'inline-block' }} />+ yield</span>
      </div>
      {i != null && (
        <div style={{ position: 'absolute', top: -6, left: `calc(${(i / (pts.length - 1)) * 100}% )`, transform: 'translateX(-50%)', background: c.ink, color: '#fff', borderRadius: 8, padding: '8px 11px', fontFamily: F.m, fontSize: 10.5, pointerEvents: 'none', whiteSpace: 'nowrap', boxShadow: c.shadow }}>
          <div>value <span style={{ color: c.goldSoft }}>${(620000 + pts[i] * 1500).toLocaleString('en-US')}</span></div>
          <div style={{ color: c.dSub, marginTop: 2 }}>gold ${(620000 + base[i] * 1500).toLocaleString('en-US')} · yield +${Math.round((pts[i] - base[i]) * 1500).toLocaleString('en-US')}</div>
        </div>
      )}
    </div>
  );
}

function PositionCard({ c }) {
  const kpis = [['Ounces held', '321.51 oz'], ['Entry price', '$1,998 / oz'], ['Current spot', '$2,016 / oz'], ['Yield earned', '+$11,240', true]];
  return (
    <div style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: GC.r + 4, boxShadow: c.shadow, overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 26px', borderBottom: `1px solid ${c.line}` }}>
        <div style={{ fontFamily: F.m, fontSize: 11, letterSpacing: '0.08em', color: c.sub }}>YOUR POSITION · BATCH 024</div>
        <div style={{ fontFamily: F.m, fontSize: 11, color: c.up, border: `1px solid ${c.up}55`, borderRadius: 999, padding: '4px 11px' }}>+12.4% TOTAL</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr' }}>
        <div style={{ padding: 30, borderRight: `1px solid ${c.line}` }}>
          <div style={{ fontFamily: F.b, fontSize: 13, color: c.sub }}>Current value</div>
          <div style={{ fontFamily: F.d, fontSize: 50, fontWeight: 500, letterSpacing: '-0.02em', marginTop: 6, color: c.ink }}>$648,420</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px 16px', marginTop: 28 }}>
            {kpis.map(([l, v, g]) => (
              <div key={l}><div style={{ fontFamily: F.b, fontSize: 12, color: c.sub }}>{l}</div><div style={{ fontFamily: F.m, fontSize: 15.5, color: g ? c.gold : c.ink, marginTop: 5 }}>{v}</div></div>
            ))}
          </div>
        </div>
        <div style={{ padding: '26px 30px' }}><ValueChart c={c} /></div>
      </div>
    </div>
  );
}

/* ---------------- TRACK RECORD band with count-up ---------------- */
function Stat({ c, prefix, end, suffix, decimals, label, gold, ctx }) {
  const [ref, val] = useCountUp(end, { decimals });
  return (
    <div ref={ref} className="lg-stat" style={{ padding: '36px 36px' }}>
      <div style={{ fontFamily: F.d, fontSize: 48, fontWeight: 500, letterSpacing: '-0.02em', color: gold ? c.gold : c.ink, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>
        {prefix}{Number(val).toLocaleString('en-US', { minimumFractionDigits: decimals || 0, maximumFractionDigits: decimals || 0 })}{suffix}
      </div>
      <div style={{ fontFamily: F.b, fontSize: 13.5, color: c.sub, marginTop: 12 }}>{label}</div>
      {ctx && <div style={{ fontFamily: F.m, fontSize: 11, color: c.faint, marginTop: 4 }}>{ctx}</div>}
    </div>
  );
}

function TrackRecord({ c }) {
  return (
    <div className="lg-stats" style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: GC.r + 4, boxShadow: c.shadow, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' }}>
      <Stat c={c} prefix="$" end={418} suffix="K" label="Yield distributed" gold />
      <Stat c={c} end={20} decimals={0} suffix="%" label="Target APR" ctx="paid in gold" />
      <Stat c={c} end={70} suffix=" kg" label="Gold secured" ctx="2,250 oz" />
      <Stat c={c} end={7} suffix="" prefix="0" label="Batches completed" />
    </div>
  );
}

/* ---------------- FEATURES bento (usd.ai-style assets) ---------------- */
function FeatureCard({ c, title, body, asset, big, height }) {
  return (
    <div className="gy-card" style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: GC.r + 2, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: big ? '30px 34px 18px' : '26px 28px 16px' }}>
        <h3 style={{ fontFamily: F.d, fontWeight: 500, fontSize: big ? 27 : 23, letterSpacing: '-0.01em', color: c.ink, margin: 0 }}>{title}</h3>
        <p style={{ fontFamily: F.b, fontSize: 14, lineHeight: 1.62, color: c.sub, margin: '12px 0 0', maxWidth: big ? 540 : 360 }}>{body}</p>
      </div>
      <div style={{ flex: 1, padding: '4px 16px 16px', display: 'flex' }}>
        <div style={{ width: '100%', borderRadius: GC.r - 2, overflow: 'hidden', border: `1px solid ${c.lineSoft}`, display: 'flex' }}>
          <DotField c={c} height={'100%'} minHeight={height}>{asset}</DotField>
        </div>
      </div>
    </div>
  );
}

function Features({ c }) {
  const [pHover, setPHover] = React.useState(-1);
  return (
    <div>
      <div style={{ display: 'inline-flex', alignItems: 'center', padding: '7px 16px', borderRadius: 999, border: `1px solid ${c.line}`, fontFamily: F.b, fontSize: 13, color: c.sub, fontWeight: 500 }}>Features</div>
      <h2 className="lg-h2" style={{ fontFamily: F.d, fontWeight: 500, fontSize: 46, lineHeight: 1.08, letterSpacing: '-0.02em', color: c.ink, margin: '24px 0 0', maxWidth: 760 }}>
        Real gold, put to work — with <span style={{ fontStyle: 'italic', color: c.gold }}>proof</span> at every step.
      </h2>
      <div className="lg-feat" style={{ marginTop: 44, display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 18 }}>
        <FeatureCard c={c} big height={250}
          title="Backed by real, allocated gold"
          body="Every batch is a fixed 10 kg of physical gold — refined to 999.9 fine and held in your name. Not fiat, not a token. Metal you own, settled in batches."
          asset={<GoldBars c={c} />} />
        <FeatureCard c={c} height={250}
          title="Reserves you can verify"
          body="Capital deployed, gold secured and proof of funds are public and on the record."
          asset={<VaultGrid c={c} />} />
      </div>
      <div className="lg-feat" style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18 }}>
        <FeatureCard c={c} height={200}
          title="Provenance, end to end"
          body="Sourced at origin, refined to LBMA 999.9, secured in an allocated vault, offtake through Chimet — operated by Fargo."
          asset={<ProvenanceChain c={c} active={pHover} onHover={setPHover} />} />
        <FeatureCard c={c} height={200}
          title="Delayed by design"
          body="Operational milestones reach you on a 72-hour delay, generalized. Security for you and the convoy — a feature, not a disclaimer."
          asset={<ClockDelay c={c} />} />
        <FeatureCard c={c} height={200}
          title="Yield in gold, every 36 days"
          body="Each cycle pays yield in gold — with its USD value and period return. Physical handover or USDT."
          asset={<CycleRing c={c} />} />
      </div>
    </div>
  );
}

/* ---------------- HOW IT WORKS ---------------- */
function HowItWorks({ c }) {
  return (
    <div>
      <Eyebrow c={c}>HOW IT WORKS</Eyebrow>
      <h2 className="lg-h2" style={{ fontFamily: F.d, fontWeight: 500, fontSize: 38, letterSpacing: '-0.02em', color: c.ink, margin: '18px 0 38px', maxWidth: 620, lineHeight: 1.1 }}>From capital to gold to yield, every 36 days.</h2>
      <div className="lg-steps" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
        {GY_COPY.steps.map(([n, ti, de]) => (
          <div key={n} style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: GC.r, padding: 26 }}>
            <div style={{ width: 38, height: 38, borderRadius: 999, border: `1px solid ${c.goldHair}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: F.m, fontSize: 13, color: c.gold, fontWeight: 600 }}>{n}</div>
            <div style={{ fontFamily: F.d, fontWeight: 500, fontSize: 20, marginTop: 20, color: c.ink }}>{ti}</div>
            <div style={{ fontFamily: F.b, fontSize: 13.5, lineHeight: 1.6, color: c.sub, marginTop: 10 }}>{de}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ---------------- LIVE BATCH + ladder ---------------- */
function LiveBatch({ c }) {
  return (
    <div className="lg-batch" style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: GC.r + 4, boxShadow: c.shadow, padding: '38px 44px' }}>
      <div className="lg-batch-grid" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 52, alignItems: 'center' }}>
        <div>
          <Eyebrow c={c}>LIVE BATCH</Eyebrow>
          <div className="lg-batch-head" style={{ display: 'flex', alignItems: 'baseline', gap: 14, margin: '18px 0 30px' }}>
            <span style={{ fontFamily: F.d, fontWeight: 500, fontSize: 34, letterSpacing: '-0.02em', color: c.ink, whiteSpace: 'nowrap' }}>Batch 024</span>
            <span style={{ fontFamily: F.m, fontSize: 11, color: c.gold, border: `1px solid ${c.goldHair}`, borderRadius: 999, padding: '4px 11px' }}>ACTIVE · VAULTED</span>
          </div>
          <div className="lg-ladder"><Ladder c={c} F={F} /></div>
        </div>
        <div className="lg-batch-right" style={{ display: 'flex', flexDirection: 'column', gap: 20, borderLeft: `1px solid ${c.line}`, paddingLeft: 52 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            {[['Capital deployed', '$642,000'], ['Secured', '10 kg · 321.51 oz']].map(([l, v]) => (
              <div key={l}><div style={{ fontFamily: F.b, fontSize: 12, color: c.sub }}>{l}</div><div style={{ fontFamily: F.m, fontSize: 16, marginTop: 5, color: c.ink }}>{v}</div></div>
            ))}
          </div>
          <GButton c={c} kind="gold">Join Batch 025 →</GButton>
        </div>
      </div>
    </div>
  );
}

/* ---------------- FINAL CTA + FOOTER ---------------- */
function FinalCTA({ c }) {
  return (
    <div className="lg-final" style={{ background: c.dInk, borderRadius: GC.r + 6, padding: '64px 56px', position: 'relative', overflow: 'hidden', textAlign: 'center' }}>
      <div style={{ position: 'absolute', inset: 0, backgroundImage: `radial-gradient(rgba(243,234,212,0.05) 1px, transparent 1.4px)`, backgroundSize: '22px 22px' }} />
      <div style={{ position: 'relative' }}>
        <h2 className="lg-h2" style={{ fontFamily: F.d, fontWeight: 500, fontSize: 46, letterSpacing: '-0.02em', color: c.dCream, margin: 0, lineHeight: 1.08 }}>
          Enter at a good price.<br /><span style={{ fontStyle: 'italic', color: c.goldSoft }}>Capture the upside twice.</span>
        </h2>
        <p style={{ fontFamily: F.b, fontSize: 16, color: c.dSub, maxWidth: 520, margin: '20px auto 0', lineHeight: 1.6 }}>Allocations are personal and limited per batch. Request yours for the next 10 kg cycle.</p>
        <div className="lg-cta" style={{ display: 'flex', gap: 14, marginTop: 32, justifyContent: 'center' }}>
          <GButton c={c} kind="gold" big>Request allocation →</GButton>
          <GButton c={c} kind="ghostLight" big>Talk to the team</GButton>
        </div>
      </div>
    </div>
  );
}

function Footer({ c }) {
  return (
    <div className="lg-footer" style={{ borderTop: `1px solid ${c.line}`, padding: '34px 0 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 40 }}>
      <GoldMark c={c} size={17} />
      <div style={{ fontFamily: F.m, fontSize: 10.5, color: c.faint, maxWidth: 600, textAlign: 'right', lineHeight: 1.6 }}>
        GoldYeld facilitates allocations into physical gold and is not a securities offering or investment advice. Capital is at risk; gold price and counterparty risks apply.
      </div>
    </div>
  );
}

/* ---------------- FONT SWITCHER ---------------- */
function FontSwitcher({ c, current, onPick }) {
  const [open, setOpen] = React.useState(false);
  const cur = PAIRINGS.find(p => p.id === current) || PAIRINGS[0];
  return (
    <div style={{ position: 'fixed', right: 22, bottom: 22, zIndex: 50, fontFamily: F.b }}>
      {open && (
        <div style={{ position: 'absolute', bottom: 56, right: 0, width: 252, maxHeight: '70vh', overflowY: 'auto', background: c.panel, border: `1px solid ${c.line}`, borderRadius: 16, boxShadow: c.shadow }}>
          <div style={{ padding: '13px 16px', borderBottom: `1px solid ${c.line}`, fontFamily: F.m, fontSize: 10.5, letterSpacing: '0.12em', color: c.sub, position: 'sticky', top: 0, background: c.panel }}>TYPEFACE</div>
          {PAIRINGS.map((p, idx) => {
            const on = p.id === current;
            const label = idx === 0 ? 'EDITORIAL · SERIF' : (idx === 5 ? 'FINTECH · SANS' : null);
            return (
              <React.Fragment key={p.id}>
                {label && <div style={{ padding: '10px 16px 6px', fontFamily: F.m, fontSize: 9.5, letterSpacing: '0.12em', color: c.faint, background: c.bg2 }}>{label}</div>}
                <div onClick={() => { onPick(p.id); setOpen(false); }} style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '12px 16px', cursor: 'pointer',
                  background: on ? c.bg2 : 'transparent', borderBottom: `1px solid ${c.lineSoft}`,
                }}>
                  <span style={{ fontFamily: p.d, fontSize: 27, fontWeight: p.dw, color: on ? c.gold : c.ink, width: 34, textAlign: 'center', lineHeight: 1 }}>Aa</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 600, color: c.ink }}>{p.name}</div>
                    <div style={{ fontFamily: F.m, fontSize: 10.5, color: c.faint, marginTop: 2 }}>{p.note}</div>
                  </div>
                  {on && <span style={{ width: 7, height: 7, borderRadius: '50%', background: c.gold }} />}
                </div>
              </React.Fragment>
            );
          })}
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} style={{
        display: 'inline-flex', alignItems: 'center', gap: 10, background: c.ink, color: '#fff', border: 'none',
        borderRadius: 999, padding: '12px 18px', cursor: 'pointer', boxShadow: '0 8px 24px rgba(26,22,17,0.22)', fontFamily: F.b, fontSize: 14, fontWeight: 600,
      }}>
        <span style={{ fontFamily: cur.d, fontSize: 18, fontWeight: cur.dw, color: c.goldSoft }}>Aa</span>
        {cur.name}
        <span style={{ color: c.faint, fontFamily: F.m, fontSize: 11 }}>{open ? '▾' : '▴'}</span>
      </button>
    </div>
  );
}

/* ---------------- STICKY NAV (frosted pill on scroll) ---------------- */
function StickyNav({ c }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const on = () => setShow(window.scrollY > 150);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60, display: 'flex', justifyContent: 'center', padding: '10px 14px', pointerEvents: show ? 'auto' : 'none', transition: 'transform .35s cubic-bezier(.4,0,.2,1), opacity .3s ease', transform: show ? 'translateY(0)' : 'translateY(-14px)', opacity: show ? 1 : 0 }}>
      <div style={{ width: '100%', maxWidth: 1120, display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'rgba(250,248,243,0.82)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', border: `1px solid ${c.line}`, borderRadius: 16, boxShadow: c.shadow, padding: '9px 14px 9px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          <GoldMark c={c} size={16} />
          <div className="lg-nav-links" style={{ display: 'flex', gap: 22 }}>
            {GY_COPY.nav.map(n => <span key={n} style={{ fontFamily: F.b, fontSize: 13.5, color: c.sub, fontWeight: 500, cursor: 'pointer' }}>{n}</span>)}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span className="lg-ticker" style={{ fontFamily: F.m, fontSize: 11.5, color: c.sub }}>XAU/USD <span style={{ color: c.ink }}>$2,016.40</span> <span style={{ color: c.up }}>▲0.9%</span></span>
          <GButton c={c} kind="gold">Request allocation</GButton>
        </div>
      </div>
    </div>
  );
}

/* ---------------- PAGE ---------------- */
function LumenGoldLanding() {
  const c = GC.c;
  const [fontId, setFontId] = React.useState(() => (typeof localStorage !== 'undefined' && localStorage.getItem('gy_font')) || 'manrope');
  // apply synchronously so children read the chosen pairing on this render
  const p = PAIRINGS.find(x => x.id === fontId) || PAIRINGS[0];
  GC.fonts.d = p.d; GC.fonts.b = p.b; GC.fonts.m = p.m;
  React.useEffect(() => { try { localStorage.setItem('gy_font', fontId); } catch (e) {} }, [fontId]);
  return (
    <div style={{ background: c.bg, color: c.ink, fontFamily: F.b, minHeight: '100vh' }}>
      <style>{`.gy-btn:hover{transform:translateY(-1px)} .gy-card{transition:box-shadow .25s ease, transform .25s ease} .gy-card:hover{box-shadow:${c.shadow}; transform:translateY(-2px)}
/* mobile — overrides the inline desktop styles at phone widths */
@media (max-width: 720px) {
  .lg-main { padding: 0 18px !important; }
  .lg-nav { padding: 18px 20px !important; }
  .lg-nav-links, .lg-ticker, .lg-login { display: none !important; }
  .lg-nav .gy-btn { padding: 11px 16px !important; font-size: 13px !important; }
  .lg-hero-head { padding: 46px 22px 16px !important; }
  .lg-h1 { font-size: 44px !important; }
  .lg-h2 { font-size: 31px !important; }
  .lg-cta { flex-wrap: wrap !important; }
  .lg-journey-wrap { padding: 0 18px 44px !important; }
  .lg-journey-head { flex-wrap: wrap !important; gap: 10px; }
  .lg-journey { grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: minmax(170px, 56vw) !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .lg-journey > div { scroll-snap-align: start; }
  .lg-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .lg-stat { padding: 24px 22px !important; }
  .lg-stat > div:first-child { font-size: 34px !important; }
  .lg-feat, .lg-steps, .lg-batch-grid { grid-template-columns: minmax(0,1fr) !important; }
  .lg-batch { padding: 26px 22px !important; }
  .lg-batch-grid { gap: 28px !important; }
  .lg-batch-head { flex-wrap: wrap !important; }
  .lg-batch-right { border-left: none !important; padding-left: 0 !important; border-top: 1px solid ${c.line}; padding-top: 24px; }
  .lg-ladder { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .lg-ladder > div { min-width: 440px; }
  .lg-final { padding: 44px 24px !important; }
  .lg-footer { flex-direction: column !important; gap: 16px !important; }
  .lg-footer > div:last-child { text-align: left !important; max-width: none !important; }
}`}</style>
      <StickyNav c={c} />
      <HeroVideo c={c} />
      {/* signature position card overlapping the hero base */}
      <div className="lg-main" style={{ maxWidth: 1120, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ marginTop: -56, position: 'relative', zIndex: 5 }}><PositionSimulator c={c} /></div>
        <div style={{ marginTop: 26 }}><TrackRecord c={c} /></div>
        <div style={{ marginTop: 96 }}><Features c={c} /></div>
        <div style={{ marginTop: 96 }}><HowItWorks c={c} /></div>
        <div style={{ marginTop: 80 }}><LiveBatch c={c} /></div>
        <div style={{ marginTop: 80 }}><FinalCTA c={c} /></div>
        <Footer c={c} />
      </div>
      <FontSwitcher c={c} current={fontId} onPick={setFontId} />
    </div>
  );
}

Object.assign(window, { LumenGoldLanding, GC });