// Projects — engineering schematic plates.
// Index: 2×2 grid of blueprint plates. Click a plate → detail view with full schematic + data.
// Schematics are geometric block diagrams (rects + lines + leader callouts) — no illustration.

const { useState, useEffect } = React;

function Projects({ initialDetail, onNavigate, fromHome }) {
  const [detail, setDetail] = useState(initialDetail || null);

  useEffect(() => { setDetail(initialDetail || null); }, [initialDetail]);

  // Render leader bar at body level so it isn't clipped by the world mask
  useEffect(() => {
    if (!fromHome) return;
    const line = document.createElement("div");
    line.setAttribute("data-anim", "leader-projects");
    const bar = document.createElement("div");
    bar.setAttribute("data-anim", "leader-projects-bar");
    document.body.appendChild(line);
    document.body.appendChild(bar);
    const t = setTimeout(() => {
      line.remove();
      bar.remove();
    }, 4200);
    return () => { clearTimeout(t); line.remove(); bar.remove(); };
  }, [fromHome]);

  const open = (id) => {
    setDetail(id);
    onNavigate({ world: "projects", detail: id });
  };
  const close = () => {
    setDetail(null);
    onNavigate({ world: "projects" });
  };

  return (
    <div className={`world-enter ${fromHome ? "entry-fresh" : ""}`} data-world="projects" style={pStyles.root}>
      {/* paper tone backdrop */}
      <div style={pStyles.paper} />
      <div style={pStyles.grid} />

      {/* header */}
      <header style={pStyles.header}>
        <div>
          <div className="mono" style={{ color: "var(--phosphor)", fontSize: 11, letterSpacing: ".22em" }}>
            // WORLD 01 — PROJECTS
          </div>
          <h1 style={pStyles.h1}>Engineering schematics</h1>
          <p style={pStyles.lede}>
            Four plates. Each one's a thing I built and shipped — or a thing currently running on a server
            somewhere. Click a plate for the detail drawing.
          </p>
        </div>
        <div style={pStyles.titleBlock}>
          <TitleBlock
            sheet={detail ? `${PROJECTS.findIndex(p=>p.id===detail)+1} / 4` : "INDEX / 4"}
            drawn="A. DEVA"
            rev="REV C"
            scale={detail ? "1 : 1" : "1 : 4"}
            title={detail ? PROJECTS.find(p=>p.id===detail).name.toUpperCase() : "PROJECTS — INDEX"}
            part={detail ? PROJECTS.find(p=>p.id===detail).part : "IDX-2026"}
          />
        </div>
      </header>

      {/* body */}
      {!detail && (
        <div style={pStyles.platesGrid}>
          {PROJECTS.map((p, i) => (
            <div key={p.id} data-anim="plate-card" style={{ "--i": i, "--from-x": `${(i % 2 === 0 ? -60 : 60)}px`, "--from-y": `${(i < 2 ? -40 : 40)}px`, "--from-r": `${(i % 2 === 0 ? -2 : 2)}deg` }}>
              <PlateCard p={p} onOpen={() => open(p.id)} />
            </div>
          ))}
        </div>
      )}

      {detail && (
        <PlateDetail
          p={PROJECTS.find(x => x.id === detail)}
          onBack={close}
        />
      )}
    </div>
  );
}

// ----- title block (drafting convention) -----------------------------------
function TitleBlock({ sheet, drawn, rev, scale, title, part }) {
  return (
    <div style={tbStyles.box}>
      <div style={tbStyles.row}>
        <TBField label="DRAWING" value={title} wide />
        <TBField label="PART NO." value={part} last />
      </div>
      <div style={{ ...tbStyles.row, borderBottom: 0 }}>
        <TBField label="DRAWN BY" value={drawn} />
        <TBField label="SHEET" value={sheet} />
        <TBField label="SCALE" value={scale} />
        <TBField label="REV" value={rev} last />
      </div>
    </div>
  );
}
function TBField({ label, value, wide, last }) {
  return (
    <div style={{ ...tbStyles.field, flex: wide ? 2 : 1, borderRight: last ? 0 : "1px solid var(--blueprint-line)" }}>
      <div className="mono" style={tbStyles.fieldLabel}>{label}</div>
      <div className="mono" style={tbStyles.fieldValue}>{value}</div>
    </div>
  );
}

