// PillarGraphics.jsx
// Small illustrative graphics for each value pillar. CSS animates on hover
// of the parent .promise-pillar (see site-v4.css).

// 1 — Enterprise-grade governance — audit log rows ticking off
function PGAudit() {
  return (
    <svg className="pg pg--audit" viewBox="0 0 120 60" aria-hidden="true">
      {[0, 1, 2, 3].map((i) =>
      <g key={i} className="pg-audit__row" style={{ "--i": i }}>
          <rect className="pg-audit__line" x="0" y={6 + i * 14} width="86" height="3" rx="1.5" />
          <path
          className="pg-audit__chk"
          d={`M 98 ${7 + i * 14} l 4 4 l 8 -8`} />
        
        </g>
      )}
    </svg>);

}

// 2 — European compliance — neutral dots → EU flag (blue + yellow stars) on hover
function PGEU() {
  const N = 12;
  const cx = 60,cy = 30,r = 18;
  const pts = Array.from({ length: N }, (_, i) => {
    const a = i / N * Math.PI * 2 - Math.PI / 2;
    return { x: cx + Math.cos(a) * r, y: cy + Math.sin(a) * r, i };
  });
  // 5-point star polygon centered at 0,0 with outer radius rR
  const star = (rR) => {
    const out = [];
    for (let i = 0; i < 10; i++) {
      const a = i / 10 * Math.PI * 2 - Math.PI / 2;
      const k = i % 2 === 0 ? rR : rR * 0.42;
      out.push(`${(Math.cos(a) * k).toFixed(2)},${(Math.sin(a) * k).toFixed(2)}`);
    }
    return out.join(" ");
  };
  const starPts = star(2.6);
  return (
    <svg className="pg pg--eu" viewBox="0 0 120 60" aria-hidden="true">
      <rect className="pg-eu__flag" x="22" y="4" width="76" height="52" rx="2" />
      {pts.map((p) =>
      <circle
        key={`b${p.i}`}
        cx={p.x}
        cy={p.y}
        r="2"
        className="pg-eu__bubble"
        style={{ "--i": p.i }} />

      )}
      {pts.map((p) =>
      <g
        key={`s${p.i}`}
        className="pg-eu__star"
        transform={`translate(${p.x.toFixed(2)} ${p.y.toFixed(2)})`}
        style={{ "--i": p.i }}>
        
          <polygon points={starPts} />
        </g>
      )}
    </svg>);

}

// 3 — Vendor agnostic — five disconnected tool-shapes on the page that
// snap into orbit around a central Orchestrator hub on hover.
function PGVendor() {
  const cx = 60,cy = 30;
  // Distinct shape per satellite — reads as "different vendors / tools".
  // Positions chosen as a wide ellipse so the 120x60 frame feels balanced.
  const sats = [
  { x: 60, y: 8, shape: "diamond" },
  { x: 100, y: 23, shape: "triangle" },
  { x: 85, y: 48, shape: "hex" },
  { x: 35, y: 48, shape: "circle" },
  { x: 20, y: 23, shape: "pentagon" }];

  const r = 4;
  const renderShape = (s) => {
    if (s.shape === "diamond") {
      return (
        <rect
          x={s.x - r} y={s.y - r}
          width={r * 2} height={r * 2}
          transform={`rotate(45 ${s.x} ${s.y})`} />);


    }
    if (s.shape === "circle") {
      return <circle cx={s.x} cy={s.y} r={r} />;
    }
    if (s.shape === "triangle") {
      const p = `${s.x},${s.y - r * 1.1} ${s.x + r * 1.05},${s.y + r * 0.8} ${s.x - r * 1.05},${s.y + r * 0.8}`;
      return <polygon points={p} />;
    }
    const sides = s.shape === "hex" ? 6 : 5;
    const phase = s.shape === "hex" ? Math.PI / 6 : -Math.PI / 2;
    const pts = Array.from({ length: sides }, (_, k) => {
      const a = k / sides * Math.PI * 2 + phase;
      return `${(s.x + Math.cos(a) * r).toFixed(2)},${(s.y + Math.sin(a) * r).toFixed(2)}`;
    }).join(" ");
    return <polygon points={pts} />;
  };
  return (
    <svg className="pg pg--vendor" viewBox="0 0 120 60" aria-hidden="true">
      {sats.map((s, i) =>
      <line
        key={`l${i}`}
        className="pg-vendor__spoke"
        x1={cx} y1={cy} x2={s.x} y2={s.y}
        style={{ "--i": i }} />

      )}
      {sats.map((s, i) =>
      <g key={`s${i}`} className="pg-vendor__shape" style={{ "--i": i }}>
          {renderShape(s)}
        </g>
      )}
      <circle className="pg-vendor__hub" cx={cx} cy={cy} r="4.5" />
      <circle className="pg-vendor__hub-core" cx={cx} cy={cy} r="1.5" />
    </svg>);

}

