// Pages — ported from src/pages/*
const { useLang, Layout, SectionHeader, Wordmark, Link } = window;

/* ---------- small color helpers (module scope, unique names) ---------- */
function hf_hslToRgb(h, s, l) {
  s /= 100; l /= 100;
  const k = (n) => (n + h / 30) % 12;
  const a = s * Math.min(l, 1 - l);
  const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
}
function hf_mix(a, b, t) {
  return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t];
}
function hf_smooth(e0, e1, x) {
  const t = Math.max(0, Math.min(1, (x - e0) / (e1 - e0)));
  return t * t * (3 - 2 * t);
}
/* value noise (ported from the BreathDearMedusae shader) — organic ring shape */
function hf_hash(x, y) { const s = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453; return s - Math.floor(s); }
function hf_noise(x, y) {
  const ix = Math.floor(x), iy = Math.floor(y);
  let fx = x - ix, fy = y - iy;
  fx = fx * fx * (3 - 2 * fx); fy = fy * fy * (3 - 2 * fy);
  const a = hf_hash(ix, iy), b = hf_hash(ix + 1, iy), c = hf_hash(ix, iy + 1), d = hf_hash(ix + 1, iy + 1);
  const ab = a + (b - a) * fx, cd = c + (d - c) * fx;
  return ab + (cd - ab) * fy;
}