// ----- plate card (index thumbnail) ----------------------------------------
function PlateCard({ p, onOpen }) {
  return (
    <button onClick={onOpen} style={pcStyles.card}>
      <div style={pcStyles.cardInner}>
        <div style={pcStyles.cardHead}>
          <span className="mono" style={{ color: "var(--blueprint-line)", fontSize: 11, letterSpacing: ".22em" }}>
            PLATE {p.plate} · {p.part}
          </span>
          <span className="mono" style={{ ...pcStyles.statusPill, color: "var(--blueprint-line)" }}>
            {p.status}
          </span>
        </div>

        <div style={pcStyles.diagram}>
          <Schematic projectId={p.id} compact />
        </div>

        <div style={pcStyles.cardFoot}>
          <div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 30, color: "#eef0f5", lineHeight: 1 }}>
              {p.name}
            </div>
            <div className="mono" style={{ fontSize: 11, color: "var(--blueprint-line)", marginTop: 6, letterSpacing: ".1em" }}>
              {p.kind.toUpperCase()}
            </div>
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--blueprint-line)", letterSpacing: ".22em", textAlign: "right" }}>
            OPEN DETAIL →
          </div>
        </div>
      </div>
    </button>
  );
}

// ----- plate detail view ---------------------------------------------------
function PlateDetail({ p, onBack }) {
  return (
    <div style={pdStyles.wrap}>
      <button onClick={onBack} className="mono" style={pdStyles.back}>
        ← BACK TO INDEX
      </button>

      <div style={pdStyles.layout}>
        {/* big schematic */}
        <div style={pdStyles.diagBox}>
          <div style={pdStyles.diagHead}>
            <span className="mono" style={{ color: "var(--blueprint-line)", letterSpacing: ".22em", fontSize: 11 }}>
              FIG. 1 — {p.name.toUpperCase()} · BLOCK DIAGRAM
            </span>
            <span className="mono" style={{ color: "var(--blueprint-line)", fontSize: 11, letterSpacing: ".22em" }}>
              SHEET 1/1 · SCALE 1:1
            </span>
          </div>
          <div style={pdStyles.diagFrame}>
            <Schematic projectId={p.id} />
          </div>
        </div>

        {/* spec stack */}
        <aside style={pdStyles.specs}>
          <div>
            <div className="mono" style={pdStyles.kicker}>ONE-LINER</div>
            <p style={pdStyles.oneliner}>{p.one}</p>
          </div>

          <SpecRow label="STATUS" value={<span style={{ color: "var(--amber)" }}>● {p.status}</span>} />
          <Section title="STACK" items={p.stack} mono />
          <Section title="WHAT'S INSIDE" items={p.inside} />
          {p.beyond?.length ? <Section title="BEYOND SINGLE-TICKER" items={p.beyond} dim /> : null}
          <Section title="DATA SOURCES" items={p.data} mono />
          <Section title="PLATFORM" items={p.platform} />
        </aside>
      </div>
    </div>
  );
}

function SpecRow({ label, value }) {
  return (
    <div style={{ display: "flex", gap: 16, alignItems: "baseline", paddingBottom: 8, borderBottom: "1px dashed var(--line)" }}>
      <div className="mono" style={pdStyles.kicker}>{label}</div>
      <div className="mono" style={{ fontSize: 13, color: "var(--fg)" }}>{value}</div>
    </div>
  );
}

function Section({ title, items, mono, dim }) {
  return (
    <div>
      <div className="mono" style={pdStyles.kicker}>{title}</div>
      <ul style={pdStyles.list}>
        {items.map((it, i) => (
          <li key={i} style={{
            ...pdStyles.li,
            fontFamily: mono ? "var(--mono)" : "var(--serif)",
            fontSize: mono ? 13 : 16,
            color: dim ? "var(--fg-2)" : "var(--fg)",
            lineHeight: mono ? 1.6 : 1.45,
          }}>
            <span style={pdStyles.tick}>—</span>{it}
          </li>
        ))}
      </ul>
    </div>
  );
}

// ===========================================================================
// SCHEMATIC — block diagrams per project (SVG of rectangles + lines + labels)
// ===========================================================================

