const PECAN_VIEWS = [
  {
    id: "dashboard",
    label: "Live Dashboard",
    src: "pecan/docs-assets/PECAN-Dashboard.jpg",
    color: "#a855f7",
    desc: "Real-time CAN message visualization with category-based filtering. Each signal group (VCU, BMS, INV) gets a color-coded card showing live decoded values.",
  },
  {
    id: "accumulator",
    label: "Accumulator Monitor",
    src: "pecan/docs-assets/PECAN-Accu.jpg",
    color: "#22d3ee",
    desc: "Dedicated battery pack view with per-cell voltage and temperature tracking, alerting, and pack-level SOC — optimised for the charge cart display.",
  },
  {
    id: "monitor",
    label: "Monitor Builder",
    src: "pecan/docs-assets/PECAN-Monitor.jpg",
    color: "#D6AB39",
    desc: "Drag-and-drop custom signal monitoring canvas. Engineers configure exactly which signals to watch side-by-side without touching code.",
  },
];

const PECAN_FEATURES = [
  {
    color: "#a855f7",
    title: "Hot / Cold Pipeline",
    body: "Incoming frames go into a JS-heap hot buffer (last 5 min, 10k samples/msg). Evicted frames are encoded as 21-byte binary records and written to OPFS cold storage — up to 1 hour / 500 MB — without blocking the UI thread.",
    tag: "DATA ARCHITECTURE",
  },
  {
    color: "#22d3ee",
    title: "DBC Decoding in Browser",
    body: "The candied v2.2.0 library parses the team's private DBC file entirely client-side. No server round-trip — raw CAN bytes become named physical values with units the moment they arrive over WebSocket.",
    tag: "CAN DECODING",
  },
  {
    color: "#D6AB39",
    title: "Timeline Scrubber",
    body: "A full-width timeline lets engineers scrub through any point in the session — hot (in-memory) or cold (OPFS) — with checkpoint markers. Export as .pecan for offline review without ever starting a recording.",
    tag: "REPLAY",
  },
  {
    color: "#ef4444",
    title: "CAN Trace",
    body: "Live timestamped log of every raw CAN frame with delta timing, fixed/scroll view toggle, and CSV export. Useful for diagnosing message timing issues and verifying DBC decode correctness.",
    tag: "DIAGNOSTICS",
  },
  {
    color: "#f97316",
    title: "Live Video",
    body: "WebRTC WHEP stream from the car camera plays inline in PECAN with quality presets (360p / 480p / 720p). Quality changes POST to the car RPi which restarts ffmpeg — no page reload needed.",
    tag: "WEBRTC",
  },
  {
    color: "#a855f7",
    title: "42 Unit Tests",
    body: "Vitest test suite covers CAN log parsing, DBC decode, WebSocket message handling, and the full processing pipeline. CI runs tests before every GitHub Pages deployment.",
    tag: "TESTED",
  },
];

function PecanScreenshots() {
  const [active, setActive] = React.useState(0);
  const view = PECAN_VIEWS[active];

  return (
    <div style={{ marginTop: 48 }}>
      {/* Tab bar */}
      <div style={{ display: "flex", gap: 4, marginBottom: 20, borderBottom: "1px solid rgba(255,255,255,0.08)", paddingBottom: 0 }}>
        {PECAN_VIEWS.map((v, i) => (
          <button key={v.id} onClick={() => setActive(i)} style={{
            background: "none", border: "none", cursor: "pointer",
            padding: "10px 20px",
            fontFamily: "'Space Mono', monospace", fontSize: 11, fontWeight: 700,
            letterSpacing: 1, textTransform: "uppercase",
            color: active === i ? v.color : "rgba(255,255,255,0.4)",
            borderBottom: active === i ? `2px solid ${v.color}` : "2px solid transparent",
            marginBottom: -1, transition: "all 0.2s",
          }}>{v.label}</button>
        ))}
      </div>

      {/* Screenshot */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 320px", gap: 24, alignItems: "start" }}>
        <div style={{
          borderRadius: 12, overflow: "hidden",
          border: `1px solid ${view.color}30`,
          boxShadow: `0 0 40px ${view.color}15`,
        }}>
          <img
            src={view.src}
            alt={view.label}
            style={{ width: "100%", display: "block", objectFit: "cover" }}
            onError={e => { e.target.style.display = "none"; e.target.nextSibling.style.display = "flex"; }}
          />
          <div style={{
            display: "none", background: "rgba(32,32,47,0.8)", height: 280,
            alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 8,
          }}>
            <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "rgba(255,255,255,0.3)" }}>{view.label}</span>
            <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: "rgba(255,255,255,0.2)" }}>screenshot</span>
          </div>
        </div>

        <div style={{ padding: "4px 0" }}>
          <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, color: view.color, letterSpacing: 3, textTransform: "uppercase", marginBottom: 10, opacity: 0.8 }}>View</div>
          <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 18, color: "#fff", marginBottom: 14 }}>{view.label}</h3>
          <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, lineHeight: 1.7, marginBottom: 24 }}>{view.desc}</p>
          <a href="https://pecan.westernformularacing.org/monitor-builder" target="_blank" rel="noopener noreferrer" style={{
            display: "inline-block", padding: "10px 22px", borderRadius: 8,
            background: `linear-gradient(135deg, ${view.color}25, ${view.color}10)`,
            border: `1px solid ${view.color}50`, color: "#fff",
            fontFamily: "'Space Mono', monospace", fontSize: 11, fontWeight: 700,
            letterSpacing: 1, textDecoration: "none", textTransform: "uppercase",
            transition: "all 0.2s",
          }}
            onMouseEnter={e => e.currentTarget.style.background = view.color + "35"}
            onMouseLeave={e => e.currentTarget.style.background = `linear-gradient(135deg, ${view.color}25, ${view.color}10)`}
          >Open Live Demo ↗</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 768px) {
          .pecan-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function Pecan() {
  return (
    <section id="pecan" style={{ padding: "100px 2rem", background: "rgba(0,0,0,0.2)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="05 / PECAN Dashboard"
          title="PECAN Dashboard"
          subtitle="React 19 + TypeScript SPA on GitHub Pages. Connects to the live WebSocket backend and decodes CAN frames entirely in the browser."
        />

        <PecanScreenshots />

        {/* Tech stack pills */}
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", margin: "32px 0 48px" }}>
          {["React 19", "TypeScript", "Vite", "Tailwind CSS v4", "candied v2.2.0", "Plotly.js", "Vitest", "GitHub Pages"].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>

        {/* Feature grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 18 }}>
          {PECAN_FEATURES.map(f => (
            <div key={f.title} style={{
              background: "rgba(32,32,47,0.55)", border: `1px solid ${f.color}20`,
              borderRadius: 14, padding: "22px 22px 18px",
              borderTop: `2px solid ${f.color}`,
              transition: "all 0.2s",
            }}
              onMouseEnter={e => { e.currentTarget.style.background = `linear-gradient(180deg, ${f.color}10, rgba(32,32,47,0.7))`; }}
              onMouseLeave={e => { e.currentTarget.style.background = "rgba(32,32,47,0.55)"; }}
            >
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 10 }}>
                <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 13, 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,
                }}>{f.tag}</span>
              </div>
              <p style={{ fontSize: 13, color: "rgba(255,255,255,0.55)", lineHeight: 1.65 }}>{f.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pecan });