/* ================================================================
 * Chart primitives — pure inline SVG, no deps.
 * Donut, Sparkline, BeforeAfterBars, MiniBars.
 * Colors locked to the site palette: navy #1E3A5F, amber #92400E.
 * ================================================================ */

function Donut({ value, max = 100, label, sub, accent = false, size = 132 }) {
  const stroke = 12;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(1, value / max));
  const dash = c * pct;
  const color = accent ? "#92400E" : "#1E3A5F";
  return (
    <div className="flex items-center gap-4">
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
        <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="#E7E5E0" strokeWidth={stroke} />
        <circle
          cx={size / 2}
          cy={size / 2}
          r={r}
          fill="none"
          stroke={color}
          strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={`${dash} ${c - dash}`}
          transform={`rotate(-90 ${size / 2} ${size / 2})`}
        />
        <text
          x="50%"
          y="50%"
          textAnchor="middle"
          dominantBaseline="central"
          fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
          fontSize={size * 0.22}
          fill="#0A0A0A"
          fontWeight="500"
        >
          {Math.round(pct * 100)}%
        </text>
      </svg>
      {(label || sub) && (
        <div>
          {label && <div className="text-[13px] text-ink font-medium tracking-tighter2">{label}</div>}
          {sub && <div className="text-[12px] text-muted">{sub}</div>}
        </div>
      )}
    </div>
  );
}

function Sparkline({ values, height = 44, accent = false, fill = true }) {
  const w = 160;
  const h = height;
  const min = Math.min(...values);
  const max = Math.max(...values);
  const span = max - min || 1;
  const stepX = w / (values.length - 1);
  const points = values.map((v, i) => [i * stepX, h - ((v - min) / span) * (h - 6) - 3]);
  const path = points.map(([x, y], i) => (i === 0 ? `M${x} ${y}` : `L${x} ${y}`)).join(" ");
  const area = `${path} L${w} ${h} L0 ${h} Z`;
  const color = accent ? "#92400E" : "#1E3A5F";
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" aria-hidden="true">
      {fill && <path d={area} fill={color} fillOpacity="0.08" />}
      <path d={path} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
      <circle cx={points[points.length - 1][0]} cy={points[points.length - 1][1]} r="2.5" fill={color} />
    </svg>
  );
}

function BeforeAfterBar({ baseline, current, max, invert = false, label }) {
  // invert=true means lower-is-better (e.g. no-show rate, response time)
  const b = Math.min(1, baseline / max);
  const c = Math.min(1, current / max);
  return (
    <div>
      {label && <div className="text-[12px] text-muted mb-2">{label}</div>}
      <div className="space-y-2">
        <div className="flex items-center gap-3">
          <span className="num text-[10px] text-muted w-14 uppercase tracking-[0.14em]">Before</span>
          <div className="flex-1 h-2 bg-rule rounded-full overflow-hidden">
            <div className="h-full bg-muted/50" style={{ width: `${b * 100}%` }} />
          </div>
        </div>
        <div className="flex items-center gap-3">
          <span className="num text-[10px] text-navy w-14 uppercase tracking-[0.14em]">After</span>
          <div className="flex-1 h-2 bg-rule rounded-full overflow-hidden">
            <div
              className="h-full"
              style={{
                width: `${c * 100}%`,
                background: invert ? "#1E3A5F" : "#1E3A5F",
              }}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

function MiniBars({ values, labels, height = 56 }) {
  const max = Math.max(...values);
  return (
    <div className="flex items-end gap-1.5 h-[56px]">
      {values.map((v, i) => (
        <div key={i} className="flex-1 flex flex-col items-center gap-1">
          <div
            className="w-full bg-navy/80 rounded-sm"
            style={{ height: `${(v / max) * (height - 16)}px` }}
            title={labels ? `${labels[i]}: ${v}` : String(v)}
          />
          {labels && (
            <span className="num text-[9px] text-muted uppercase tracking-[0.12em]">
              {labels[i]}
            </span>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { Donut, Sparkline, BeforeAfterBar, MiniBars });