function Schematic({ projectId, compact }) {
  const W = 1000, H = 920;
  // pick a block-diagram per project
  const draw = {
    leviathan: drawLeviathan,
    jarvis: drawJarvis,
    easyapply: drawEasyApply,
    inquire: drawInquire,
  }[projectId];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%" style={{ display: "block" }}>
      {/* engineering hatch background */}
      <defs>
        <pattern id={`hatch-${projectId}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="var(--blueprint-line)" strokeOpacity="0.06" strokeWidth="1"/>
        </pattern>
        <pattern id={`grid-${projectId}`} width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--blueprint-line)" strokeOpacity="0.08" strokeWidth="0.6"/>
        </pattern>
        <marker id={`arrow-${projectId}`} viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
          <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--blueprint-line)" />
        </marker>
        <marker id={`dot-${projectId}`} viewBox="0 0 8 8" refX="4" refY="4" markerWidth="6" markerHeight="6">
          <circle cx="4" cy="4" r="3" fill="var(--blueprint-line)" />
        </marker>
      </defs>
      <rect x="0" y="0" width={W} height={H} fill={`url(#grid-${projectId})`} />
      {draw && draw({ W, H, compact, id: projectId })}

      {/* shared dimension + title-block footer — fills extended bottom blueprint area */}
      <g stroke="var(--blueprint-line)" fill="none">
        <line x1="40" y1="610" x2="960" y2="610" strokeWidth="0.6" strokeOpacity="0.5"/>
        <line x1="60" y1="645" x2="940" y2="645" strokeWidth="0.8" strokeOpacity="0.7"/>
        <path d="M 60 639 L 60 651 M 940 639 L 940 651" strokeWidth="0.8" strokeOpacity="0.7"/>
        <path d="M 60 645 L 72 639 M 60 645 L 72 651" strokeWidth="0.8" strokeOpacity="0.7"/>
        <path d="M 940 645 L 928 639 M 940 645 L 928 651" strokeWidth="0.8" strokeOpacity="0.7"/>
      </g>
      <text x="500" y="638" textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="var(--blueprint-line)" letterSpacing="2.5">DIM · 1000 × 920  ·  TOL ±0.001  ·  ALL DIMENSIONS IN ARBITRARY UNITS</text>

      {/* vertical dimension marker on the right */}
      <g stroke="var(--blueprint-line)" strokeWidth="0.8" strokeOpacity="0.5" fill="none">
        <line x1="975" y1="60" x2="975" y2="600"/>
        <path d="M 970 60 L 980 60 M 970 600 L 980 600"/>
        <path d="M 975 60 L 969 72 M 975 60 L 981 72"/>
        <path d="M 975 600 L 969 588 M 975 600 L 981 588"/>
      </g>
      <text x="975" y="335" textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="var(--blueprint-line)" letterSpacing="2" transform="rotate(-90 975 335)">540 U</text>

      {/* title block — multi-row engineering footer */}
      <g stroke="var(--blueprint-line)" strokeWidth="0.8" strokeOpacity="0.6" fill="none">
        <rect x="40" y="680" width="920" height="200"/>
        <line x1="40" y1="730" x2="960" y2="730"/>
        <line x1="40" y1="790" x2="960" y2="790"/>
        <line x1="40" y1="840" x2="960" y2="840"/>
        <line x1="280" y1="680" x2="280" y2="880"/>
        <line x1="520" y1="680" x2="520" y2="880"/>
        <line x1="760" y1="680" x2="760" y2="880"/>
      </g>
      <g fontFamily="var(--mono)" fontSize="9" fill="var(--blueprint-line)" letterSpacing="2.2">
        {/* row 1 */}
        <text x="50" y="697">DRAWING</text>
        <text x="50" y="720" fill="#eef2f8" fontSize="13" letterSpacing="1.5">{(projectId || "").toUpperCase()}</text>
        <text x="290" y="697">PART NO.</text>
        <text x="290" y="720" fill="#eef2f8" fontSize="13" letterSpacing="1.5">{`${(projectId || "").toUpperCase()}-001`}</text>
        <text x="530" y="697">DRAWN BY</text>
        <text x="530" y="720" fill="#eef2f8" fontSize="13" letterSpacing="1.5">A. DEVA</text>
        <text x="770" y="697">DATE</text>
        <text x="770" y="720" fill="#eef2f8" fontSize="13" letterSpacing="1.5">2026 · REV C</text>

        {/* row 2 */}
        <text x="50" y="747">MATERIAL</text>
        <text x="50" y="772" fill="#eef2f8" fontSize="12" letterSpacing="1.5">SOFTWARE</text>
        <text x="290" y="747">FINISH</text>
        <text x="290" y="772" fill="#eef2f8" fontSize="12" letterSpacing="1.5">SHIPPED · IN-USE</text>
        <text x="530" y="747">SHEET</text>
        <text x="530" y="772" fill="#eef2f8" fontSize="12" letterSpacing="1.5">1 / 1</text>
        <text x="770" y="747">SCALE</text>
        <text x="770" y="772" fill="#eef2f8" fontSize="12" letterSpacing="1.5">1 : 1</text>

        {/* row 3 */}
        <text x="50" y="808">PROJECTION</text>
        <text x="50" y="831" fill="#eef2f8" fontSize="12" letterSpacing="1.5">3RD ANGLE</text>
        <text x="290" y="808">TOLERANCE</text>
        <text x="290" y="831" fill="#eef2f8" fontSize="12" letterSpacing="1.5">±0.001</text>
        <text x="530" y="808">UNITS</text>
        <text x="530" y="831" fill="#eef2f8" fontSize="12" letterSpacing="1.5">ARBITRARY</text>
        <text x="770" y="808">STATUS</text>
        <text x="770" y="831" fill="var(--amber)" fontSize="12" letterSpacing="1.5">● APPROVED</text>

        {/* row 4 — notes */}
        <text x="50" y="858">NOTES</text>
        <text x="50" y="872" fill="#eef2f8" fontSize="10" letterSpacing="1.2">UNLESS OTHERWISE SPECIFIED · NDA / CONFIDENTIAL WHERE INDICATED · ALL TRADES DESIGNED + ENGINEERED BY A. DEVA</text>
      </g>

      {/* third-angle projection symbol */}
      <g transform="translate(180 822) scale(0.65)" stroke="var(--blueprint-line)" strokeWidth="0.8" strokeOpacity="0.7" fill="none">
        <circle cx="0" cy="0" r="6"/>
        <ellipse cx="14" cy="0" rx="3" ry="6"/>
      </g>
    </svg>
  );
}

// ----- shared block primitive ----------------------------------------------
function Block({ x, y, w, h, label, sub, accent }) {
  // size sub label only if it fits; very wide labels need smaller text
  const labelSize = label && label.length > 18 ? 11 : 14;
  return (
    <g>
      <rect x={x} y={y} width={w} height={h} fill="oklch(28% 0.06 245 / 0.65)" stroke="var(--blueprint-line)" strokeWidth="1.2"/>
      <rect x={x+4} y={y+4} width={w-8} height={h-8} fill="none" stroke="var(--blueprint-line)" strokeOpacity="0.25" strokeWidth="0.8"/>
      <text x={x + w/2} y={y + (sub ? h/2 - 4 : h/2 + 5)} textAnchor="middle" fontFamily="var(--mono)" fontSize={labelSize} fontWeight="600" fill={accent ? "var(--amber)" : "#eef2f8"} letterSpacing={labelSize >= 13 ? 2 : 1}>{label}</text>
      {sub && (
        <text x={x + w/2} y={y + h/2 + 14} textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">{sub}</text>
      )}
    </g>
  );
}

function Arrow({ x1, y1, x2, y2, id, dashed, label, labelAt = 0.5, labelDx = 0, labelDy = -6 }) {
  return (
    <g>
      <line x1={x1} y1={y1} x2={x2} y2={y2}
        stroke="var(--blueprint-line)" strokeWidth="1.2"
        strokeDasharray={dashed ? "4 4" : null}
        markerEnd={`url(#arrow-${id})`} />
      {label && (
        <text x={x1 + (x2-x1) * labelAt + labelDx} y={y1 + (y2-y1) * labelAt + labelDy}
              fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5" textAnchor="middle">
          {label}
        </text>
      )}
    </g>
  );
}

function Callout({ x, y, lx, ly, tx, ty, num, text, id }) {
  return (
    <g>
      <line x1={x} y1={y} x2={lx} y2={ly} stroke="var(--blueprint-line)" strokeWidth="0.8" markerStart={`url(#dot-${id})`}/>
      <line x1={lx} y1={ly} x2={tx} y2={ty} stroke="var(--blueprint-line)" strokeWidth="0.8"/>
      <circle cx={tx + (tx > lx ? 12 : -12)} cy={ty} r="10" fill="oklch(20% 0.05 245)" stroke="var(--amber)" strokeWidth="1"/>
      <text x={tx + (tx > lx ? 12 : -12)} y={ty + 3.5} textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fontWeight="600" fill="var(--amber)">{num}</text>
      <text x={tx + (tx > lx ? 26 : -26)} y={ty + 3.5} textAnchor={tx > lx ? "start" : "end"} fontFamily="var(--mono)" fontSize="10.5" fill="#eef2f8" letterSpacing="0.5">{text}</text>
    </g>
  );
}

// ---------- LEVIATHAN ------------------------------------------------------
// Workflow internals are NDA — the schematic is a sealed plate.
function drawLeviathan({ W, H, id }) {
  return (
    <g>
      {/* sealed envelope: hatched fill + a single "REDACTED" stamp */}
      <rect x="40" y="60" width="920" height="480" fill="url(#hatch-leviathan)" stroke="var(--blueprint-line)" strokeWidth="1.2" strokeDasharray="6 4"/>
      <rect x="60" y="80" width="880" height="440" fill="oklch(14% 0.025 245 / 0.55)" stroke="var(--blueprint-line)" strokeOpacity="0.4"/>

      {/* envelope corner ticks */}
      <g stroke="var(--blueprint-line)" strokeWidth="1.2" fill="none">
        <path d="M 90 110 L 60 110 L 60 80"/>
        <path d="M 910 110 L 940 110 L 940 80"/>
        <path d="M 90 490 L 60 490 L 60 520"/>
        <path d="M 910 490 L 940 490 L 940 520"/>
      </g>

      {/* "redacted" stamp — angled, framed */}
      <g transform="translate(500 290) rotate(-6)">
        <rect x="-220" y="-46" width="440" height="92" fill="none" stroke="var(--amber)" strokeWidth="2.5" strokeOpacity="0.85"/>
        <rect x="-214" y="-40" width="428" height="80" fill="none" stroke="var(--amber)" strokeWidth="0.8" strokeOpacity="0.5"/>
        <text x="0" y="6" textAnchor="middle" fontFamily="var(--mono)" fontSize="34" fontWeight="700" fill="var(--amber)" letterSpacing="8">CLASSIFIED</text>
        <text x="0" y="30" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--amber)" letterSpacing="4">LVT-001 · INTERNALS NDA</text>
      </g>

      {/* technical strip at bottom */}
      <rect x="60" y="540" width="880" height="30" fill="url(#hatch-leviathan)" stroke="var(--blueprint-line)" strokeOpacity="0.5"/>
      <text x="75" y="560" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="2">PLATE A · SHEET WITHHELD · DETAILS AVAILABLE UNDER CONVERSATION</text>
    </g>
  );
}

