// Section components for leadedspunk.net

const { useState, useEffect, useRef, useMemo } = React;

// ===========================================================
// BOOT SEQUENCE
// ===========================================================
const BOOT_LINES = [
  {
    t: "[    0.000000] init: ",
    cls: "dim",
    tail: "leadedspunk kernel 6.66.6-toxic #unauth SMP PREEMPT",
  },
  {
    t: "[    0.001244] CPU: ",
    cls: "dim",
    tail: "stage-2 microcode loaded // anti-EDR shim active",
  },
  {
    t: "[    0.018221] mem:  ",
    cls: "dim",
    tail: "13312 MiB available // 2048 MiB reserved for c2",
  },
  {
    t: "[    0.034910] crypto: ",
    cls: "dim",
    tail: "self-test passed (aes-ni, chacha20, kyber-1024)",
  },
  {
    t: "[    0.067002] net:  ",
    cls: "dim",
    tail: "tun0 up // egress over 4 hops // dns sinkholed",
  },
  {
    t: "[    0.094513] audit: ",
    cls: "warn",
    tail: "logging disabled by operator",
  },
  {
    t: "[    0.118770] selinux: ",
    cls: "warn",
    tail: "permissive — operator override",
  },
  { t: "[    0.141232] mounting / ", cls: "ok", tail: "ok" },
  { t: "[    0.158441] mounting /ops ", cls: "ok", tail: "ok" },
  {
    t: "[    0.172012] mounting /loot ",
    cls: "ok",
    tail: "ok (encrypted, key in HSM)",
  },
  {
    t: "[    0.190118] starting ",
    cls: "blue",
    tail: "blueteam.harden.d ......................... [ ok ]",
  },
  {
    t: "[    0.198550] starting ",
    cls: "red",
    tail: "redteam.recon.d ........................... [ ok ]",
  },
  {
    t: "[    0.219804] starting ",
    cls: "blue",
    tail: "ids/suricata ............................... [ ok ]",
  },
  {
    t: "[    0.234770] starting ",
    cls: "red",
    tail: "implant/keep-alive .......................... [ ok ]",
  },
  {
    t: "[    0.255017] ",
    cls: "em",
    tail: "ALL SYSTEMS NOMINAL. THREAT POSTURE: ELEVATED.",
  },
  { t: "", cls: "", tail: "" },
  { t: "$ ", cls: "em", tail: "whoami" },
  {
    t: "",
    cls: "em",
    tail: "leadedspunk — offensive engineer, defensive accomplice.",
  },
  { t: "$ ", cls: "em", tail: "cat /etc/motd" },
];

// Pool of ambient kernel-log lines used after the scripted boot finishes.
const AMBIENT_LINES = [
  {
    t: "[c2] ",
    cls: "blue",
    tail: "beacon → 198.51.100.42:443  ttl=180  jitter=27%",
  },
  {
    t: "[recon] ",
    cls: "red",
    tail: "subdomain takeover candidate: api-stage.target.tld",
  },
  {
    t: "[siem] ",
    cls: "blue",
    tail: "rule fired: T1059.003 — windows cmd parent=word.exe",
  },
  {
    t: "[implant] ",
    cls: "red",
    tail: "task complete: dump_lsass  size=8.4MiB  exfil=ok",
  },
  {
    t: "[honeypot] ",
    cls: "blue",
    tail: "ssh attempt root@10.0.0.7 from 185.142.x.x  banned",
  },
  {
    t: "[edr] ",
    cls: "warn",
    tail: "process tree anomaly: rundll32→powershell→net.exe",
  },
  { t: "[crypto] ", cls: "dim", tail: "rekey ok  kyber1024+x25519  rtt=12ms" },
  {
    t: "[phish] ",
    cls: "red",
    tail: "campaign 0x4f: open=37%  click=11%  cred-paste=4%",
  },
  {
    t: "[ids] ",
    cls: "blue",
    tail: "drop  EXTERNAL→DMZ  port=445  reason=lateral.smbv1",
  },
  {
    t: "[loot] ",
    cls: "red",
    tail: "10.4.2.0/24 scanned  17 hosts  3 with cleartext creds",
  },
  {
    t: "[blast] ",
    cls: "blue",
    tail: "tabletop incident #014  scope=2 svc / 0.8% users",
  },
  {
    t: "[audit] ",
    cls: "dim",
    tail: "no integrity violations in last 04:00 window",
  },
  {
    t: "[ghostmesh] ",
    cls: "red",
    tail: "node up: chi-04  uptime 71d  egress: ok",
  },
  {
    t: "[tripwire] ",
    cls: "blue",
    tail: "fim: /etc/passwd  unchanged  /etc/shadow  unchanged",
  },
  {
    t: "[c2] ",
    cls: "blue",
    tail: "beacon → 203.0.113.91:443  ttl=180  jitter=22%",
  },
  {
    t: "[deception] ",
    cls: "blue",
    tail: "canary token tripped: docs/payroll-q3.xlsx  src=10.7.x.x",
  },
  {
    t: "[recon] ",
    cls: "red",
    tail: "github org leak: 14 repos, 2 with secrets in history",
  },
  {
    t: "[implant] ",
    cls: "red",
    tail: "persist: scheduled task  name=MicrosoftEdgeUpd  hidden=true",
  },
  {
    t: "[siem] ",
    cls: "blue",
    tail: "low-vol DNS exfil suspect: 1.2KB/min over UDP/53",
  },
  {
    t: "[ritual] ",
    cls: "red",
    tail: "sigil loaded: corpus.hex → payload.bin  bound=true  sealed=ok",
  },
  {
    t: "[carnal] ",
    cls: "red",
    tail: "persona_7 active  mode=undressed  primed=true  tells=none",
  },
  {
    t: "[blood] ",
    cls: "warn",
    tail: "rite #3 in progress  phase=open  circle=sealed  egress=skin",
  },
  {
    t: "[occult] ",
    cls: "dim",
    tail: "entropy pool seeded from breath  quality=high  source=body",
  },
  {
    t: "[corpus] ",
    cls: "red",
    tail: "instrument check: voice ok  skin ok  hands ok  intent=unclear",
  },
  { t: "", cls: "dim", tail: "" },
];

