/* GoldYeld — line-art asset illustrations in the usd.ai mold.
   Flat muted-taupe fills + cream cutouts + fine gold/line strokes, sat on a fine dot field.
   Each asset is geometric (rects, trapezoids, circles, arcs, lines) — no freehand drawing.
   Exports: DotField, GoldBars, VaultGrid, ProvenanceChain, ClockDelay, CycleRing. */

const _af = () => (window.GC && window.GC.fonts) || { d: 'Georgia, serif', b: 'sans-serif', m: 'monospace' };

/* fine printed-dot texture well, like the usd.ai card illustration zones */
function DotField({ c, height = 230, minHeight, pad = 0, children }) {
  return (
    <div style={{
      position: 'relative', width: '100%', height, minHeight, flex: 1,
      backgroundColor: c.cream,
      backgroundImage: `radial-gradient(${c.dot} 1px, transparent 1.4px)`,
      backgroundSize: '7px 7px',
      backgroundPosition: 'center',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden',
    }}>
      <div style={{ width: '100%', height: '100%', padding: pad, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{children}</div>
    </div>
  );
}

/* a single 3D-ish ingot drawn from trapezoid front + top + side faces */
function ingot(cx, baseY, w, h, c, { stamp = false } = {}) {
  const tw = w * 0.84;          // top-edge width (narrower => cast-bar taper)
  const dx = w * 0.20, dy = w * 0.20; // depth offset (up-right)
  const lx = cx - tw / 2, rx = cx + tw / 2;     // top front edge
  const blx = cx - w / 2, brx = cx + w / 2;     // bottom front edge
  const ty = baseY - h;
  const front = `${lx},${ty} ${rx},${ty} ${brx},${baseY} ${blx},${baseY}`;
  const top = `${lx},${ty} ${lx + dx},${ty - dy} ${rx + dx},${ty - dy} ${rx},${ty}`;
  const side = `${rx},${ty} ${rx + dx},${ty - dy} ${brx + dx},${baseY - dy} ${brx},${baseY}`;
  return (
    <g key={`${cx}-${baseY}`}>
      <polygon points={side} fill={c.assetDark} stroke={c.assetLine} strokeWidth="1.5" strokeLinejoin="round" />
      <polygon points={top} fill={c.assetHi} stroke={c.assetLine} strokeWidth="1.5" strokeLinejoin="round" />
      <polygon points={front} fill={c.assetFill} stroke={c.assetLine} strokeWidth="1.5" strokeLinejoin="round" />
      <line x1={blx + w * 0.10} y1={baseY - h * 0.34} x2={brx - w * 0.10} y2={baseY - h * 0.34} stroke={c.assetLine} strokeWidth="1" opacity="0.5" />
      {stamp && (
        <g>
          <rect x={cx - w * 0.22} y={ty + h * 0.20} width={w * 0.44} height={h * 0.30} rx="2" fill="none" stroke={c.gold} strokeWidth="1.3" />
          <text x={cx} y={ty + h * 0.20 + h * 0.205} textAnchor="middle" fontFamily={_af().m} fontSize={w * 0.13} fill={c.gold} fontWeight="600">999.9</text>
        </g>
      )}
    </g>
  );
}

/* pyramid stack of allocated bars — the "backed by real gold" hero asset */
function GoldBars({ c }) {
  const W = 560, H = 230;
  const bw = 150, bh = 64, baseY = H - 30, gap = 14;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '92%', height: '88%', overflow: 'visible' }}>
      {/* ground shadow line */}
      <line x1={W / 2 - 215} y1={baseY + 8} x2={W / 2 + 235} y2={baseY + 8} stroke={c.assetLine} strokeWidth="1" opacity="0.35" />
      {/* bottom row: three bars */}
      {ingot(W / 2 - (bw + gap), baseY, bw, bh, c)}
      {ingot(W / 2, baseY, bw, bh, c, { stamp: true })}
      {ingot(W / 2 + (bw + gap), baseY, bw, bh, c)}
      {/* top row: two bars resting on the stack */}
      {ingot(W / 2 - (bw + gap) / 2, baseY - bh - bw * 0.20 - 6, bw, bh, c)}
      {ingot(W / 2 + (bw + gap) / 2, baseY - bh - bw * 0.20 - 6, bw, bh, c, { stamp: true })}
    </svg>
  );
}

