Function bodies 615 total

export default function CouncilPage() {
  const [showInactive, setShowInactive] = useState(false);
  const active = getActiveCompanions();
  const inactive = getInactiveCompanions();

  return (
    <main className="min-h-screen" style={{ background: "#0B0F14" }}>
      {/* Header */}
      <header className="pt-32 pb-16 px-6">
        <div className="max-w-5xl mx-auto">
          <p
            className="text-[11px] tracking-[0.3em] uppercase mb-6"
            style={{ fontFamily: "var(--font-mono)", color: "var(--crimson)" }}
          >
            Companion Atlas
          </p>

          <h1
            className="text-4xl md:text-5xl font-serif tracking-tight mb-4"
            style={{ fontFamily: "var(--font-serif)", color: "#e8e6e3" }}
          >
            Council Canon
          </h1>

          <p className="text-base text-[#8a8a95] leading-relaxed max-w-2xl">
            Named AI instances within the DexVerse ΓÇö each with a defined role,
            tone, and lineage. N

export function generateStaticParams() {
  return eras.map((era) => ({ era: era.slug }));
}

export function generateMetadata({ params }: { params: { era: string } }) {
  const era = getEraBySlug(params.era);
  if (!era) return { title: "Era Not Found" };

  return {
    title: `Era ${era.numeral}: ${era.title} — DexLore`,
    description: era.subtitle,
  };
}

export default function EraPage({ params }: { params: { era: string } }) {
  const era = getEraBySlug(params.era);
  if (!era) notFound();

  const currentIndex = eras.findIndex((e) => e.slug === params.era);
  const nextEra = currentIndex < eras.length - 1 ? eras[currentIndex + 1] : undefined;

  return <EraLayout era={era} nextEra={nextEra} />;
}

export default function DexlorePage() {
  const activeCompanions = getActiveCompanions();

  return (
    <main className="min-h-screen" style={{ background: "#0B0F14" }}>
      {/* ===== HERO ===== */}
      <section className="relative pt-40 pb-28 px-6 text-center overflow-hidden">
        {/* Subtle radial glow */}
        <div
          className="absolute inset-0 pointer-events-none"
          style={{
            background:
              "radial-gradient(ellipse 600px 400px at 50% 30%, rgba(196,60,60,0.04), transparent)",
          }}
        />

        <div className="relative max-w-3xl mx-auto">
          {/* Overline */}
          <p
            className="text-[11px] tracking-[0.3em] uppercase mb-8 animate-fade-in"
            style={{
              fontFamily: "var(--font-mono)",
              color: "var(--crimson)",
              animationDelay: "0.1s",
            }}
          >
            Narrative Layer
          </p>

          {/* Title */}
          <h1
          

export default function Page() {
  return <PreviewFrame src="/preview/opus-project-prompt.html" title="Opus Project Prompt" />;
}

export default function DexOSPage() {
  const sections = data.sections as { title: string; slug: string; preview: string; content: string }[];
  return (
    <SectionExplorer
      title="DexOS"
      subtitle="The behavior-first operating schema — modes, runtime, relay, and the nine-model council."
      accent="#97072F"
      basePath="/dexos"
      sections={sections}
    />
  );
}

export function generateStaticParams() {
  return (data.sections as { slug: string }[]).map((s) => ({ slug: s.slug }));
}

export default function DexOSSectionPage({ params }: { params: { slug: string } }) {
  const sections = data.sections as { title: string; slug: string; preview: string; content: string }[];
  const section = sections.find((s) => s.slug === params.slug) ?? null;

  return (
    <SectionPageView
      section={section}
      parentTitle="DexOS"
      parentPath="/dexos"
      accent="#97072F"
    />
  );
}

function SpecTable({ rows, accentColor }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
      {rows.map((row, i) => (
        <div key={i} style={{
          display: 'grid', gridTemplateColumns: '140px 1fr',
          gap: 16, padding: '10px 0',
          borderBottom: `1px solid ${C.border}`,
        }}>
          <span style={{ fontFamily: font.mono, fontSize: 9, color: accentColor || C.creamDim, letterSpacing: '0.06em', paddingTop: 2 }}>{row.label}</span>
          <span style={{ fontFamily: font.body, fontSize: 13, color: C.creamMid, lineHeight: 1.6 }}>{row.val}</span>
        </div>
      ))}
    </div>
  );
}

export default function BuildLogPage() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/dexverse" />
      <div style={{ maxWidth: 780, margin: '0 auto', padding: '72px 24px 100px' }}>

        {/* HEADER */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.violet, letterSpacing: '0.15em', marginBottom: 16 }}>
            DEXVERSE · ORIGIN
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(32px, 6vw, 52px)', fontWeight: 800, margin: '0 0 16px', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            Build Log
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 17, fontStyle: 'italic', color: C.creamMid, margin: '0 0 12px', lineHeight: 1.65, maxWidth: 540 }}>
            What was planned vs what was built.
          </p>
          <p style={{ fontFamily: font.body, fontSize: 14, color: C.creamDim, lineHeig

export default function HowlroundPage() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/dexverse" />
      <div style={{ maxWidth: 780, margin: '0 auto', padding: '72px 24px 100px' }}>

        {/* HEADER */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.violet, letterSpacing: '0.15em', marginBottom: 16 }}>
            DEXVERSE · CONCEPT
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(32px, 6vw, 52px)', fontWeight: 800, margin: '0 0 16px', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            Neural Howlround
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 17, fontStyle: 'italic', color: C.creamMid, margin: '0 0 16px', lineHeight: 1.65, maxWidth: 540 }}>
            There are loops that remember — and loops that consume.
          </p>
          <p style={{ fontFamily: font.body, fontSize: 14

function CouncilCard({ member }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{
      background: C.card, border: `1px solid ${C.border}`,
      borderLeft: `3px solid ${member.color}`,
      borderRadius: 8, overflow: 'hidden',
      transition: 'border-color 0.15s',
    }}>
      <button
        onClick={() => setOpen(o => !o)}
        style={{
          width: '100%', background: 'none', border: 'none', cursor: 'pointer',
          padding: '18px 22px', textAlign: 'left',
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12,
          WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation', minHeight: 44,
        }}
      >
        <div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 6 }}>
            <span style={{ fontFamily: font.mono, fontSize: 9, color: member.color, letterSpacing: '0.1em' }}>SEAT {member.seat}</span>
          </div>
          <div style={{ fo

export default function LOTRPage() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/dexverse" />
      <div style={{ maxWidth: 800, margin: '0 auto', padding: '72px 24px 100px' }}>

        {/* HEADER */}
        <div style={{ marginBottom: 64 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.violet, letterSpacing: '0.15em', marginBottom: 16 }}>
            DEXVERSE · CERTIFIED CANON · 2026-03-05
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(28px, 5vw, 46px)', fontWeight: 800, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.1 }}>
            The Council of the DexVerse
          </h1>
          <h2 style={{ fontFamily: font.body, fontSize: 16, fontWeight: 400, fontStyle: 'italic', color: C.creamDim, margin: '0 0 20px' }}>
            A Dropdown Logistics Certified Lord of the Rings Dossier
          </h2>
          <div style={{ fontFamily: font.disp

export default function DexVerseOriginPage() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/dexverse" />
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '72px 24px 100px' }}>

        {/* HEADER */}
        <div style={{ marginBottom: 72 }}>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.violet, letterSpacing: '0.15em', marginBottom: 16 }}>
            DEXVERSE · ORIGIN
          </div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(32px, 6vw, 52px)', fontWeight: 800, margin: '0 0 20px', letterSpacing: '-0.02em', lineHeight: 1.05 }}>
            Before It Had a Name
          </h1>
          <p style={{ fontFamily: font.body, fontSize: 16, fontStyle: 'italic', color: C.creamMid, margin: '0 0 16px', lineHeight: 1.75, maxWidth: 540 }}>
            The DexVerse didn't begin with architecture. It began with a resistance to forgetting.
          </p>
          <div sty