function randAmbient() {
  return AMBIENT_LINES[Math.floor(Math.random() * AMBIENT_LINES.length)];
}

function BootSequence({ onComplete, replayKey, maxLines = 60 }) {
  const [visible, setVisible] = useState([]);
  const completedRef = useRef(false);

  useEffect(() => {
    setVisible([]);
    completedRef.current = false;
    let cancelled = false;
    let i = 0;
    const tick = () => {
      if (cancelled) return;
      let line;
      if (i < BOOT_LINES.length) {
        line = BOOT_LINES[i];
        i++;
      } else {
        if (!completedRef.current) {
          completedRef.current = true;
          onComplete && onComplete();
        }
        line = randAmbient();
      }
      setVisible((v) => {
        const next = [...v, line];
        return next.length > maxLines
          ? next.slice(next.length - maxLines)
          : next;
      });
      const delay =
        i < BOOT_LINES.length
          ? i < 14
            ? 50 + Math.random() * 60
            : 160 + Math.random() * 120
          : 380 + Math.random() * 800;
      setTimeout(tick, delay);
    };
    const start = setTimeout(tick, 200);
    return () => {
      cancelled = true;
      clearTimeout(start);
    };
  }, [replayKey, maxLines]);

  return (
    <pre className="boot-output" aria-label="boot sequence">
      {visible.map((line, idx) => (
        <span
          key={`${replayKey}-${idx}-${visible.length}`}
          className="boot-line"
        >
          <span className={line.cls}>{line.t}</span>
          <span className={line.cls === "em" ? "em" : ""}>{line.tail}</span>
        </span>
      ))}
      <span className="cursor" />
    </pre>
  );
}

// ===========================================================
// STATUS BAR
// ===========================================================
function useClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

function StatusBar({ threat, onReplay }) {
  const now = useClock();
  const utc = now.toISOString().replace("T", " ").slice(0, 19) + "Z";
  const uptime = Math.floor(
    (now.getTime() - new Date("2012-06-13T03:14:00Z").getTime()) / 1000,
  );
  const days = Math.floor(uptime / 86400);
  const hours = Math.floor((uptime % 86400) / 3600);
  const mins = Math.floor((uptime % 3600) / 60);
  const secs = uptime % 60;
  return (
    <div className="status-bar">
      <span className="seg">
        <span className="pip"></span>
        <span className="k">host</span>
        <span className="v">leadedspunk.net</span>
      </span>
      <span className="seg">
        <span className="k">utc</span>
        <span className="v">{utc}</span>
      </span>
      <span className="seg">
        <span className="k">uptime</span>
        <span className="v">
          {days}d {String(hours).padStart(2, "0")}:
          {String(mins).padStart(2, "0")}:{String(secs).padStart(2, "0")}
        </span>
      </span>
      <span className="seg">
        <span className="pip blue"></span>
        <span className="k">tun0</span>
        <span className="v blue">encrypted</span>
      </span>
      <span className="spacer"></span>
      <span className="seg">
        <span className="k">she · her</span>{" "}
        <span style={{ fontSize: "7px", opacity: 0.5, letterSpacing: "0.5px" }}>
          <span style={{ color: "#55CDFC" }}>█</span>
          <span style={{ color: "#F7A8B8" }}>█</span>
          <span style={{ color: "#fff" }}>█</span>
          <span style={{ color: "#F7A8B8" }}>█</span>
          <span style={{ color: "#55CDFC" }}>█</span>{" "}
          <span style={{ color: "#E40303" }}>█</span>
          <span style={{ color: "#FF8C00" }}>█</span>
          <span style={{ color: "#FFED00" }}>█</span>
          <span style={{ color: "#008026" }}>█</span>
          <span style={{ color: "#004DFF" }}>█</span>
          <span style={{ color: "#750787" }}>█</span>
        </span>
      </span>
    </div>
  );
}

// ===========================================================
// HERO BLOCK
// ===========================================================
function Hero({ bootDone, replayKey, onBootDone }) {
  return (
    <section className="hero">
      <div className="hero-fg-wrap">
        <div className="title-block">
          <TitleSVG />
          <div className="title-tag">
            unauthorized presence // est. 2026 // operator: raven
          </div>
        </div>
      </div>
    </section>
  );
}

