const stages = [
  { tag: "01", title: "Catalog", body: "milestones.ts holds title, year, bridge copy, and math." },
  { tag: "02", title: "Timeline", body: "Each node is a button. Dashed edges carry the why-the-next-step text." },
  { tag: "03", title: "Inspect", body: "Click opens a looping architecture diagram, bottleneck, and formula." },
  { tag: "04", title: "Block probe", body: "Schematic cells select an inspect chip so a layer maps to one explanation." },
];

const path = [
  "patches",
  "ViT",
  "projector",
  "LLM tokens",
  "SDPA",
  "logits",
];

export function EngineeringDesign() {
  return (
    <section className="mx-auto mt-14 max-w-xl rounded-md border border-cyan-300/20 bg-[#081018] p-4">
      <div className="mb-4 flex items-end justify-between gap-3 border-b border-dashed border-cyan-300/25 pb-3">
        <div>
          <p className="font-mono text-[10px] tracking-[0.28em] text-cyan-200/80 uppercase">
            Dwg 01 · explorer
          </p>
          <h2 className="mt-1 text-sm font-semibold text-slate-100">
            How this explorer is wired
          </h2>
        </div>
        <p className="font-mono text-[10px] text-slate-500">Not a model diagram</p>
      </div>

      <p className="mb-4 text-[12px] leading-relaxed text-slate-400">
        This strip is a map of the page itself: catalog → timeline → inspect
        overlay. The looping figures live in the inspect view, not here.
      </p>

      <ol className="grid gap-2 sm:grid-cols-2">
        {stages.map((stage) => (
          <li
            key={stage.tag}
            className="rounded border border-white/10 bg-black/30 px-3 py-2"
          >
            <p className="font-mono text-[10px] text-cyan-200">
              {stage.tag} {stage.title}
            </p>
            <p className="mt-1 text-[12px] leading-snug text-slate-400">
              {stage.body}
            </p>
          </li>
        ))}
      </ol>

      <div className="mt-4 overflow-x-auto border border-dashed border-white/15 px-3 py-3">
        <p className="mb-2 font-mono text-[10px] tracking-[0.2em] text-slate-500 uppercase">
          VLM signal path (top layer)
        </p>
        <div className="flex min-w-[32rem] items-center gap-1">
          {path.map((step, i) => (
            <div key={step} className="flex items-center gap-1">
              <span className="rounded-sm border border-cyan-300/35 bg-cyan-400/5 px-2 py-1 font-mono text-[10px] text-cyan-100">
                {step}
              </span>
              {i < path.length - 1 ? (
                <span className="font-mono text-[10px] text-slate-500">→</span>
              ) : null}
            </div>
          ))}
        </div>
        <p className="mt-2 font-mono text-[11px] text-slate-500">
          z = LLM([W · ViT(image); text])
        </p>
      </div>
    </section>
  );
}