/* Brain section — sits between Workspace (#004) and Cockpit (#005).
 *
 * The visual + textual moment where the Studio Brain identity gets its
 * own room. Three layers:
 *   1. Knowledge graph SVG — animated neural-style visualization of
 *      nodes (notes / decisions / releases / products / emails / issues)
 *      connected by typed edges. Pulses gently. A "query scan" sweeps
 *      periodically to convey memory-retrieval.
 *   2. Cmd+K palette mock — static visualization of the actual cockpit
 *      palette with an example query + AI synthesis + cited hits.
 *   3. Three capability cards — Semantic search · Decay & Recall ·
 *      Local-first AI.
 *
 * Dark surface. Sits visually between Workspace (light) and Cockpit
 * (dark) so the page rhythm reads as light → dark → dark → light.
 *
 * Pure SVG + React. No three.js, no animation libraries — keeps the
 * landing's runtime-React-via-CDN architecture intact.
 */

const { useEffect: useEffectBR, useRef: useRefBR, useState: useStateBR } = React;

function BrainSection() {
  return (
    <section id="brain" className="dark section-pad-lg" style={{ position: "relative", overflow: "hidden" }}>
      {/* Subtle background — same drifting beacons as the cockpit section
          for visual continuity, but quieter. */}
      <div style={{ position: "absolute", inset: 0, opacity: 0.4, pointerEvents: "none" }} aria-hidden="true">
        <BrainBackdropBeacons />
      </div>

      <div className="wrap" style={{ position: "relative", padding: "112px 32px" }}>

        {/* Headline cluster — no num-tag (deliberately distinct from the
            other sections; reads as a "spotlight" between 004 and 005). */}
        <div className="vreveal" style={{ marginBottom: 64, textAlign: "center", maxWidth: 900, margin: "0 auto" }}>
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            padding: "6px 14px", marginBottom: 24,
            border: "1px solid var(--ink-line-2)",
            borderRadius: 999,
            background: "color-mix(in oklch, var(--ink-bg-1) 60%, transparent)",
            fontFamily: "var(--font-mono)", fontSize: 11,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--ink-text-low)",
          }}>
            <span style={{
              display: "inline-block", width: 6, height: 6, borderRadius: "50%",
              background: "var(--lumi-dk)",
              boxShadow: "0 0 12px var(--lumi-dk)",
              animation: "brain-pulse 2.2s ease-in-out infinite",
            }} />
            <span style={{ color: "var(--ink-paper)" }}>The Studio Brain</span>
          </div>

          <h2 style={{ color: "var(--ink-paper)", letterSpacing: "-0.035em", fontSize: "clamp(40px, 6vw, 72px)", lineHeight: 1.02 }}>
            Your studio{" "}
            <span className="serif" style={{ color: "var(--lumi-dk)" }}>remembers</span>.
          </h2>

          <p className="lede" style={{ marginTop: 24, color: "var(--ink-text-mid)", maxWidth: 640, marginInline: "auto" }}>
            Every note, decision, release, and product context lives in a knowledge graph that ranks itself by what you actually use. Ask anything via <strong style={{ color: "var(--ink-paper)", fontWeight: 500 }}>⌘K</strong>; get a 2-3 sentence answer with citations from your own writing. Local AI by default — no data leaves your machine unless you say so.
          </p>
        </div>

        {/* Two-column showcase — knowledge graph viz + Cmd+K palette mock */}
        <div className="vreveal brain-showcase" style={{
          display: "grid",
          gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
          gap: 32,
          alignItems: "stretch",
          marginBottom: 96,
        }}>
          <KnowledgeGraphCard />
          <CmdKPaletteMock />
        </div>

        {/* Three capability cards */}
        <div className="vreveal brain-cap-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 1,
          background: "var(--ink-line)",
          border: "1px solid var(--ink-line)",
          borderRadius: 14,
          overflow: "hidden",
          marginBottom: 64,
        }}>
          <CapabilityCard
            icon={<IconSemantic />}
            label="Semantic search"
            body="Every note · decision · release · README · email — indexed and queryable from one ⌘K palette. The brain answers from your own writing, not generic web."
          />
          <CapabilityCard
            icon={<IconDecay />}
            label="Decay & Recall"
            body="Information never dies. Fresh and frequently-cited content ranks higher; old content stays reachable but quiet — like human memory. Pin what matters."
          />
          <CapabilityCard
            icon={<IconLocalAi />}
            label="Local-first AI"
            body="Ollama on your machine with nomic-embed-text by default. Switch to Anthropic, OpenAI, Together, OpenRouter or any OpenAI-spec endpoint anytime."
          />
        </div>

        {/* Tagline footer */}
        <div className="vreveal" style={{ textAlign: "center" }}>
          <p style={{
            fontFamily: "var(--font-mono)", fontSize: 13,
            letterSpacing: "0.18em", textTransform: "uppercase",
            color: "var(--ink-text-low)",
          }}>
            <span style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "8px 14px",
              border: "1px solid var(--ink-line-2)",
              borderRadius: 8,
              background: "var(--ink-bg-1)",
            }}>
              <span style={{ color: "var(--ink-paper)" }}>⌘K</span>
              <span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--ink-text-low)" }} />
              <span>Ask your studio anything</span>
              <span style={{ width: 3, height: 3, borderRadius: "50%", background: "var(--ink-text-low)" }} />
              <span style={{ color: "var(--lumi-dk)" }}>From anywhere.</span>
            </span>
          </p>
        </div>

      </div>

      <style>{`
        @keyframes brain-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%      { opacity: 0.45; transform: scale(1.4); }
        }
        @keyframes brain-node-pulse {
          0%, 100% { opacity: 1; }
          50%      { opacity: 0.55; }
        }
        @keyframes brain-edge-travel {
          0%   { stroke-dashoffset: 0; opacity: 0.18; }
          40%  { opacity: 0.85; }
          100% { stroke-dashoffset: -100; opacity: 0.18; }
        }
        @keyframes brain-scan-pulse {
          0%   { r: 0; opacity: 0.9; }
          100% { r: 28; opacity: 0; }
        }
        @keyframes brain-caret {
          0%, 50% { opacity: 1; }
          51%, 100% { opacity: 0; }
        }

        @media (max-width: 900px) {
          .brain-showcase { grid-template-columns: minmax(0, 1fr) !important; }
          .brain-cap-grid { grid-template-columns: minmax(0, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

/* =============================================================
 * Knowledge Graph SVG — left card.
 * ============================================================= */

function KnowledgeGraphCard() {
  return (
    <div className="corners" style={{
      position: "relative",
      background: "var(--ink-bg-1)",
      border: "1px solid var(--ink-line)",
      borderRadius: 14,
      overflow: "hidden",
      minHeight: 460,
      display: "flex", flexDirection: "column",
    }}>
      <span className="ct l"></span><span className="ct r"></span>
      <span className="cb l"></span><span className="cb r"></span>

      {/* Card header */}
      <div style={{
        padding: "14px 20px",
        borderBottom: "1px solid var(--ink-line)",
        background: "var(--ink-bg)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10.5,
          letterSpacing: "0.16em", textTransform: "uppercase",
          color: "var(--ink-text-low)",
        }}>Knowledge graph · live</span>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.12em",
          color: "var(--lumi-dk)",
        }}>
          <span style={{
            display: "inline-block", width: 6, height: 6, borderRadius: "50%",
            background: "var(--lumi-dk)",
            animation: "brain-pulse 2.4s ease-in-out infinite",
          }} />
          INDEXING
        </span>
      </div>

      {/* Graph SVG fills the remainder */}
      <div style={{ flex: 1, position: "relative", padding: "16px 12px" }}>
        <KnowledgeGraphSvg />
      </div>

      {/* Card footer — legend */}
      <div style={{
        padding: "12px 20px",
        borderTop: "1px solid var(--ink-line)",
        background: "var(--ink-bg)",
        display: "flex", flexWrap: "wrap", gap: 18,
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--ink-text-low)",
      }}>
        <LegendDot color="var(--lumi-dk)" label="fresh · pinned" />
        <LegendDot color="var(--ink-text-mid)" label="recent" />
        <LegendDot color="var(--ink-text-low)" label="archived" />
        <span style={{ marginLeft: "auto", color: "var(--ink-text-low)" }}>
          768d · nomic-embed-text
        </span>
      </div>
    </div>
  );
}

function LegendDot({ color, label }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{
        display: "inline-block", width: 6, height: 6, borderRadius: "50%",
        background: color,
      }} />
      <span>{label}</span>
    </span>
  );
}

/* The graph itself — organic positions, typed nodes, edges + a scanning
   query pulse that travels periodically. */
function KnowledgeGraphSvg() {
  // Nodes positioned in clusters by type. Coordinates in 600x420 viewBox.
  const nodes = [
    // Central "studio brain" anchor
    { id: "core",    x: 300, y: 210, r: 9, kind: "brain",    label: "Studio",  state: "fresh", pinned: true },

    // Notes cluster (top-left)
    { id: "note1",   x: 110, y: 80,  r: 5, kind: "note",     label: "Note",    state: "fresh"  },
    { id: "note2",   x: 170, y: 50,  r: 4, kind: "note",     label: "",        state: "recent" },
    { id: "note3",   x: 70,  y: 145, r: 4, kind: "note",     label: "",        state: "fresh"  },
    { id: "note4",   x: 200, y: 130, r: 3, kind: "note",     label: "",        state: "recent" },
    { id: "note5",   x: 130, y: 195, r: 3, kind: "note",     label: "",        state: "archived" },

    // Decisions cluster (top-right)
    { id: "dec1",    x: 450, y: 70,  r: 5, kind: "decision", label: "Decision", state: "fresh" },
    { id: "dec2",    x: 510, y: 120, r: 4, kind: "decision", label: "",         state: "recent" },
    { id: "dec3",    x: 430, y: 150, r: 4, kind: "decision", label: "",         state: "fresh" },
    { id: "dec4",    x: 540, y: 180, r: 3, kind: "decision", label: "",         state: "archived" },

    // Products cluster (left)
    { id: "prod1",   x: 60,  y: 270, r: 6, kind: "product",  label: "Product",  state: "fresh", pinned: true },
    { id: "prod2",   x: 130, y: 320, r: 5, kind: "product",  label: "",         state: "recent" },

    // Releases cluster (bottom-left)
    { id: "rel1",    x: 200, y: 360, r: 4, kind: "release",  label: "Release",  state: "fresh" },
    { id: "rel2",    x: 280, y: 380, r: 3, kind: "release",  label: "",         state: "recent" },

    // Email cluster (right)
    { id: "email1",  x: 510, y: 280, r: 5, kind: "email",    label: "Email",    state: "fresh" },
    { id: "email2",  x: 555, y: 240, r: 3, kind: "email",    label: "",         state: "recent" },
    { id: "email3",  x: 540, y: 340, r: 3, kind: "email",    label: "",         state: "archived" },

    // Issue cluster (bottom-right)
    { id: "issue1",  x: 440, y: 360, r: 4, kind: "issue",    label: "Issue",    state: "fresh" },
    { id: "issue2",  x: 380, y: 320, r: 3, kind: "issue",    label: "",         state: "recent" },
  ];

  // Edges — connect related nodes. Each edge is one of: REFERENCES,
  // RESOLVES, CAUSED_BY. Visualised with subtle stroke.
  const edges = [
    // core → cluster anchors
    ["core", "note1"], ["core", "dec1"], ["core", "prod1"], ["core", "email1"], ["core", "rel1"], ["core", "issue1"],
    // intra-cluster
    ["note1", "note2"], ["note1", "note3"], ["note3", "note5"], ["note2", "note4"],
    ["dec1", "dec2"], ["dec1", "dec3"], ["dec3", "dec4"],
    ["prod1", "prod2"], ["prod1", "rel1"], ["prod2", "rel2"],
    ["email1", "email2"], ["email1", "email3"],
    ["issue1", "issue2"], ["issue1", "dec3"],
    // cross-cluster (the brain's connective tissue)
    ["note1", "dec1"], ["dec3", "rel1"], ["email1", "issue1"], ["note4", "prod2"], ["prod1", "note3"],
  ];

  const stateColor = (state) => state === "fresh" ? "var(--lumi-dk)" : state === "recent" ? "var(--ink-text-mid)" : "var(--ink-text-low)";

  // Scan pulse — runs continuously across a small subset, simulating
  // ⌘K-style query traversal.
  const scanNodes = ["note1", "dec1", "prod1", "core"];
  const [scanIdx, setScanIdx] = useStateBR(0);
  useEffectBR(() => {
    const t = setInterval(() => {
      setScanIdx((i) => (i + 1) % scanNodes.length);
    }, 1800);
    return () => clearInterval(t);
  }, []);
  const scanTarget = nodes.find((n) => n.id === scanNodes[scanIdx]);

  return (
    <svg
      viewBox="0 0 600 420"
      preserveAspectRatio="xMidYMid meet"
      style={{ width: "100%", height: "100%", display: "block" }}
      aria-hidden="true"
    >
      <defs>
        <radialGradient id="brain-glow" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="var(--lumi-dk)" stopOpacity="0.8" />
          <stop offset="60%" stopColor="var(--lumi-dk)" stopOpacity="0.15" />
          <stop offset="100%" stopColor="var(--lumi-dk)" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* Central glow under the core */}
      <circle cx="300" cy="210" r="80" fill="url(#brain-glow)" opacity="0.4" />

      {/* Edges */}
      {edges.map(([from, to], i) => {
        const a = nodes.find((n) => n.id === from);
        const b = nodes.find((n) => n.id === to);
        if (!a || !b) return null;
        const isCore = from === "core" || to === "core";
        return (
          <line
            key={`e-${i}`}
            x1={a.x} y1={a.y} x2={b.x} y2={b.y}
            stroke={isCore ? "var(--lumi-soft)" : "var(--ink-line-2)"}
            strokeWidth={isCore ? 0.7 : 0.4}
            opacity={isCore ? 0.55 : 0.35}
          />
        );
      })}

      {/* Scan pulse — emanates from the current scan target */}
      {scanTarget && (
        <circle
          key={`scan-${scanIdx}`}
          cx={scanTarget.x}
          cy={scanTarget.y}
          fill="none"
          stroke="var(--lumi-dk)"
          strokeWidth="1.5"
          style={{
            animation: "brain-scan-pulse 1.8s ease-out forwards",
            transformOrigin: `${scanTarget.x}px ${scanTarget.y}px`,
          }}
        />
      )}

      {/* Nodes */}
      {nodes.map((n) => {
        const color = stateColor(n.state);
        const isFresh = n.state === "fresh";
        return (
          <g key={n.id}>
            {/* Pinned ring */}
            {n.pinned && (
              <circle
                cx={n.x} cy={n.y} r={n.r + 4}
                fill="none"
                stroke="var(--lumi-dk)"
                strokeWidth="0.8"
                strokeDasharray="2,2"
                opacity="0.5"
              />
            )}
            {/* Node body */}
            <circle
              cx={n.x} cy={n.y} r={n.r}
              fill={color}
              opacity={n.state === "archived" ? 0.35 : 0.9}
              style={isFresh ? {
                animation: `brain-node-pulse ${3 + (n.x % 5) * 0.25}s ease-in-out infinite`,
                transformOrigin: `${n.x}px ${n.y}px`,
              } : undefined}
            />
            {/* Label */}
            {n.label && (
              <text
                x={n.x}
                y={n.y - n.r - 6}
                textAnchor="middle"
                style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 9,
                  letterSpacing: "0.1em",
                  textTransform: "uppercase",
                  fill: n.state === "archived" ? "var(--ink-text-low)" : "var(--ink-text-mid)",
                }}
              >
                {n.label}
              </text>
            )}
          </g>
        );
      })}
    </svg>
  );
}

/* =============================================================
 * Cmd+K palette mock — right card.
 * ============================================================= */

function CmdKPaletteMock() {
  return (
    <div className="corners" style={{
      position: "relative",
      background: "var(--ink-bg-1)",
      border: "1px solid var(--ink-line)",
      borderRadius: 14,
      overflow: "hidden",
      minHeight: 460,
      display: "flex", flexDirection: "column",
      boxShadow: "0 40px 80px -40px rgba(0,0,0,0.6)",
    }}>
      <span className="ct l"></span><span className="ct r"></span>
      <span className="cb l"></span><span className="cb r"></span>

      {/* Query bar */}
      <div style={{
        display: "flex", alignItems: "center", gap: 12,
        padding: "14px 18px",
        borderBottom: "1px solid var(--ink-line)",
        background: "var(--ink-bg)",
      }}>
        <span style={{
          fontFamily: "var(--font-mono)", fontSize: 10.5,
          letterSpacing: "0.18em", textTransform: "uppercase",
          color: "var(--ink-text-low)",
        }}>⌘K</span>
        <span style={{ flex: 1, fontSize: 15, color: "var(--ink-paper)" }}>
          What did I decide about pricing for ApplyIQ?
          <span style={{
            display: "inline-block", width: 1.5, height: "1em",
            marginLeft: 2,
            verticalAlign: "middle",
            background: "var(--lumi-dk)",
            animation: "brain-caret 1s steps(1) infinite",
          }} />
        </span>
        <span style={{
          padding: "3px 8px",
          border: "1px solid var(--ink-line-2)",
          borderRadius: 4,
          fontFamily: "var(--font-mono)", fontSize: 9.5,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--ink-text-low)",
        }}>Deep recall</span>
      </div>

      {/* AI synthesis card */}
      <div style={{
        padding: "14px 18px",
        borderBottom: "1px solid var(--ink-line)",
        background: "color-mix(in oklch, var(--ink-bg) 70%, var(--lumi-soft) 4%)",
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          marginBottom: 8,
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 9.5,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--ink-text-low)",
          }}>AI · llama3.2:3b · local</span>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 9.5,
            color: "var(--ink-text-low)",
          }}>cites #1 · #2</span>
        </div>
        <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--ink-paper)" }}>
          You decided on a 14-day free trial then €9/mo{" "}
          <CitationChip n={1} />, after comparing Lemon Squeezy vs Stripe{" "}
          <CitationChip n={2} />. Reason: existing Stripe wiring made it the lower-friction path{" "}
          <CitationChip n={1} />.
        </p>
      </div>

      {/* Source hits */}
      <div style={{ flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: 6 }}>
        <SourceRow
          n={1}
          kind="decision"
          product="ApplyIQ"
          similarity={92}
          pinned
          snippet="Stripe over Lemon Squeezy — pricing locked at €9/mo with 14d free trial. Reason: existing Stripe wiring on NOESIS means same key, less ops surface."
        />
        <SourceRow
          n={2}
          kind="note"
          product="ApplyIQ"
          similarity={84}
          snippet="Lemon Squeezy demo: liked the merchant-of-record (handles VAT). Tradeoff: separate dashboard, separate auth, separate webhooks. Will retry if EU sales blow up."
        />
        <SourceRow
          n={3}
          kind="note"
          product="ApplyIQ"
          similarity={71}
          archived
          snippet="Pricing sketch from launch week — €5 / €9 / €15 tiers considered. Lower tier had no clear differentiator; collapsed to single price after feedback."
        />
      </div>

      {/* Footer hint row */}
      <div style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "8px 14px",
        borderTop: "1px solid var(--ink-line)",
        background: "var(--ink-bg)",
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: "var(--ink-text-low)",
      }}>
        <span>↑↓ navigate · ↵ open · esc close</span>
        <span>3 hits</span>
      </div>
    </div>
  );
}

function CitationChip({ n }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center",
      height: 17, padding: "0 6px",
      border: "1px solid var(--ink-line-2)",
      borderRadius: 3,
      background: "var(--ink-bg)",
      fontFamily: "var(--font-mono)", fontSize: 10,
      verticalAlign: "baseline",
      color: "var(--ink-text-mid)",
      lineHeight: 1,
    }}>
      #{n}
    </span>
  );
}

function SourceRow({ n, kind, product, similarity, snippet, pinned = false, archived = false }) {
  const kindLabel = {
    decision: "Decision", note: "Note", release: "Release",
    email: "Email", product: "Product", issue: "Issue",
  }[kind] || kind;
  return (
    <div style={{
      padding: "10px 12px",
      border: "1px solid var(--ink-line)",
      borderRadius: 6,
      background: archived ? "transparent" : "var(--ink-bg)",
      opacity: archived ? 0.55 : 1,
      display: "flex", alignItems: "flex-start", gap: 10,
    }}>
      <span style={{
        display: "inline-flex", alignItems: "center", gap: 4,
        padding: "3px 6px",
        border: "1px solid var(--ink-line-2)",
        borderRadius: 3,
        fontFamily: "var(--font-mono)", fontSize: 9.5,
        letterSpacing: "0.12em", textTransform: "uppercase",
        color: "var(--ink-text-low)",
        flexShrink: 0,
        marginTop: 1,
      }}>
        #{n} · {kindLabel}
      </span>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          gap: 8, marginBottom: 4,
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            letterSpacing: "0.12em", textTransform: "uppercase",
            color: "var(--ink-text-low)",
          }}>{product}{pinned ? " · 📌" : ""}</span>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--ink-text-low)",
          }}>{similarity}%</span>
        </div>
        <p style={{
          margin: 0, fontSize: 12.5, lineHeight: 1.5,
          color: archived ? "var(--ink-text-low)" : "var(--ink-text-mid)",
          display: "-webkit-box",
          WebkitLineClamp: 2,
          WebkitBoxOrient: "vertical",
          overflow: "hidden",
        }}>
          {snippet}
        </p>
      </div>
    </div>
  );
}

/* =============================================================
 * Capability cards — bottom row.
 * ============================================================= */

function CapabilityCard({ icon, label, body }) {
  return (
    <div style={{
      background: "var(--ink-bg-1)",
      padding: "28px 24px",
      display: "flex", flexDirection: "column", gap: 12,
    }}>
      <div style={{
        width: 36, height: 36,
        border: "1px solid var(--ink-line-2)",
        borderRadius: 8,
        background: "var(--ink-bg)",
        display: "grid", placeItems: "center",
        color: "var(--lumi-dk)",
      }}>
        {icon}
      </div>
      <h3 style={{
        margin: 0,
        fontSize: 17,
        fontWeight: 500,
        letterSpacing: "-0.01em",
        color: "var(--ink-paper)",
      }}>{label}</h3>
      <p style={{
        margin: 0,
        fontSize: 13.5,
        lineHeight: 1.55,
        color: "var(--ink-text-mid)",
      }}>{body}</p>
    </div>
  );
}

/* =============================================================
 * Backdrop beacons — quieter than the cockpit's, for atmosphere.
 * ============================================================= */

function BrainBackdropBeacons() {
  const beacons = [
    { x: 10, y: 18, delay: 0,    color: "var(--lumi-soft)" },
    { x: 88, y: 30, delay: 0.6,  color: "var(--release)" },
    { x: 22, y: 78, delay: 1.2,  color: "var(--revenue-dk)" },
    { x: 78, y: 82, delay: 0.3,  color: "var(--lumi-soft)" },
    { x: 50, y: 12, delay: 1.5,  color: "var(--release)" },
    { x: 50, y: 92, delay: 0.9,  color: "var(--lumi-soft)" },
  ];
  return (
    <svg
      viewBox="0 0 100 100" preserveAspectRatio="none"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
      aria-hidden="true"
    >
      {beacons.map((b, i) => (
        <g key={i} transform={`translate(${b.x}, ${b.y})`}>
          <circle r="1.8" fill={b.color}>
            <animate attributeName="opacity" values="0.5;0.1;0.5" dur="5s" begin={`${b.delay}s`} repeatCount="indefinite" />
          </circle>
        </g>
      ))}
    </svg>
  );
}

/* =============================================================
 * Icons — small SVGs for the capability cards.
 * ============================================================= */

function IconSemantic() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="11" cy="11" r="6" />
      <path d="M16 16l4 4" />
      <path d="M11 8v6M8 11h6" opacity="0.5" />
    </svg>
  );
}

function IconDecay() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 1018 0 9 9 0 00-18 0z" />
      <path d="M12 6v6l4 2" />
    </svg>
  );
}

function IconLocalAi() {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="6" width="16" height="12" rx="2" />
      <path d="M9 12h.01M15 12h.01" />
      <path d="M9 18v2M15 18v2" />
    </svg>
  );
}

window.BrainSection = BrainSection;