const { useState, useEffect } = React;

/* ── tweak defaults ───────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":   "crimson",
  "wordmark": "karl-fox",
  "kanji":    "刃",
  "beam":     "medium",
  "reticle":  true,
  "hud":      true
}/*EDITMODE-END*/;

const ACCENTS = {
  crimson:  { "--accent": "#ff3a5e", "--accent-2": "#7dd3fc" },
  cyan:     { "--accent": "#5cdcff", "--accent-2": "#c084fc" },
  magenta:  { "--accent": "#d27bff", "--accent-2": "#5cdcff" },
  toxic:    { "--accent": "#b6ff3a", "--accent-2": "#5cdcff" },
  ember:    { "--accent": "#ff8a3a", "--accent-2": "#7dd3fc" },
};

const BEAM_OPACITY = { off: 0, low: 0.45, medium: 0.85, high: 1.2 };

/* ── live clock for the corner HUD (UTC) ────────────────────────── */
function useUTCClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);
  // Render as UTC
  const f = new Intl.DateTimeFormat("en-GB", {
    timeZone: "UTC", hour12: false,
    hour: "2-digit", minute: "2-digit", second: "2-digit",
  });
  const d = new Intl.DateTimeFormat("en-GB", {
    timeZone: "UTC",
    day: "2-digit", month: "2-digit", year: "2-digit",
  });
  return { time: f.format(now) + " Z", date: d.format(now).replaceAll("/", ".") };
}

/* ── geolocation from IP ────────────────────────────────────────── */
function useGeoLocation() {
  const [geo, setGeo] = useState({ lat: "--.-°", lon: "--.-°", city: "--" });
  
  useEffect(() => {
    // Fetch geolocation from IP
    fetch("https://ipapi.co/json/")
      .then(res => res.json())
      .then(data => {
        const lat = Math.abs(data.latitude || 0).toFixed(4);
        const lon = Math.abs(data.longitude || 0).toFixed(4);
        const latDir = (data.latitude || 0) >= 0 ? "N" : "S";
        const lonDir = (data.longitude || 0) >= 0 ? "E" : "W";
        const city = data.city || "UNKNOWN";
        setGeo({
          lat: `${lat}° ${latDir}`,
          lon: `${lon}° ${lonDir}`,
          city: city.toUpperCase(),
        });
      })
      .catch(() => {
        // Fallback if geolocation fails
        setGeo({ lat: "00.0000° N", lon: "000.0000° E", city: "OFFLINE" });
      });
  }, []);
  
  return geo;
}

/* ── dynamic system status based on JST ────────────────────────── */
function useSystemStatus() {
  const [ping, setPing] = useState(14);
  
  useEffect(() => {
    const t = setInterval(() => {
      setPing(prev => Math.max(10, Math.min(45, prev + (Math.random() * 6 - 3))));
    }, 2500);
    return () => clearInterval(t);
  }, []);

  const estHour = new Date(new Date().toLocaleString("en-US", { timeZone: "America/New_York" })).getHours();
  
  let label = "ACTIVE";
  let color = "var(--good)";
  let code  = "0x01";

  if (estHour >= 0 && estHour < 8) {
    label = "DORMANT";
    color = "var(--muted)";
    code  = "0x04";
  } else if (estHour >= 18 || estHour < 9) {
    label = "MONITORING";
    color = "var(--accent-2)"; // Ice blue
    code  = "0x02";
  }

  return { 
    label, 
    color, 
    code,
    ping: `${ping.toFixed(0)}ms` 
  };
}

/* ── light beam — the kold composition ────────────────────────────── */
function LightBeam({ intensity }) {
  const op = BEAM_OPACITY[intensity] ?? BEAM_OPACITY.medium;
  if (op === 0) return null;
  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, opacity: op }}>
      {/* central column of light */}
      <div style={{
        position: "absolute",
        left: "50%", top: 0, bottom: 0,
        width: "min(900px, 70vw)",
        transform: "translateX(-50%)",
        background:
          "radial-gradient(ellipse 50% 60% at 50% 35%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%)," +
          "linear-gradient(to bottom, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 75%)",
        filter: "blur(6px)",
      }}></div>
      {/* tight god-rays */}
      <div style={{
        position: "absolute",
        left: "50%", top: "-10%", bottom: "-10%",
        width: "min(360px, 32vw)",
        transform: "translateX(-50%) rotate(0deg)",
        background:
          "linear-gradient(to bottom, color-mix(in oklab, var(--accent) 14%, transparent), transparent 80%)",
        mixBlendMode: "screen",
        maskImage: "linear-gradient(to bottom, black 10%, transparent 90%)",
      }}></div>
      <div style={{
        position: "absolute",
        left: "50%", top: 0, bottom: 0,
        width: 1,
        background: "linear-gradient(to bottom, transparent, color-mix(in oklab, var(--accent) 35%, transparent) 30%, color-mix(in oklab, var(--accent) 35%, transparent) 70%, transparent)",
        transform: "translateX(-50%)",
        opacity: 0.4,
      }}></div>
    </div>
  );
}

