const BRIDGES = [
  {
    color: "#22d3ee",
    name: "Kvaser Bridge",
    status: "PRODUCTION",
    statusColor: "#22d3ee",
    body: "Exposes Kvaser CAN hardware (Leaf Light, USBcan, etc.) directly to PECAN over WebSocket. Lets bench engineers and dyno operators use the full PECAN dashboard without any of the radio infrastructure — plug a Kvaser into your laptop, point PECAN at localhost, and you have live telemetry.",
    bullets: [
      "Reads from Kvaser CANlib — same DBC pipeline as the radio stack",
      "Drop-in replacement for the WebSocket bridge in development",
      "Cross-platform: Windows, macOS, Linux",
      "Same JSON message format → zero PECAN-side changes",
    ],
    flow: ["Kvaser CAN", "kvaser-bridge", "WebSocket :9080", "PECAN browser"],
  },
  {
    color: "#a855f7",
    name: "PECAN Bridge",
    status: "IN DEVELOPMENT",
    statusColor: "#D6AB39",
    body: "Reverse direction — exposes the live PECAN message stream back out in formats that traditional motorsport tooling can consume. Lets the team integrate PECAN's pipeline with existing analyzers (Vector CANalyzer, BUSMASTER, MoTeC i2 Pro) without abandoning the in-house stack.",
    bullets: [
      "Re-emits decoded frames as virtual CAN (vcan / SocketCAN)",
      "Can replay .pecan timeline exports back onto a CAN bus",
      "Compatibility layer for Vector ASC, BLF, MDF logs",
      "Bridges Flight Recorder uploads into legacy analyzers",
    ],
    flow: ["PECAN feed", "pecan-bridge", "vcan / ASC / MDF", "Legacy tools"],
  },
];

function Bridges() {
  return (
    <section id="bridges" style={{ padding: "100px 2rem" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="07 / Bridges"
          title="Bridges — In, Out, Anywhere"
          subtitle="The PECAN stack isn't an island. Kvaser hardware feeds in, traditional tooling reads out — PECAN sits in the middle as the universal translator."
        />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 48 }}>
          {BRIDGES.map(b => (
            <div key={b.name} style={{
              background: `linear-gradient(135deg, ${b.color}10 0%, rgba(32,32,47,0.7) 100%)`,
              border: `1px solid ${b.color}30`, borderRadius: 16, padding: "28px 30px",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 14 }}>
                <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 18, color: "#fff" }}>{b.name}</h3>
                <span style={{
                  fontFamily: "'Space Mono', monospace", fontSize: 9, color: b.statusColor,
                  background: b.statusColor + "15", border: `1px solid ${b.statusColor}40`,
                  borderRadius: 4, padding: "4px 9px", letterSpacing: 1.5, textTransform: "uppercase",
                }}>{b.status}</span>
              </div>

              <p style={{ fontSize: 14, color: "rgba(255,255,255,0.62)", lineHeight: 1.7, marginBottom: 20 }}>{b.body}</p>

              {/* Flow */}
              <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 0, marginBottom: 22, padding: "12px 0", borderTop: `1px dashed ${b.color}25`, borderBottom: `1px dashed ${b.color}25` }}>
                {b.flow.map((step, i) => (
                  <React.Fragment key={step}>
                    <span style={{
                      fontFamily: "'Space Mono', monospace", fontSize: 10, color: i === 1 ? b.color : "rgba(255,255,255,0.6)",
                      background: i === 1 ? b.color + "15" : "rgba(255,255,255,0.04)",
                      border: i === 1 ? `1px solid ${b.color}40` : "1px solid rgba(255,255,255,0.08)",
                      borderRadius: 5, padding: "5px 10px", fontWeight: i === 1 ? 700 : 400,
                    }}>{step}</span>
                    {i < b.flow.length - 1 && (
                      <span style={{ color: b.color + "80", padding: "0 6px", fontSize: 12 }}>→</span>
                    )}
                  </React.Fragment>
                ))}
              </div>

              {/* Bullets */}
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                {b.bullets.map(bl => (
                  <li key={bl} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <span style={{ color: b.color, marginTop: 6, flexShrink: 0, fontSize: 8 }}>●</span>
                    <span style={{ fontSize: 13, color: "rgba(255,255,255,0.62)", lineHeight: 1.55 }}>{bl}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Bridges });