// ---------- JARVIS ---------------------------------------------------------
function drawJarvis({ W, H, id }) {
  return (
    <g>
      {/* main voice loop */}
      <Block x={60}  y={250} w={120} h={70} label="WAKE" sub="PORCUPINE" accent/>
      <Block x={210} y={250} w={120} h={70} label="VAD" sub="SILERO" />
      <Block x={360} y={250} w={120} h={70} label="STT" sub="WHISPER.CPP" />
      <Block x={510} y={250} w={150} h={70} label="LLM" sub="llama3.1:8b" />
      <Block x={690} y={250} w={120} h={70} label="TTS" sub="PIPER" />
      <Block x={840} y={250} w={120} h={70} label="SPKR" sub="OUT" accent/>

      <Arrow id={id} x1={180} y1={285} x2={210} y2={285}/>
      <Arrow id={id} x1={330} y1={285} x2={360} y2={285}/>
      <Arrow id={id} x1={480} y1={285} x2={510} y2={285}/>
      <Arrow id={id} x1={660} y1={285} x2={690} y2={285}/>
      <Arrow id={id} x1={810} y1={285} x2={840} y2={285}/>

      {/* loop arrow back */}
      <path d="M 900 320 Q 900 410 500 410 Q 100 410 100 320" stroke="var(--blueprint-line)" strokeWidth="1" strokeDasharray="4 4" fill="none" markerEnd={`url(#arrow-${id})`}/>
      <text x="500" y="430" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">LOOP — all on-device · zero cloud round-trip</text>

      {/* side outputs */}
      <Block x={510} y={120} w={170} h={50} label='"research <topic>"'/>
      <Block x={700} y={120} w={140} h={50} label="PDF.brief" accent/>
      <Arrow id={id} x1={595} y1={170} x2={595} y2={250}/>
      <Arrow id={id} x1={680} y1={145} x2={700} y2={145}/>

      <Block x={40}  y={120} w={150} h={50} label='"suit up"'/>
      <Block x={210} y={75}  w={210} h={28} label="MUSIC"/>
      <Block x={210} y={113} w={210} h={28} label="leviathanterminal.com"/>
      <Block x={210} y={151} w={210} h={28} label="tmux attach"/>
      <Arrow id={id} x1={190} y1={145} x2={210} y2={89}/>
      <Arrow id={id} x1={190} y1={145} x2={210} y2={127}/>
      <Arrow id={id} x1={190} y1={145} x2={210} y2={165}/>
      <Arrow id={id} x1={115} y1={170} x2={115} y2={250}/>

      {/* daemon banner */}
      <rect x="60" y="490" width="880" height="50" fill="url(#hatch-jarvis)" stroke="var(--blueprint-line)" strokeOpacity="0.5"/>
      <text x="80" y="510" fontFamily="var(--mono)" fontSize="11" fill="#eef2f8" letterSpacing="2">DAEMON</text>
      <text x="80" y="528" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">$ jarvis start   $ jarvis stop   $ jarvis status</text>

      <Callout id={id} x={780} y={250} lx={780} ly={210} tx={830} ty={40} num="1" text="200ms wake → speak" />
      <Callout id={id} x={120} y={250} lx={120} ly={220} tx={70}  ty={40} num="2" text="hotword model · ~kB" />
    </g>
  );
}