/* ── faint reticle watermark behind the wordmark ──────────────────── */
function ReticleWatermark() {
  return (
    <svg aria-hidden viewBox="0 0 600 600" style={{
      position: "absolute", left: "50%", top: "50%",
      width: "min(560px, 56vw)", height: "min(560px, 56vw)",
      transform: "translate(-50%, -50%)",
      opacity: 0.18, pointerEvents: "none", zIndex: 0,
    }}>
      <circle cx="300" cy="300" r="298" fill="none" stroke="var(--accent)" strokeWidth="0.8" />
      <circle cx="300" cy="300" r="220" fill="none" stroke="var(--text-2)" strokeWidth="0.6" strokeDasharray="1 5" />
      <circle cx="300" cy="300" r="140" fill="none" stroke="var(--text-2)" strokeWidth="0.5" />
      <line x1="300" y1="0" x2="300" y2="60" stroke="var(--accent)" strokeWidth="0.8" />
      <line x1="300" y1="540" x2="300" y2="600" stroke="var(--accent)" strokeWidth="0.8" />
      <line x1="0" y1="300" x2="60" y2="300" stroke="var(--accent)" strokeWidth="0.8" />
      <line x1="540" y1="300" x2="600" y2="300" stroke="var(--accent)" strokeWidth="0.8" />
      {Array.from({ length: 36 }).map((_, i) => {
        const a = (i * 360) / 36 * Math.PI / 180;
        const r1 = 298, r2 = i % 9 === 0 ? 280 : 290;
        const x1 = 300 + r1 * Math.cos(a), y1 = 300 + r1 * Math.sin(a);
        const x2 = 300 + r2 * Math.cos(a), y2 = 300 + r2 * Math.sin(a);
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--text-2)" strokeOpacity={i % 9 === 0 ? 0.9 : 0.4} strokeWidth="0.6" />;
      })}
    </svg>
  );
}

/* ── pulse dot — the i-dot of wordmark ─────────────────────────────── */
function PulseDot({ size = 14 }) {
  return (
    <span style={{ position: "relative", display: "inline-block", width: size, height: size, verticalAlign: "middle" }}>
      <span style={{
        position: "absolute", inset: 0, borderRadius: 999,
        background: "var(--accent)",
        boxShadow: "0 0 16px var(--accent), 0 0 4px var(--accent)",
        animation: "pulse 2.2s ease-in-out infinite",
      }}></span>
      <span style={{
        position: "absolute", inset: 0, borderRadius: 999,
        border: "1px solid var(--accent)",
        animation: "pulseRing 2.4s ease-out infinite",
      }}></span>
    </span>
  );
}

/* ── morphing text effect ────────────────────────────────────────────── */
function MorphingText({ fromText, toText, isMorphing, style }) {
  const [displayText, setDisplayText] = useState(fromText);
  const maxLen = Math.max(fromText.length, toText.length);
  // Curated glitch set for organic, visual corruption feel
  const glitchChars = "KARLFXOSYMBLI>!@#$%^&*_-+=~|/\\[]{}";
  
  useEffect(() => {
    if (!isMorphing) {
      setDisplayText(toText);
      return;
    }
    
    const morphDuration = 800; // ms
    const startTime = Date.now();
    
    // Pre-calculate when each character should settle (creates flowing wave)
    const settleTimes = Array.from({ length: maxLen }).map((_, i) => {
      // Earlier chars settle sooner, later chars settle later - smooth stagger
      return 200 + (i / Math.max(maxLen - 1, 1)) * 500;
    });
    
    const morphInterval = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / morphDuration, 1);
      
      let result = "";
      for (let i = 0; i < maxLen; i++) {
        const targetChar = toText[i];
        const settleTime = settleTimes[i];
        const settleWindow = 100; // 100ms window for character to resolve
        
        // Time relative to this character's settlement window
        const timeFromSettle = elapsed - settleTime;
        
        if (timeFromSettle < -settleWindow) {
          // Before settle window - full glitch chaos
          result += glitchChars[Math.floor(Math.random() * glitchChars.length)];
        } else if (timeFromSettle < settleWindow) {
          // In settle window - gradually blend from glitch to target
          // Power curve makes it feel like "resolving" smoothly
          const blendFactor = (timeFromSettle + settleWindow) / (2 * settleWindow);
          const resolveStrength = Math.pow(blendFactor, 2.5); // Eased power curve
          result += Math.random() < resolveStrength ? targetChar : glitchChars[Math.floor(Math.random() * glitchChars.length)];
        } else {
          // After settle - always target
          result += targetChar;
        }
      }
      
      setDisplayText(result);
      
      if (progress >= 1) {
        clearInterval(morphInterval);
        setDisplayText(toText);
      }
    }, 30); // ~33fps for smooth animation
    
    return () => clearInterval(morphInterval);
  }, [isMorphing, fromText, toText]);
  
  return <span style={style}>{displayText}</span>;
}

/* ── matrix rain effect ────────────────────────────────────────────── */
function MatrixRain({ isActive }) {
  const [chars, setChars] = useState([]);
  
  useEffect(() => {
    if (!isActive) {
      setChars([]);
      return;
    }
    
    // Generate random matrix-style chars
    const matrix = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
    const genChars = Array.from({ length: 12 }, (_, i) => ({
      id: i,
      char: matrix[Math.floor(Math.random() * matrix.length)],
      left: Math.random() * 80 + 10, // 10-90% left
      delay: Math.random() * 0.3, // staggered starts
      duration: 0.8 + Math.random() * 0.2, // 0.8-1.0s fall time
    }));
    setChars(genChars);
  }, [isActive]);
  
  if (!isActive) return null;
  
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden", zIndex: 10 }}>
      {chars.map((c) => (
        <div
          key={c.id}
          className="matrix-char"
          style={{
            left: `${c.left}%`,
            top: "-20px",
            animation: `matrixFall ${c.duration}s linear ${c.delay}s forwards`,
          }}
        >
          {c.char}
        </div>
      ))}
    </div>
  );
}

