// charts.jsx — four non-whiteboard data charts in the deck's anchor language.
// Light chart cards (warm-gray-100) so they read cleanly on dark or cream slides.

const C_ORANGE = "#FF2417";
const C_CORAL = "#FF736C";
const C_YELLOW = "#E2F57A";
const C_ALIEN = "#7AF58C";
const C_INK = "#1F201B";
const C_BLUE = "#404D55";
const C_G300 = "#DEDFD8";
const C_G500 = "#9B9D96";
const C_PAPER = "#F4F5EE";

const MONO = "IBM Plex Mono";
const HAND = "IBM Plex Mono";

/* ----------------------------------------------------- chart-stability-gauge */
function ChartGauge() {
  const cx = 240, cy = 222, R = 150, sw = 28;
  const pt = (v, r = R) => {
    const a = Math.PI - v * Math.PI;
    return [cx + r * Math.cos(a), cy - r * Math.sin(a)];
  };
  const band = (v1, v2, color) => {
    const [x1, y1] = pt(v1), [x2, y2] = pt(v2);
    return <path d={`M ${x1} ${y1} A ${R} ${R} 0 0 1 ${x2} ${y2}`} stroke={color} strokeWidth={sw} fill="none" strokeLinecap="butt" />;
  };
  const needleV = 0.95;
  const [nx, ny] = pt(needleV, R - 6);
  const ticks = [];
  for (let i = 0; i <= 10; i++) ticks.push(i / 10);
  return (
    <svg viewBox="0 0 480 280" style={{ background: C_PAPER, borderRadius: 8, border: "1px solid " + C_G300 }}>
      <text x="240" y="30" textAnchor="middle" fontFamily={MONO} fontSize="11" letterSpacing="0.12em" fill={C_INK}>CONSECUTIVE AI OVERVIEW SIMILARITY</text>
      {band(0, 0.33, C_CORAL)}
      {band(0.33, 0.67, C_YELLOW)}
      {band(0.67, 1, C_ALIEN)}
      {ticks.map((v, i) => {
        const [ox, oy] = pt(v, R + sw / 2 + 2);
        const [ix, iy] = pt(v, R + sw / 2 - 6);
        const [lx, ly] = pt(v, R + sw / 2 + 16);
        return (
          <g key={i}>
            <line x1={ix} y1={iy} x2={ox} y2={oy} stroke={C_INK} strokeWidth="1" opacity="0.5" />
            <text x={lx} y={ly + 3} textAnchor="middle" fontFamily={MONO} fontSize="9" fill={C_INK} opacity="0.6">{v.toFixed(1)}</text>
          </g>
        );
      })}
      {/* needle */}
      <line x1={cx} y1={cy} x2={nx} y2={ny} stroke="#fff" strokeWidth="3" strokeLinecap="round" />
      <line x1={cx} y1={cy} x2={nx} y2={ny} stroke={C_INK} strokeWidth="1" strokeLinecap="round" opacity="0.25" />
      <circle cx={cx} cy={cy} r="6" fill={C_INK} />
      <text x={nx - 4} y={ny - 14} textAnchor="end" fontFamily={HAND} fontWeight="700" fontSize="19" fill={C_INK}>0.95 cosine similarity</text>
    </svg>
  );
}

/* ------------------------------------------------------------ chart-wordcount */
function ChartWordcount() {
  const data = [
    { lbl: ["Under", "350 words"], v: 16.6 },
    { lbl: ["350–1,000", "words"], v: 36.8 },
    { lbl: ["1,000–2,000", "words"], v: 30.6 },
    { lbl: ["Over", "2,000 words"], v: 16.0 },
  ];
  const x0 = 110, y0 = 80, plotH = 220, plotW = 560;
  const max = 100;
  const yTicks = [0, 25, 50, 75, 100];
  const bw = 78, gap = (plotW - bw * 4) / 5;
  return (
    <svg viewBox="0 0 720 380" style={{ background: C_PAPER, borderRadius: 8, border: "1px solid " + C_G300 }}>
      <text x="40" y="44" fontFamily={MONO} fontSize="12" letterSpacing="0.1em" fill={C_INK}>WORD COUNT DISTRIBUTION OF PAGES CITED IN AI OVERVIEWS</text>
      {yTicks.map((t, i) => {
        const y = y0 + plotH - (t / max) * plotH;
        return (
          <g key={i}>
            <line x1={x0} y1={y} x2={x0 + plotW} y2={y} stroke={C_G300} strokeWidth="1" strokeDasharray={t === 0 ? "none" : "2 4"} />
            <text x={x0 - 12} y={y + 4} textAnchor="end" fontFamily={MONO} fontSize="10" fill={C_G500}>{t}%</text>
          </g>
        );
      })}
      {data.map((d, i) => {
        const bx = x0 + gap + i * (bw + gap);
        const bh = (d.v / max) * plotH;
        const by = y0 + plotH - bh;
        return (
          <g key={i}>
            <rect x={bx} y={y0} width={bw} height={plotH} fill={C_G300} opacity="0.4" rx="2" />
            <rect x={bx} y={by} width={bw} height={bh} fill={C_ORANGE} rx="2" />
            <text x={bx + bw / 2} y={by - 10} textAnchor="middle" fontFamily={HAND} fontWeight="700" fontSize="18" fill={C_ORANGE}>{d.v}%</text>
            {d.lbl.map((line, j) => (
              <text key={j} x={bx + bw / 2} y={y0 + plotH + 22 + j * 14} textAnchor="middle" fontFamily={MONO} fontSize="10.5" fill={C_INK}>{line}</text>
            ))}
          </g>
        );
      })}
    </svg>
  );
}