/*
  Interactive particle field behind the hero — EXACT implementation of
  uploads/sanabria-particles.json ("sanabria_radial_particles"): a seeded PRNG
  radial field of oriented rounded line-segments with home-spring drift, pointer
  swirl+repel, a slow global orbit, micro-drift and damping. The pointer eases to
  the cursor, or auto-orbits when idle >1.4s. Colours + all constants are taken
  verbatim from the JSON (tinta-dominant on the crema surface).
*/
function HeroField({ revealed }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    let W = 0, H = 0, parts = [];
    // exact palette (rgba) from sanabria-particles.json
    const PAL = [
      [14, 13, 11, 0.40],
      [26, 24, 21, 0.32],
      [43, 38, 33, 0.28],
      [68, 64, 58, 0.24],
      [110, 102, 92, 0.18],
      [154, 145, 134, 0.14],
      [245, 165, 36, 0.38],
    ];
    const pointer = { x: -9999, y: -9999, tx: 0, ty: 0, last: -1e9, has: false };

    // mulberry-style uint32 PRNG (deterministic, seeded per size)
    function makeRand(seed) {
      let a = seed >>> 0;
      return function () {
        a = (a + 0x6D2B79F5) | 0;
        let x = Math.imul(a ^ (a >>> 15), 1 | a);
        x = (x + Math.imul(x ^ (x >>> 7), 61 | x)) ^ x;
        return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
      };
    }

    function build() {
      const parent = canvas.parentElement;
      W = parent.clientWidth; H = parent.clientHeight;
      const dpr = Math.min(window.devicePixelRatio || 1, 2);
      canvas.width = W * dpr; canvas.height = H * dpr;
      canvas.style.width = W + "px"; canvas.style.height = H + "px";
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

      const seed = 109739 + Math.round(W * 3 + H * 7);
      const rand = makeRand(seed);
      const count = Math.max(360, Math.min(920, Math.round((W * H) / 1900)));
      const sx = W * 0.35, sy = H * 0.50, maxR = Math.max(W, H) * 0.72;
      parts = [];
      for (let i = 0; i < count; i++) {
        let x, y;
        if (rand() < 0.78) {                                  // radial spawn
          const ang = rand() * Math.PI * 2;
          const r = Math.pow(rand(), 0.62) * maxR;
          const squash = 0.72 + rand() * (0.94 - 0.72);
          const spread = 1.03 + rand() * (1.37 - 1.03);
          x = sx + Math.cos(ang) * r * spread;
          y = sy + Math.sin(ang) * r * squash;
        } else {                                              // uniform fill
          x = rand() * W; y = rand() * H;
        }
        const homeX = x, homeY = y;
        x += rand() * 12 - 6; y += rand() * 12 - 6;
        const tintRoll = rand();
        let ci;
        if (tintRoll < 0.38) ci = 0;
        else if (tintRoll < 0.56) ci = 1;
        else if (tintRoll < 0.70) ci = 2;
        else if (tintRoll < 0.82) ci = 3;
        else if (tintRoll < 0.95) ci = 4 + Math.floor(rand() * 2);
        else ci = 6;
        parts.push({
          x, y, homeX, homeY,
          vx: rand() * 0.34 - 0.17, vy: rand() * 0.34 - 0.17,
          line: 0.34 + rand() * (0.88 - 0.34),
          mass: 0.72 + rand() * (1.44 - 0.72),
          driftRadius: 6 + rand() * (30 - 6),
          influenceJitter: 0.76 + rand() * (1.24 - 0.76),
          spin: rand() < 0.5 ? -1 : 1,
          phase: rand() * Math.PI * 2,
          colorIndex: ci,
        });
      }
      pointer.x = W * 0.36; pointer.y = H * 0.46;
      pointer.tx = pointer.x; pointer.ty = pointer.y;
    }

    let raf, startMs = 0, prevMs = 0;
    const tick = (ms) => {
      if (!startMs) startMs = ms;
      const time = ms - startMs;          // ms since start
      const ts = time / 1000;             // seconds
      let delta = prevMs ? (ms - prevMs) / 16.667 : 1;
      prevMs = ms;
      if (delta > 3) delta = 3; else if (delta < 0.2) delta = 0.2;
      ctx.clearRect(0, 0, W, H);

      // pointer eases to the cursor, or auto-orbits when idle > 1.4s
      const idle = (ms - pointer.last) > 1400;
      let tx, ty;
      if (pointer.has && !idle) { tx = pointer.tx; ty = pointer.ty; }
      else {
        tx = W * (0.42 + Math.cos(time * 0.00018 * 1.7) * 0.22);
        ty = H * (0.50 + Math.sin(time * 0.00018 * 2.1) * 0.20);
      }
      pointer.x += (tx - pointer.x) * 0.075 * delta;
      pointer.y += (ty - pointer.y) * 0.075 * delta;

      const minWH = Math.min(W, H), maxWH = Math.max(W, H);
      const baseRadius = 330 * (0.86 + minWH / 1400);
      const gx = W * 0.48 + Math.sin(ts * 0.23) * W * 0.05;
      const gy = H * 0.52 + Math.cos(ts * 0.19) * H * 0.05;
      const damp = Math.pow(0.928, delta);

      ctx.lineCap = "round";
      for (const p of parts) {
        // drifting home spring
        const driftAngle = ts * (0.34 + p.mass * 0.18) + p.phase;
        const homeX = p.homeX + Math.cos(driftAngle) * p.driftRadius + Math.sin(ts * 0.11 + p.phase) * 10;
        const homeY = p.homeY + Math.sin(driftAngle * 1.13) * p.driftRadius * 0.72;
        p.vx += (homeX - p.x) * 0.0036 * delta;
        p.vy += (homeY - p.y) * 0.0036 * delta;

        // pointer influence: tangential swirl + repel
        const dxp = p.x - pointer.x, dyp = p.y - pointer.y;
        const distance = Math.hypot(dxp, dyp) || 0.0001;
        const radius = baseRadius * p.influenceJitter;
        const pull = Math.max(0, 1 - distance / radius);
        if (pull > 0) {
          const pc = pull * pull * (3 - 2 * pull);
          const tan = 0.035 * pc * p.spin * p.mass;
          const rep = 0.028 * pc * (1.15 - pull * 0.36);
          const nx = dxp / distance, ny = dyp / distance;
          p.vx += (-ny) * tan * delta + nx * rep * delta;
          p.vy += (nx) * tan * delta + ny * rep * delta;
        }

        // slow global orbit
        const gdx = p.x - gx, gdy = p.y - gy;
        const gd = Math.hypot(gdx, gdy) || 0.0001;
        const gs = Math.exp(-gd / (maxWH * 0.42)) * 0.017 * p.spin;
        p.vx += (-gdy / gd) * gs * delta;
        p.vy += (gdx / gd) * gs * delta;

        // micro drift
        p.vx += Math.sin(ts * 0.87 + p.phase) * 0.0044 * delta;
        p.vy += Math.cos(ts * 0.79 + p.phase * 1.17) * 0.0044 * delta;

        // damping + integrate
        p.vx *= damp; p.vy *= damp;
        p.x += p.vx * delta; p.y += p.vy * delta;

        // oriented rounded line segment; length + alpha driven by speed
        const speed = Math.hypot(p.vx, p.vy);
        const pc = pull * pull * (3 - 2 * pull);                 // pointer proximity 0..1
        const a = Math.max(0.16, Math.min(0.95, 0.30 + speed * 2.15 + pc * 0.36));
        const length = Math.max(1.05, Math.min(6.4, 0.95 + speed * 8.5 + p.line * 1.35 + pc * 2.7));
        const half = length * 1.08 * 0.5;
        const ang = Math.atan2(p.vy, p.vx);
        const hx = Math.cos(ang) * half, hy = Math.sin(ang) * half;
        const c = PAL[p.colorIndex];
        // metallic sheen: base dark -> ámbar -> crema highlight the nearer the pointer
        let cr = c[0], cg = c[1], cb = c[2];
        if (pc > 0.001) {
          const w = pc * 0.6;                                    // warm to ámbar
          cr += (245 - cr) * w; cg += (165 - cg) * w; cb += (36 - cb) * w;
          const hi = Math.max(0, pc - 0.4) / 0.6 * 0.51;         // crema sheen at the core
          cr += (247 - cr) * hi; cg += (246 - cg) * hi; cb += (243 - cb) * hi;
        }
        ctx.globalAlpha = a;
        ctx.strokeStyle = "rgba(" + (cr | 0) + "," + (cg | 0) + "," + (cb | 0) + "," + Math.min(1, c[3] + pc * 0.3) + ")";
        ctx.lineWidth = Math.max(0.6, p.line * 1.4) * (1 + pc * 1.32);
        ctx.beginPath();
        ctx.moveTo(p.x - hx, p.y - hy);
        ctx.lineTo(p.x + hx, p.y + hy);
        ctx.stroke();

        // secondary stroke (offset, faint) on faster mid/dark marks
        if (p.colorIndex > 1 && speed > 0.055) {
          const c2 = PAL[(p.colorIndex % 5) + 2];
          const sc = 0.42;
          ctx.globalAlpha = a * 0.45;
          ctx.strokeStyle = "rgba(" + c2[0] + "," + c2[1] + "," + c2[2] + "," + c2[3] + ")";
          ctx.lineWidth = Math.max(0.35, p.line * 0.55);
          ctx.beginPath();
          ctx.moveTo(p.x + 0.45 - hx * sc, p.y - 0.35 - hy * sc);
          ctx.lineTo(p.x + 0.45 + hx * sc, p.y - 0.35 + hy * sc);
          ctx.stroke();
        }
      }
      ctx.globalAlpha = 1;
      raf = requestAnimationFrame(tick);
    };

    // pointer tracking (canvas is pointer-events:none, so listen on window)
    const onMove = (e) => {
      const r = canvas.getBoundingClientRect();
      pointer.tx = e.clientX - r.left; pointer.ty = e.clientY - r.top;
      pointer.has = true; pointer.last = performance.now();
    };
    const onTouch = (e) => { if (e.touches[0]) onMove(e.touches[0]); };

    build();
    if (reduce) {
      // static, legible: a single resting frame
      ctx.clearRect(0, 0, W, H);
      ctx.lineCap = "round";
      for (const p of parts) {
        const c = PAL[p.colorIndex];
        ctx.globalAlpha = 0.5;
        ctx.strokeStyle = "rgba(" + c[0] + "," + c[1] + "," + c[2] + "," + c[3] + ")";
        ctx.lineWidth = Math.max(0.6, p.line * 1.4);
        const half = (0.95 + p.line * 1.35) * 1.08 * 0.5;
        ctx.beginPath();
        ctx.moveTo(p.x - half, p.y); ctx.lineTo(p.x + half, p.y);
        ctx.stroke();
      }
      ctx.globalAlpha = 1;
    } else {
      raf = requestAnimationFrame(tick);
      window.addEventListener("mousemove", onMove, { passive: true });
      window.addEventListener("touchmove", onTouch, { passive: true });
    }
    const ro = new ResizeObserver(() => build());
    ro.observe(canvas.parentElement);
    return () => {
      cancelAnimationFrame(raf); ro.disconnect();
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("touchmove", onTouch);
    };
  }, []);
  return <canvas ref={ref} aria-hidden className={"absolute inset-0 pointer-events-none hero-fade" + (revealed ? " in" : "")} style={{ zIndex: 0 }} />;
}