/* ── wordmark variants ─────────────────────────────────────────────── */
function Wordmark({ variant, kanji, isToggling, onToggle }) {
  // shared visual: huge serif, slightly tracked-in, white-on-black, with one tiny accent moment.
  const base = {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: "clamp(100px, 15vw, 220px)",
    lineHeight: 0.92,
    letterSpacing: "-0.05em",
    color: "var(--text)",
    margin: 0,
    display: "inline-flex",
    alignItems: "baseline",
    gap: 0,
    position: "relative",
  };

  if (variant === "karl-fox") {
    return (
      <div className="wordmark-toggle" onClick={onToggle} style={{ position: "relative" }}>
        <h1 style={{ 
          ...base, 
          fontFamily: "var(--font-qlorie)", 
          fontSize: "clamp(80px, 12vw, 180px)", 
          fontWeight: "bold",
          letterSpacing: "-0.02em", 
          lineHeight: 1.0,
          textTransform: "uppercase" 
        }}>
          KARL<span style={{ color: "var(--accent)" }}>FOX</span>
        </h1>
      </div>
    );
  }

  if (variant === "symbollix") {
    return (
      <div className="wordmark-toggle" onClick={onToggle} style={{ position: "relative" }}>
        <h1 style={{ 
          ...base, 
          fontFamily: "var(--font-satlyte)", 
          fontSize: "clamp(60px, 10vw, 140px)", 
          fontWeight: "normal",
          letterSpacing: "0.02em",
          lineHeight: 1.1,
          textTransform: "uppercase" 
        }}>
          <span style={{ color: "var(--accent)" }}>S</span>ymbollix
        </h1>
      </div>
    );
  }
  if (variant === "uppercase") {
    return (
      <h1 style={{ ...base, letterSpacing: "-0.02em" }}>
        SPECIAL-<span style={{ color: "var(--accent)", fontWeight: 700 }}>K</span>
      </h1>
    );
  }
  if (variant === "kanji-embed") {
    // "spec狐al-k" — the i becomes the kanji
    return (
      <h1 style={{ ...base }}>
        spec
        <span style={{
          color: "var(--accent)",
          fontFamily: "var(--font-display)",
          fontSize: "0.78em",
          margin: "0 -0.04em 0 -0.02em",
          transform: "translateY(-0.04em)",
          display: "inline-block",
          fontWeight: 900,
        }}>{kanji}</span>
        al-k
      </h1>
    );
  }
  // default: lowercase "special-k" with pulse-dot as the i-dot
  return (
    <h1 style={{ ...base }}>
      spec
      <span style={{ position: "relative", display: "inline-block" }}>
        ı
        <span style={{
          position: "absolute",
          left: "50%", top: "-0.18em",
          transform: "translateX(-50%)",
          width: "0.16em", height: "0.16em",
          borderRadius: 999,
          background: "var(--accent)",
          boxShadow: "0 0 0.4em var(--accent)",
          animation: "pulse 2.2s ease-in-out infinite",
        }}></span>
      </span>
      al-k
    </h1>
  );
}

/* ── corner HUD blocks ────────────────────────────────────────────── */
function CornerHUD({ pos, lines }) {
  const isRight = pos.includes("right");
  const isBottom = pos.includes("bottom");
  const p = {
    position: "absolute",
    [isBottom ? "bottom" : "top"]: 36,
    [isRight ? "right" : "left"]: 44,
    fontFamily: "var(--font-mono)",
    fontSize: 10,
    letterSpacing: "0.22em",
    color: "var(--muted)",
    textAlign: isRight ? "right" : "left",
    lineHeight: 1.9,
    zIndex: 5,
  };
  return (
    <div style={p}>
      {lines.map(([label, value, color], i) => (
        <div key={i} style={{ display: "flex", justifyContent: isRight ? "flex-end" : "flex-start", gap: 14 }}>
          {!isRight && <span style={{ color: "var(--muted)" }}>{label}</span>}
          <span style={{ color: color || "var(--text-2)" }}>{value}</span>
          {isRight && <span style={{ color: "var(--muted)" }}>{label}</span>}
        </div>
      ))}
    </div>
  );
}

/* ── center hero status pill ─────────────────────────────────────── */
function StatusPill({ city }) {
  const [copied, setCopied] = useState(false);
  const signal = "919.453.8267";

  const handleCopy = () => {
    navigator.clipboard.writeText(signal);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div 
      onClick={handleCopy}
      style={{
        display: "inline-flex", alignItems: "center", gap: 12,
        padding: "6px 14px",
        border: "1px solid color-mix(in oklab, var(--accent) 40%, var(--line-2))",
        borderRadius: 999,
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.2em",
        color: "var(--text-2)",
        background: "color-mix(in oklab, var(--bg) 60%, transparent)",
        backdropFilter: "blur(8px)",
        marginBottom: 24,
        cursor: "pointer",
        transition: "all 0.2s ease",
      }}
      onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--accent)"}
      onMouseLeave={(e) => e.currentTarget.style.borderColor = "color-mix(in oklab, var(--accent) 40%, var(--line-2))"}
    >
      <PulseDot size={8} />
      <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
        {copied ? (
          <span style={{ color: "var(--good)" }}>SIGNAL COPIED</span>
        ) : (
          <>
            <span style={{ color: "var(--text)" }}>CAPACITY: [■■□]</span>
            <span style={{ opacity: 0.5 }}>·</span>
            <span>{city}</span>
          </>
        )}
      </span>
    </div>
  );
}

/* ── nav links (top right) ────────────────────────────────────────── */
const NAV_LINKS = [
  ["top",         "HOME",        false],
  ["work",        "WORK",        false],
  ["biography",   "BIOGRAPHY",   false],
  ["recognition", "RECOGNITION", false],
  ["writing",     "WRITING",     false],
  ["contact",     "CONTACT",     false],
];