// 4 — No engineering required — plain-language bubble → complex algorithm
// graph. The user writes a sentence; the platform compiles a multi-layer
// execution graph (DAG) on the other side. The complexity is the point.
function PGNL() {
  // 3-layer DAG: 2 inputs → 3 mid → 2 outputs. Fully connected between
  // adjacent layers — reads as a neural-net / orchestration graph.
  const layerIn = [{ x: 85, y: 22 }, { x: 85, y: 38 }];
  const layerMid = [{ x: 97, y: 18 }, { x: 97, y: 30 }, { x: 97, y: 42 }];
  const layerOut = [{ x: 109, y: 22 }, { x: 109, y: 38 }];
  const edges = [];
  layerIn.forEach((a) => layerMid.forEach((b) => edges.push([a.x, a.y, b.x, b.y])));
  layerMid.forEach((a) => layerOut.forEach((b) => edges.push([a.x, a.y, b.x, b.y])));
  return (
    <svg className="pg pg--nl" viewBox="0 0 120 60" aria-hidden="true">
      <g className="pg-nl__bubble">
        <rect x="4" y="12" width="46" height="36" rx="4" />
        <rect className="pg-nl__txt" x="10" y="22" width="34" height="2.5" rx="1.25" style={{ "--i": 0 }} />
        <rect className="pg-nl__txt" x="10" y="29" width="26" height="2.5" rx="1.25" style={{ "--i": 1 }} />
        <rect className="pg-nl__txt" x="10" y="36" width="20" height="2.5" rx="1.25" style={{ "--i": 2 }} />
      </g>
      <path className="pg-nl__arrow" d="M56 30 L74 30 M70 26 L74 30 L70 34" />
      <g className="pg-nl__plan">
        <rect x="78" y="12" width="38" height="36" rx="4" />
        {edges.map(([x1, y1, x2, y2], i) =>
        <line
          key={`e${i}`}
          className="pg-nl__edge"
          x1={x1} y1={y1} x2={x2} y2={y2}
          style={{ "--i": i }} />

        )}
        {layerIn.map((n, i) =>
        <circle key={`i${i}`} className="pg-nl__node pg-nl__node--in"
        cx={n.x} cy={n.y} r="1.8" style={{ "--i": i }} />
        )}
        {layerMid.map((n, i) =>
        <circle key={`m${i}`} className="pg-nl__node pg-nl__node--mid"
        cx={n.x} cy={n.y} r="1.8" style={{ "--i": i + 2 }} />
        )}
        {layerOut.map((n, i) =>
        <circle key={`o${i}`} className="pg-nl__node pg-nl__node--out"
        cx={n.x} cy={n.y} r="1.8" style={{ "--i": i + 5 }} />
        )}
      </g>
    </svg>);

}