// ---------- EASYAPPLY ------------------------------------------------------
function drawEasyApply({ W, H, id }) {
  return (
    <g>
      <Block x={40}  y={100} w={180} h={70} label="LINKEDIN" sub="profile A" />
      <Block x={40}  y={260} w={180} h={70} label="HANDSHAKE" sub="profile B" />
      <Block x={40}  y={420} w={180} h={70} label="INDEED" sub="profile C" />

      {/* Playwright */}
      <Block x={290} y={230} w={220} h={130} label="PLAYWRIGHT" sub="launch_persistent_context" accent/>
      <text x="400" y="385" textAnchor="middle" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">headless Chromium · 3 contexts</text>

      <Arrow id={id} x1={220} y1={135} x2={290} y2={260}/>
      <Arrow id={id} x1={220} y1={295} x2={290} y2={295}/>
      <Arrow id={id} x1={220} y1={455} x2={290} y2={330}/>

      {/* Claude haiku */}
      <Block x={580} y={150} w={200} h={80} label="CLAUDE HAIKU" sub="form-field fill" accent/>
      <Block x={580} y={340} w={200} h={80} label="CLAUDE HAIKU" sub="cover-letter draft" accent/>

      <Arrow id={id} x1={510} y1={270} x2={580} y2={190} label="free-text Qs" labelAt={0.5} labelDy={-10}/>
      <Arrow id={id} x1={510} y1={325} x2={580} y2={380}/>

      {/* output */}
      <Block x={840} y={230} w={120} h={130} label="APPLIED" sub="✓ submitted" />
      <Arrow id={id} x1={780} y1={190} x2={840} y2={270}/>
      <Arrow id={id} x1={780} y1={380} x2={840} y2={320}/>

      {/* note */}
      <rect x="40" y="540" width="920" height="36" fill="url(#hatch-easyapply)" stroke="var(--blueprint-line)" strokeOpacity="0.5"/>
      <text x="60" y="563" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">NOTE — personal automation. built for myself · shared with a few friends · not a product.</text>

      <Callout id={id} x={400} y={295} lx={400} ly={400} tx={520} ty={440} num="1" text="persistent cookies / login per site" />
      <Callout id={id} x={680} y={190} lx={680} ly={80} tx={780} ty={50} num="2" text="resume + JD prompt → cover letter" />
    </g>
  );
}

