// Alpha Z · Mark components (SVG)
// All coordinates from brand guidelines §F.
// 100x100 viewBox · 12x12 squares · 9 graphite path-body · 2 teal endpoints

// Coordinates of the 11 squares (top-left), indexed for path-order reference
const ALPHA = { x: 44, y: 8,  kind: 'ep' };       // start
const OMEGA = { x: 80, y: 80, kind: 'ep' };       // goal
// 5 squares on the optimal α→Z trajectory:
const ON_PATH = [
  { x: 44, y: 26 },  // 1
  { x: 44, y: 44 },  // 2
  { x: 62, y: 44 },  // 3
  { x: 62, y: 62 },  // 4
  { x: 62, y: 80 },  // 5
];
// 4 graphite squares NOT on the path (branches declined):
const OFF_PATH = [
  { x: 26, y: 26 },
  { x: 8,  y: 44 },
  { x: 80, y: 44 },
  { x: 44, y: 80 },
];

// Polyline through square centers (center = top-left + 6)
const PATH_D = "M 50 14 L 50 32 L 50 50 L 68 50 L 68 68 L 68 86 L 86 86";

/* ───────── Hero Mark (the one allowed animation) ───────── */
function Mark({ animate = true, drawPath = true, size = "100%", showOffPath = true }) {
  return (
    <svg className={"mark" + (animate ? " animate" : "")} viewBox="0 0 100 100"
         width={size} height={size} role="img" aria-label="Alpha Z mark — α to Z optimal path">
      {/* Off-path graphite squares (dimmed to ink-200) */}
      {showOffPath && OFF_PATH.map((s, i) => (
        <rect key={"o" + i} className="lattice" x={s.x} y={s.y} width="12" height="12" />
      ))}
      {/* Path-body graphite squares */}
      {ON_PATH.map((s, i) => (
        <rect key={"p" + i} className="lattice hot" x={s.x} y={s.y} width="12" height="12" />
      ))}
      {/* Endpoints */}
      <rect className="ep" x={ALPHA.x} y={ALPHA.y} width="12" height="12" />
      <rect className="ep" x={OMEGA.x} y={OMEGA.y} width="12" height="12" />
      {/* α→Z optimal path */}
      {drawPath && (
        <path className="path" d={PATH_D} />
      )}
    </svg>
  );
}

/* ───────── Step icons (§3) — one distinct glyph per move ─────────
   Same 100×100 viewBox, 12×12 squares, ink-200 / graphite / signal-teal.
   Each glyph encodes the *meaning* of its step, not a snapshot of the path.

     stage 1 → Formulate · α + ragged rows = an optimization program
     stage 2 → Solve     · field of candidates with ONE optimal path
     stage 3 → Explain   · column of squares + annotation lines beside each
     stage 4 → Compound  · step-pyramid building up; new capstone in teal
*/
function MarkStep({ stage }) {
  return (
    <svg className="mark-step" viewBox="0 0 100 100" aria-hidden="true">
      {stage === 1 && <StepFormulate />}
      {stage === 2 && <StepSolve />}
      {stage === 3 && <StepExplain />}
      {stage === 4 && <StepCompound />}
    </svg>
  );
}

/* 01 — Formulate: α at top-left, then four ragged rows of graphite squares
   reading like indented lines of a program (objective, variables, constraints). */
function StepFormulate() {
  const rows = [
    [26, 44, 62],          // line 1 — objective: 3 squares
    [26, 44, 62, 80],      // line 2 — variables: 4 squares
    [26, 44],              // line 3 — constraint: 2 squares
    [26, 44, 62, 80],      // line 4 — constraint: 4 squares
  ];
  const ys = [26, 44, 62, 80];
  return (
    <>
      <rect className="ep"  x={8} y={8} width="12" height="12" />
      {rows.map((xs, ri) => xs.map((x, ci) => (
        <rect key={"f" + ri + "-" + ci} className="hot"
              x={x} y={ys[ri]} width="12" height="12" />
      )))}
    </>
  );
}

/* 02 — Solve: 5×5 field of dim candidate cells; one zigzag is graphite,
   traced by a teal stroke from α to ω. "Searched the space; this is best." */
function StepSolve() {
  const COORDS = [8, 26, 44, 62, 80];
  // Chosen path through the field
  const PATH = new Set([
    "26,8", "26,26",
    "44,26", "44,44",
    "62,44", "62,62",
    "80,62",
  ]);
  const ALPHA_KEY = "8,8";
  const OMEGA_KEY = "80,80";
  // Stroke through cell centers along PATH (α → ... → ω)
  const STROKE_D =
    "M 14 14 L 32 14 L 32 32 L 50 32 L 50 50 L 68 50 L 68 68 L 86 68 L 86 86";
  return (
    <>
      {COORDS.flatMap(y => COORDS.map(x => {
        const k = x + "," + y;
        if (k === ALPHA_KEY || k === OMEGA_KEY) return null;
        const cls = PATH.has(k) ? "hot" : "dim";
        return <rect key={"s" + k} className={cls}
                     x={x} y={y} width="12" height="12" />;
      }))}
      <rect className="ep" x={8}  y={8}  width="12" height="12" />
      <rect className="ep" x={80} y={80} width="12" height="12" />
      <path className="stroke-teal" d={STROKE_D} />
    </>
  );
}