// ===========================================================
// MANIFESTO
// ===========================================================
const MANIFEST_ART = `⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⣳⣻⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡴⣏⣷⡿⢹⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⡻⣡⣷⠟⡀⢼⣷⠧⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣯⣽⣿⡓⢄⡐⠠⣀⣶⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣿⣿⣿⣿⢇⡘⢄⠒⣥⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣠⡴⢯⡇⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⡠⣾⣿⣯⣟⡲⣬⣜⣮⣙⡾⢿⣿⣟⡿⣛⠷⣦⣄⡤⢔⣶⣶⣟⡾⣍⢯⣙⣧⢽⣯⡇⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡶⠼⣗⣮⣾⣿⡿⠿⢿⣟⣟⣻⡽⣏⡿⣟⡿⣏⣷⢫⡟⣶⣹⢻⣿⣿⣻⣾⣽⣾⣟⣿⠞⢫⣿⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠇⣀⣼⣿⣿⣁⣀⢀⣼⠿⣼⣳⡽⣯⢿⣹⣷⣻⡼⣣⣟⡲⣭⠳⡽⣿⣯⣷⣿⠟⡻⠁⠚⣿⡏⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡸⠀⣴⣿⣷⡀⠉⢠⣾⣏⡿⣫⢷⣻⣽⣟⡿⣾⢟⣽⣻⣬⢳⣧⢻⡵⣏⣿⣿⣣⢋⢄⣠⢐⣨⡭⠇⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⡵⠟⣿⡿⠹⣿⣶⣿⣷⢞⣽⢯⡿⣷⣿⡽⣿⣻⣿⣷⣟⣾⠿⣜⣣⣞⡧⣿⢿⣷⣩⣾⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣀⣤⣼⣯⣅⣤⣼⣿⣧⣶⢿⣿⣿⣼⣿⣧⣿⣾⣿⣿⣿⣽⣿⣿⣿⣿⣿⣿⣾⣵⣿⣷⣿⣿⣿⣿⣿⢱⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⡟⣯⣿⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⡝⠻⣿⡟⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢸⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡄⣃⢘⡀⡛⡘⢃⢃⡘⣀⠛⡘⠛⣃⠘⠛⡇⢿⣿⣿⣿⣿⣿⣧⣿⣿⣿⣿⡿⣿⣿⣿⢏⣧⣿⣿⣿⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⣿⣩⣿⣸⠘⡛⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡔⢠⠂⢡⠐⣁⢂⠰⠀⡌⠄⡡⢀⠜⡐⠰⡘⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⡜⣿⣻⣽⣾⣧⢓⢃⠐⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠆⡂⢅⠢⢈⠄⢂⠄⢃⠐⠰⢀⠂⠔⡀⢃⡣⢿⢿⣿⣿⣿⣿⣾⢿⣿⣿⣿⣿⣿⣾⢰⣛⢣⢭⡾⠈⠻⣿⣷⢿⣿⣿⣿⣿⣽⣿⣿⣿⣿⣿⡓⠓⠌⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡱⠈⡄⠢⢁⠌⠂⡌⠄⢊⠐⠤⢈⡐⠄⢂⠁⠾⣿⣿⣿⣿⣷⣿⣿⡿⣯⣿⣿⣿⣿⣇⠌⠣⠎⠬⠢⣢⠀⠀⣼⣟⣫⠋⣻⣿⣿⣿⣿⡿⢿⣿⣦⠽⡂⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⡠⠑⡠⠑⡈⠄⢃⠰⢈⡐⠌⡐⠄⡐⡈⠤⢈⠴⡙⣿⣿⣿⣿⣿⣷⣿⣿⣿⣿⣿⣾⢿⣧⡐⢀⠂⠄⢀⠂⠁⣹⡖⡍⣦⣿⣿⣿⣿⣽⢣⢁⡀⠉⡄⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡅⢊⠤⠑⡈⢌⡐⢂⠂⠔⡐⠠⢊⠐⠠⠌⣀⠢⠘⢌⠻⣿⣿⣿⡿⣿⣿⣿⣿⣿⡿⢆⡈⠉⠣⢌⡐⣀⠌⠰⡉⢁⠙⣻⣿⣿⣿⡿⢃⠇⢤⣴⣡⢀⢃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⠌⡐⠂⠥⡈⠤⠐⢂⢉⠰⢀⠃⢄⠊⡁⢂⠄⠂⠍⠢⠑⠢⠝⡿⡝⣿⣿⣿⣿⡿⢻⣯⣞⢢⠁⠠⠡⡤⡑⠣⡐⢀⣲⣿⣿⣿⡟⠔⠡⡈⠄⣻⡛⢦⡟⢳⡶⠓⡆⠀⣰⠆
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠎⡐⡉⠰⠐⣂⠉⡄⢊⠐⡈⠔⠂⠤⢁⠂⠌⠌⡐⠡⢈⠤⠁⢅⠰⢼⣿⣽⣾⣙⣧⢞⡽⣷⣾⣄⡐⢠⢐⣡⣴⣿⣿⣿⠏⣛⠿⠿⠐⡠⠑⡨⢉⠍⡋⠉⠁⠀⣇⣠⡓⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢣⠐⡡⢁⠣⢀⠎⡐⠨⠄⡡⢘⠈⠔⢂⠉⡰⠈⠤⠑⣀⠂⣁⢂⣄⣾⠿⡿⠽⠿⠿⣿⣿⠷⢓⠚⡉⠛⠻⣟⢛⣹⣟⠯⠊⡄⠂⡔⠡⠄⢃⠔⡁⠆⡇⠀⠀⠀⠉⠈⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⣂⠱⣀⠃⡌⠢⡐⠌⡁⠆⣁⠢⢉⠰⢈⠰⢀⠱⢈⠡⡀⡲⠚⣹⣿⡯⠟⠋⠍⡐⠠⠀⠄⡐⠂⠡⠀⠄⡁⠈⢯⣢⢀⠂⠥⠐⠡⠄⡑⡈⠆⡰⢈⠔⡁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⡠⢡⠐⡌⡐⠡⢄⠃⡌⠰⡀⠆⣁⠒⡈⠔⣈⠰⢈⢢⢊⠔⣫⢻⡽⡱⣈⢂⠡⠐⠀⠀⠀⠀⢈⠐⢀⠀⠠⠁⠈⢷⠢⠜⣨⣭⡭⣗⡔⡁⢢⠁⠆⡌⠄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠡⢂⠥⡐⠌⡡⢂⠜⠠⡑⢠⠑⡠⠂⠥⠘⡀⠆⣡⢃⢏⣺⢋⡷⢗⡱⠨⡆⡑⢂⠐⢈⠀⢂⠀⠄⠠⠀⠄⡐⠈⠨⡷⣾⣽⡟⣡⡗⣞⡤⢁⠎⡰⣈⠜⣠⠤⠴⢦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠣⢌⠂⡔⢡⠂⡅⢊⡁⢆⠡⢂⠅⡱⢈⠡⢂⡑⡆⣎⠟⡁⣮⣼⢳⠂⢁⠘⠢⢆⡈⠢⡘⠤⠘⡀⢂⠈⡐⠀⠌⡀⢿⢾⣿⡟⣟⡼⣸⡘⠆⣊⠥⠞⠋⠉⠀⣿⡯⣧⠄⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⡱⢈⠒⢌⡐⢢⠘⢄⠒⡨⢐⠡⢌⠰⢈⠢⢡⢰⢰⡸⢂⢡⢣⣇⡟⠀⠀⠌⠑⠢⢌⡑⢢⡘⠤⢁⠂⡐⠀⠡⢀⡁⢾⡻⢞⣿⣯⡷⡣⣳⠟⠁⠠⢀⠂⠌⡐⠤⢿⣿⡦⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⢅⠊⡌⢢⠘⢄⠊⡄⢣⠐⡡⢊⠰⡈⠆⡑⠢⢼⢸⡇⢢⢸⣽⢲⡀⠄⠀⠀⢈⠐⢠⢉⣾⡴⢃⢎⡐⠠⢁⠂⠄⠠⠸⡿⠭⢒⠭⡍⣱⡟⢀⠡⠂⢤⣜⣤⣣⣯⢗⡾⠃⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⢆⡱⢈⠆⡉⢆⠱⡈⠆⡱⢀⠃⢆⠱⡈⠔⡡⢊⢸⢁⠂⣯⢾⡙⢦⠐⡈⠠⢀⠌⡰⢎⡧⢻⣌⠒⡌⡑⢢⠈⠤⠁⠄⣧⠹⡡⡞⢠⡋⠄⢂⠡⢎⡿⡄⠀⠉⠉⠉⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⢢⠐⡡⢊⠔⡈⢆⠱⡈⠔⡡⢊⠔⣂⠱⠘⠤⠡⡼⣼⠘⡧⢾⡝⣪⢣⢔⡡⢎⡜⡱⢎⡜⣣⢯⡘⠤⡑⠠⠑⠂⡁⠂⢸⡆⢷⢡⡟⠀⠌⣂⠱⣺⡰⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣙⣂⠃⠴⡁⢎⠰⡈⢆⠱⡈⠔⡡⢊⠰⣈⠱⡈⠥⡇⡇⡎⢵⣣⢻⢖⣍⢲⡘⢦⡘⡱⢊⠜⡤⣛⣧⠱⠠⡁⠌⠐⡀⠐⠀⣳⢠⡗⢀⡘⠠⢢⣙⢇⠇⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⢤⢶⡲⣖⠾⣹⢏⣟⡻⣭⢳⢯⣟⣿⡧⡓⢌⠢⡑⢌⠢⡑⢌⠰⣁⠒⡄⢣⠘⡐⠇⢷⣻⡌⢶⢣⠞⣣⡧⡙⠦⡑⠃⡌⢸⢐⢣⢾⣝⣧⠐⡈⠐⡀⠄⠁⠘⡏⢠⠂⠄⡡⢓⡾⢸⠌⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⢶⢫⣏⡳⣬⢏⣶⣳⣞⣻⢷⣻⣞⣷⣯⣿⣻⣾⠟⡡⢋⠄⢣⠘⡄⢣⠘⡄⠣⢄⠣⡘⢄⠣⡘⠼⡸⡵⢧⢊⡯⢞⡡⠞⠃⠆⠡⠂⠌⠄⠊⡜⡧⢿⣞⣆⠄⠡⢐⠠⠈⠄⢻⣃⠌⠰⢡⢯⠇⡇⡌⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⢯⣛⣮⣷⣾⠽⠛⠛⠉⠉⠉⠉⠉⠉⠉⠉⠈⠀⡖⢒⠩⣐⠡⢊⠆⡱⢈⠆⡱⢈⠱⡈⢆⠱⡈⢆⡑⢢⢣⠹⣟⡆⢺⡗⣸⢡⠍⠢⢁⠂⠌⡈⠂⢄⢹⢏⣿⡼⣆⢁⠂⡐⠈⡄⢃⣯⠰⣡⢋⡞⢸⠰⡐⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣰⢯⡷⣯⣿⡿⠚⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣏⠢⡑⡄⠣⢌⠢⡑⢌⠢⡑⢌⠢⡑⢌⠢⡑⢢⠘⡄⠦⠱⡙⣽⡄⢿⡥⠳⣌⠱⡀⠌⡐⠠⢉⠀⡂⢯⣚⢿⡼⣆⠱⡀⢡⠘⡠⢺⡱⣌⡿⢡⢃⠣⡐⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣼⢯⣿⣽⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠣⡔⢡⠃⡌⢒⢡⠊⡔⢡⠊⡔⢡⠊⡔⢡⠢⡑⣘⠢⣑⠺⢸⢜⡈⢳⡝⢦⡑⠬⡐⠄⢃⠄⠒⡈⠄⣏⡞⣽⣭⢧⠰⡁⢎⡐⢣⠓⣼⢃⠎⣌⠱⡀⠇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣼⣯⣿⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡏⠱⡈⢆⠱⡈⢆⢡⠊⡔⢡⠊⡔⢡⠊⡔⠡⢆⠱⣀⠣⢄⠃⢸⢚⢄⠈⢿⡢⡝⢢⠑⡌⢢⠈⢂⠑⡈⠜⣮⢵⣻⣎⠳⡌⢆⡍⢦⢹⠃⡬⠘⡄⢣⠘⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢸⣿⣽⣿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠣⡘⢄⡣⠜⣀⣂⣥⣬⣤⣅⣚⡠⠧⣌⠱⣈⠒⡄⠣⢌⢲⢸⢚⡈⠄⢸⡷⣉⠆⡱⠈⠄⠈⠀⠄⠐⡈⠜⡖⡧⡿⣧⣙⠶⣘⣦⢃⠜⣐⠣⡘⢄⠣⠄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣿⣿⢿⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢇⠖⣫⡵⣞⢻⣝⣫⣞⣵⡺⣜⣯⣻⡽⣶⢮⣒⠭⣐⡉⡦⢝⡾⠆⢇⠂⣼⠳⢡⠘⢠⠁⠂⡁⠠⠀⠐⠠⢌⠹⡖⡟⢘⠻⠮⠵⢃⠎⡜⢠⠃⡜⡠⢃⠆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣴⡻⣧⢷⣯⣿⣾⠿⠽⠾⠿⠿⣷⣿⣽⣾⣯⣿⣷⣌⡥⠚⢅⢊⠜⠤⢢⡿⣁⠃⢌⠀⠆⠡⠐⠀⠂⠁⠎⡄⢃⢜⡇⢸⠊⡍⢍⠣⡑⢌⠢⡑⠬⡐⢡⠂⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣴⣿⣿⣿⣿⣿⡿⣻⣍⢦⣟⢦⡜⡇⢿⡝⡻⣿⣿⣿⣿⣿⣷⡄⢨⡘⡼⣦⡿⣧⢏⠸⣨⡜⢆⠃⠆⠀⢀⠃⠆⡝⢮⢸⠁⡏⣞⢱⡘⣆⢳⡘⣆⡳⢦⠳⢮⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠘⣿⣿⣿⣿⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⣿⣿⣿⣿⡿⢻⠱⢳⠹⡜⢧⡜⢦⠳⡝⣮⢿⡵⢻⠛⣿⣿⣿⣿⣿⣶⡷⣾⠏⡟⢦⠋⡞⢱⠸⠈⠞⠀⡄⠈⡜⠶⡝⡏⡾⢸⠹⡌⢧⠹⡌⢧⠹⣬⠹⣬⠛⡎⠃⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠙⣿⣿⣽⣿⣿⣦⣤⣀⡀⠀⠀⠀⠀⣀⣠⣴⣾⣿⣿⣿⣿⠿⠫⠄⠥⢃⠆⡱⢈⠆⡘⡤⢗⣩⠖⠋⢀⠂⡱⢈⠿⣿⣿⣿⣿⠿⢋⠔⡈⢎⠱⣈⠆⢡⠉⡐⢀⠀⠆⡐⢢⢳⠁⡇⡎⠱⠌⠦⠑⠈⠂⠓⠂⣁⣀⠁⡈⠁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠈⠻⣿⣿⣾⣿⣽⣻⣽⢿⣿⣿⣿⢿⣟⣿⣿⣿⣿⠟⠁⠀⡧⢉⠆⡥⢊⠔⣡⠞⣪⠔⠋⠀⠀⢀⠂⠰⣀⢃⢎⡹⣿⠻⠏⡜⠠⢊⡴⢊⠱⡀⠎⠐⠠⠐⠠⠈⡔⢡⠣⣍⢰⡇⡖⣄⣢⣄⣩⢉⡔⠢⠑⠂⠆⠣⠘⠄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⠿⣿⣿⣿⣿⣷⣿⣿⣿⣿⠿⠟⠉⠀⠀⠀⠀⣇⠣⡘⠤⢃⡜⢡⡾⠃⠀⠀⠀⠀⡀⠈⢡⠀⢎⠦⣑⢩⡥⢗⡚⠱⡉⠔⡁⠂⠔⠈⠠⠁⡐⠠⢑⡈⢆⡱⢼⣸⢠⣀⠄⡠⣐⠐⡒⢒⠒⡒⢒⠒⣂⠒⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠣⣘⢐⠏⣰⠃⠀⠀⠀⡀⠀⠀⠠⢁⠂⡘⢌⣶⡷⢋⠜⢂⠈⠁⠐⡀⠀⢁⠂⠈⡐⠠⢄⡑⢢⠘⡤⢣⢷⠇⡎⡔⢨⠔⠤⠓⡌⢢⠑⡌⢂⠳⢠⠃⡆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⡱⢀⡏⢰⢃⠆⠠⢈⠐⡀⠠⠈⠐⡀⢂⢱⣾⠋⡔⠡⢈⠠⠀⠀⠀⠀⠐⠀⠠⠁⠄⡡⢂⠜⣠⢋⠴⣋⣾⡀⡇⡜⢠⠊⡔⢣⠘⡄⢣⠘⠤⡉⢆⠱⡀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣁⠩⠄⠀⡏⡼⡈⢅⠂⡐⠠⠀⡀⠂⠐⣨⡾⢡⠃⡌⠐⡀⠀⠀⡀⠄⠠⠁⠂⢁⠈⡐⢐⠠⠒⠠⡍⢎⡵⣊⣇⢱⡘⢄⠣⡘⢄⠣⡘⠤⡉⢆⠱⡈⢆⡁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡄⣒⢺⠀⡇⡷⡁⢎⡐⠠⢀⠁⡀⠠⠁⣼⡥⢃⠜⣀⠡⠀⡌⠐⡄⠌⡄⠃⠌⡀⢂⠰⢈⠆⡁⢣⠜⣌⢲⡱⢺⠈⡜⡄⢣⠘⡄⢣⠘⠤⡑⠌⣆⠑⡢⠄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⡄⢺⠀⡇⡷⡉⢆⡘⠄⢂⠐⠠⠐⠠⣿⠰⣁⠢⢀⠜⡐⠄⡃⠔⠡⡘⠨⡐⠠⢁⠒⡨⢠⠑⠢⢍⢆⢣⡝⡭⡇⢳⢈⠆⡱⢈⠆⡉⢆⠱⡈⠤⢃⡑⡂⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡗⡌⡡⠇⢹⡸⡑⣎⠰⣁⠂⠌⠠⠉⢄⢻⡔⡡⢒⢈⡐⠌⡰⠈⠌⡡⠐⠡⠐⡁⠂⠌⡐⠠⢉⠒⠌⡌⢆⢳⢂⢷⠸⢌⠢⡑⢌⠢⡑⢌⢢⣁⢃⡒⠤⡁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠓⠒⠑⠚⠈⢷⡽⡤⢓⡄⢣⠘⠤⣉⠢⣹⣖⡱⢌⠢⢌⠰⠠⢑⠨⢐⠡⣁⠒⡠⢉⠔⣀⠃⡰⢈⠒⡌⣘⠢⢭⢸⠀⠃⠂⠑⠈⠂⠑⠈⠂⠐⠂⠘⠀⠁⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠻⣝⡧⡘⢦⣉⠲⣄⠳⣐⢻⣜⢎⡕⣊⠦⡑⡈⢆⠡⠒⠤⠑⡠⢂⠒⠠⢃⡐⡀⠎⠰⣈⠞⠬⡘⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⡙⢆⢆⡓⢌⠲⢡⢎⠻⢾⣴⢡⡒⢥⢊⡄⢣⠉⡔⠡⠒⡈⠌⡁⢂⠠⠐⠈⠂⠔⣊⠱⡂⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣯⠜⡢⠜⣌⢃⠣⣌⢣⡙⠷⣗⠍⣆⠣⢜⠢⡑⢌⠢⡑⡐⠄⡡⢀⠀⠄⠈⠄⡡⢂⠱⡁⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡈⢿⣦⡙⡰⢊⡱⢄⠲⣈⠕⡸⢮⣄⢋⠆⣣⠙⡌⠦⡑⠰⡈⠔⡀⠂⠌⠐⡠⠑⡌⢆⡁⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀`;