function TopChrome({ active, onOpen }) {
  return (
    <header style={{
      position: "absolute", top: 28, left: 32, right: 32, zIndex: 10,
      display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 16,
    }}>
      {/* branding / back to home */}
      <a 
        href="#" 
        onClick={(e) => { e.preventDefault(); onOpen(null); }}
        style={{ 
          display: "flex", alignItems: "center", gap: 10, 
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.15em",
          color: active ? "var(--accent)" : "var(--muted)",
          transition: "color 0.2s"
        }}
      >
        <span style={{ fontWeight: 600 }}>SPECIAL-K</span>
      </a>

      {/* nav */}
      <nav style={{ display: "flex", gap: 28, fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500, letterSpacing: "0.15em", color: "var(--text)", marginLeft: "auto" }}>
        {NAV_LINKS.map(([id, label, ext]) => (
          <a
            key={id}
            href={`#${id}`}
            onClick={(e) => { e.preventDefault(); onOpen(id === "top" ? null : id); }}
            style={{ 
              display: "inline-flex", alignItems: "center", gap: 4, position: "relative",
              color: active === id ? "var(--accent)" : "var(--text)",
              transition: "color 0.2s"
            }}
            onMouseEnter={(e) => { if (active !== id) e.currentTarget.style.color = "var(--accent)"; }}
            onMouseLeave={(e) => { if (active !== id) e.currentTarget.style.color = "var(--text)"; }}
          >
            {label}
            {ext && <sup style={{ fontFamily: "var(--font-mono)", fontSize: 9, marginLeft: 2 }}>↗</sup>}
          </a>
        ))}
      </nav>
    </header>
  );
}