/* allocated-reserve ledger: columns of stacked units, a few pulled gold = "your allocation".
   echoes the usd.ai server-rack motif but reads as a vault wall of bars. */
function VaultGrid({ c }) {
  const W = 360, H = 230;
  const cols = 3, rows = 9;
  const colW = 96, colGap = 18, rowH = 17, rowGap = 4;
  const startX = (W - (cols * colW + (cols - 1) * colGap)) / 2;
  const startY = (H - (rows * (rowH + rowGap))) / 2;
  const gold = { '0-2': 1, '1-4': 1, '2-1': 1 }; // a few highlighted allocated bars
  const cells = [];
  for (let col = 0; col < cols; col++) {
    for (let row = 0; row < rows; row++) {
      const x = startX + col * (colW + colGap);
      const y = startY + row * (rowH + rowGap);
      const isGold = gold[`${col}-${row}`];
      cells.push(
        <g key={`${col}-${row}`}>
          <rect x={x} y={y} width={colW} height={rowH} rx="2.5"
            fill={isGold ? c.gold : c.assetFill} opacity={isGold ? 1 : 1}
            stroke={isGold ? c.gold : c.assetLine} strokeWidth="1.2" />
          <line x1={x + colW * 0.16} y1={y + rowH / 2} x2={x + colW * 0.16} y2={y + rowH / 2} stroke={c.assetLine} strokeWidth="1" />
          <circle cx={x + 9} cy={y + rowH / 2} r="2" fill={isGold ? c.cream : c.assetLine} opacity="0.8" />
        </g>
      );
    }
  }
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '88%', height: '90%', overflow: 'visible' }}>
      {cells}
    </svg>
  );
}

/* provenance chain: source → refine → vault → offtake, connected on a rail. interactive. */
function ProvenanceChain({ c, active = -1, onHover }) {
  const W = 360, H = 230;
  const cy = 96, r = 30;
  const xs = [56, 152, 248, 312];
  // node 0 source: triangle (gold belt). 1 refine: ingot. 2 vault: cube. 3 offtake: coin.
  const labels = ['UGAASM', 'LBMA 999.9', 'VAULT', 'CHIMET'];
  const node = (i) => {
    const x = xs[i], on = i === active;
    const stroke = on ? c.gold : c.assetLine;
    const fill = on ? c.gold : c.assetFill;
    const ink = on ? c.cream : c.assetLine;
    let shape;
    if (i === 0) shape = <polygon points={`${x},${cy - 17} ${x + 17},${cy + 13} ${x - 17},${cy + 13}`} fill={fill} stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />;
    else if (i === 1) shape = <polygon points={`${x - 14},${cy - 14} ${x + 14},${cy - 14} ${x + 18},${cy + 13} ${x - 18},${cy + 13}`} fill={fill} stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />;
    else if (i === 2) {
      shape = (
        <g>
          <rect x={x - 15} y={cy - 13} width={26} height={26} rx="2" fill={fill} stroke={stroke} strokeWidth="1.6" />
          <polygon points={`${x - 15},${cy - 13} ${x - 8},${cy - 20} ${x + 18},${cy - 20} ${x + 11},${cy - 13}`} fill={c.assetHi} stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
          <polygon points={`${x + 11},${cy - 13} ${x + 18},${cy - 20} ${x + 18},${cy + 6} ${x + 11},${cy + 13}`} fill={c.assetDark} stroke={stroke} strokeWidth="1.6" strokeLinejoin="round" />
        </g>
      );
    } else shape = <g><circle cx={x} cy={cy} r="16" fill={fill} stroke={stroke} strokeWidth="1.6" /><circle cx={x} cy={cy} r="9" fill="none" stroke={ink} strokeWidth="1.2" opacity="0.7" /></g>;
    return (
      <g key={i} style={{ cursor: 'pointer' }} onMouseEnter={() => onHover && onHover(i)} onMouseLeave={() => onHover && onHover(-1)}>
        <circle cx={x} cy={cy} r={r} fill={on ? 'rgba(169,120,31,0.08)' : 'transparent'} />
        {shape}
        <text x={x} y={cy + 50} textAnchor="middle" fontFamily={_af().m} fontSize="9.5" letterSpacing="0.04em" fill={on ? c.gold : c.faint}>{labels[i]}</text>
      </g>
    );
  };
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '92%', height: '90%', overflow: 'visible' }}>
      <line x1={xs[0]} y1={cy} x2={xs[3]} y2={cy} stroke={c.assetLine} strokeWidth="1.4" strokeDasharray="2 5" opacity="0.7" />
      {xs.map((_, i) => node(i))}
    </svg>
  );
}