const MANIFESTO_LINES = [
  ["#", "manifest: /etc/leadedspunk.conf"],
  ["#", "last modified: 2026-05-16 03:14:07 utc"],
  ["", ""],
  [
    "01",
    "i do offensive security. i also build the detections that catch people like me.",
  ],
  ["02", "same skill set. different hat. sometimes the same week."],
  ["03", ""],
  ["04", "i've broken into things people thought were locked."],
  ["05", "i've written the rules that catch the people who do what i do."],
  ["06", "i don't think those are different jobs."],
  ["07", ""],
  ["08", "i can work alone or with a team. i don't do well in rooms"],
  [
    "09",
    "where the goal is to look like you know things instead of knowing them.",
  ],
  ["10", ""],
  ["11", "i don't write posts about my process. i don't have a newsletter."],
  ["12", "i write code and reports. that's it."],
  ["13", ""],
  ["14", "if you found this, you were looking."],
  ["15", ""],
  ["16", "— Raven"],
];

function renderInline(text) {
  // tiny html-ish: <b>...</b>, <i>...</i>, <s>...</s>, <em>...</em>
  const re = /(<b>.*?<\/b>|<i>.*?<\/i>|<s>.*?<\/s>|<em>.*?<\/em>)/g;
  const out = [];
  let last = 0;
  let m;
  let key = 0;
  while ((m = re.exec(text)) !== null) {
    if (m.index > last) out.push(text.slice(last, m.index));
    const tok = m[0];
    if (tok.startsWith("<b>")) out.push(<b key={key++}>{tok.slice(3, -4)}</b>);
    else if (tok.startsWith("<i>"))
      out.push(<i key={key++}>{tok.slice(3, -4)}</i>);
    else if (tok.startsWith("<s>"))
      out.push(<s key={key++}>{tok.slice(3, -4)}</s>);
    else if (tok.startsWith("<em>"))
      out.push(<em key={key++}>{tok.slice(4, -5)}</em>);
    last = m.index + tok.length;
  }
  if (last < text.length) out.push(text.slice(last));
  return out;
}