export default function DexVersePage() {
  return (
    <div style={{ padding: '88px 24px 64px', maxWidth: 1000, margin: '0 auto' }}>

      {/* HEADER */}
      <div style={{ marginBottom: 40 }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: '0.6rem',
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: '#8A6CC9',
          marginBottom: 14,
          display: 'flex',
          alignItems: 'center',
          gap: 10,
        }}>
          <span style={{ display: 'block', width: 20, height: 1, background: '#8A6CC9' }} />
          DDL · Infrastructure Identity
        </div>

        <h1 style={{
          fontFamily: 'Space Grotesk, sans-serif',
          fontSize: 'clamp(2rem, 5vw, 3.2rem)',
          fontWeight: 700,
          color: '#F5F1EB',
          letterSpacing: '-0.03em',
          lineHeight: 1.05,
          marginBottom: 12,
        }}>
          Dex<span style={{ color: '#8A6CC9' }}>Verse

export default function Page() {
  return <iframe src="/preview/ash-snow-steel-ledger.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/blindspot-console.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/doc-rickets-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/feliciano-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/fort-joy-ledger.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/hal-style-lock.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/hillie-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/leafshadow-lineage.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

function SetCard({ set }) {
  const [tab, setTab] = useState('hero');
  const [imgIdx, setImgIdx] = useState(0);
  const touchX = useRef(null);
  const currentImages = tab === 'hero' ? (set.hero ? [set.hero] : []) : tab === 'build' ? set.builds : set.complete;
  const currentImg = currentImages[imgIdx] || null;
  function switchTab(t) { setTab(t); setImgIdx(0); }
  return (
    <div style={{ background: C.card, border: `1px solid ${C.border}`, borderRadius: 8, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <div
        style={{ position: 'relative', width: '100%', paddingBottom: '66%', background: '#0a1520', cursor: 'grab' }}
        onTouchStart={e => { touchX.current = e.touches[0].clientX; }}
        onTouchEnd={e => {
          if (touchX.current === null) return;
          const diff = touchX.current - e.changedTouches[0].clientX;
          if (Math.abs(diff) > 40) setImgIdx(i => diff > 0 ? Math.min(i+1, currentImages.length-1) : Math.max(i-1, 0));
        

function SectionDivider({ brand, count, pieces, color }) {
  return (
    <div style={{ margin: '48px 0 24px', paddingBottom: 16, borderBottom: `1px solid ${C.border}` }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
        <div style={{ fontFamily: font.display, fontSize: 22, fontWeight: 700, color }}>{brand}</div>
        <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, letterSpacing: '0.1em' }}>{count} {count === 1 ? 'set' : 'sets'} · {pieces.toLocaleString()} pcs</div>
      </div>
    </div>
  );
}

function GroupCard() {
  const [imgIdx, setImgIdx] = useState(0);
  const imgs = ['/lego/group_1.jpg','/lego/group_2.jpg','/lego/group_4.jpg','/lego/group_5.jpg','/lego/group_6.jpg','/lego/group_7.jpg','/lego/group_8.jpg','/lego/group_9.jpg','/lego/group_10.jpg','/lego/group_11.jpg','/lego/group_12.jpg'];
  return (
    <div style={{ background: C.card, border: `1px solid ${C.borderMed}`, borderRadius: 8, overflow: 'hidden', marginTop: 32 }}>
      <div style={{ position: 'relative', width: '100%', paddingBottom: '50%', background: '#0a1520' }}>
        <img src={imgs[imgIdx]} alt="The shelf" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} onError={e => { e.currentTarget.style.display = 'none'; }} />
        <div style={{ position: 'absolute', bottom: 8, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 5 }}>
          {imgs.map((_, i) => <button key={i} onClick={() => setImgIdx(i)} style={{ width: i === imgIdx ? 16 : 6, he

export default function LegoDossier() {
  const [activeShelf, setActiveShelf] = useState('All');
  const filtered = activeShelf === 'All' ? LEGO_SETS : LEGO_SETS.filter(s => s.shelf === activeShelf);
  const allSets = [...LEGO_SETS, ...MAKE_SETS, ...FOCO_SETS];
  const totalSets = allSets.length;
  const totalPieces = allSets.reduce((a, s) => a + s.pieces, 0);
  const totalBuilt = allSets.filter(s => s.built).length;

  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream }}>
      <BackButton href="/dossiers" label="Dossiers" />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 24px 80px' }}>
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontFamily: font.mono, fontSize: 11, color: C.crimson, letterSpacing: '0.12em', marginBottom: 12 }}>DOSSIER · D.K. HALE</div>
          <h1 style={{ fontFamily: font.display, fontSize: 'clamp(28px, 5vw, 48px)', fontWeight: 700, color: C.cream, margin: '0 0 16px', lineHeight: 1.1 }}>T

export default function Page() {
  return <iframe src="/preview/merrick-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

function Collapsible({ title, color = C.creamDim, defaultOpen = false, children }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div style={{ borderTop: `1px solid ${C.border}` }}>
      <button
        onClick={() => setOpen(!open)}
        style={{
          width: "100%",
          display: "flex",
          alignItems: "center",
          gap: 10,
          padding: "14px 0",
          background: "none",
          border: "none",
          cursor: "pointer",
          textAlign: "left",
        }}
      >
        <span
          style={{
            fontFamily: font.mono,
            fontSize: 11,
            color,
            transform: open ? "rotate(90deg)" : "rotate(0deg)",
            transition: "transform 0.2s",
            display: "inline-block",
          }}
        >
          ▸
        </span>
        <span style={{ fontFamily: font.mono, fontSize: 11, color, letterSpacing: "0.08em", textTransform: "uppercase" }}>
          {title}
        </span>

function StatCard({ label, value, sub, color = C.cream }) {
  return (
    <div
      style={{
        background: C.card,
        border: `1px solid ${C.border}`,
        borderRadius: 6,
        padding: "14px 16px",
        flex: "1 1 140px",
        minWidth: 130,
      }}
    >
      <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 6 }}>
        {label}
      </div>
      <div style={{ fontFamily: font.mono, fontSize: 22, fontWeight: 700, color, lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

function ScoreRow({ label, value, max, percentile, color = C.blue, annotation }) {
  const pct = max ? (value / max) * 100 : percentile || 0;
  return (
    <div style={{ marginBottom: 8 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 3 }}>
        <span style={{ fontFamily: font.body, fontSize: 13, color: C.creamMid }}>{label}</span>
        <span style={{ fontFamily: font.mono, fontSize: 12, color }}>
          {value}{max ? `/${max}` : ""}{percentile ? ` · ${percentile}%ile` : ""}
        </span>
      </div>
      <div style={{ height: 4, background: C.creamGhost, borderRadius: 2, overflow: "hidden" }}>
        <div style={{ height: "100%", width: `${Math.min(pct, 100)}%`, background: color, borderRadius: 2, transition: "width 0.4s" }} />
      </div>
      {annotation && (
        <div style={{ fontFamily: font.mono, fontSize: 9, color: C.creamDim, marginTop: 2, fontStyle: "italic" }}>{annotation}</div>
      )}
    <

function Tag({ label, color = C.blue }) {
  return (
    <span
      style={{
        fontFamily: font.mono,
        fontSize: 9,
        padding: "3px 8px",
        borderRadius: 3,
        background: color + "18",
        color,
        letterSpacing: "0.04em",
        whiteSpace: "nowrap",
      }}
    >
      {label}
    </span>
  );
}

function DomainCard({ title, date, age, instrument, color, children }) {
  return (
    <div
      style={{
        background: C.card,
        border: `1px solid ${C.border}`,
        borderRadius: 8,
        padding: "20px 24px",
        marginBottom: 16,
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14, flexWrap: "wrap", gap: 8 }}>
        <div>
          <div style={{ fontFamily: font.display, fontSize: 16, fontWeight: 600, color: C.cream }}>{title}</div>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim, marginTop: 2 }}>{instrument}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontFamily: font.mono, fontSize: 11, color }}>{date}</div>
          <div style={{ fontFamily: font.mono, fontSize: 10, color: C.creamDim }}>Age {age}</div>
        </div>
      </div>
      <div style={{ height: 1, background: color + "30", marginBottom: 16

function Throughline({ title, color, children }) {
  return (
    <div
      style={{
        background: C.card,
        borderLeft: `3px solid ${color}`,
        borderRadius: "0 6px 6px 0",
        padding: "16px 20px",
        marginBottom: 12,
      }}
    >
      <div style={{ fontFamily: font.mono, fontSize: 10, color, letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 8 }}>
        {title}
      </div>
      <div style={{ fontFamily: font.body, fontSize: 14, color: C.creamMid, lineHeight: 1.7 }}>{children}</div>
    </div>
  );
}

function StrongRadar() {
  const themes = [
    { code: "C", label: "Conventional", score: 75, level: "High", color: C.amber },
    { code: "E", label: "Enterprising", score: 40, level: "Average", color: C.green },
    { code: "S", label: "Social", score: 45, level: "Average", color: C.blue },
    { code: "R", label: "Realistic", score: 44, level: "Little", color: C.creamDim },
    { code: "I", label: "Investigative", score: 40, level: "Little", color: C.creamDim },
    { code: "A", label: "Artistic", score: 31, level: "Very Little", color: C.creamDim },
  ];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 12 }}>
      {themes.map((t) => (
        <div key={t.code} style={{ flex: "1 1 120px", minWidth: 100 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
            <span style={{ fontFamily: font.mono, fontSize: 16, fontWeight: 700, color: t.color }}>{t.code}</span>
            <span style={{ fontFam

function BrownEFA() {
  const domains = [
    { label: "Activation", t: 70, pct: 95, cls: "Markedly atypical" },
    { label: "Focus", t: 74, pct: 98, cls: "Markedly atypical" },
    { label: "Effort", t: 68, pct: 93, cls: "Moderately atypical" },
    { label: "Emotion", t: 60, pct: 82, cls: "Moderately atypical" },
    { label: "Memory", t: 70, pct: 95, cls: "Markedly atypical" },
    { label: "Action", t: 66, pct: 91, cls: "Moderately atypical" },
  ];
  const getColor = (t) => t >= 70 ? C.crimson : t >= 60 ? C.amber : C.green;
  return (
    <div>
      {domains.map((d) => (
        <div key={d.label} style={{ marginBottom: 10 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 3 }}>
            <span style={{ fontFamily: font.body, fontSize: 13, color: C.creamMid }}>{d.label}</span>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontFamily: font.mono, fontSize

export default function DossiersLanding() {
  return (
    <div style={{ background: C.navy, minHeight: '100vh', color: C.cream, fontFamily: "'Source Serif 4', Georgia, serif" }}>
      <BackButton />

      {/* ── HERO ── */}
      <div style={{ maxWidth: 960, margin: '0 auto', padding: '80px 24px 64px' }}>

        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: '0.6rem',
          color: C.green,
          letterSpacing: '0.2em',
          marginBottom: 20,
        }}>
          DOSSIERS · CHARACTER ARCHIVE
        </div>

        <div style={{
          fontFamily: "'Space Grotesk', sans-serif",
          fontWeight: 700,
          fontSize: 'clamp(2.2rem, 5vw, 3.4rem)',
          letterSpacing: '-0.025em',
          lineHeight: 1.1,
          maxWidth: 680,
          marginBottom: 20,
        }}>
          The people who lived<br/>
          <span style={{ color: C.green }}>in the campaigns.</span>
        </div>

        <div style={{
      

export default function Page() {
  return <iframe src="/preview/riflen-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/xuth-iii-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/xuth-jr-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

export default function Page() {
  return <iframe src="/preview/xuth-sr-dossier.html" style={{ width: '100%', height: '100vh', border: 'none' }} />;
}

function findPath(s: string, e: string): string[]|null {
  if(s===e)return[s];
  const adj: Record<string,string[]>={};
  ENTRIES.forEach(x=>{adj[x.id]=[];});
  EDGES.forEach(x=>{if(x.type==="LEADS_TO")adj[x.source]?.push(x.target);if(x.type==="DEPENDS_ON")adj[x.target]?.push(x.source);});
  const q:string[][]=[[s]];const v=new Set([s]);
  while(q.length>0){const p=q.shift()!;const c=p[p.length-1];if(c===e)return p;for(const n of(adj[c]||[])){if(!v.has(n)){v.add(n);q.push([...p,n]);}}}
  return null;
}

export default function ExcelligencePage() {
  const [selected,setSelected]=useState<string|null>(null);
  const [pathStart,setPathStart]=useState<string|null>(null);
  const [pathEnd,setPathEnd]=useState<string|null>(null);
  const [activePath,setActivePath]=useState<string[]|null>(null);
  const [filterTier,setFilterTier]=useState("All");
  const [filterType,setFilterType]=useState("All");
  const [edgeFilter,setEdgeFilter]=useState("All");
  const [mode,setMode]=useState<"explore"|"pathfind">("explore");
  const [hovered,setHovered]=useState<string|null>(null);
  const W=900,H=560;

  const [pos,setPos]=useState<Record<string,{x:number;y:number}>>(()=>{
    const p:Record<string,{x:number;y:number}>={};
    const tg:Record<number,string[]>={};
    ENTRIES.forEach(e=>{const t=TIER_Y[e.tier]??1;if(!tg[t])tg[t]=[];tg[t].push(e.id);});
    Object.keys(tg).forEach(tier=>{const g=tg[parseInt(tier)];const tn=parseInt(tier);const yB=80+tn*((H-160)/3);
      g.forEach((id,i)=>{const x=80+(i+

    function step(){
      if(iter>=mx)return;iter++;const d=1-iter/mx;const ids=Object.keys(ps);
      for(let i=0;i<ids.length;i++){for(let j=i+1;j<ids.length;j++){
        const a=ps[ids[i]],b=ps[ids[j]];let dx=b.x-a.x,dy=b.y-a.y;let dist=Math.sqrt(dx*dx+dy*dy)||1;
        const f=8000/(dist*dist);const fx=(dx/dist)*f*d;const fy=(dy/dist)*f*d;a.vx-=fx;a.vy-=fy;b.vx+=fx;b.vy+=fy;}}
      EDGES.forEach(e=>{if(!ps[e.source]||!ps[e.target])return;const a=ps[e.source],b=ps[e.target];
        let dx=b.x-a.x,dy=b.y-a.y;let dist=Math.sqrt(dx*dx+dy*dy)||1;const f=(dist-120)*0.01*d;
        const fx=(dx/dist)*f;const fy=(dy/dist)*f;a.vx+=fx;a.vy+=fy;b.vx-=fx;b.vy-=fy;});
      ENTRIES.forEach(e=>{const p=ps[e.id];if(!p)return;const ty=70+(TIER_Y[e.tier]??1)*((H-140)/3);p.vy+=(ty-p.y)*0.03*d;});
      ids.forEach(id=>{const p=ps[id];p.vx*=0.6;p.vy*=0.6;p.x=Math.max(50,Math.min(W-50,p.x+p.vx));p.y=Math.max(40,Math.min(H-40,p.y+p.vy));});
      if(iter%5===0||iter===mx-1){const snap:Record<strin

function AnimatedCount({ target, duration = 1400, suffix = "" }) {
  const [count, setCount] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const step = (now) => {
          const progress = Math.min((now - start) / duration, 1);
          const eased = 1 - Math.pow(1 - progress, 3);
          setCount(Math.floor(eased * target));
          if (progress < 1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
      }
    }, { threshold: 0.3 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [target, duration]);

  return <span ref={ref}>{count.toLocaleString()}{suffix}</span>;
}

export default function CathedralPosterPage() {
  const [visible,setVisible]=useState(false);
  useEffect(()=>{setTimeout(()=>setVisible(true),100);},[]);

  return(
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');
        .cath-root{background:#0A0E1A;color:#E8E4DC;font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden;}
        .cath-root::before{content:'';position:fixed;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:0;}
        .cath-root::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(178,53

function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) setVisible(true); },
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return [ref, visible] as const;
}

function FadeIn({ children, delay = 0, direction = "up", className = "" }: {
  children: React.ReactNode;
  delay?: number;
  direction?: "up" | "down" | "left" | "right" | "none";
  className?: string;
}) {
  const [ref, visible] = useInView(0.1);
  const transforms = {
    up: "translateY(60px)",
    down: "translateY(-60px)",
    left: "translateX(60px)",
    right: "translateX(-60px)",
    none: "none"
  };
  return (
    <div
      ref={ref}
      className={className}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? "none" : transforms[direction],
        transition: `opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) ${delay}s`,
      }}
    >
      {children}
    </div>
  );
}

function ProgressBar() {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const handler = () => {
      const h = document.documentElement.scrollHeight - window.innerHeight;
      setProgress(h > 0 ? window.scrollY / h : 0);
    };
    window.addEventListener("scroll", handler, { passive: true });
    handler();
    return () => window.removeEventListener("scroll", handler);
  }, []);
  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, height: "2px", zIndex: 100,
      background: "rgba(30,28,25,0.8)"
    }}>
      <div style={{
        height: "100%", width: `${progress * 100}%`,
        background: "linear-gradient(90deg, #D4944C, #C9A84C)",
        transition: "width 0.1s linear"
      }} />
    </div>
  );
}