/* System Architecture — static system map with click-for-detail panels */

const ARCH_NODES = {
  library: {
    label: "Atomic Component Library",
    sub: "31 elements",
    edge: "selection",
    detail: {
      title: "Atomic Component Library",
      lead: "31 pre-designed, brand-compliant elements that bound the AI's design space.",
      bullets: [
        "Typography, panels, dividers, skeletons, icons",
        "Each element pre-validated against brand identity",
        "Each element pre-validated against automotive safety guidelines",
        "Acts as the LLM's vocabulary. It can only choose from this set",
      ],
      tag: "INPUT · selection",
    },
  },
  context: {
    label: "Contextual Data & User Input",
    sub: "sensors · voice · environment",
    edge: "interpretation",
    detail: {
      title: "Contextual Data & User Input",
      lead: "Live signals from the car and driver, fed into the LLM as the moment-to-moment context.",
      bullets: [
        "Sensors: time, weather, fuel, location, telemetry, etc.",
        "Driver state: heart-rate variability, attention cues, etc.",
        "User input & Preferences: voice prompts, manual interactions, driving history, etc.",
        "Cabin environment: passengers, ambient light, seat settings, etc.",
      ],
      tag: "INPUT · interpretation",
    },
  },
  prompt: {
    label: "System Prompt",
    sub: "identity · heuristics · format",
    edge: "compliance",
    detail: {
      title: "System Prompt",
      lead: "The constitution. Defines who the AI is and the rules it cannot break.",
      bullets: [
        "Identity, capabilities, and objective",
        "Layout specifications (regions, hierarchy)",
        "Safety principles (NHTSA guidelines)",
        "Usability heuristics",
        "Driver profile",
        "Output format: structured JSON only",
      ],
      tag: "INPUT · compliance",
    },
  },
  llm: {
    label: "LLM",
    sub: "Python · Gemini 2.5 Pro",
    edge: "JSON",
    detail: {
      title: "Large Language Model",
      lead: "The reasoning core. Receives all three inputs, decides what the driver needs right now, and emits a layout description.",
      bullets: [
        "Reasons over the combined context",
        "Selects components from the validated library",
        "Decides which screen region each component goes in",
        "Outputs structured JSON, never raw markup",
        "Gemini 2.5 Pro chosen after benchmarking 6 models",
      ],
      tag: "CORE",
    },
  },
  validator: {
    label: "Validation & Rendering",
    sub: "guard rail",
    edge: "props",
    detail: {
      title: "Validation & Rendering",
      lead: "Server-side check. Malformed or unsafe configurations never reach the screen.",
      bullets: [
        "Schema check on every JSON payload",
        "Cross-reference against component library",
        "Reject layouts violating safety guidelines",
        "Hand validated config to the React renderer",
      ],
      tag: "GUARD RAIL",
    },
  },
  output: {
    label: "Dynamic context-aware UI",
    sub: "in the cabin",
    detail: {
      title: "Rendered UI",
      lead: "What the driver actually sees: a context-aware infotainment screen, regenerated as the situation changes.",
      bullets: [
        "Web frontend (React) deterministically renders validated config",
        "Same library, infinite combinations",
        "Visually identical to a hand-designed UI",
        "Adapts continuously as context evolves",
      ],
      tag: "OUTPUT",
    },
  },
}