// 5 — Cost effective — two dots climb a hill. INXM (orange) plateaus at
// 9.6K tokens; the other agent runtime keeps climbing linearly.
// Counter ticks 0 → 1000 Tx on hover.
function PGCost() {
  const [n, setN] = React.useState(0);
  const ref = React.useRef(null);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const card = el.closest(".promise-pillar");
    if (!card) return;
    let raf,timer,alive = false;

    const cycle = () => {
      if (!alive) return;
      const start = performance.now();
      const DUR = 2400;
      const tick = (now) => {
        if (!alive) return;
        const p = Math.min(1, (now - start) / DUR);
        const eased = 1 - Math.pow(1 - p, 2.2);
        setN(Math.round(eased * 1000));
        if (p < 1) raf = requestAnimationFrame(tick);else
        timer = setTimeout(() => {if (alive) {setN(0);cycle();}}, 1000);
      };
      raf = requestAnimationFrame(tick);
    };
    const onEnter = () => {alive = true;cycle();};
    const onLeave = () => {
      alive = false;
      cancelAnimationFrame(raf);
      clearTimeout(timer);
      setN(0);
    };
    card.addEventListener("pointerenter", onEnter);
    card.addEventListener("pointerleave", onLeave);
    return () => {
      alive = false;
      cancelAnimationFrame(raf);
      clearTimeout(timer);
      card.removeEventListener("pointerenter", onEnter);
      card.removeEventListener("pointerleave", onLeave);
    };
  }, []);

  // Plot geometry. Other agent climbs to 804K tokens; INXM plateaus at 9.6K.
  // Ratio is ~1:84, so we use a sqrt visual scale to keep the INXM plateau
  // visible above the baseline while still reading as "barely a sliver vs the
  // other line’s full climb".
  const X0 = 12,X1 = 68;
  const Y_BASE = 52,Y_TOP = 8;
  const MAX_OTHER = 804; // K tokens
  const PLATEAU = 9.6; // K tokens
  const scaleY = (k) => Y_BASE - (Y_BASE - Y_TOP) * Math.sqrt(k / MAX_OTHER);
  const Y_PLATEAU = scaleY(PLATEAU);
  const RAMP_FRAC = 0.05; // INXM jumps to plateau within the first ~5%
  const xAt = (f) => X0 + (X1 - X0) * f;
  const t = n / 1000;

  // INXM dot — fast ramp then plateau
  const inxmX = xAt(t);
  const inxmY = t < RAMP_FRAC ?
  Y_BASE + (Y_PLATEAU - Y_BASE) * (t / RAMP_FRAC) :
  Y_PLATEAU;

  // Other dot — linear climb to 804K
  const otherX = xAt(t);
  const otherY = Y_BASE + (Y_TOP - Y_BASE) * t;

  // INXM token usage tracks the dot — ramps to plateau then sticks.
  // Others token usage scales linearly with transaction count.
  const inxmK = t < RAMP_FRAC ? PLATEAU * (t / RAMP_FRAC) : PLATEAU;
  const othersK = MAX_OTHER * t;
  const fmtK = (v) => v < 10 ? `${v.toFixed(1)}K` : `${Math.round(v).toLocaleString()}K`;

  // Trails drawn behind each dot (path grows with t).
  const inxmTrail = t < RAMP_FRAC ?
  `M ${X0} ${Y_BASE} L ${inxmX} ${inxmY}` :
  `M ${X0} ${Y_BASE} L ${xAt(RAMP_FRAC)} ${Y_PLATEAU} L ${inxmX} ${inxmY}`;
  const otherTrail = `M ${X0} ${Y_BASE} L ${otherX} ${otherY}`;

  return (
    <div className="pg-cost-wrap">
      <div className="pg-cost-header">
        <span className="pg-cost-header__lbl">Token Usage</span>
        <span className="pg-cost-header__sep" aria-hidden="true" />
        <span className="pg-cost-header__count">{n.toLocaleString()}</span>
        <span className="pg-cost-header__unit">transactions</span>
      </div>
      <svg ref={ref} className="pg pg--cost" viewBox="0 0 120 60" aria-hidden="true">
        {/* No baseline — the trails alone carry the chart;
            a baseline line was visually noisy and the user asked for
            it to go. */}

        {/* trails — drawn behind each dot as it moves. */}
        <path className="pg-cost__trail pg-cost__trail--other" d={otherTrail} />
        <path className="pg-cost__trail pg-cost__trail--inxm" d={inxmTrail} />

        {/* moving value labels — stick to each bubble and tick up with t. */}
        <text className="pg-cost__val pg-cost__val--inxm"
          x={inxmX + 5} y={inxmY + 2}>{fmtK(inxmK)}</text>
        <text className="pg-cost__val pg-cost__val--other"
          x={otherX + 5} y={otherY + 2}>{fmtK(othersK)}</text>

        {/* dots */}
        <circle className="pg-cost__dot pg-cost__dot--other" cx={otherX} cy={otherY} r="1.8" />
        <circle className="pg-cost__dot pg-cost__dot--inxm" cx={inxmX} cy={inxmY} r="1.8" />
      </svg>
      <div className="pg-cost-legend">
        <span className="pg-cost-legend__item pg-cost-legend__item--inxm">
          <span className="pg-cost-legend__mark" aria-hidden="true" />
          <span className="pg-cost-legend__lbl">INXM</span>
        </span>
        <span className="pg-cost-legend__item pg-cost-legend__item--other">
          <span className="pg-cost-legend__mark" aria-hidden="true" />
          <span className="pg-cost-legend__lbl">Others</span>
        </span>
      </div>
    </div>);
}

// 6 — Deterministic outcomes — three runs of the same Plan. On rest the
// traces drift apart (probabilistic systems wobble run-to-run); on hover
// they snap into perfect alignment — one bold line, no drift.
function PGDet() {
  const wave = "M 8 30 C 24 14 36 14 52 30 S 78 46 96 30 L 112 30";
  return (
    <svg className="pg pg--det" viewBox="0 0 120 60" aria-hidden="true">
      {[0, 1, 2].map((i) =>
      <path
        key={i}
        className="pg-det__line"
        style={{ "--i": i }}
        d={wave} />

      )}
      <circle className="pg-det__seed" cx="8" cy="30" r="2.8" />
      <circle className="pg-det__out" cx="112" cy="30" r="2.8" />
    </svg>);

}

const PILLAR_GRAPHICS = [PGAudit, PGEU, PGVendor, PGNL, PGCost, PGDet];

window.PILLAR_GRAPHICS = PILLAR_GRAPHICS;
window.PGAudit = PGAudit;
window.PGEU = PGEU;
window.PGVendor = PGVendor;
window.PGNL = PGNL;
window.PGCost = PGCost;
window.PGDet = PGDet;