/* ── biography section ────────────────────────────────────────────── */
function Biography() {
  return (
    <div style={{ 
      position: "relative",
      display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 32, 
      width: "100%", maxWidth: 860, margin: "0 auto",
      animation: "rise 0.8s cubic-bezier(.2,.7,.2,1) both" 
    }}>
      {/* profile image background (morphing) */}
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: "url('uploads/profile.png')",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center 20%",
        animation: "morphProfile 8s ease-in-out infinite",
        filter: "grayscale(100%) contrast(1.2) brightness(0.5) drop-shadow(0 0 30px rgba(0,0,0,0.5))",
        pointerEvents: "none",
        zIndex: -1,
        maskImage: "radial-gradient(ellipse at center, black 10%, transparent 90%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 10%, transparent 90%)",
      }} />
      <div style={{
        position: "absolute",
        inset: 0,
        backgroundImage: "url('uploads/profilesym.png')",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "center 20%",
        animation: "morphProfileAlt 8s ease-in-out infinite",
        filter: "grayscale(100%) contrast(1.2) brightness(0.5) drop-shadow(0 0 30px rgba(0,0,0,0.5))",
        pointerEvents: "none",
        zIndex: -1,
        maskImage: "radial-gradient(ellipse at center, black 10%, transparent 90%)",
        WebkitMaskImage: "radial-gradient(ellipse at center, black 10%, transparent 90%)",
      }} />
      <div>
        <h2 style={{ 
          fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500, 
          letterSpacing: "-0.04em", margin: "0 0 24px", color: "var(--text)" 
        }}>
          Bio <span style={{ fontStyle: "italic", fontWeight: 300, color: "var(--accent)" }}>//</span> Profile
        </h2>
        <div style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-2)", display: "flex", flexDirection: "column", gap: 20 }}>
          <p>
            With nearly two decades in enterprise IT, my path has evolved from traditional 
            systems architecture and perimeter defense to the deep-layer vulnerabilities 
            of frontier AI models.
          </p>
          <p>
            I specialize in the "structural" side of adversarial AI—moving beyond simple 
            jailbreaks to exploit the underlying tool-use protocols, agent orchestration 
            loops, and memory injection points that define modern agentic systems.
          </p>
          <p style={{ color: "var(--text)", fontWeight: 400 }}>
            P.S. I run strictly on <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)" }}>human_os v1.0</span>. 
            Automated connection requests go straight to <span style={{ fontFamily: "var(--font-mono)", opacity: 0.8 }}>/dev/null</span>, 
            so be sure to reach out like a real human. Coffee helps.
          </p>
        </div>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", letterSpacing: "0.2em", marginBottom: 12 }}>§ EXPERIENCE_MATRIX</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {[
              ["2026—PRES", "Red Team AI Engineer, KPMG"],
              ["2018—2026", "Staff Systems Engineer, Siemens Healthineers"],
              ["2013—2018", "Senior Systems Engineer, Siemens Healthineers"],
              ["2010—2013", "Product Quality Lead/Analyst, Hill-Rom"],
            ].map(([y, r]) => (
              <div key={y} style={{ display: "grid", gridTemplateColumns: "100px 1fr", fontSize: 13, gap: 12 }}>
                <span style={{ color: "var(--muted)", fontFamily: "var(--font-mono)" }}>{y}</span>
                <span style={{ color: "var(--text)" }}>{r}</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)", letterSpacing: "0.2em", marginBottom: 12 }}>§ SPECIALIZATIONS</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
            {[
              "Agent Hijacking", "Tool-Use Injection", "RAG Poisoning", 
              "Model Red-Teaming", "Adversarial ML", "Zero-Trust Arch"
            ].map(s => (
              <span key={s} style={{ 
                padding: "4px 10px", border: "1px solid var(--line-2)", 
                fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-2)" 
              }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── center hero stack ────────────────────────────────────────────── */

/* ── center hero stack ────────────────────────────────────────────── */
const BIRTH_DATE = 474768000; // Jan 17, 1985

function Hero({ wordmark, kanji, onOpen, isToggling, onToggleWordmark, geoLocation }) {
  const [uptime, setUptime] = React.useState(Math.floor(Date.now() / 1000) - BIRTH_DATE);
  const [bdaySeconds, setBdaySeconds] = React.useState(0);

  React.useEffect(() => {
    const calculateBday = () => {
      const now = new Date();
      let year = now.getFullYear();
      let bday = new Date(year, 0, 17); // Jan 17 (months are 0-indexed)
      
      if (now > bday) {
        bday = new Date(year + 1, 0, 17);
      }
      
      return Math.floor((bday.getTime() - now.getTime()) / 1000);
    };

    const t = setInterval(() => {
      setUptime(Math.floor(Date.now() / 1000) - BIRTH_DATE);
      setBdaySeconds(calculateBday());
    }, 1000);

    setBdaySeconds(calculateBday());
    return () => clearInterval(t);
  }, []);

  return (
    <main style={{
      position: "absolute", inset: 0, zIndex: 4,
      display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: "0 32px",
      animation: "rise .9s cubic-bezier(.2,.7,.2,1) both",
    }}>
      {/* status pill */}
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 12,
        padding: "6px 14px",
        border: "1px solid color-mix(in oklab, var(--accent) 40%, var(--line-2))",
        borderRadius: 999,
        fontFamily: "var(--font-mono)", fontSize: 11,
        letterSpacing: "0.2em",
        color: "var(--text-2)",
        background: "color-mix(in oklab, var(--bg) 60%, transparent)",
        backdropFilter: "blur(8px)",
        marginBottom: 24,
      }}>
        <PulseDot size={8} />
        <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ color: "var(--text)", fontVariantNumeric: "tabular-nums" }}>
            TTL: {bdaySeconds.toString().padStart(8, "0")}s
          </span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ fontVariantNumeric: "tabular-nums" }}>UPTIME: {uptime}s</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>{geoLocation.city}</span>
        </span>
      </div>

      {/* wordmark with toggle capability */}
      <div style={{ position: "relative", display: "inline-flex", alignItems: "center" }}>
        <Wordmark variant={wordmark} kanji={kanji} isToggling={isToggling} onToggle={onToggleWordmark} />
        
        {/* Morphing text overlay during toggle - persists across variant change */}
        {isToggling && (
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            fontFamily: "var(--font-mono)",
            fontSize: "clamp(88px, 14vw, 200px)",
            fontWeight: 600,
            letterSpacing: "-0.02em",
            lineHeight: 0.95,
            color: "var(--accent)",
            textShadow: "0 0 16px var(--accent), 0 0 32px color-mix(in oklab, var(--accent) 50%, transparent)",
            zIndex: 5,
            pointerEvents: "none",
          }}>
            <MorphingText 
              fromText={wordmark === "karl-fox" ? "KARLFOX" : "SYMBOLLIX"}
              toText={wordmark === "karl-fox" ? "SYMBOLLIX" : "KARLFOX"}
              isMorphing={true}
              style={{ display: "inline-block" }}
            />
          </div>
        )}
      </div>

      {/* kanji-figure in the beam — the "freediver" */}
      {wordmark !== "kanji-embed" && wordmark !== "karl-fox" && wordmark !== "symbollix" && (
        <div style={{
          fontFamily: "var(--font-display)",
          fontWeight: 900,
          fontSize: "clamp(56px, 7vw, 96px)",
          color: "transparent",
          WebkitTextStroke: "1px color-mix(in oklab, var(--accent) 55%, transparent)",
          marginTop: -22,
          letterSpacing: "-0.04em",
          opacity: 0.85,
          animation: "shimmer 4s ease-in-out infinite",
        }}>{kanji}</div>
      )}

      {/* tagline */}
      <div style={{
        margin: "28px 0 0",
        textAlign: "center",
        maxWidth: 640,
        fontWeight: 300,
        textWrap: "pretty",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)",
          fontSize: 13,
          color: "var(--accent)",
          letterSpacing: "0.15em",
          marginBottom: 10,
          textTransform: "uppercase",
        }}>
          Adversarial AI Researcher | Offensive Security | Systems Architect
        </div>
        <p style={{
          margin: 0,
          fontSize: 17,
          lineHeight: 1.55,
          color: "var(--text-2)",
        }}>
          Applying nearly two decades of enterprise IT experience to the structural vulnerabilities of next-generation AI.
        </p>
      </div>

      {/* toggle hint */}
      {(wordmark === "karl-fox" || wordmark === "symbollix") && (
        <div style={{
          marginTop: 16,
          fontFamily: "var(--font-mono)",
          fontSize: 10,
          letterSpacing: "0.15em",
          color: "var(--muted)",
          opacity: 0.6,
        }}>
          click to toggle · press [S] or [K]
        </div>
      )}

      {/* CTAs */}
      <div style={{ display: "flex", gap: 14, marginTop: 32 }}>
        <CTA primary onClick={() => onOpen("contact")}>Get in touch</CTA>
        <CTA onClick={() => onOpen("work")}>Selected work</CTA>
      </div>
    </main>
  );
}

function CTA({ children, primary, onClick }) {
  const base = {
    fontFamily: "var(--font-sans)",
    fontWeight: 500,
    fontSize: 14,
    letterSpacing: "0.02em",
    padding: "14px 26px",
    border: "1px solid",
    borderRadius: 2,
    cursor: "pointer",
    display: "inline-flex", alignItems: "center", gap: 10,
    transition: "transform .15s ease, background .2s, color .2s, border-color .2s",
  };
  const styles = primary
    ? { ...base, background: "var(--accent)", color: "#0b0d16", borderColor: "var(--accent)", boxShadow: "0 0 0 0 var(--accent)" }
    : { ...base, background: "transparent", color: "var(--text)", borderColor: "var(--line-2)" };
  return (
    <button
      onClick={onClick}
      style={styles}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = "translateY(-1px)";
        if (!primary) e.currentTarget.style.borderColor = "var(--accent)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = "translateY(0)";
        if (!primary) e.currentTarget.style.borderColor = "var(--line-2)";
      }}
    >
      {children}
      <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, opacity: 0.8 }}>→</span>
    </button>
  );
}