function Architecture() {
  const [open, setOpen] = useState(null)

  const node = (k) => (
    <button
      key={k}
      className={"am-node am-node-" + k + (open === k ? " am-open" : "")}
      onClick={() => setOpen(open === k ? null : k)}
      aria-expanded={open === k}
    >
      <span className="am-node-label">{ARCH_NODES[k].label}</span>
      <span className="am-node-sub">{ARCH_NODES[k].sub}</span>
      <span className="am-node-plus">{open === k ? "−" : "+"}</span>
    </button>
  )

  const detail = open ? ARCH_NODES[open].detail : null

  return (
    <section
      id="architecture"
      style={{
        background: "var(--page-fg)",
        color: "#F4EFDF",
        paddingTop: 120,
        paddingBottom: 220,
      }}
    >
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 56 }}>
          <div
            className="num"
            style={{
              color: "rgba(244,239,223,0.6)",
              borderTop: "1px solid rgba(244,239,223,0.3)",
            }}
          >
            04 — System
          </div>
          <div>
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-accent)", marginBottom: 16 }}
            >
              Architecture
            </div>
            <h2 className="h-section" style={{ color: "#F4EFDF" }}>
              Three inputs, one model, one safe output.
            </h2>
            <p
              className="lede"
              style={{ color: "rgba(244,239,223,0.8)", marginTop: 24 }}
            >
              The LLM is the gravity well. A bounded library, live context, and
              a constitutional system prompt all flow in. JSON flows out, gets
              validated, and only then becomes UI.{" "}
              <em>Click any block for detail.</em>
            </p>
          </div>
        </div>

        <div className="am-stage">
          {/* Diagram */}
          <div className="am-diagram">
            <svg
              className="am-svg"
              viewBox="0 0 800 700"
              preserveAspectRatio="xMidYMid meet"
              aria-hidden="true"
            >
              <defs>
                <marker
                  id="amArrow"
                  viewBox="0 0 10 10"
                  refX="9"
                  refY="5"
                  markerWidth="6"
                  markerHeight="6"
                  orient="auto-start-reverse"
                >
                  <path d="M 0 0 L 10 5 L 0 10 z" fill="var(--page-accent)" />
                </marker>
              </defs>
              {/* Library → LLM (curve from top-left) */}
              <path
                d="M 130 143 C 130 285, 280 350, 380 350"
                className="am-edge"
                markerEnd="url(#amArrow)"
              />
              {/* Context → LLM (straight down) */}
              <path
                d="M 400 143 L 400 311"
                className="am-edge"
                markerEnd="url(#amArrow)"
              />
              {/* Prompt → LLM (curve from top-right) */}
              <path
                d="M 670 143 C 670 285, 520 350, 420 350"
                className="am-edge"
                markerEnd="url(#amArrow)"
              />
              {/* LLM → Validator — starts below circle bottom (~y=415) */}
              <path
                d="M 400 415 L 400 467"
                className="am-edge"
                markerEnd="url(#amArrow)"
              />
              {/* Validator → Output — starts below validator bottom (~y=572) */}
              <path
                d="M 400 572 L 400 624"
                className="am-edge"
                markerEnd="url(#amArrow)"
              />

              {/* Edge labels */}
              <text x="170" y="259" className="am-edge-label">
                selection
              </text>
              <text x="412" y="207" className="am-edge-label">
                interpretation
              </text>
              <text x="630" y="259" className="am-edge-label">
                compliance
              </text>
              <text
                x="435"
                y="440"
                className="am-edge-label"
                textAnchor="start"
              >
                JSON
              </text>
              <text x="412" y="597" className="am-edge-label">
                validated config
              </text>

              {/* Animated pulse dots travelling each edge */}
              <circle r="4" fill="var(--page-accent)" className="am-pulse">
                <animateMotion
                  dur="3.6s"
                  repeatCount="indefinite"
                  path="M 130 143 C 130 285, 280 350, 380 350"
                />
              </circle>
              <circle r="4" fill="var(--page-accent)" className="am-pulse">
                <animateMotion
                  dur="3.6s"
                  begin="0.6s"
                  repeatCount="indefinite"
                  path="M 400 143 L 400 311"
                />
              </circle>
              <circle r="4" fill="var(--page-accent)" className="am-pulse">
                <animateMotion
                  dur="3.6s"
                  begin="1.2s"
                  repeatCount="indefinite"
                  path="M 670 143 C 670 285, 520 350, 420 350"
                />
              </circle>
              <circle r="4" fill="var(--page-accent)" className="am-pulse">
                <animateMotion
                  dur="2.6s"
                  begin="1.8s"
                  repeatCount="indefinite"
                  path="M 400 415 L 400 467"
                />
              </circle>
              <circle r="4" fill="var(--page-accent)" className="am-pulse">
                <animateMotion
                  dur="2.6s"
                  begin="2.4s"
                  repeatCount="indefinite"
                  path="M 400 572 L 400 624"
                />
              </circle>
            </svg>

            {/* Nodes positioned absolutely on top of the SVG */}
            <div className="am-nodes">
              <div className="am-row am-row-inputs">
                {node("library")}
                {node("context")}
                {node("prompt")}
              </div>
              <div className="am-row am-row-llm">{node("llm")}</div>
              <div className="am-row am-row-validator">{node("validator")}</div>
              <div className="am-row am-row-output">{node("output")}</div>
            </div>
          </div>

          {/* Detail panel */}
          <aside className="am-detail" data-open={!!open}>
            {!detail && (
              <div className="am-detail-empty">
                <div
                  className="h-eyebrow"
                  style={{ color: "var(--page-accent)", marginBottom: 12 }}
                >
                  Tap a block
                </div>
                <p
                  style={{
                    color: "rgba(244,239,223,0.75)",
                    fontSize: 14,
                    lineHeight: 1.55,
                  }}
                >
                  Each part of the diagram has a story. Click to read it.
                </p>

                <div className="am-detail-pillars">
                  {[
                    "Preserves brand identity",
                    "Complies with safety guidelines",
                    "Bounds the AI's design space",
                    "Keeps spatial grammar stable",
                  ].map((x) => (
                    <div key={x} className="am-pillar">
                      <Icon.Check
                        style={{
                          color: "var(--page-accent)",
                          flexShrink: 0,
                          marginTop: 2,
                          width: 14,
                          height: 14,
                        }}
                      />
                      <span>{x}</span>
                    </div>
                  ))}
                </div>

                <div className="am-detail-extra">
                  <div
                    className="h-eyebrow"
                    style={{ color: "var(--page-accent)", marginBottom: 8 }}
                  >
                    Additionally
                  </div>
                  <p
                    style={{
                      fontSize: 13,
                      color: "rgba(244,239,223,0.85)",
                      margin: 0,
                      lineHeight: 1.5,
                    }}
                  >
                    A two-way voice assistant (idle · listening · thinking ·
                    speaking) was integrated alongside the visual UI.
                  </p>
                </div>
              </div>
            )}
            {detail && (
              <div className="am-detail-body" key={open}>
                <div className="am-detail-tag mono">{detail.tag}</div>
                <h3 className="am-detail-title">{detail.title}</h3>
                <p className="am-detail-lead">{detail.lead}</p>
                <ul className="am-detail-list">
                  {detail.bullets.map((b, i) => (
                    <li key={i}>
                      <Icon.Check
                        style={{
                          color: "var(--page-accent)",
                          flexShrink: 0,
                          marginTop: 3,
                          width: 13,
                          height: 13,
                        }}
                      />
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
                <button
                  className="am-detail-close"
                  onClick={() => setOpen(null)}
                >
                  ← back to overview
                </button>
              </div>
            )}
          </aside>
        </div>
      </div>

      <style>{`
        .am-stage {
          display: grid;
          grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
          gap: 40px;
          align-items: start;
        }

        .am-diagram {
          position: relative;
          aspect-ratio: 800 / 700;
          background: rgba(244,239,223,0.02);
          border: 1px solid rgba(244,239,223,0.08);
          border-radius: 18px;
          padding: 24px;
        }
        .am-svg {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          padding: 24px;
          pointer-events: none;
        }
        .am-edge {
          fill: none;
          stroke: var(--page-accent);
          stroke-width: 1.5;
          stroke-opacity: 0.7;
        }
        .am-edge-label {
          fill: rgba(244,239,223,0.7);
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.04em;
          text-anchor: middle;
        }
        .am-pulse { filter: drop-shadow(0 0 6px var(--page-accent)); }

        .am-nodes {
          position: relative;
          width: 100%;
          height: 100%;
          display: grid;
          grid-template-rows: auto auto auto auto;
          gap: 38px;
        }
        .am-row { display: flex; justify-content: center; }
        .am-row-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

        .am-node {
          background: rgba(244,239,223,0.06);
          border: 1px solid rgba(244,239,223,0.18);
          border-radius: 12px;
          padding: 14px 16px;
          color: #F4EFDF;
          text-align: left;
          font-family: var(--font-sans);
          cursor: pointer;
          display: flex; flex-direction: column; gap: 4px;
          position: relative;
          transition: border-color 200ms, background 200ms, transform 150ms;
          width: 100%;
          min-height: 76px;
        }
        .am-node:hover { border-color: var(--page-accent); background: rgba(224,123,44,0.08); transform: translateY(-1px); }
        .am-node.am-open { border-color: var(--page-accent); background: rgba(224,123,44,0.14); }
        .am-node-label { font-size: 14px; font-weight: 600; line-height: 1.25; padding-right: 18px; }
        .am-node-sub { font-size: 11px; color: rgba(244,239,223,0.6); font-family: var(--font-mono); letter-spacing: 0.04em; }
        .am-node-plus {
          position: absolute; top: 10px; right: 12px;
          font-size: 14px; line-height: 1;
          color: var(--page-accent);
        }

        /* The LLM is the heart — a circle */
        .am-node-llm {
          width: 160px; height: 160px; min-height: 160px;
          border-radius: 999px;
          align-items: center; justify-content: center; text-align: center;
          background: rgba(244,239,223,0.92);
          border-color: rgba(244,239,223,0.92);
          color: var(--page-fg);
          padding: 20px;
        }
        .am-node-llm:hover, .am-node-llm.am-open { background: #fff; border-color: var(--page-accent); transform: translateY(-1px); }
        .am-node-llm .am-node-label { font-size: 18px; font-weight: 700; padding-right: 0; font-family: var(--font-display); font-style: italic; letter-spacing: -0.01em; }
        .am-node-llm .am-node-sub { color: rgba(14,14,14,0.6); }
        .am-node-llm .am-node-plus { color: var(--page-accent); }

        .am-node-output {
          background: transparent;
          border: 1px dashed var(--page-accent);
          color: var(--page-accent);
          width: max-content; margin: 0 auto;
          padding: 12px 22px;
          min-height: 0;
        }
        .am-node-output:hover, .am-node-output.am-open { background: rgba(224,123,44,0.12); }
        .am-node-output .am-node-label { color: var(--page-accent); }
        .am-node-output .am-node-sub { color: rgba(224,123,44,0.7); }

        .am-row-llm { padding: 4px 0; }
        .am-row-output { padding-top: 6px; padding-bottom: 32px; }

        /* Detail */
        .am-detail {
          position: sticky;
          top: 100px;
          background: rgba(244,239,223,0.04);
          border: 1px solid rgba(244,239,223,0.12);
          border-radius: 16px;
          padding: 24px;
          min-height: 320px;
        }
        .am-detail-tag { font-size: 11px; color: var(--page-accent); letter-spacing: 0.08em; margin-bottom: 12px; }
        .am-detail-title { font-family: var(--font-display); font-style: italic; font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 12px; color: #F4EFDF; }
        .am-detail-lead { font-size: 14px; line-height: 1.55; color: rgba(244,239,223,0.85); margin: 0 0 16px; }
        .am-detail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
        .am-detail-list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: rgba(244,239,223,0.85); }
        .am-detail-close {
          margin-top: 18px;
          background: transparent; border: none; padding: 0;
          color: var(--page-accent); font-family: var(--font-mono);
          font-size: 11px; letter-spacing: 0.06em; cursor: pointer;
        }
        .am-detail-close:hover { text-decoration: underline; }
        .am-detail-body { animation: amFade 280ms ease-out both; }
        @keyframes amFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        .am-detail-pillars { display: grid; gap: 8px; margin: 18px 0 20px; }
        .am-pillar { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; color: rgba(244,239,223,0.8); }
        .am-detail-extra { padding: 14px; border-radius: 10px; background: rgba(244,239,223,0.04); border: 1px solid rgba(244,239,223,0.1); }

        @media (max-width: 980px) {
          .am-stage { grid-template-columns: 1fr; }
          .am-detail { position: static; }
        }
        @media (max-width: 640px) {
          .am-row-inputs { grid-template-columns: 1fr; }
          .am-diagram { aspect-ratio: auto; padding: 16px; }
          .am-svg { display: none; }
          .am-nodes { gap: 18px; }
          .am-node-llm { width: 140px; height: 140px; min-height: 140px; }
        }
      `}</style>
    </section>
  )
}

window.Architecture = Architecture