const UTS_FEATURES = [
  {
    color: "#a855f7",
    title: "Shared Codebase, Two Deployments",
    body: "The same Python source runs on both car and base. On the car it runs as a systemd service for low-overhead boot-time startup. On the base station it runs in Docker Compose for easy dependency management and restarts. Role is auto-detected at runtime by probing for can0.",
    tag: "ONE CODEBASE",
  },
  {
    color: "#22d3ee",
    title: "UDP + TCP Recovery",
    body: "Live CAN frames are batched (20 msg / 50 ms) and streamed over UDP for minimal latency. A 60-second ring buffer on the car enables TCP retransmission requests for any sequence gaps detected at the base.",
    tag: "PACKET RECOVERY",
  },
  {
    color: "#D6AB39",
    title: "Redis Pub/Sub",
    body: "Decoded CAN batches are published to the can_messages Redis channel. System health stats (packet rate, loss, recovery) go to system_stats. Any number of consumers — PECAN, custom scripts — can subscribe.",
    tag: "MESSAGE BUS",
  },
  {
    color: "#ef4444",
    title: "TimescaleDB Bridge",
    body: "The base station writes directly to a remote TimescaleDB over the network. No intermediate buffer file — every decoded frame is persisted for historical Grafana analysis the moment it arrives.",
    tag: "PERSISTENT STORAGE",
  },
  {
    color: "#f97316",
    title: "Live Video + Audio",
    body: "ffmpeg on the car encodes H.264 with ultrafast preset + zero-latency tune, pushing RTSP to MediaMTX on the base. PECAN pulls the stream via WebRTC WHEP for sub-second in-browser latency. Quality presets (360p/480p/720p) selectable live from the dashboard. Audio streaming supported over the same link.",
    tag: "WEBRTC AV",
  },
  {
    color: "#22d3ee",
    title: "OBS Broadcast Overlay",
    body: "A composited 1920x1080 streaming overlay (livestream branch) layers live telemetry over the car camera feed and pushes to YouTube or Twitch via OBS. Powered by the same WebSocket connection as PECAN — zero extra infrastructure for a full broadcast.",
    tag: "BROADCAST",
  },
  {
    color: "#a855f7",
    title: "Status + LED Feedback",
    body: "An HTTP status page (:8080) shows real-time connection state, packet stats, and a live rate chart. Physical LEDs on the RPi reflect link health — green for connected, amber for degraded, red for offline.",
    tag: "OBSERVABILITY",
  },
];

const DATA_FLOW = [
  { label: "CAN Bus", sub: "500 kbps", color: "#D6AB39" },
  { label: "Car RPi", sub: "systemd service", color: "#a855f7" },
  { label: "UDP Sender", sub: "20 msg / 50 ms burst", color: "#a855f7" },
  { label: "RF Link", sub: "Ubiquiti 5 GHz", color: "#22d3ee", dashed: true },
  { label: "Base RPi", sub: "Docker Compose", color: "#a855f7" },
  { label: "TCP Recovery", sub: "ring buffer replay", color: "#ef4444" },
  { label: "Redis PUBLISH", sub: "can_messages channel", color: "#ef4444" },
  { label: "WS Bridge", sub: ":9080 → PECAN", color: "#D6AB39" },
];

function UTSFlowDiagram() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 0, flexWrap: "wrap", justifyContent: "center", marginTop: 40 }}>
      {DATA_FLOW.map((step, i) => (
        <React.Fragment key={step.label}>
          <div style={{
            background: `linear-gradient(135deg, ${step.color}15, rgba(32,32,47,0.8))`,
            border: `1px solid ${step.color}40`,
            borderRadius: 10, padding: "10px 16px", textAlign: "center",
            minWidth: 100,
          }}>
            <div style={{ fontFamily: "'Orbitron', sans-serif", fontSize: 10, fontWeight: 700, color: "#fff", marginBottom: 3, lineHeight: 1.2 }}>{step.label}</div>
            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: step.color, opacity: 0.8 }}>{step.sub}</div>
          </div>
          {i < DATA_FLOW.length - 1 && (
            <div style={{ color: step.dashed ? "#22d3ee" : "rgba(255,255,255,0.2)", fontSize: 16, padding: "0 2px", flexShrink: 0 }}>
              {step.dashed ? "- - →" : "→"}
            </div>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

function UTS() {
  return (
    <section id="uts" style={{ padding: "100px 2rem", background: "rgba(0,0,0,0.15)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="04 / Universal Telemetry Software"
          title="UTS — One Stack, Two Deployments"
          subtitle="The same Python source handles both car and base. On the car it runs as a lightweight systemd service; on the base it runs in Docker Compose. Role is auto-detected at runtime."
        />

        <UTSFlowDiagram />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 20, marginTop: 48 }}>
          {UTS_FEATURES.map(f => (
            <div key={f.title} style={{
              background: "rgba(32,32,47,0.6)", border: `1px solid ${f.color}25`,
              borderRadius: 14, padding: "24px 24px 20px",
              borderLeft: `3px solid ${f.color}`,
              transition: "all 0.2s",
            }}
              onMouseEnter={e => { e.currentTarget.style.background = `linear-gradient(135deg, ${f.color}10, rgba(32,32,47,0.8))`; e.currentTarget.style.borderColor = f.color + "50"; }}
              onMouseLeave={e => { e.currentTarget.style.background = "rgba(32,32,47,0.6)"; e.currentTarget.style.borderColor = f.color + "25"; }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 14, color: "#fff", lineHeight: 1.3 }}>{f.title}</h3>
                <span style={{
                  fontFamily: "'Space Mono', monospace", fontSize: 8, color: f.color,
                  background: f.color + "15", border: `1px solid ${f.color}30`,
                  borderRadius: 4, padding: "3px 7px", letterSpacing: 1.5, textTransform: "uppercase", flexShrink: 0, marginLeft: 8, marginTop: 2,
                }}>{f.tag}</span>
              </div>
              <p style={{ fontSize: 13, color: "rgba(255,255,255,0.58)", lineHeight: 1.65 }}>{f.body}</p>
            </div>
          ))}
        </div>

        {/* Tech pills */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 36 }}>
          {["Python 3.11", "asyncio", "WebSockets", "Redis", "Docker", "SocketCAN", "MediaMTX", "ffmpeg x264"].map(t => (
            <span key={t} style={{
              fontFamily: "'Space Mono', monospace", fontSize: 11, color: "rgba(168,85,247,0.8)",
              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, { UTS });