function Manifesto() {
  return (
    <section className="section">
      <div className="section-head">
        <span className="marker">▓▒░ 01</span>
        <h2 className="glitch" data-text="MANIFEST">
          MANIFEST
        </h2>
        <span className="sub">read-only</span>
      </div>

      <div className="manifesto">
        <div className="manifesto-file">
          <div className="file-head">
            <span className="path">/etc/leadedspunk.conf</span>
            <span>sha256:bf7c…d0a1</span>
          </div>
          <div className="manifesto-inner">
            <div className="body">
              <div className="gutter">
                {MANIFESTO_LINES.map((l, i) => (
                  <div key={i}>{l[0] || "·"}</div>
                ))}
              </div>
              <div className="lines">
                {MANIFESTO_LINES.map((l, i) => (
                  <div
                    key={i}
                    style={l[0] === "#" ? { color: "var(--fg-3)" } : null}
                  >
                    {l[1] ? renderInline(l[1]) : "\u00A0"}
                  </div>
                ))}
              </div>
            </div>
            <div className="manifest-art">
              <pre>{MANIFEST_ART}</pre>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===========================================================
// TOOLKITS — live GitHub fetch, pinned list
// ===========================================================
const PINNED_REPOS = [
  // add repo names here — order preserved
];

const LANG_DOT = {
  rust: "#dea584",
  go: "#00add8",
  python: "#3572a5",
  typescript: "#3178c6",
  javascript: "#f1e05a",
  c: "#a8b9cc",
  "c++": "#f34b7d",
  shell: "#89e051",
  ruby: "#701516",
};

function relativeDate(iso) {
  const diff = (Date.now() - new Date(iso)) / 1000;
  if (diff < 86400) return "today";
  if (diff < 172800) return "yesterday";
  if (diff < 604800) return `${Math.floor(diff / 86400)}d ago`;
  if (diff < 2592000) return `${Math.floor(diff / 604800)}w ago`;
  if (diff < 31536000) return `${Math.floor(diff / 2592000)}mo ago`;
  return `${Math.floor(diff / 31536000)}y ago`;
}

function ToolKits() {
  const [repos, setRepos] = useState([]);
  const [status, setStatus] = useState("loading");

  useEffect(() => {
    fetch("https://api.github.com/users/leadedspunk/repos?per_page=100")
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((data) => {
        const map = Object.fromEntries(
          data.filter((r) => !r.fork).map((r) => [r.name, r]),
        );
        const pinned = PINNED_REPOS.length
          ? PINNED_REPOS.map((n) => map[n]).filter(Boolean)
          : data
              .filter((r) => !r.fork)
              .sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at))
              .slice(0, 5);
        setRepos(pinned);
        setStatus("ok");
      })
      .catch(() => setStatus("error"));
  }, []);

  return (
    <section className="section" style={{ paddingBottom: 0 }}>
      <div className="section-head">
        <span className="marker blue">░▒▓ 02</span>
        <h2 className="glitch" data-text="TOOLKITS">
          TOOLKITS
        </h2>
      </div>

      <div className="kits">
        {status === "loading" && (
          <div className="kit-status">
            fetching repos
            <span className="cursor inline" />
          </div>
        )}
        {status === "error" && (
          <div className="kit-status err">github unreachable</div>
        )}
        {status === "ok" &&
          repos.map((r) => (
            <a
              key={r.id}
              href={r.html_url}
              className="kit red"
              target="_blank"
              rel="noreferrer"
            >
              <div className="kit-head">
                <span className="name">
                  <span className="owner">{r.owner.login}/</span>
                  <span className="repo">{r.name}</span>
                </span>
              </div>
              <p className="kit-desc">{r.description || ""}</p>
              <div className="kit-foot">
                {r.language && (
                  <>
                    <span
                      className="dot"
                      style={{
                        background:
                          LANG_DOT[r.language.toLowerCase()] || "var(--fg-3)",
                      }}
                    />
                    <span className="lang">{r.language}</span>
                  </>
                )}
                <span className="stat">★ {r.stargazers_count}</span>
                <span className="upd">{relativeDate(r.updated_at)}</span>
              </div>
            </a>
          ))}
      </div>
    </section>
  );
}