/* ── slide-over panels (work / recognition / writing / contact) ───────── */
const PANELS = {
  work: {
    title: "Current Deployment",
    items: [
      { n: "01", year: "2026", t: "Project Deployment: Red Team AI Engineer @ KPMG", tag: "ACTIVE", c: "var(--accent)" },
    ],
  },
  recognition: {
    title: "Recognition",
    items: [
      { n: "RANK",   year: "2025", t: "Diamond Ranking (Top 1%) · National Cyber League", tag: "NCL", logo: "uploads/diamondrank.png?v=2" },
      { n: "CERT",   year: "2023", t: "RHCSA — Red Hat Certified System Administrator", tag: "RH", logo: "uploads/rhcsa.png" },
      { n: "DEGREE", year: "2028", t: "B.S. Cybersecurity & Information Assurance · WGU", tag: "WGU", logo: "uploads/wgu.png" },
      { n: "CERT",   year: "2026", t: "Network+ · CompTIA", tag: "CT", logo: "uploads/Network+-png.png" },
      { n: "CERT",   year: "2025", t: "A+ · CompTIA", tag: "CT", logo: "uploads/A+-png.png" },
      { n: "CERT",   year: "2016", t: "Programming Certification · WakeTech", tag: "WT", logo: "uploads/waketech.png" },
      { n: "DEGREE", year: "2007", t: "B.A. Communications & Creative Multimedia · DKIT", tag: "DKIT", logo: "uploads/Dundalk-Institute-of-Technology-Logo-600x394.jpg" },
    ],
  },
  writing: {
    title: "Writing",
    custom: "writing",
  },
  contact: {
    title: "Engagement",
    custom: "contact",
  },
};
/* ── writing section (DIAGNOSTIC_VER) ─────────────────────────── */
function Writing() {
  const [selected, setSelected] = React.useState(null);
  const items = window.WRITING || [];

  return (
    <div style={{ maxWidth: 860, margin: "0 auto", padding: 40, background: "var(--bg-2)", border: "1px solid var(--line-2)" }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 32, marginBottom: 20 }}>Writing // Diagnostic</h2>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", marginBottom: 40 }}>
        DATA_STATUS: {items.length > 0 ? "LOADED" : "MISSING"} // COUNT: {items.length}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40 }}>
        <div>
          {items.map((it, i) => (
            <button key={i} onClick={() => setSelected(it)} style={{ display: "block", background: "transparent", border: "1px solid var(--line-2)", color: "var(--text)", padding: 10, marginBottom: 10, width: "100%", textAlign: "left", cursor: "pointer" }}>
              {it.t}
            </button>
          ))}
        </div>
        <div style={{ padding: 20, border: "1px solid var(--line-2)" }}>
          {selected ? (
            <div>
              <h3 style={{ marginBottom: 10 }}>{selected.t}</h3>
              <p style={{ fontSize: 14, color: "var(--text-2)" }}>{selected.body || "No body data."}</p>
            </div>
          ) : "Select an item"}
        </div>
      </div>
    </div>
  );
}


function Kv({ k, v, accent }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "80px 1fr", gap: 18, fontSize: 13 }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span style={{ color: accent ? "var(--accent)" : "var(--text)" }}>{v}</span>
    </div>
  );
}

function Work() {
  const p = PANELS.work;
  return (
    <div style={{ maxWidth: 800, margin: "0 auto", animation: "rise 0.6s ease both" }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500, letterSpacing: "-0.04em", margin: "0 0 40px", color: "var(--text)" }}>
        {p.title} <span style={{ fontStyle: "italic", fontWeight: 300, color: "var(--accent)" }}>//</span>
      </h2>
      <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
        {p.items.map((it, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "72px 64px 1fr auto", gap: 18, alignItems: "baseline", padding: "24px 0", borderTop: "1px solid var(--line)" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: it.c || "var(--accent)", letterSpacing: "0.14em" }}>{it.n}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{it.year}</span>
            <span style={{ fontSize: 19, color: "var(--text)", lineHeight: 1.4, fontWeight: 400 }}>{it.t}</span>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: it.c || "var(--text-2)", letterSpacing: "0.18em" }}>{it.tag}</span>
          </li>
        ))}
      </ol>
    </div>
  );
}