/* Typewriter headline — types on load, then the caret "faints" into the underscore. */
function mixHex(h1, h2, t) {
  const p = (s, i) => parseInt(s.replace("#", "").substr(i, 2), 16);
  const ch = (i) => Math.round(p(h1, i) + (p(h2, i) - p(h1, i)) * t);
  return "rgb(" + ch(0) + "," + ch(2) + "," + ch(4) + ")";
}
function TypewriterH1({ a, b, className, onDone }) {
  const full = a + "\n" + b;
  const fullRef = React.useRef(full);
  fullRef.current = full;
  const [n, setN] = React.useState(0);
  const [done, setDone] = React.useState(false);
  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setN(fullRef.current.length); setDone(true); return; }
    let i = 0;
    const id = setInterval(() => {
      const L = fullRef.current.length;
      i += 1;
      setN(i);
      if (i >= L) { clearInterval(id); setTimeout(() => setDone(true), 380); }
    }, 52);
    return () => clearInterval(id);
  }, []);
  React.useEffect(() => { if (done && onDone) onDone(); }, [done]);
  const La = a.length;
  const revealed1 = Math.max(0, Math.min(n, La));
  const revealed2 = Math.max(0, Math.min(n - (La + 1), b.length));
  const caretOnLine1 = n <= La;
  const progress = full.length ? Math.min(1, n / full.length) : 0;
  const p = done ? 1 : progress;
  // tall thin cursor -> short wide underscore
  const caretW = (0.075 + (0.5 - 0.075) * p).toFixed(3) + "em";
  const caretH = (0.86 - (0.86 - 0.11) * p).toFixed(3) + "em";
  // starts as a brand-palette gradient (grafito -> neutral -> amber), resolves to solid amber
  const AMBER = "#F5A524";
  const g1 = mixHex("#44403A", AMBER, p);
  const g2 = mixHex("#9A9186", AMBER, p);
  const caretBg = "linear-gradient(180deg, " + g1 + " 0%, " + g2 + " 55%, " + AMBER + " 100%)";
  const caret = <span key="caret" className="tw-caret" style={{ width: caretW, height: caretH, backgroundImage: caretBg }} />;

  const renderLine = (str, revealed, hasCaret) => {
    const els = str.split("").map((ch, idx) => (
      <span key={idx} style={{ opacity: idx < revealed ? 1 : 0 }}>{ch}</span>
    ));
    if (hasCaret) els.splice(revealed, 0, caret);
    return els;
  };

  return (
    <h1 className={className} aria-label={a + " " + b} style={{ fontSize: "clamp(1.6rem, 6vw, 3.75rem)" }}>
      <span aria-hidden style={{ display: "block" }}>
        <span style={{ display: "block", whiteSpace: "nowrap" }}>{renderLine(a, revealed1, caretOnLine1)}</span>
        <span style={{ display: "block", whiteSpace: "nowrap" }}>{renderLine(b, revealed2, !caretOnLine1)}</span>
      </span>
    </h1>
  );
}