// ---------- INQUIRE --------------------------------------------------------
function drawInquire({ W, H, id }) {
  return (
    <g>
      {/* two zones */}
      <rect x="40"  y="60" width="380" height="430" fill="oklch(22% 0.05 245 / 0.3)" stroke="var(--blueprint-line)" strokeDasharray="6 4"/>
      <text x="60" y="84" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="2">ZONE / portal — TENANT</text>

      <rect x="580" y="60" width="380" height="430" fill="oklch(22% 0.05 245 / 0.3)" stroke="var(--blueprint-line)" strokeDasharray="6 4"/>
      <text x="600" y="84" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="2">ZONE / admin — LANDLORD</text>

      {/* tenant flow */}
      <Block x={70}  y={120} w={140} h={60} label="INTAKE" sub="form"/>
      <Block x={250} y={120} w={140} h={60} label="SELF-RATE" sub="urgency"/>
      <Block x={70}  y={210} w={320} h={60} label="MESSAGES" sub="threads · attachments"/>
      <Block x={70}  y={310} w={150} h={60} label="STATUS"/>
      <Block x={240} y={310} w={150} h={60} label="AUDIT" sub="log"/>
      <Arrow id={id} x1={210} y1={150} x2={250} y2={150}/>
      <Arrow id={id} x1={230} y1={180} x2={230} y2={210}/>
      <Arrow id={id} x1={150} y1={270} x2={150} y2={310}/>
      <Arrow id={id} x1={310} y1={270} x2={310} y2={310}/>

      {/* center — AI triage */}
      <Block x={430} y={220} w={120} h={100} label="AI" sub="TRIAGE" accent/>
      <text x="490" y="335" textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="var(--blueprint-line)" letterSpacing="1">urgency · reason</text>

      <Arrow id={id} x1={395} y1={270} x2={430} y2={270}/>
      <Arrow id={id} x1={550} y1={270} x2={580} y2={270}/>

      {/* admin */}
      <Block x={610} y={120} w={140} h={60} label="CONSOLE"/>
      <Block x={790} y={120} w={140} h={60} label="OVERRIDE"/>
      <Block x={610} y={210} w={320} h={60} label="13 TABLES" sub="Drizzle / Neon" accent/>
      <Block x={610} y={310} w={150} h={60} label="INVITES"/>
      <Block x={780} y={310} w={150} h={60} label="ACCOUNT"/>
      <Arrow id={id} x1={750} y1={150} x2={790} y2={150}/>
      <Arrow id={id} x1={770} y1={180} x2={770} y2={210}/>
      <Arrow id={id} x1={690} y1={270} x2={690} y2={310}/>
      <Arrow id={id} x1={855} y1={270} x2={855} y2={310}/>

      {/* foundation */}
      <rect x="40" y="525" width="920" height="50" fill="url(#hatch-inquire)" stroke="var(--blueprint-line)" strokeOpacity="0.5"/>
      <text x="60" y="546" fontFamily="var(--mono)" fontSize="11" fill="#eef2f8" letterSpacing="2">STACK</text>
      <text x="60" y="563" fontFamily="var(--mono)" fontSize="10" fill="var(--blueprint-line)" letterSpacing="1.5">Next.js 16 · React 19 · Drizzle ORM · Neon Postgres · NextAuth 5 (beta) · Argon2 · Vercel</text>

      <Callout id={id} x={490} y={220} lx={490} ly={130} tx={500} ty={40} num="1" text="model: urgency + reasoning + admin override" />
    </g>
  );
}

