/* GoldYeld — Landing directions, core: themes, shared copy, helpers.
   All modern / technical / clean (north star: usd.ai). Sans + mono, no ornate serifs.
   Exports to window: GY_THEMES, GY_COPY + helper components. */

const GY_THEMES = {
  aurum:  { id: 'aurum',  name: 'Aurum',   tag: 'Dark · data-forward (usd.ai)', mode: 'dark',
    fonts: { d: "'Space Grotesk', system-ui, sans-serif", b: "'Space Grotesk', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
    c: { bg: '#0a0b0c', bg2: '#0e1012', panel: '#141618', line: '#23262a', ink: '#f1f2f3', sub: '#8b9298', faint: '#5a6066', gold: '#d6b06a', up: '#7bb38e', dot: 'rgba(255,255,255,0.045)', btnInk: '#0a0b0c' }, r: 8 },
  lumen:  { id: 'lumen',  name: 'Lumen',   tag: 'Light · clean fintech (Circle)', mode: 'light',
    fonts: { d: "'Plus Jakarta Sans', system-ui, sans-serif", b: "'Plus Jakarta Sans', system-ui, sans-serif", m: "'JetBrains Mono', monospace" },
    c: { bg: '#ffffff', bg2: '#f6f7f9', panel: '#ffffff', line: '#e8eaef', ink: '#11151c', sub: '#5a626e', faint: '#9aa0ab', gold: '#b5852f', up: '#2f8f63', dot: 'rgba(17,21,28,0.05)', btnInk: '#11151c', shadow: '0 1px 2px rgba(17,21,28,0.05), 0 8px 30px rgba(17,21,28,0.06)' }, r: 14 },
  carbon: { id: 'carbon', name: 'Carbon',  tag: 'Dark · bento, technical', mode: 'dark',
    fonts: { d: "'Schibsted Grotesk', system-ui, sans-serif", b: "'Schibsted Grotesk', system-ui, sans-serif", m: "'Space Mono', monospace" },
    c: { bg: '#0c0d10', bg2: '#101216', panel: '#15171b', line: '#24272d', ink: '#eceef1', sub: '#868d96', faint: '#565d66', gold: '#d8b25e', up: '#79b694', dot: 'rgba(255,255,255,0.04)', btnInk: '#0c0d10' }, r: 10 },
  paper:  { id: 'paper',  name: 'Paper',   tag: 'Light · editorial-technical', mode: 'light',
    fonts: { d: "'Bricolage Grotesque', system-ui, sans-serif", b: "'Hanken Grotesk', system-ui, sans-serif", m: "'IBM Plex Mono', monospace" },
    c: { bg: '#f4f2ec', bg2: '#efece3', panel: '#fbfaf5', line: '#e3ddcf', ink: '#1b1813', sub: '#6b6457', faint: '#a39b8a', gold: '#94702c', up: '#3b7d57', dot: 'rgba(27,24,19,0.05)', btnInk: '#1b1813', shadow: '0 1px 2px rgba(27,24,19,0.05)' }, r: 8 },
};

const GY_COPY = {
  eyebrow: 'PHYSICAL GOLD · SETTLED IN BATCHES',
  h1a: 'Own real gold.',
  h1b: 'Earn yield every cycle.',
  sub: 'You allocate capital; we buy physical gold in your name and put it to work. Earn yield in gold every 36 days — and keep the upside when gold rises.',
  stats: [['$418K', 'Yield distributed'], ['9.4%', 'Avg APY delivered'], ['70 kg', 'Gold secured · 2,250 oz'], ['07', 'Batches completed']],
  steps: [
    ['01', 'Allocate capital', 'Reserve your place in the next 10 kg batch — onboarded personally.'],
    ['02', 'We buy physical gold', 'Acquired in your name; your entry price locks the moment the batch starts.'],
    ['03', 'Refined & vaulted', 'Refined to 999.9 fine and secured in an allocated vault.'],
    ['04', 'Earn yield in gold', 'Yield paid in gold every 36 days — and you keep the price upside.'],
  ],
  ladder: ['Open', 'Sourcing', 'Refining', 'Vaulted', 'Yielding', 'Settled'],
  ladderAt: 3,
  nav: ['How it works', 'Batches', 'Provenance', 'Transparency'],
};

/* ---------- helpers ---------- */
function Spot({ c, F, boxed }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: F.m, fontSize: 12, color: c.sub, ...(boxed ? { border: `1px solid ${c.line}`, borderRadius: 999, padding: '6px 12px' } : {}) }}>
      <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.up, boxShadow: `0 0 0 3px ${c.up}22` }} />
      XAU/USD <span style={{ color: c.ink }}>$2,016.40</span> <span style={{ color: c.up }}>▲ 0.9%</span>
    </div>
  );
}