/* ------------------------------------------------------------- chart-ctr-cliff */
function ChartCtrCliff() {
  const data = [58.0, 50.8, 46.4, 38.8, 32.6, 30.5, 29.7, 28.8, 29.7, 19.4];
  const x0 = 70, y0 = 80, plotH = 220, plotW = 600;
  const max = 65;
  const bw = 38, gap = (plotW - bw * 10) / 11;
  return (
    <svg viewBox="0 0 720 380" style={{ background: C_PAPER, borderRadius: 8, border: "1px solid " + C_G300 }}>
      <text x="40" y="44" fontFamily={MONO} fontSize="12" letterSpacing="0.1em" fill={C_INK}>AI OVERVIEW IMPACT ON CTR BY POSITION</text>
      {[0, 20, 40, 60].map((t, i) => {
        const y = y0 + plotH - (t / max) * plotH;
        return <line key={i} x1={x0} y1={y} x2={x0 + plotW} y2={y} stroke={C_G300} strokeWidth="1" strokeDasharray={t === 0 ? "none" : "2 4"} />;
      })}
      {data.map((v, i) => {
        const bx = x0 + gap + i * (bw + gap);
        const bh = (v / max) * plotH;
        const by = y0 + plotH - bh;
        return (
          <g key={i}>
            <rect x={bx} y={by} width={bw} height={bh} fill={C_CORAL} rx="2" />
            <text x={bx + bw / 2} y={by - 9} textAnchor="middle" fontFamily={HAND} fontWeight="700" fontSize="16" fill={C_INK}>−{v}%</text>
            <text x={bx + bw / 2} y={y0 + plotH + 22} textAnchor="middle" fontFamily={MONO} fontSize="11" fill={C_INK}>{i + 1}</text>
          </g>
        );
      })}
      <text x={x0 + plotW / 2} y={y0 + plotH + 46} textAnchor="middle" fontFamily={MONO} fontSize="10" letterSpacing="0.1em" fill={C_G500}>SERP POSITION</text>
    </svg>
  );
}

/* -------------------------------------------------------- chart-listicle-decay */
function ChartListicleDecay() {
  const series = [
    { name: "Product", color: C_BLUE, pts: [17, 11, 10, 11, 9, 8, 8, 8, 5, 4] },
    { name: "Agency", color: C_ORANGE, pts: [15, 19, 20, 13, 7, 5, 5, 4, 5, 2] },
    { name: "Software", color: C_CORAL, pts: [11, 18, 11, 10, 12, 9, 9, 8, 7, 3] },
  ];
  const x0 = 70, y0 = 90, plotH = 210, plotW = 600;
  const max = 25;
  const xAt = (i) => x0 + (i / 9) * plotW;
  const yAt = (v) => y0 + plotH - (v / max) * plotH;
  const yTicks = [0, 5, 10, 15, 20, 25];
  return (
    <svg viewBox="0 0 720 380" style={{ background: C_PAPER, borderRadius: 8, border: "1px solid " + C_G300 }}>
      <text x="40" y="40" fontFamily={MONO} fontSize="12" letterSpacing="0.1em" fill={C_INK}>BRAND PLACEMENT RATE BY POSITION IN BEST-OF LISTS</text>
      {/* legend */}
      {series.map((s, i) => (
        <g key={i} transform={`translate(${70 + i * 130}, 62)`}>
          <circle cx="0" cy="-4" r="5" fill={s.color} />
          <text x="12" y="0" fontFamily={MONO} fontSize="11" fill={C_INK}>{s.name}</text>
        </g>
      ))}
      {yTicks.map((t, i) => {
        const y = yAt(t);
        return (
          <g key={i}>
            <line x1={x0} y1={y} x2={x0 + plotW} y2={y} stroke={C_G300} strokeWidth="1" strokeDasharray={t === 0 ? "none" : "2 4"} />
            <text x={x0 - 12} y={y + 4} textAnchor="end" fontFamily={MONO} fontSize="10" fill={C_G500}>{t}%</text>
          </g>
        );
      })}
      {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
        <text key={i} x={xAt(i)} y={y0 + plotH + 22} textAnchor="middle" fontFamily={MONO} fontSize="11" fill={C_INK}>{i + 1}</text>
      ))}
      {series.map((s, si) => (
        <g key={si}>
          <path d={s.pts.map((v, i) => `${i === 0 ? "M" : "L"} ${xAt(i)} ${yAt(v)}`).join(" ")} fill="none" stroke={s.color} strokeWidth="2.4" strokeLinejoin="round" />
          {s.pts.map((v, i) => <circle key={i} cx={xAt(i)} cy={yAt(v)} r="3" fill={s.color} />)}
        </g>
      ))}
      <text x={x0 + plotW / 2} y={y0 + plotH + 46} textAnchor="middle" fontFamily={MONO} fontSize="10" letterSpacing="0.1em" fill={C_G500}>POSITION IN LIST</text>
    </svg>
  );
}

Object.assign(window, { ChartGauge, ChartWordcount, ChartCtrCliff, ChartListicleDecay });