/* ================= INDEX ================= */
function Index() {
  const { t } = useLang();
  const [revealed, setRevealed] = React.useState(false);
  const rvIn = revealed ? " in" : "";

  const proofRows = [
    { idx: "01", name: "cat.agents", detail: "cat.agents.short", status: "home.status.inProd" },
    { idx: "02", name: "cat.automations", detail: "cat.automations.short", status: "home.status.inProd" },
    { idx: "03", name: "cat.brandOs", detail: "cat.brandOs.short", status: "home.status.shipped" },
    { idx: "04", name: "cat.tools", detail: "cat.tools.short", status: "home.status.running" },
  ];
  const categories = [
    { tag: "01", name: "cat.agents", title: "cat.agents.title", body: "cat.agents.body" },
    { tag: "02", name: "cat.automations", title: "cat.automations.title", body: "cat.automations.body" },
    { tag: "03", name: "cat.brandOs", title: "cat.brandOs.title", body: "cat.brandOs.body" },
    { tag: "04", name: "cat.tools", title: "cat.tools.title", body: "cat.tools.body" },
  ];
  const method = [
    { n: "01", label: "m.01", body: "m.01.body" },
    { n: "02", label: "m.02", body: "m.02.body" },
    { n: "03", label: "m.03", body: "m.03.body" },
    { n: "04", label: "m.04", body: "m.04.body" },
    { n: "05", label: "m.05", body: "m.05.body" },
  ];

  return (
    <Layout>
      {/* HERO */}
      <section className="relative border-b border-border overflow-hidden">
        <HeroField revealed={revealed} />
        <div className="container relative pt-16 pb-20" style={{ zIndex: 1 }}>
          <span className={"op-chip op-chip--live hero-reveal" + rvIn}>
            {t("home.kicker")}
          </span>
          {/* Centered brand lockup */}
          <div className="flex flex-col items-center">
            <div className={"flex items-center gap-3 mb-8 hero-reveal" + rvIn} style={{ transitionDelay: "80ms" }}>
              <img src="sanabria/s_icon.png" alt="s_" className="h-8 w-8 rounded-[7px]" />
              <span className="font-sans font-bold tracking-tight leading-none text-xl sm:text-2xl">
                James Sanabr<span style={{ color: "hsl(var(--amber))" }}>ia</span><span className="blink-underscore">_</span>
              </span>
            </div>

            <TypewriterH1
              a={t("home.h1.a")}
              b={t("home.h1.b")}
              className="leading-[1.08] tracking-tight font-semibold text-center"
              onDone={() => setRevealed(true)}
            />

            <p className={"mt-8 max-w-2xl text-lg text-muted-foreground text-center hero-reveal" + rvIn} style={{ transitionDelay: "160ms" }}>
              {t("home.heroBody")}{" "}
              <span className="text-foreground">{t("common.tagline")}</span>
            </p>

            <div className={"mt-10 flex flex-wrap items-center justify-center gap-3 hero-reveal" + rvIn} style={{ transitionDelay: "240ms" }}>
              <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.openSession")}</a>
              <Link to="/systems" className="btn-ghost">{t("common.viewSystems")}</Link>
            </div>
          </div>

          {/* Live production panel — full width at the bottom */}
          <div className={"op-panel mt-16 max-w-4xl mx-auto hero-reveal" + rvIn} style={{ background: "hsl(var(--card))", transitionDelay: "320ms" }}>
            <div className="flex items-center justify-between px-4 py-3 border-b border-border">
              <div className="flex items-center gap-3">
                <Wordmark size="sm" />
                <span className="op-label">/ {t("home.productionLog")}</span>
              </div>
              <span className="op-chip op-chip--live">
                {t("common.live")}
              </span>
            </div>

            <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-px bg-border">
              {proofRows.map((r) => (
                <div key={r.idx} className="dim-row bg-card p-5 flex flex-col gap-2">
                  <span className="text-muted-foreground text-sm">{r.idx}</span>
                  <span className="text-foreground uppercase tracking-[0.08em] text-[0.72rem] font-medium">{t(r.name)}</span>
                  <span className="text-muted-foreground normal-case tracking-normal font-sans text-sm leading-snug flex-1">{t(r.detail)}</span>
                  <span className="op-label mt-1">{t(r.status)}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Proof */}
      <section className="container py-20">
        <SectionHeader index="01" label={t("home.proof.kicker")} title={t("home.proof.title")} intro={t("home.proof.intro")} />
        <div className="grid gap-6 md:grid-cols-2">
          <div className="op-panel p-6">
            <p className="op-label mb-3">{t("home.proof.demo")}</p>
            <ul className="space-y-2 text-muted-foreground">
              <li>{t("home.proof.demo.1")}</li>
              <li>{t("home.proof.demo.2")}</li>
              <li>{t("home.proof.demo.3")}</li>
            </ul>
          </div>
          <div className="op-panel p-6" style={{ borderColor: "hsl(var(--amber) / 0.35)" }}>
            <p className="op-label mb-3" style={{ color: "hsl(var(--amber))" }}>{t("home.proof.prod")}</p>
            <ul className="space-y-2 text-foreground">
              <li>{t("home.proof.prod.1")}</li>
              <li>{t("home.proof.prod.2")}</li>
              <li>{t("home.proof.prod.3")}</li>
            </ul>
          </div>
        </div>
        <p className="mt-10 max-w-3xl text-xl leading-relaxed">
          <span className="text-muted-foreground">{t("home.proof.thesis.label")}</span>{" "}
          {t("home.proof.thesis")}
        </p>
      </section>

      {/* What I build */}
      <section className="container py-20">
        <SectionHeader index="02" label={t("home.build.kicker")} title={t("home.build.title")} />
        <div className="grid gap-px bg-border md:grid-cols-2">
          {categories.map((c) => (
            <article key={c.tag} className="bg-background p-8">
              <p className="op-label">{c.tag} · {t(c.name)}</p>
              <h3 className="mt-3 text-2xl">{t(c.title)}</h3>
              <p className="mt-3 text-muted-foreground">{t(c.body)}</p>
            </article>
          ))}
        </div>
      </section>

      {/* Method */}
      <section data-surface="tinta" className="bg-background text-foreground border-y border-border">
        <div className="container py-20">
          <SectionHeader index="03" label={t("home.method.kicker")} title={t("home.method.title")} intro={t("home.method.intro")} />
          <ol className="grid gap-px bg-border md:grid-cols-5">
            {method.map((m) => (
              <li key={m.n} className="bg-background p-6">
                <p className="op-label">{m.n} · {t(m.label)}</p>
                <p className="mt-3 text-sm text-muted-foreground leading-relaxed">{t(m.body)}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Operator */}
      <section className="container py-20">
        <SectionHeader index="04" label={t("home.op.kicker")} title={t("home.op.title")} intro={t("home.op.intro")} />
        <div className="grid gap-6 md:grid-cols-3">
          {[
            { k: "home.op.practice", v: "home.op.practice.v" },
            { k: "home.op.stance", v: "home.op.stance.v" },
            { k: "home.op.language", v: "home.op.language.v" },
          ].map((x) => (
            <div key={x.k} className="op-panel p-6">
              <p className="op-label">{t(x.k)}</p>
              <p className="mt-3">{t(x.v)}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Final CTA */}
      <section className="container pb-24">
        <div className="op-panel p-10 md:p-14 text-center">
          <p className="op-label">{t("home.final.kicker")}</p>
          <h2 className="mt-4 text-3xl md:text-5xl leading-tight max-w-3xl mx-auto">{t("home.final.title")}</h2>
          <p className="mt-6 max-w-xl mx-auto text-muted-foreground">{t("home.final.body")}</p>
          <div className="mt-8 flex justify-center gap-3 flex-wrap">
            <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.bookCall")}</a>
            <Link to="/systems" className="btn-ghost">{t("common.reviewSystems")}</Link>
          </div>
        </div>
      </section>
    </Layout>
  );
}

/* ================= SYSTEMS ================= */
function Systems() {
  const { t } = useLang();
  const systems = [
    { id: "01", name: "cat.agents", title: "sys.01.title", body: "sys.01.body", chips: ["sys.01.c1", "sys.01.c2", "sys.01.c3", "sys.01.c4"] },
    { id: "02", name: "cat.automations", title: "sys.02.title", body: "sys.02.body", chips: ["sys.02.c1", "sys.02.c2", "sys.02.c3", "sys.02.c4"] },
    { id: "03", name: "cat.brandOs", title: "sys.03.title", body: "sys.03.body", chips: ["sys.03.c1", "sys.03.c2", "sys.03.c3", "sys.03.c4"] },
    { id: "04", name: "cat.tools", title: "sys.04.title", body: "sys.04.body", chips: ["sys.04.c1", "sys.04.c2", "sys.04.c3", "sys.04.c4"] },
  ];
  const requests = [
    { k: "sys.req.audit", v: "sys.req.audit.v" },
    { k: "sys.req.proto", v: "sys.req.proto.v" },
    { k: "sys.req.prod", v: "sys.req.prod.v" },
    { k: "sys.req.brand", v: "sys.req.brand.v" },
  ];
  return (
    <Layout>
      <section className="container pt-14 pb-10 border-b border-border">
        <p className="op-label">{t("sys.kicker")}</p>
        <h1 className="mt-4 text-4xl md:text-6xl max-w-4xl leading-tight">{t("sys.h1")}</h1>
        <p className="mt-6 max-w-2xl text-muted-foreground">{t("sys.intro")}</p>
      </section>

      <section className="container py-16 space-y-px bg-border">
        {systems.map((s) => (
          <article key={s.id} className="bg-background p-8 md:p-10 grid md:grid-cols-[8rem_1fr] gap-6">
            <div>
              <p className="op-label">{s.id}</p>
              <p className="op-label mt-1">{t(s.name)}</p>
            </div>
            <div>
              <h2 className="text-2xl md:text-3xl leading-tight">{t(s.title)}</h2>
              <p className="mt-4 max-w-2xl text-muted-foreground">{t(s.body)}</p>
              <div className="mt-5 flex flex-wrap gap-2">
                {s.chips.map((c) => <span key={c} className="op-chip">{t(c)}</span>)}
              </div>
            </div>
          </article>
        ))}
      </section>

      <section className="container pb-20">
        <SectionHeader index="R" label={t("sys.req.kicker")} title={t("sys.req.title")} />
        <div className="grid gap-px bg-border md:grid-cols-2">
          {requests.map((r) => (
            <div key={r.k} className="bg-background p-6">
              <p className="op-label">{t(r.k)}</p>
              <p className="mt-3 text-muted-foreground">{t(r.v)}</p>
            </div>
          ))}
        </div>
        <div className="mt-10">
          <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.bookCall")}</a>
        </div>
      </section>
    </Layout>
  );
}

/* ================= WORK ================= */
function Work() {
  const { t } = useLang();
  const log = [
    { id: "LOG-014", name: "work.log.014", note: "work.log.014.n", tag: "work.tag.internal" },
    { id: "LOG-013", name: "work.log.013", note: "work.log.013.n", tag: "work.tag.nda" },
    { id: "LOG-012", name: "work.log.012", note: "work.log.012.n", tag: "work.tag.artifact" },
    { id: "LOG-011", name: "work.log.011", note: "work.log.011.n", tag: "work.tag.internal" },
    { id: "LOG-010", name: "work.log.010", note: "work.log.010.n", tag: "work.tag.nda" },
  ];
  return (
    <Layout>
      <section className="container pt-14 pb-10 border-b border-border">
        <p className="op-label">{t("work.kicker")}</p>
        <h1 className="mt-4 text-4xl md:text-6xl max-w-4xl leading-tight">{t("work.h1")}</h1>
        <p className="mt-6 max-w-2xl text-muted-foreground">{t("work.intro")}</p>
      </section>

      <section className="container py-14">
        <div className="op-panel">
          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
            <span className="op-label">/ {t("work.log")}</span>
            <span className="op-chip op-chip--live">
              <span className="op-dot-live" /> {t("common.live")}
            </span>
          </div>
          {log.map((row) => (
            <div key={row.id} className="op-row md:grid-cols-[6rem_1fr_10rem]">
              <span className="text-muted-foreground">{row.id}</span>
              <span>
                <span className="text-foreground uppercase tracking-[0.08em] text-[0.72rem] font-medium">{t(row.name)}</span>
                <span className="block mt-1 font-sans text-sm normal-case tracking-normal text-muted-foreground">{t(row.note)}</span>
              </span>
              <span className="op-label">{t(row.tag)}</span>
            </div>
          ))}
        </div>

        <p className="mt-8 max-w-2xl text-muted-foreground">{t("work.footer")}</p>

        <div className="mt-8">
          <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.requestWalkthrough")}</a>
        </div>
      </section>
    </Layout>
  );
}

/* ================= ABOUT ================= */
function About() {
  const { t } = useLang();
  return (
    <Layout>
      <section className="container pt-14 pb-10 border-b border-border">
        <p className="op-label">{t("about.kicker")}</p>
        <h1 className="mt-4 text-4xl md:text-6xl max-w-4xl leading-tight">{t("about.h1")}</h1>
      </section>

      <section className="container py-16 grid gap-14 md:grid-cols-[1.4fr_1fr]">
        <div className="max-w-2xl space-y-6 font-serif text-lg leading-relaxed text-foreground">
          <p>{t("about.p1")}</p>
          <p>
            {t("about.p2.a")} <span className="italic">{t("about.p2.em")}</span>
            {t("about.p2.b")}
          </p>
          <p>{t("about.p3")}</p>
        </div>

        <aside className="space-y-5">
          <div className="op-panel p-6">
            <p className="op-label">{t("home.op.practice")}</p>
            <p className="mt-3">{t("home.op.practice.v")}</p>
          </div>
          <div className="op-panel p-6">
            <p className="op-label">{t("home.op.stance")}</p>
            <p className="mt-3">{t("home.op.stance.v")}</p>
          </div>
          <div className="op-panel p-6">
            <p className="op-label">{t("home.op.language")}</p>
            <p className="mt-3">{t("home.op.language.v")}</p>
          </div>
        </aside>
      </section>

      <section className="container pb-20">
        <div className="op-panel p-10">
          <p className="op-label">{t("about.premise.kicker")}</p>
          <p className="mt-4 text-2xl md:text-3xl leading-tight max-w-3xl">{t("about.premise")}</p>
          <div className="mt-6">
            <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.openSession")}</a>
          </div>
        </div>
      </section>
    </Layout>
  );
}

/* ================= CONTENT ================= */
function ContentPage() {
  const { t } = useLang();
  const streams = [
    { k: "content.s1", v: "content.s1.v" },
    { k: "content.s2", v: "content.s2.v" },
    { k: "content.s3", v: "content.s3.v" },
    { k: "content.s4", v: "content.s4.v" },
    { k: "content.s5", v: "content.s5.v" },
  ];
  return (
    <Layout>
      <section className="container pt-14 pb-10 border-b border-border">
        <p className="op-label">{t("content.kicker")}</p>
        <h1 className="mt-4 text-4xl md:text-6xl max-w-4xl leading-tight">{t("content.h1")}</h1>
        <p className="mt-6 max-w-2xl text-muted-foreground">{t("content.intro")}</p>
      </section>

      <section className="container py-16">
        <div className="grid gap-px bg-border md:grid-cols-2">
          {streams.map((s) => (
            <div key={s.k} className="bg-background p-6">
              <p className="op-label">{t(s.k)}</p>
              <p className="mt-3 text-muted-foreground">{t(s.v)}</p>
            </div>
          ))}
        </div>

        <p className="mt-10 max-w-2xl text-muted-foreground">{t("content.foot")}</p>

        <div className="mt-8">
          <a href="mailto:james@jamessanabria.com" className="btn-primary">{t("common.requestAccess")}</a>
        </div>
      </section>
    </Layout>
  );
}

/* ================= CONTACT ================= */
function Contact() {
  const { t } = useLang();
  const send = [
    { k: "contact.s1", v: "contact.s1.v" },
    { k: "contact.s2", v: "contact.s2.v" },
    { k: "contact.s3", v: "contact.s3.v" },
    { k: "contact.s4", v: "contact.s4.v" },
    { k: "contact.s5", v: "contact.s5.v" },
  ];
  return (
    <Layout>
      <section className="container pt-14 pb-10 border-b border-border">
        <p className="op-label">{t("contact.kicker")}</p>
        <h1 className="mt-4 text-4xl md:text-6xl max-w-4xl leading-tight">{t("contact.h1")}</h1>
        <p className="mt-6 max-w-2xl text-muted-foreground">
          {t("contact.intro")}
          <span className="block mt-2 text-foreground">{t("contact.tag")}</span>
        </p>
      </section>

      <section className="container py-16 grid gap-10 md:grid-cols-[1.2fr_1fr]">
        <div className="op-panel p-8">
          <p className="op-label">{t("contact.send")}</p>
          <ol className="mt-4 space-y-4">
            {send.map((s) => (
              <li key={s.k}>
                <p className="op-label">{t(s.k)}</p>
                <p className="mt-1 text-muted-foreground">{t(s.v)}</p>
              </li>
            ))}
          </ol>
        </div>

        <div className="space-y-5">
          <div className="op-panel p-8">
            <p className="op-label">{t("contact.email.kicker")}</p>
            <a href="mailto:james@jamessanabria.com?subject=Session%20request%20—%20sanabria_" className="mt-3 block font-sans text-lg break-all hover:text-amber">james@jamessanabria.com</a>
            <a href="mailto:james@jamessanabria.com?subject=Session%20request%20—%20sanabria_" className="btn-primary mt-6">{t("contact.book")}</a>
          </div>

          <div className="op-panel p-8">
            <p className="op-label">{t("contact.resp.kicker")}</p>
            <p className="mt-3 text-muted-foreground">{t("contact.resp")}</p>
          </div>
        </div>
      </section>
    </Layout>
  );
}

Object.assign(window, { Index, Systems, Work, About, ContentPage, Contact });