// ---------- STYLES --------------------------------------------------------

const pStyles = {
  root: {
    position: "absolute", inset: 0,
    color: "var(--fg)",
    overflowY: "auto",
    overflowX: "hidden",
    paddingBottom: 120,
  },
  paper: {
    position: "fixed", inset: 0,
    background:
      "radial-gradient(ellipse at 20% 0%, oklch(24% 0.06 245 / 0.65) 0%, transparent 50%)," +
      "radial-gradient(ellipse at 100% 90%, oklch(22% 0.04 245 / 0.45) 0%, transparent 55%)," +
      "linear-gradient(180deg, oklch(15% 0.025 245) 0%, oklch(12% 0.015 250) 100%)",
    zIndex: -1,
    pointerEvents: "none",
  },
  grid: {
    position: "fixed", inset: 0,
    backgroundImage:
      "linear-gradient(oklch(70% 0.05 220 / 0.05) 1px, transparent 1px)," +
      "linear-gradient(90deg, oklch(70% 0.05 220 / 0.05) 1px, transparent 1px)",
    backgroundSize: "40px 40px",
    pointerEvents: "none",
    zIndex: 0,
  },
  header: {
    position: "relative",
    zIndex: 2,
    padding: "48px 56px 24px",
    display: "grid",
    gridTemplateColumns: "1fr auto",
    gap: 40,
    alignItems: "end",
  },
  h1: {
    fontFamily: "var(--serif)",
    fontSize: "clamp(36px, 4.0vw, 50px)",
    fontStyle: "italic",
    fontWeight: 400,
    margin: "16px 0 12px",
    letterSpacing: "-0.01em",
    lineHeight: 1.05,
    color: "var(--fg)",
  },
  lede: {
    margin: 0,
    fontFamily: "var(--serif)",
    fontSize: "clamp(15px, 1.1vw, 17px)",
    lineHeight: 1.5,
    color: "var(--fg-2)",
    maxWidth: "62ch",
  },
  titleBlock: { width: 420 },
  platesGrid: {
    position: "relative",
    zIndex: 2,
    padding: "16px 56px calc(var(--terminal-h) + 24px)",
    display: "grid",
    gridTemplateColumns: "repeat(2, 1fr)",
    gap: 24,
  },
};