/* 03 — Explain: vertical column of squares (α → answer → ω) with a thin
   ink-200 annotation line beside each row. The answer carries its reasoning. */
function StepExplain() {
  const ys = [8, 26, 44, 62, 80];
  // Annotation line widths per row (px) — varied like real comments
  const annoLen = [44, 64, 30, 76, 50];
  return (
    <>
      {ys.map((y, i) => {
        const cls = i === 0 || i === ys.length - 1 ? "ep" : "hot";
        return <rect key={"x" + i} className={cls}
                     x={8} y={y} width="12" height="12" />;
      })}
      {ys.map((y, i) => (
        <rect key={"a" + i} className="dim"
              x={26} y={y + 4} width={annoLen[i]} height="4" />
      ))}
    </>
  );
}

/* 04 — Compound: step-pyramid of columns rising left→right; each new run
   stands on what came before. The newest capstone is teal. */
function StepCompound() {
  // (x, top-y) — column heights 1..5 from left to right
  const COLS = [
    { x: 8,  topY: 80 },
    { x: 26, topY: 62 },
    { x: 44, topY: 44 },
    { x: 62, topY: 26 },
    { x: 80, topY: 8  },
  ];
  const out = [];
  COLS.forEach((c, ci) => {
    for (let y = c.topY; y <= 80; y += 18) {
      const isCap = ci === COLS.length - 1 && y === c.topY;
      out.push(
        <rect key={"c" + ci + "-" + y}
              className={isCap ? "ep" : "hot"}
              x={c.x} y={y} width="12" height="12" />
      );
    }
  });
  return <>{out}</>;
}

/* ───────── Layer lattice (§2) — three small diagrams ───────── */
function LayerLattice({ variant }) {
  // variant: "llm" | "algorithm" | "library"
  return (
    <svg className="layer-lattice" viewBox="0 0 100 100" aria-hidden="true">
      {/* Always show all 9 graphite squares — variant decides which are lit */}
      {variant === "llm" && (
        <>
          {/* LLM frames the problem — only α + frame-square emphasised */}
          {OFF_PATH.map((s, i) => <rect key={"o" + i} className="dim" x={s.x} y={s.y} width="12" height="12" />)}
          {ON_PATH.map((s, i) => <rect key={"p" + i} className={i === 0 ? "hot" : "dim"} x={s.x} y={s.y} width="12" height="12" />)}
          <rect className="ep" x={ALPHA.x} y={ALPHA.y} width="12" height="12" />
          <rect className="dim" x={OMEGA.x} y={OMEGA.y} width="12" height="12" />
        </>
      )}
      {variant === "algorithm" && (
        <>
          {/* Algorithm solves — full path drawn */}
          {OFF_PATH.map((s, i) => <rect key={"o" + i} className="dim" x={s.x} y={s.y} width="12" height="12" />)}
          {ON_PATH.map((s, i) => <rect key={"p" + i} className="hot" x={s.x} y={s.y} width="12" height="12" />)}
          <rect className="ep" x={ALPHA.x} y={ALPHA.y} width="12" height="12" />
          <rect className="ep" x={OMEGA.x} y={OMEGA.y} width="12" height="12" />
          <path className="stroke-teal" d={PATH_D} />
        </>
      )}
      {variant === "library" && (
        <>
          {/* Library compounds — all 9 hot + Z; suggests accumulated paths */}
          {OFF_PATH.map((s, i) => <rect key={"o" + i} className="hot" x={s.x} y={s.y} width="12" height="12" />)}
          {ON_PATH.map((s, i) => <rect key={"p" + i} className="hot" x={s.x} y={s.y} width="12" height="12" />)}
          <rect className="ep" x={ALPHA.x} y={ALPHA.y} width="12" height="12" />
          <rect className="ep" x={OMEGA.x} y={OMEGA.y} width="12" height="12" />
        </>
      )}
    </svg>
  );
}

function Splash({ gone }) {
  return (
    <div className={"splash" + (gone ? " gone" : "")} aria-hidden={gone ? "true" : "false"}>
      <svg viewBox="0 0 100 100" aria-label="Loading">
        {/* Pulse order matches optimal α→Z trajectory */}
        <rect className="ep alpha" x={ALPHA.x} y={ALPHA.y} width="12" height="12" />
        <rect className="sq s1" x={44} y={26} width="12" height="12" />
        <rect className="sq s2" x={44} y={44} width="12" height="12" />
        <rect className="sq s3" x={62} y={44} width="12" height="12" />
        <rect className="sq s4" x={62} y={62} width="12" height="12" />
        <rect className="sq s5" x={62} y={80} width="12" height="12" />
        <rect className="ep omega" x={OMEGA.x} y={OMEGA.y} width="12" height="12" />
        {/* Branches declined — quietly fade */}
        <rect className="sq s6" x={26} y={26} width="12" height="12" />
        <rect className="sq s7" x={8}  y={44} width="12" height="12" />
        <rect className="sq s8" x={80} y={44} width="12" height="12" />
        <rect className="sq s0" x={44} y={80} width="12" height="12" />
      </svg>
      <div className="splash-caption">
        Loading <span className="dot"></span><span className="dot"></span><span className="dot"></span>
      </div>
    </div>
  );
}

Object.assign(window, { Mark, MarkStep, LayerLattice, Splash });