function Recognition() {
  const [selected, setSelected] = React.useState(0);
  const [mousePos, setMousePos] = React.useState({ x: 50, y: 50 });
  const items = PANELS.recognition.items;
  const active = items[selected];

  const handleMouseMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    setMousePos({
      x: ((e.clientX - rect.left) / rect.width) * 100,
      y: ((e.clientY - rect.top) / rect.height) * 100
    });
  };

  return (
    <div 
      style={{ maxWidth: 860, margin: "0 auto", animation: "rise 0.6s ease both" }}
      onMouseMove={handleMouseMove}
    >
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500, letterSpacing: "-0.04em", margin: "0 0 32px", color: "var(--text)" }}>
        Recognition <span style={{ fontStyle: "italic", fontWeight: 300, color: "var(--accent)" }}>//</span> Case
      </h2>
      
      <div style={{ perspective: "1000px" }}>
        {/* Lid LCD */}
        <div style={{
          background: "#121826",
          border: "1px solid #2a334a",
          borderBottom: "none",
          borderRadius: "6px 6px 0 0",
          padding: "20px 32px",
          position: "relative",
          overflow: "hidden",
          transform: "rotateX(8deg)",
          transformOrigin: "bottom",
        }}>
          <div style={{ position: "absolute", inset: 0, backgroundImage: "radial-gradient(#1a2235 1px, transparent 0)", backgroundSize: "3px 3px", opacity: 0.2 }} />
          <div style={{ position: "relative", display: "flex", justifyContent: "space-between", alignItems: "end" }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--accent)", letterSpacing: "0.15em", marginBottom: 4 }}>
                DATA_ENTRY_{String(selected + 1).padStart(3, "0")}
              </div>
              <h3 style={{ margin: 0, fontSize: 20, fontWeight: 500, color: "#e2e8f0" }}>{active.t}</h3>
              <div style={{ marginTop: 4, fontSize: 13, color: "#94a3b8", fontFamily: "var(--font-mono)" }}>
                {active.tag.toUpperCase()} // {active.n}
              </div>
            </div>
            <div style={{ textAlign: "right" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "#475569" }}>YEAR</div>
              <div style={{ fontSize: 20, color: "var(--accent)", fontWeight: 700, fontFamily: "var(--font-mono)" }}>{active.year}</div>
            </div>
          </div>
        </div>

        {/* 3D Base */}
        <div style={{
          background: "linear-gradient(to bottom, #1a202c, #0f172a)",
          border: "1px solid #2d3748",
          borderRadius: "0 0 8px 8px",
          padding: "40px 32px",
          transform: "rotateX(20deg)",
          transformOrigin: "top",
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 20,
          boxShadow: "0 15px 40px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.4)",
        }}>
          {items.map((it, i) => {
            const isSel = selected === i;
            const isRank = it.n === "RANK";
            return (
              <div 
                key={i} 
                onMouseEnter={() => setSelected(i)}
                onClick={() => setSelected(i)}
                style={{ position: "relative", aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center" }}
              >
                <div style={{ position: "absolute", inset: -2, borderRadius: "50%", background: "#0a0f1a", boxShadow: "inset 0 4px 8px rgba(0,0,0,0.7)" }} />
                
                <div style={{
                  position: "relative", width: "85%", height: "85%",
                  transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
                  transform: isSel ? `translateZ(40px) scale(1.1) rotateY(${(mousePos.x - 50) * 0.1}deg)` : "scale(1)",
                  zIndex: isSel ? 5 : 1,
                  filter: isSel ? "none" : "grayscale(0.4) brightness(0.85)",
                }}>
                  <div style={{
                    width: "100%", height: "100%", borderRadius: "50%",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    background: isSel ? "var(--bg-2)" : "#111827",
                    border: isSel ? "1.5px solid var(--accent)" : "1px solid #2d3748",
                    overflow: "hidden", position: "relative",
                  }}>
                    {isRank && isSel && <div className="holo-foil-mini" />}
                    {isSel && (
                      <div style={{
                        position: "absolute", inset: 0,
                        background: `radial-gradient(circle at ${mousePos.x}% ${mousePos.y}%, rgba(255,255,255,0.3) 0%, transparent 60%)`,
                        mixBlendMode: "overlay",
                      }} />
                    )}
                    <img src={it.logo} alt={it.t} style={{ width: "65%", height: "65%", objectFit: "contain", zIndex: 2 }} />
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        .holo-foil-mini {
          position: absolute; inset: 0; opacity: 0.7; mixBlendMode: color-dodge;
          background: linear-gradient(135deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
          background-size: 400% 400%; animation: holoMini 4s infinite linear;
        }
        @keyframes holoMini { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
      `}</style>
    </div>
  );
}

function Contact() {
  const p = PANELS.contact;
  return (
    <div style={{ maxWidth: 800, margin: "0 auto", animation: "rise 0.6s ease both" }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500, letterSpacing: "-0.04em", margin: "0 0 40px", color: "var(--text)" }}>
        {p.title} <span style={{ fontStyle: "italic", fontWeight: 300, color: "var(--accent)" }}>//</span>
      </h2>
      <ContactPanel />
    </div>
  );
}

/* ── app shell ─────────────────────────────────────────────────────── */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [open, setOpen] = useState(null);
  const [isToggling, setIsToggling] = useState(false);
  const [reticleRef, setReticleRef] = useState(null);
  const clock = useUTCClock();
  const geoLocation = useGeoLocation();
  const status = useSystemStatus();

  // Toggle wordmark and rotate reticle
  const handleToggleWordmark = () => {
    if (t.wordmark !== "karl-fox" && t.wordmark !== "symbollix") return;
    
    // Trigger animation
    setIsToggling(true);
    if (reticleRef) {
      reticleRef.classList.add("reticle-rotating");
    }
    
    // Switch variant at 400ms (midway through morph)
    setTimeout(() => {
      setTweak("wordmark", t.wordmark === "karl-fox" ? "symbollix" : "karl-fox");
    }, 400);
    
    // End morph animation and remove reticle rotation at 800ms
    setTimeout(() => {
      setIsToggling(false);
      if (reticleRef) {
        reticleRef.classList.remove("reticle-rotating");
      }
    }, 800);
  };

  // Keyboard shortcuts: S = Symbollix, K = Karl Fox
  useEffect(() => {
    const onKeyDown = (e) => {
      if (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA") return;
      if (e.key.toUpperCase() === "S" && t.wordmark !== "symbollix") {
        setIsToggling(true);
        if (reticleRef) reticleRef.classList.add("reticle-rotating");
        setTimeout(() => {
          setTweak("wordmark", "symbollix");
        }, 400);
        setTimeout(() => {
          setIsToggling(false);
          if (reticleRef) reticleRef.classList.remove("reticle-rotating");
        }, 800);
      } else if (e.key.toUpperCase() === "K" && t.wordmark !== "karl-fox") {
        setIsToggling(true);
        if (reticleRef) reticleRef.classList.add("reticle-rotating");
        setTimeout(() => {
          setTweak("wordmark", "karl-fox");
        }, 400);
        setTimeout(() => {
          setIsToggling(false);
          if (reticleRef) reticleRef.classList.remove("reticle-rotating");
        }, 800);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [t.wordmark, reticleRef]);

  useEffect(() => {
    const palette = ACCENTS[t.accent] || ACCENTS.crimson;
    Object.entries(palette).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [t.accent]);

  return (
    <>
      {/* background atmosphere */}
      <div style={{ position: "fixed", inset: 0, zIndex: 0, background:
        "radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%)," +
        "radial-gradient(ellipse 60% 50% at 50% 100%, color-mix(in oklab, var(--accent-2) 5%, transparent), transparent 70%)," +
        "var(--bg)" }}></div>

      {/* faint grid */}
      <div aria-hidden style={{
        position: "fixed", inset: 0, zIndex: 0, pointerEvents: "none",
        backgroundImage:
          "linear-gradient(to right, rgba(140,160,220,0.04) 1px, transparent 1px)," +
          "linear-gradient(to bottom, rgba(140,160,220,0.04) 1px, transparent 1px)",
        backgroundSize: "72px 72px",
        maskImage: "radial-gradient(ellipse at 50% 50%, black 10%, transparent 80%)",
      }}></div>

      {/* the kold light beam */}
      <LightBeam intensity={t.beam} />

      {/* HUD watermark reticle */}
      {t.reticle && <div ref={setReticleRef}><ReticleWatermark /></div>}

      {/* Glowing kanji background in top-left */}
      <div style={{
        position: "absolute", top: 76, left: 32, zIndex: 2,
        fontFamily: "var(--font-display)", fontSize: 100, fontWeight: 900,
        color: t.wordmark === "symbollix" ? "#6b21ff" : "var(--accent-2)",
        textShadow: t.wordmark === "symbollix" 
          ? "0 0 24px #6b21ff, 0 0 48px color-mix(in oklab, #6b21ff 60%, transparent)" 
          : "0 0 24px var(--accent-2), 0 0 48px color-mix(in oklab, var(--accent-2) 60%, transparent)",
        animation: "shimmer 3s ease-in-out infinite",
        pointerEvents: "none",
        opacity: 0.12,
        transition: "all 0.8s cubic-bezier(0.43, 0.13, 0.23, 0.96)",
      }}>
        {t.wordmark === "karl-fox" ? "刃" : t.wordmark === "symbollix" ? "影" : t.kanji}
      </div>

      {/* top brand + nav */}




      {/* top brand + nav */}
      <TopChrome active={open} onOpen={setOpen} />

      {/* HUD corners */}
      {t.hud && (
        <>
          <CornerHUD pos="top-left top" lines={[
            ["LAT",      geoLocation.lat, null],
            ["LON",      geoLocation.lon, null],
          ]} />
          <CornerHUD pos="bottom-left bottom" lines={[
            ["PGP",   "9F4A 7C21 D8B0", null],
            ["BUILD", "26.05 · v.42",   null],
          ]} />
          <CornerHUD pos="bottom-right bottom right" lines={[
            ["UTC",      clock.time, "var(--text-2)"],
            ["PING",     status.ping, null],
            ["STATUS",   status.label, status.color],
          ]} />
        </>
      )}

      {/* Main Content Area */}
      <main style={{
        position: "absolute", inset: 0, zIndex: 4,
        display: "flex", flexDirection: "column",
        alignItems: "center", justifyContent: "center",
        padding: "0 56px",
      }}>
        {!open ? (
          <Hero 
            wordmark={t.wordmark} 
            kanji={t.kanji} 
            onOpen={setOpen} 
            isToggling={isToggling} 
            onToggleWordmark={handleToggleWordmark} 
            geoLocation={geoLocation} 
          />
        ) : (
          <div style={{ width: "100%", height: "100%", overflowY: "auto", paddingTop: 140, paddingBottom: 80 }}>
            {(() => {
              try {
                return (
                  <>
                    {open === "work" && <Work />}
                    {open === "biography" && <Biography />}
                    {open === "writing" && <Writing />}
                    {open === "recognition" && <Recognition />}
                    {open === "contact" && <Contact />}
                  </>
                );
              } catch (e) {
                return (
                  <div style={{ padding: 40, border: "1px solid red", color: "red", fontFamily: "var(--font-mono)" }}>
                    [ CRITICAL_RENDER_ERROR ]<br />
                    {e.message}
                  </div>
                );
              }
            })()}
          </div>
        )}
      </main>

      {/* Tweaks */}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Wordmark" />
        <TweakRadio
          label="Style"
          value={t.wordmark}
          options={[
            { value: "special-k",    label: "special-k" },
            { value: "uppercase",    label: "SPECIAL-K" },
            { value: "kanji-embed",  label: "spec狐al-k" },
            { value: "karl-fox",     label: "Karl Fox (toggle)" },
            { value: "symbollix",    label: "Symbollix (toggle)" },
          ]}
          onChange={(v) => setTweak("wordmark", v)}
        />
        <TweakSelect
          label="Accent kanji"
          value={t.kanji}
          options={[
            { value: "狐", label: "狐 · kitsune — fox" },
            { value: "影", label: "影 · kage — shadow" },
            { value: "刃", label: "刃 · yaiba — blade" },
            { value: "鬼", label: "鬼 · oni — demon" },
            { value: "闇", label: "闇 · yami — darkness" },
            { value: "侍", label: "侍 · samurai" },
            { value: "赤", label: "赤 · aka — red" },
          ]}
          onChange={(v) => setTweak("kanji", v)}
        />

        <TweakSection label="Atmosphere" />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={["crimson", "cyan", "magenta", "toxic", "ember"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakRadio
          label="Light beam"
          value={t.beam}
          options={["off", "low", "medium", "high"]}
          onChange={(v) => setTweak("beam", v)}
        />
        <TweakToggle label="Reticle" value={t.reticle} onChange={(v) => setTweak("reticle", v)} />
        <TweakToggle label="Corner HUD" value={t.hud} onChange={(v) => setTweak("hud", v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);