const TEAM_ROLES = [
  { role: "Firmware & CAN", color: "#D6AB39", desc: "DBC definitions, ECU integration, CAN message design" },
  { role: "Telemetry Software", color: "#a855f7", desc: "UTS Python stack, Redis, WebSocket bridge, Docker" },
  { role: "Frontend / PECAN", color: "#22d3ee", desc: "React dashboard, hot/cold pipeline, DBC browser decode" },
  { role: "Infrastructure", color: "#f97316", desc: "VPS, TimescaleDB, Grafana, CI/CD, GitHub Actions" },
  { role: "Hardware", color: "#ef4444", desc: "RPi setup, CAN HAT integration, radio link commissioning" },
  { role: "Flight Recorder", color: "#a855f7", desc: "PWA, IndexedDB capture, Cloudflare Pages deploy" },
];

function Team() {
  return (
    <section id="team" style={{ padding: "100px 2rem" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHeader
          tag="12 / Team"
          title="Built by Western Formula Racing"
          subtitle="An entirely student-built, open-source telemetry platform. Every component — hardware to browser — designed, coded, and raced by the WFR team at Western University, London, Ontario."
        />

        {/* Role grid */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 16, marginTop: 48 }}>
          {TEAM_ROLES.map(r => (
            <div key={r.role} style={{
              background: "rgba(32,32,47,0.6)",
              border: `1px solid ${r.color}20`, borderRadius: 12, padding: "20px 20px 16px",
              borderBottom: `3px solid ${r.color}60`,
            }}>
              <div style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 13, color: "#fff", marginBottom: 8, lineHeight: 1.3 }}>{r.role}</div>
              <p style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", lineHeight: 1.6, fontFamily: "'Space Mono', monospace" }}>{r.desc}</p>
            </div>
          ))}
        </div>

        {/* Open source callout */}
        <div style={{
          marginTop: 48, padding: "36px 40px",
          background: "linear-gradient(135deg, rgba(168,85,247,0.1) 0%, rgba(214,171,57,0.06) 100%)",
          border: "1px solid rgba(168,85,247,0.25)", borderRadius: 20,
          display: "flex", gap: 32, alignItems: "center", flexWrap: "wrap",
        }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#D6AB39", letterSpacing: 3, textTransform: "uppercase", marginBottom: 10, opacity: 0.8 }}>Open Source</div>
            <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 700, fontSize: 20, color: "#fff", marginBottom: 12 }}>AGPL-3.0 Licensed</h3>
            <p style={{ color: "rgba(255,255,255,0.6)", fontSize: 14, lineHeight: 1.7 }}>
              The entire data acquisition stack — from UTS to PECAN to the server installer — is publicly available on GitHub. Built with the community, for the FSAE community.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <a href="https://github.com/Western-Formula-Racing/data-acquisition" target="_blank" rel="noopener noreferrer" style={{
              display: "inline-block", padding: "12px 28px", borderRadius: 10,
              background: "rgba(168,85,247,0.15)", border: "1px solid rgba(168,85,247,0.4)",
              color: "#e9d5ff", fontFamily: "'Space Mono', monospace", fontSize: 11,
              fontWeight: 700, letterSpacing: 1, textDecoration: "none", textTransform: "uppercase",
              textAlign: "center",
            }}>GitHub Repo ↗</a>
            <a href="https://westernformularacing.org" target="_blank" rel="noopener noreferrer" style={{
              display: "inline-block", padding: "12px 28px", borderRadius: 10,
              background: "rgba(214,171,57,0.1)", border: "1px solid rgba(214,171,57,0.35)",
              color: "#fde68a", fontFamily: "'Space Mono', monospace", fontSize: 11,
              fontWeight: 700, letterSpacing: 1, textDecoration: "none", textTransform: "uppercase",
              textAlign: "center",
            }}>westernformularacing.org ↗</a>
          </div>
        </div>

        {/* Live demo CTA */}
        <div id="demo" style={{
          marginTop: 40, padding: "40px",
          background: "linear-gradient(135deg, rgba(214,171,57,0.12) 0%, rgba(13,12,17,0.6) 100%)",
          border: "1px solid rgba(214,171,57,0.3)", borderRadius: 20, textAlign: "center",
        }}>
          <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "#D6AB39", letterSpacing: 3, textTransform: "uppercase", marginBottom: 12, opacity: 0.8 }}>Live Demo</div>
          <h3 style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 900, fontSize: 24, color: "#fff", marginBottom: 14 }}>
            See PECAN in Action
          </h3>
          <p style={{ color: "rgba(255,255,255,0.55)", fontSize: 15, marginBottom: 28, maxWidth: 500, margin: "0 auto 28px" }}>
            The live dashboard connects to our hosted WebSocket backend streaming simulated CAN data — the same stack running at competition.
          </p>
          <a href="https://pecan.westernformularacing.org/dashboard" target="_blank" rel="noopener noreferrer" style={{
            display: "inline-block", padding: "16px 40px", borderRadius: 12,
            background: "linear-gradient(135deg, rgba(214,171,57,0.25), rgba(214,171,57,0.1))",
            border: "1px solid rgba(214,171,57,0.6)", color: "#fde68a",
            fontFamily: "'Orbitron', sans-serif", fontSize: 13, fontWeight: 700, letterSpacing: 2,
            textDecoration: "none", textTransform: "uppercase",
            boxShadow: "0 0 30px rgba(214,171,57,0.15)",
          }}>Launch PECAN Dashboard ↗</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      borderTop: "1px solid rgba(255,255,255,0.06)",
      padding: "32px 2rem",
      background: "#0a0910",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
        <div>
          <div style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 900, fontSize: 14, background: "linear-gradient(90deg, #a855f7, #D6AB39)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", letterSpacing: 3, marginBottom: 4 }}>PROJECT PECAN</div>
          <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.3)", letterSpacing: 2 }}>WESTERN FORMULA RACING · LONDON, ONTARIO</div>
        </div>
        <div style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.25)", letterSpacing: 1 }}>AGPL-3.0 · Open Source</div>
      </div>
    </footer>
  );
}

Object.assign(window, { Team, Footer });