function FlightRecorder() {
  return (
    <section id="flight" style={{ padding: "100px 2rem" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="11 / Flight Recorder"
          title="Flight Recorder"
          subtitle="Post-run data capture and WiFi upload — no SD card pull, no cables."
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, marginTop: 48, alignItems: "start" }}>
          {/* Left: description + flow */}
          <div>
            <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 15, lineHeight: 1.75, marginBottom: 28 }}>
              A Progressive Web App deployed on Cloudflare Pages that runs directly on an ESP32 or Raspberry Pi mounted in the car. During a run it captures every raw CAN frame to the browser's IndexedDB — no server required. After the run, it batch-uploads everything to the server's TimescaleDB over the car's WiFi hotspot.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                { color: "#f97316", label: "CAN Bus", sub: "vehicle running" },
                { color: "#f97316", label: "IndexedDB", sub: "captured in-browser" },
                { color: "#D6AB39", label: "WiFi Upload", sub: "POST /api/can-frames/batch" },
                { color: "#22d3ee", label: "TimescaleDB", sub: "persisted for Grafana" },
              ].map((step, i, arr) => (
                <div key={step.label} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }}>
                  <div style={{
                    display: "flex", alignItems: "center", gap: 14,
                    background: `linear-gradient(135deg, ${step.color}12, rgba(32,32,47,0.7))`,
                    border: `1px solid ${step.color}30`, borderRadius: 10,
                    padding: "12px 18px", width: "100%",
                  }}>
                    <div style={{ width: 10, height: 10, borderRadius: "50%", background: step.color, boxShadow: `0 0 8px ${step.color}80`, flexShrink: 0 }} />
                    <div>
                      <div style={{ fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, color: "#fff" }}>{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 < arr.length - 1 && (
                    <div style={{ width: 2, height: 20, background: `linear-gradient(to bottom, ${step.color}50, ${arr[i+1].color}50)`, marginLeft: 23 }} />
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Right: feature cards */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              { color: "#f97316", title: "Zero Hardware Setup", body: "Runs as a PWA on any device with a browser (phone, laptop) connected to the car's hotspot. No custom firmware, no SD card slot needed." },
              { color: "#D6AB39", title: "IndexedDB Storage", body: "Captures CAN frames to the browser's origin-private storage during the run. Survives page reloads and power cycles." },
              { color: "#22d3ee", title: "Same Visualization as PECAN", body: "Post-run review uses the identical rendering pipeline as the live PECAN dashboard — consistency across tools." },
              { color: "#a855f7", title: "Cloudflare Pages", body: "Zero-ops deployment. Globally distributed, HTTPS by default, no server required for the frontend." },
            ].map(f => (
              <div key={f.title} style={{
                background: "rgba(32,32,47,0.6)", border: `1px solid ${f.color}20`,
                borderRadius: 12, padding: "18px 20px",
                borderLeft: `3px solid ${f.color}`,
              }}>
                <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 13, color: "#fff", marginBottom: 8 }}>{f.title}</h3>
                <p style={{ fontSize: 13, color: "rgba(255,255,255,0.55)", lineHeight: 1.6 }}>{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { FlightRecorder });