const tbStyles = {
  box: {
    border: "1px solid var(--blueprint-line)",
    background: "oklch(14% 0.02 245 / 0.7)",
    backdropFilter: "blur(4px)",
    fontFamily: "var(--mono)",
  },
  row: {
    display: "flex",
    borderBottom: "1px solid var(--blueprint-line)",
    alignItems: "stretch",
  },
  field: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    gap: 6,
    padding: "10px 14px",
    minWidth: 0,
  },
  fieldLabel: {
    fontSize: 9,
    color: "var(--blueprint-line)",
    letterSpacing: ".28em",
    textTransform: "uppercase",
    fontWeight: 500,
  },
  fieldValue: {
    fontSize: 14,
    color: "#eef2f8",
    letterSpacing: ".04em",
    fontWeight: 500,
    overflow: "hidden",
    textOverflow: "ellipsis",
    whiteSpace: "nowrap",
  },
};

const pcStyles = {
  card: {
    appearance: "none",
    background: "oklch(18% 0.04 245 / 0.55)",
    border: "1px solid var(--blueprint-line)",
    color: "var(--fg)",
    padding: 0,
    textAlign: "left",
    cursor: "pointer",
    transition: "transform 200ms ease, border-color 200ms ease, background 200ms ease",
    boxShadow: "0 10px 40px oklch(0% 0 0 / 0.4)",
  },
  cardInner: {
    padding: 18,
    display: "flex",
    flexDirection: "column",
    gap: 12,
  },
  cardHead: { display: "flex", justifyContent: "space-between", alignItems: "center" },
  statusPill: {
    fontSize: 10,
    border: "1px solid var(--blueprint-line)",
    padding: "2px 8px",
    letterSpacing: ".22em",
  },
  diagram: {
    aspectRatio: "1000 / 920",
    background: "oklch(16% 0.04 245 / 0.6)",
    border: "1px dashed var(--blueprint-line)",
    overflow: "hidden",
  },
  cardFoot: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-end",
    paddingTop: 6,
  },
};

const pdStyles = {
  wrap: { position: "relative", zIndex: 2, padding: "12px 56px calc(var(--terminal-h) + 24px)" },
  back: {
    background: "transparent",
    border: "1px solid var(--blueprint-line)",
    color: "var(--blueprint-line)",
    padding: "8px 14px",
    fontSize: 11,
    letterSpacing: ".22em",
    cursor: "pointer",
    marginBottom: 16,
  },
  layout: {
    display: "grid",
    gridTemplateColumns: "minmax(0,1.55fr) minmax(0,1fr)",
    gap: 28,
    alignItems: "start",
  },
  diagBox: {
    background: "oklch(16% 0.04 245 / 0.65)",
    border: "1px solid var(--blueprint-line)",
    padding: 18,
    display: "flex",
    flexDirection: "column",
  },
  diagFrame: {
    flex: 1,
    minHeight: 0,
    aspectRatio: "1000 / 920",
    width: "100%",
  },
  diagHead: {
    display: "flex",
    justifyContent: "space-between",
    paddingBottom: 10,
    marginBottom: 10,
    borderBottom: "1px dashed var(--blueprint-line)",
  },
  specs: {
    display: "flex",
    flexDirection: "column",
    gap: 22,
    paddingTop: 4,
  },
  kicker: { fontSize: 10, letterSpacing: ".22em", color: "var(--blueprint-line)", marginBottom: 8 },
  oneliner: {
    fontFamily: "var(--serif)",
    fontStyle: "italic",
    fontSize: 24,
    lineHeight: 1.35,
    color: "var(--fg)",
    margin: 0,
  },
  list: { listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 },
  li: { display: "flex", gap: 10 },
  tick: { color: "var(--blueprint-line)", flexShrink: 0 },
};

window.Projects = Projects;