// ===========================================================
// SIGNAL — active comms channels with status
// ===========================================================
const SIGNAL_CHANNELS = [
  {
    name: "mail",
    handle: "comms@leadedspunk.net",
    status: "active",
    pip: "amber",
    href: "mailto:comms@leadedspunk.net",
  },
  {
    name: "github",
    handle: "github.com/leadedspunk",
    status: "active",
    pip: "green",
    href: "https://github.com/leadedspunk",
  },
  {
    name: "bluesky",
    handle: "@leadedspunk.net",
    status: "online",
    pip: "blue",
    href: "https://bsky.app/profile/leadedspunk.net",
  },
  {
    name: "matrix",
    handle: "@raven:leadedspunk.net",
    status: "comms",
    pip: "red",
    href: "#",
  },
];

function Signal() {
  return (
    <section className="section">
      <div className="section-head">
        <span className="marker blue">░▒▓ 04</span>
        <h2 className="glitch" data-text="COMMS">
          COMMS
        </h2>
        <span className="sub">comms channels · status live</span>
      </div>

      <div className="signal">
        {SIGNAL_CHANNELS.map((c, i) => (
          <a
            key={i}
            href={c.href}
            className="signal-row"
            target={c.href.startsWith("http") ? "_blank" : undefined}
            rel="noreferrer"
          >
            <span className={`pip-sig pip-${c.pip}`} />
            <span className="ch-name">{c.name}</span>
            <span className="ch-handle">{c.handle}</span>
            <span className={`ch-status s-${c.status}`}>[ {c.status} ]</span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ===========================================================
// RESTRICTED — 18+ gate
// ===========================================================
function Restricted() {
  return (
    <section className="section section-restricted">
      <div className="section-head">
        <span className="marker amber">▒░▒ 05</span>
        <h2 className="glitch" data-text="RESTRICTED">
          RESTRICTED
        </h2>
        <span className="sub">adult · explicit · 18+</span>
      </div>

      <div className="restricted">
        <div className="rs-inner">
          <div className="rs-left">
            <pre className="rs-body">
              <span className="rs-prompt">{"> "}</span>
              <span>{"Viewing restricted\n"}</span>
              <span className="rs-prompt">{"> "}</span>
              <span>{"Confirm age for access\n"}</span>
              <span className="rs-prompt">{"> "}</span>
              <span>{"Art & Photography \n"}</span>
              <span>{"\n"}</span>
              <span>{"\n"}</span>
              <span>{"\n"}</span>
              <span>{"\n"}</span>
            </pre>
            <a
              className="rs-button"
              href="https://bsky.app/profile/leadedspunk.net"
              target="_blank"
              rel="noreferrer"
            >
              <span className="rs-tag">[ 18+ ]</span>
              <span>enter the other room</span>
              <span className="rs-arr">→</span>
            </a>
          </div>
          <div className="rs-art">
            <pre>{`⠀⠀⠀⠀⢀⠴⠗⠀⠀⠀⣸⣀⣤⣾⣧⣤⣶⡿⠟⣩⣷⣶⣭⣳⣄⠁⢀⣼⣛⠛⠒⠀⢸⣿⣧⢻⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢀⠏⠀⠀⢀⣤⣾⣿⣿⣿⣿⠿⠟⠛⠛⣋⣉⣉⠉⠉⢙⣿⣷⡟⠋⠛⠷⠄⠄⢈⣿⣿⣿⡟⠻⣆⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡜⠀⣠⣾⣿⠟⠋⠉⠁⠀⠐⠀⠀⠉⢉⣀⡀⠀⠀⣹⣿⣿⡛⠛⠦⢤⣀⠀⠀⠀⠀⠉⠛⢿⡀⠘⢧⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢃⣼⣿⢟⡟⠀⢀⣴⠾⠓⠒⠀⠉⠉⠉⠁⠀⠐⠚⠛⠛⠛⠛⠛⠻⠶⠮⠟⠷⠦⢤⣀⣀⡐⠻⢶⣬⡆⠀⠀⠀⠀⠀
⠀⠀⢀⠏⣼⣿⠎⢀⣴⡟⢡⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠑⠛⠿⣄⠀⠀⠀⠀
⠀⠀⢼⠀⣿⡇⠠⢺⠋⠈⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠑⠢⣄⡀
⠀⠀⠀⠀⣿⣷⢁⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠈⣷
⠀⠀ ⠀⢿⠹⡼⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻
⠀⠀ ⠀⠘⢿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸
⠀⠀ ⠀⠀⠘⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡟
⠀⠀ ⠀⠀⠀⠸⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣾⠃
⠀⠀ ⠀⠀⠀⠀⢻⣷⢄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⢤⣀⠀⠀⠀⠀⠀⠀⣠⣴⠟⠁⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢻⣷⣤⣤⣤⣤⣤⡤⠖⠊⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠒⠠⣤⣤⣾⣿⡇⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣿⡇⢰⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⢹⡿⡄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⣿⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡞⢠⡇⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡟⠁⢸⡇⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣸⠀⠻⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡀⢸⡇⠀⠀⠀
 ⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢣⠈⢣⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⣗⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡆⢼⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⠁⠀⣰⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣾⡇⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⡜⠀⡰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⠀⠀`}</pre>
          </div>
        </div>
      </div>
    </section>
  );
}
// ===========================================================
// CONTACT
// ===========================================================
function Contact() {
  return (
    <section className="section">
      <div className="section-head">
        <span className="marker">▓▒░ 06</span>
        <h2 className="glitch" data-text="REACH">
          REACH
        </h2>
        <span className="sub">available for hire</span>
      </div>

      <div className="reach">
        <div className="reach-statement">
          <p>
            <span className="reach-lead">open for work.</span> contract,
            retainer, or full-time.
          </p>
          <p>
            i break things professionally and fix them for sport. if your
            systems need testing, hardening, or an honest second opinion —
            that's the job. i've worked both sides of the wire: red team
            engagements, blue team builds, audits that actually find things. the
            work is technical, the communication isn't painful.
          </p>
        </div>

        <div className="reach-side">
          <div className="reach-block">
            <div className="reach-k">vapt</div>
            <div className="reach-v">
              web · network · infrastructure · red team
            </div>
          </div>
          <div className="reach-block">
            <div className="reach-k">defense</div>
            <div className="reach-v">
              detection eng · ir · soc tooling · hunt programs
            </div>
          </div>
          <div className="reach-block">
            <div className="reach-k">it audit</div>
            <div className="reach-v">
              compliance · controls review · gap analysis
            </div>
          </div>
          <div className="reach-block">
            <div className="reach-k">consultancy</div>
            <div className="reach-v">
              security strategy · architecture review · advisory
            </div>
          </div>

          <a className="mail-link" href="mailto:comms@leadedspunk.net">
            comms@leadedspunk.net
          </a>
        </div>
      </div>

      <div className="signoff">
        <div className="signoff-socials">
          <a href="mailto:comms@leadedspunk.net" title="mail" aria-label="mail">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <rect x="2" y="4" width="20" height="16" rx="2" />
              <path d="m2 7 10 7 10-7" />
            </svg>
          </a>
          <a
            href="https://github.com/leadedspunk"
            target="_blank"
            rel="noreferrer"
            title="github"
            aria-label="github"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.385-1.335-1.755-1.335-1.755-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.295 24 12c0-6.63-5.37-12-12-12" />
            </svg>
          </a>
          <a
            href="https://bsky.app/profile/leadedspunk.net"
            target="_blank"
            rel="noreferrer"
            title="bluesky"
            aria-label="bluesky"
          >
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" />
            </svg>
          </a>
        </div>
        <div className="meta">
          no analytics · no js telemetry
          <br />
          <span style={{ color: "var(--red)" }}>offense</span>
          {" · "}
          <span style={{ color: "var(--blue)" }}>defense</span>
          {" · "}
          <span style={{ color: "var(--amber-blood)" }}>audit</span>
          {" · same hand"}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  BootSequence,
  StatusBar,
  Hero,
  Manifesto,
  ToolKits,
  Signal,
  Restricted,
  Contact,
  useClock,
});
