function Lappy() {
  const [activeCmd, setActiveCmd] = React.useState("agent");

  const COMMANDS = [
    {
      id: "agent",
      cmd: "!agent",
      example: "!agent plot inverter voltage vs time for last run",
      color: "#a855f7",
      tag: "AI CODE GEN",
      title: "Natural Language → Code",
      body: "Describe what you want in plain English. Lappy sends your instructions to the AI code-generator, which understands the TimescaleDB, writes and executes Python in a sandboxed environment. Charts and output come back straight into Slack.",
    },
    {
      id: "approve",
      cmd: "!approve / 👍",
      example: "React 👍 on any successful result",
      color: "#22d3ee",
      tag: "RAG MEMORY",
      title: "Approve → Teach the RAG Layer",
      body: "When a result is correct, react with 👍 or type !approve. The prompt, generated code, and output are stored as a verified example (golden sample) in the vector DB. Future similar queries retrieve and reference it — Lappy gets smarter with every run.",
    },
    {
      id: "aistats",
      cmd: "!aistats",
      example: "!aistats",
      color: "#D6AB39",
      tag: "OBSERVABILITY",
      title: "RAG Vector Space Dashboard",
      body: "Shows live AI metrics: success rate, cache hit rates, avg sandbox duration, retry distribution — plus a PCA projection of the RAG vector space rendered as an image and posted directly in Slack.",
    },
    {
      id: "wx",
      cmd: "!wx",
      example: "!wx CYXU",
      color: "#f97316",
      tag: "WEATHER",
      title: "Aviation Weather",
      body: "Fetches METAR + TAF for any ICAO airport code from the NOAA Aviation Weather API. Defaults to CYXU (London International in Canada). Useful for testing go/no-go decisions.",
    },
  ];

  const cmd = COMMANDS.find(c => c.id === activeCmd);

  // Simulated RAG flow
  const RAG_STEPS = [
    { label: "User prompt", sub: "natural language", color: "#a855f7" },
    { label: "Vector search", sub: "RAG sensors + golden examples", color: "#22d3ee" },
    { label: "Code generator", sub: "LLM + context", color: "#a855f7" },
    { label: "Sandboxed exec", sub: "Python runtime", color: "#D6AB39" },
    { label: "Slack response", sub: "output + charts", color: "#22d3ee" },
  ];

  return (
    <section id="lappy" style={{ padding: "100px 2rem", background: "rgba(168,85,247,0.03)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="09 / Lappy · Slack AI Agent"
          title="Lappy"
          subtitle="An AI-powered Slack bot that turns plain-English questions into executed Python analysis — and gets smarter with every approved result via a RAG memory layer."
        />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginTop: 48, alignItems: "start" }}>
          {/* Left: Command explorer */}
          <div>
            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "rgba(255,255,255,0.4)", letterSpacing: 2, textTransform: "uppercase", marginBottom: 10 }}>Commands</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginBottom: 24 }}>
              {COMMANDS.map(c => (
                <button key={c.id} onClick={() => setActiveCmd(c.id)} style={{
                  background: activeCmd === c.id ? `linear-gradient(135deg, ${c.color}18, rgba(32,32,47,0.9))` : "rgba(32,32,47,0.5)",
                  border: `1px solid ${activeCmd === c.id ? c.color + "50" : "rgba(255,255,255,0.08)"}`,
                  borderRadius: 10, padding: "12px 16px", cursor: "pointer",
                  textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center",
                  transition: "all 0.2s",
                }}>
                  <div>
                    <div style={{ fontFamily: "'Space Mono', monospace", fontWeight: 700, fontSize: 12, color: activeCmd === c.id ? c.color : "rgba(255,255,255,0.7)", letterSpacing: 1 }}>{c.cmd}</div>
                    <div style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", marginTop: 3, fontFamily: "'Space Mono', monospace" }}>{c.example}</div>
                  </div>
                  <span style={{
                    fontFamily: "'Space Mono', monospace", fontSize: 8, color: c.color,
                    background: c.color + "15", border: `1px solid ${c.color}30`,
                    borderRadius: 4, padding: "3px 7px", letterSpacing: 1.5, textTransform: "uppercase", flexShrink: 0, marginLeft: 10,
                  }}>{c.tag}</span>
                </button>
              ))}
            </div>

            {/* Detail panel */}
            {cmd && (
              <div style={{
                background: `linear-gradient(135deg, ${cmd.color}12, rgba(32,32,47,0.7))`,
                border: `1px solid ${cmd.color}35`, borderRadius: 12, padding: "20px 22px",
              }}>
                <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 15, color: "#fff", marginBottom: 10 }}>{cmd.title}</h3>
                <p style={{ fontSize: 13.5, color: "rgba(255,255,255,0.62)", lineHeight: 1.7 }}>{cmd.body}</p>
              </div>
            )}

            {/* Upload integration card */}
            <div style={{
              marginTop: 16,
              background: "linear-gradient(135deg, rgba(34,211,238,0.07), rgba(32,32,47,0.6))",
              border: "1px solid rgba(34,211,238,0.22)", borderRadius: 12, padding: "16px 18px",
              display: "flex", gap: 14, alignItems: "flex-start",
            }}>
              <div>
                <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#22d3ee", letterSpacing: 2, textTransform: "uppercase", marginBottom: 5, opacity: 0.8 }}>Upload Progress</div>
                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.75)", lineHeight: 1.65 }}>
                  When CSVs are being uploaded through Data Uploader, Lappy automatically posts live progress to Slack as data moves through the pipeline — CAN decoding, signal pivoting, and final write to TimescaleDB — finishing with a row-count and elapsed-time summary.
                </div>
              </div>
            </div>
          </div>

          {/* Right: RAG pipeline diagram */}
          <div>
            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "rgba(255,255,255,0.4)", letterSpacing: 2, textTransform: "uppercase", marginBottom: 16 }}>RAG Memory Pipeline</div>

            {/* RAG flow */}
            <div style={{ display: "flex", flexDirection: "column", gap: 0, marginBottom: 28 }}>
              {RAG_STEPS.map((step, i) => (
                <div key={step.label} style={{ display: "flex", flexDirection: "column" }}>
                  <div style={{
                    display: "flex", alignItems: "center", gap: 14,
                    background: `linear-gradient(90deg, ${step.color}12, rgba(32,32,47,0.6))`,
                    border: `1px solid ${step.color}30`, borderRadius: 10,
                    padding: "12px 18px",
                  }}>
                    <div style={{ width: 28, height: 28, borderRadius: "50%", background: step.color + "20", border: `1.5px solid ${step.color}60`, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, fontWeight: 700, color: step.color }}>{i + 1}</span>
                    </div>
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 13, color: "#fff", lineHeight: 1.2 }}>{step.label}</div>
                      <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: step.color, opacity: 0.8, marginTop: 2 }}>{step.sub}</div>
                    </div>
                  </div>
                  {i < RAG_STEPS.length - 1 && (
                    <div style={{ width: 2, height: 14, background: `linear-gradient(to bottom, ${step.color}50, ${RAG_STEPS[i + 1].color}50)`, marginLeft: 23 }} />
                  )}
                </div>
              ))}
            </div>

            {/* Memory loop callout */}
            <div style={{
              background: "linear-gradient(135deg, rgba(34,211,238,0.08), rgba(168,85,247,0.08))",
              border: "1px solid rgba(34,211,238,0.25)", borderRadius: 14, padding: "18px 20px",
              position: "relative", overflow: "hidden",
            }}>
              <div style={{ position: "absolute", top: 12, right: 14, fontFamily: "'Space Mono', monospace", fontSize: 9, color: "#22d3ee", letterSpacing: 2, textTransform: "uppercase", opacity: 0.6 }}>MEMORY LOOP</div>
              <div style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 14, color: "#fff", marginBottom: 10, marginTop: 4 }}>
                Gets Smarter Over Time
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {[
                  { c: "#22d3ee", t: "Vector DB", v: "Sensor name NLP — maps 'inverter temp' → DBC signal" },
                  { c: "#a855f7", t: "Run memory", v: "Associates run dates + session context with results" },
                  { c: "#D6AB39", t: "Golden examples", v: "👍-approved code stored as ground truth for future queries" },
                  { c: "#22d3ee", t: "PCA projection", v: "!aistats renders the live RAG vector space as an image" },
                ].map(item => (
                  <div key={item.t} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <span style={{ color: item.c, marginTop: 5, fontSize: 7, flexShrink: 0 }}>●</span>
                    <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.65)", lineHeight: 1.5 }}>
                      <strong style={{ color: item.c, fontWeight: 600 }}>{item.t}</strong>{" — "}{item.v}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* Screenshots */}
        <div style={{ marginTop: 48 }}>
          <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "rgba(255,255,255,0.4)", letterSpacing: 2, textTransform: "uppercase", marginBottom: 16 }}>In Action</div>
          <div style={{ display: "grid", gridTemplateColumns: "3fr 2fr", gap: 16, alignItems: "start" }}>
            <div>
              <img src="assets/LappyAnalysis.png" alt="Lappy AI analysis in Slack"
                style={{ width: "100%", borderRadius: 10, border: "1px solid rgba(168,85,247,0.2)", boxShadow: "0 8px 32px rgba(0,0,0,0.5)", display: "block" }} />
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.35)", marginTop: 8 }}>!agent generating acceleration vs. throttle scatter plots from WFR26 data</div>
            </div>
            <div>
              <img src="assets/LappyUpload.png" alt="Lappy upload notifications in Slack"
                style={{ width: "100%", borderRadius: 10, border: "1px solid rgba(168,85,247,0.2)", boxShadow: "0 8px 32px rgba(0,0,0,0.5)", display: "block" }} />
              <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.35)", marginTop: 8 }}>Upload completion notifications — 9.3M rows written in ~26s</div>
            </div>
          </div>
        </div>

        {/* Bottom: tech stack */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 32 }}>
          {["slack_sdk", "Socket Mode", "Python 3.12", "RAG vector DB", "Code sandbox", "Docker", "NOAA Aviation API"].map(t => (
            <span key={t} style={{
              fontFamily: "'Space Mono', monospace", fontSize: 11, color: "rgba(168,85,247,0.85)",
              background: "rgba(168,85,247,0.08)", border: "1px solid rgba(168,85,247,0.2)",
              borderRadius: 20, padding: "5px 14px",
            }}>{t}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Lappy });