function Btn({ c, F, kind, children, r }) {
  if (kind === 'primary')
    return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: c.gold, color: c.btnInk, fontFamily: F.b, fontWeight: 600, fontSize: 14.5, padding: '13px 22px', borderRadius: r, letterSpacing: '0.01em', cursor: 'default' }}>{children}</span>;
  if (kind === 'dark')
    return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: c.btnInk, color: c.bg, fontFamily: F.b, fontWeight: 600, fontSize: 14.5, padding: '13px 22px', borderRadius: r, cursor: 'default' }}>{children}</span>;
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: c.ink, fontFamily: F.b, fontWeight: 600, fontSize: 14.5, padding: '13px 20px', borderRadius: r, border: `1px solid ${c.line}`, cursor: 'default' }}>{children}</span>;
}

function Ladder({ c, F, compact }) {
  const steps = GY_COPY.ladder, act = GY_COPY.ladderAt;
  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      {steps.map((s, i) => (
        <div key={s} style={{ display: 'flex', alignItems: 'center', flex: i < steps.length - 1 ? '1 1 auto' : '0 0 auto' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
            <div style={{ width: 9, height: 9, borderRadius: '50%', background: i <= act ? c.gold : 'transparent', border: `1.5px solid ${i <= act ? c.gold : c.line}` }} />
            <span style={{ fontFamily: F.m, fontSize: compact ? 9.5 : 11, letterSpacing: '0.04em', color: i === act ? c.ink : c.faint, fontWeight: i === act ? 600 : 400, whiteSpace: 'nowrap' }}>{s}</span>
          </div>
          {i < steps.length - 1 && <div style={{ flex: 1, height: 1.5, background: i < act ? c.gold : c.line, margin: '0 8px', marginBottom: 18 }} />}
        </div>
      ))}
    </div>
  );
}

/* small position-value spark card for hero (dark + light) */
function SparkCard({ c, F, r }) {
  const pts = [10, 16, 13, 22, 28, 25, 36, 42, 40, 55, 63, 76, 88];
  const W = 360, H = 120, entryX = 0.31;
  const path = pts.map((p, i) => `${(i / (pts.length - 1)) * W},${H - (p / 96) * H}`).join(' ');
  const area = `0,${H} ` + path + ` ${W},${H}`;
  return (
    <div style={{ background: c.panel, border: `1px solid ${c.line}`, borderRadius: r, padding: 22, boxShadow: c.shadow || 'none' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontFamily: F.m, fontSize: 10.5, letterSpacing: '0.08em', color: c.sub }}>YOUR POSITION · BATCH 024</div>
          <div style={{ fontFamily: F.d, fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em', color: c.ink, marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>$648,420</div>
        </div>
        <div style={{ fontFamily: F.m, fontSize: 12, color: c.up, border: `1px solid ${c.up}55`, borderRadius: 999, padding: '4px 10px' }}>+12.4%</div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" style={{ width: '100%', height: 120, marginTop: 16, display: 'block', overflow: 'visible' }}>
        <polygon points={area} fill={c.gold} opacity="0.08" />
        <line x1={W * entryX} y1="0" x2={W * entryX} y2={H} stroke={c.line} strokeDasharray="3 4" />
        <polyline points={path} fill="none" stroke={c.gold} strokeWidth="2" vectorEffect="non-scaling-stroke" />
        <circle cx={W * entryX} cy={H - (22 / 96) * H} r="3.5" fill={c.gold} />
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: F.m, fontSize: 10.5, color: c.sub, marginTop: 12, borderTop: `1px solid ${c.line}`, paddingTop: 12 }}>
        <span>321.51 oz held</span><span>Entry <span style={{ color: c.ink }}>$1,998</span></span><span>Yield <span style={{ color: c.gold }}>+$11,240</span></span>
      </div>
    </div>
  );
}

function SectionEyebrow({ c, F, children }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: F.m, fontSize: 11, letterSpacing: '0.12em', color: c.gold }}>
      <span style={{ width: 18, height: 1, background: c.gold }} />{children}
    </div>
  );
}

Object.assign(window, { GY_THEMES, GY_COPY, Spot, Btn, Ladder, SparkCard, SectionEyebrow });