/* ============================================================
   visuals.jsx — branded SVG/HTML mockups used in hero + sections
   All exported to window so other Babel scripts can use them.
   ============================================================ */

const GOLD = "#EBCF00";
const CREAM = "#FFFAEE";
const CREAM_DIM = "rgba(255,250,238,0.62)";
const CREAM_FAINT = "rgba(255,250,238,0.28)";
const GREEN = "#1f8a5b";
const RED = "#c93b3b";

/* ---------- Logo mark: three ascending arrows + wordmark ---------- */
function TLIMark({ size = 18 }) {
  // Build three nested chevrons matching the brand mark in the SVG file
  const s = size;
  return (
    <span className="marks" aria-hidden="true">
      <svg width={s * 1.2} height={s * 1.4} viewBox="0 0 56 60" fill="none">
        {/* tallest, leftmost actually — three ascending */}
        <polygon points="9.29,27.86 0,41.79 4.64,41.79 4.83,58.55 14.12,58.55 13.93,41.79 18.58,41.79" fill={GOLD}/>
        <polygon points="27.69,13.93 18.40,27.86 23.04,27.86 23.22,58.55 32.51,58.55 32.33,27.86 36.98,27.86" fill={GOLD}/>
        <polygon points="46.18,0 36.89,13.93 41.53,13.93 41.71,58.55 51.00,58.55 50.82,13.93 55.47,13.93" fill={GOLD}/>
      </svg>
    </span>
  );
}

/* ---------- $SPOT Candlestick chart with EW labels ---------- */
function ChartSPOT() {
  // 26 weekly candles building a 5-wave Elliott impulse
  // y axis: 100..240
  const W = 560, H = 320;
  const pad = { l: 44, r: 16, t: 18, b: 28 };
  const yMin = 95, yMax = 245;
  const y = (v) => pad.t + (yMax - v) / (yMax - yMin) * (H - pad.t - pad.b);
  const candles = [
    // [open, close, low, high]
    [128,132,124,134],[132,128,124,135],[128,118,114,130],[118,124,114,127],[124,130,121,133],
    [130,138,128,142],[138,142,134,146],[142,150,138,154],[150,148,144,156],[148,158,146,162],  // wave 1 up
    [158,150,146,160],[150,144,140,154],[144,138,134,148],[138,142,134,146],                      // wave 2 down
    [142,154,140,158],[154,168,150,172],[168,182,164,186],[182,198,178,204],[198,212,194,218],   // wave 3 up
    [212,206,200,216],[206,196,192,210],[196,188,184,202],                                       // wave 4 down
    [188,202,186,206],[202,218,198,222],[218,228,214,232],[228,236,222,240]                      // wave 5 up
  ];
  const cw = (W - pad.l - pad.r) / candles.length;
  const ticks = [120, 160, 200, 240];

  // Fib retracement levels off the wave-3 high (~218)
  const fibLevels = [
    { v: 218, label: "1.0",   tone: "faint" },
    { v: 200, label: "0.382", tone: "faint" },
    { v: 184, label: "0.618", tone: "gold"  },
    { v: 168, label: "0.786", tone: "faint" },
  ];

  // Buy zone band
  const buyTop = 200, buyBot = 184;

  // Wave numbered points (approximate index of pivot)
  const wavePoints = [
    { i: 9,  label: "1", price: 158, dir: "up" },
    { i: 13, label: "2", price: 138, dir: "down" },
    { i: 18, label: "3", price: 218, dir: "up" },
    { i: 21, label: "4", price: 188, dir: "down" },
    { i: 25, label: "5", price: 236, dir: "up" },
  ];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" preserveAspectRatio="xMidYMid meet" style={{ display: "block" }}>
      {/* y-axis grid */}
      {ticks.map(t => (
        <g key={t}>
          <line x1={pad.l} x2={W - pad.r} y1={y(t)} y2={y(t)} stroke="rgba(255,250,238,0.06)" strokeWidth="1"/>
          <text x={pad.l - 8} y={y(t) + 3} fontSize="9" fill={CREAM_FAINT} textAnchor="end" fontFamily="Acumin Pro, sans-serif">{t}</text>
        </g>
      ))}
      {/* x-axis baseline */}
      <line x1={pad.l} x2={W - pad.r} y1={H - pad.b} y2={H - pad.b} stroke="rgba(255,250,238,0.1)" strokeWidth="1"/>

      {/* buy zone band */}
      <rect
        x={pad.l + cw * 19}
        y={y(buyTop)}
        width={W - pad.r - (pad.l + cw * 19)}
        height={y(buyBot) - y(buyTop)}
        fill="rgba(235,207,0,0.10)"
        stroke="rgba(235,207,0,0.35)"
        strokeDasharray="3 3"
      />
      <text
        x={W - pad.r - 8} y={y(buyTop) + 12}
        fontSize="9" fill={GOLD} textAnchor="end"
        fontFamily="Acumin Pro, sans-serif" letterSpacing="0.16em">BUY ZONE</text>

      {/* fib level lines */}
      {fibLevels.map(f => (
        <g key={f.label}>
          <line
            x1={pad.l + cw * 14}
            x2={W - pad.r}
            y1={y(f.v)} y2={y(f.v)}
            stroke={f.tone === "gold" ? GOLD : "rgba(255,250,238,0.18)"}
            strokeDasharray="2 4"
            strokeWidth="1"
          />
          <text
            x={pad.l + cw * 14 - 6}
            y={y(f.v) + 3}
            fontSize="8.5" fill={f.tone === "gold" ? GOLD : CREAM_DIM}
            textAnchor="end"
            fontFamily="Acumin Pro, sans-serif">{f.label}</text>
        </g>
      ))}

      {/* candles */}
      {candles.map((c, i) => {
        const [o, cl, lo, hi] = c;
        const x = pad.l + cw * i + cw / 2;
        const up = cl >= o;
        const color = up ? CREAM : "rgba(255,250,238,0.55)";
        return (
          <g key={i}>
            <line x1={x} x2={x} y1={y(hi)} y2={y(lo)} stroke={color} strokeWidth="1"/>
            <rect
              x={x - cw * 0.30}
              width={cw * 0.60}
              y={Math.min(y(o), y(cl))}
              height={Math.max(2, Math.abs(y(o) - y(cl)))}
              fill={up ? "transparent" : color}
              stroke={color}
              strokeWidth="1"
            />
          </g>
        );
      })}

      {/* EW numbered points */}
      {wavePoints.map(p => {
        const cx = pad.l + cw * p.i + cw / 2;
        const cy = y(p.price);
        const off = p.dir === "up" ? -14 : 16;
        return (
          <g key={p.label}>
            <circle cx={cx} cy={cy} r="3" fill={GOLD}/>
            <text x={cx} y={cy + off}
              fontSize="10" fontWeight="700"
              fill={GOLD} textAnchor="middle"
              fontFamily="var(--font-display)">({p.label})</text>
          </g>
        );
      })}
    </svg>
  );
}

window.TLIMark = TLIMark;
window.ChartSPOT = ChartSPOT;
window.GOLD = GOLD;
window.CREAM = CREAM;
window.CREAM_DIM = CREAM_DIM;
window.CREAM_FAINT = CREAM_FAINT;
window.GREEN = GREEN;
window.RED = RED;