/* 72h delayed-by-design clock with a lock notch */
function ClockDelay({ c }) {
  const W = 360, H = 230, cx = 180, cy = 104, R = 62;
  const ticks = Array.from({ length: 12 }, (_, i) => {
    const a = (i / 12) * Math.PI * 2 - Math.PI / 2;
    const r1 = R - 8, r2 = R - 2;
    return <line key={i} x1={cx + Math.cos(a) * r1} y1={cy + Math.sin(a) * r1} x2={cx + Math.cos(a) * r2} y2={cy + Math.sin(a) * r2} stroke={c.assetLine} strokeWidth={i % 3 === 0 ? 2 : 1} opacity="0.8" />;
  });
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '88%', height: '90%', overflow: 'visible' }}>
      <circle cx={cx} cy={cy} r={R} fill={c.assetFill} stroke={c.assetLine} strokeWidth="1.6" />
      <circle cx={cx} cy={cy} r={R - 13} fill="none" stroke={c.assetLine} strokeWidth="1" opacity="0.45" />
      {ticks}
      {/* hands point to a deliberate, calm hour */}
      <line x1={cx} y1={cy} x2={cx + 24} y2={cy - 10} stroke={c.ink} strokeWidth="2.4" strokeLinecap="round" />
      <line x1={cx} y1={cy} x2={cx - 6} y2={cy - 32} stroke={c.gold} strokeWidth="2.4" strokeLinecap="round" />
      <circle cx={cx} cy={cy} r="3.4" fill={c.gold} />
      {/* +72h tag */}
      <g>
        <rect x={cx + 40} y={cy + 28} width={72} height={30} rx="15" fill={c.gold} />
        <text x={cx + 76} y={cy + 48} textAnchor="middle" fontFamily={_af().m} fontSize="14" fontWeight="600" fill={c.cream}>+72h</text>
      </g>
    </svg>
  );
}

/* yield cycle ring: segmented orbit, a gold coin, 36 in the centre */
function CycleRing({ c }) {
  const W = 360, H = 230, cx = 180, cy = 110, R = 60;
  const segs = 12;
  const arcs = Array.from({ length: segs }, (_, i) => {
    const a0 = (i / segs) * Math.PI * 2 - Math.PI / 2 + 0.10;
    const a1 = ((i + 1) / segs) * Math.PI * 2 - Math.PI / 2 - 0.10;
    const on = i < 7;
    const x0 = cx + Math.cos(a0) * R, y0 = cy + Math.sin(a0) * R;
    const x1 = cx + Math.cos(a1) * R, y1 = cy + Math.sin(a1) * R;
    return <path key={i} d={`M ${x0} ${y0} A ${R} ${R} 0 0 1 ${x1} ${y1}`} fill="none" stroke={on ? c.gold : c.assetLine} strokeWidth={on ? 5 : 4} strokeLinecap="round" opacity={on ? 1 : 0.6} />;
  });
  // coin riding the ring at the top
  const ca = -Math.PI / 2 + (7 / segs) * Math.PI * 2;
  const ccx = cx + Math.cos(ca) * R, ccy = cy + Math.sin(ca) * R;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '88%', height: '90%', overflow: 'visible' }}>
      {arcs}
      <text x={cx} y={cy - 2} textAnchor="middle" fontFamily={_af().d} fontSize="46" fontWeight="500" fill={c.ink}>36</text>
      <text x={cx} y={cy + 22} textAnchor="middle" fontFamily={_af().m} fontSize="11" letterSpacing="0.14em" fill={c.faint}>DAYS</text>
      <circle cx={ccx} cy={ccy} r="13" fill={c.gold} stroke={c.cream} strokeWidth="2" />
      <circle cx={ccx} cy={ccy} r="7" fill="none" stroke={c.cream} strokeWidth="1.4" opacity="0.8" />
    </svg>
  );
}

Object.assign(window, { DotField, GoldBars, VaultGrid, ProvenanceChain, ClockDelay, CycleRing });