function DataPacket({ delay, duration, color, top, pathId }) {
  return (
    <circle r="4" fill={color} opacity="0.9" style={{ filter: `drop-shadow(0 0 6px ${color})` }}>
      <animateMotion dur={`${duration}s`} repeatCount="indefinite" begin={`${delay}s`} calcMode="linear">
        <mpath href={`#${pathId}`} />
      </animateMotion>
    </circle>
  );
}

function HeroFlow() {
  const W = 900, H = 280;
  // Nodes: Car → CAN HAT → RPi(car) --RADIO-- RPi(base) → Redis → PECAN
  const nodes = [
    { id: "ecu",   x: 60,  y: 140, label: "ECU", sub: "CAN Bus",        color: "#D6AB39" },
    { id: "hat",   x: 200, y: 140, label: "CAN HAT", sub: "MCP2517FD",  color: "#a855f7" },
    { id: "rpi_c", x: 340, y: 140, label: "Car RPi", sub: "UTS car",    color: "#a855f7" },
    { id: "base",  x: 540, y: 140, label: "Base RPi", sub: "UTS base",  color: "#a855f7" },
    { id: "redis", x: 680, y: 100, label: "Redis", sub: "Pub/Sub",      color: "#ef4444" },
    { id: "pecan", x: 820, y: 60,  label: "PECAN", sub: "Browser",      color: "#D6AB39" },
    { id: "tsdb",  x: 680, y: 190, label: "TimescaleDB", sub: "Server", color: "#22d3ee" },
    { id: "graf",  x: 820, y: 210, label: "Grafana", sub: "Analytics",  color: "#f97316" },
  ];

  // Paths for animation
  const paths = [
    { id: "p1", d: "M 100 140 L 165 140", color: "#D6AB39" },
    { id: "p2", d: "M 240 140 L 305 140", color: "#a855f7" },
    { id: "p3", d: "M 380 140 Q 460 140 500 140", color: "#a855f7", dashed: true },
    { id: "p4a", d: "M 580 140 Q 620 115 645 105", color: "#a855f7" },
    { id: "p4b", d: "M 580 140 Q 620 165 645 190", color: "#a855f7" },
    { id: "p5a", d: "M 718 100 L 785 75", color: "#ef4444" },
    { id: "p5b", d: "M 718 190 L 785 210", color: "#22d3ee" },
  ];

  return (
    <div style={{ position: "relative", width: "100%", maxWidth: W, margin: "0 auto" }}>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", overflow: "visible" }}>
        <defs>
          <filter id="glow">
            <feGaussianBlur stdDeviation="3" result="coloredBlur" />
            <feMerge><feMergeNode in="coloredBlur" /><feMergeNode in="SourceGraphic" /></feMerge>
          </filter>
          <radialGradient id="bgGrad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(168,85,247,0.08)" />
            <stop offset="100%" stopColor="rgba(13,12,17,0)" />
          </radialGradient>
        </defs>

        <rect width={W} height={H} fill="url(#bgGrad)" rx="16" />

        {/* Radio zone label */}
        <rect x="370" y="108" width="150" height="56" rx="6" fill="rgba(168,85,247,0.06)" stroke="rgba(168,85,247,0.2)" strokeWidth="1" strokeDasharray="4 3" />
        <text x="445" y="130" textAnchor="middle" fill="rgba(168,85,247,0.6)" fontSize="10" fontFamily="'Space Mono', monospace" letterSpacing="2">UBIQUITI</text>
        <text x="445" y="147" textAnchor="middle" fill="rgba(168,85,247,0.5)" fontSize="9" fontFamily="'Space Mono', monospace">5 GHz RADIO</text>

        {/* Connection lines */}
        {paths.map(p => (
          <path key={p.id} id={p.id} d={p.d}
            stroke={p.color} strokeWidth="1.5" fill="none" opacity="0.35"
            strokeDasharray={p.dashed ? "6 4" : "none"}
          />
        ))}

        {/* Animated packets */}
        <DataPacket pathId="p1" delay={0}   duration={1.2} color="#D6AB39" />
        <DataPacket pathId="p1" delay={0.6} duration={1.2} color="#D6AB39" />
        <DataPacket pathId="p2" delay={0.3} duration={1.2} color="#a855f7" />
        <DataPacket pathId="p2" delay={0.9} duration={1.2} color="#a855f7" />
        <DataPacket pathId="p3" delay={0.8} duration={1.8} color="#a855f7" />
        <DataPacket pathId="p3" delay={1.7} duration={1.8} color="#a855f7" />
        <DataPacket pathId="p4a" delay={1.2} duration={1.0} color="#ef4444" />
        <DataPacket pathId="p4b" delay={1.4} duration={1.0} color="#22d3ee" />
        <DataPacket pathId="p5a" delay={1.8} duration={0.8} color="#D6AB39" />
        <DataPacket pathId="p5b" delay={2.0} duration={0.8} color="#f97316" />

        {/* Nodes */}
        {nodes.map(n => (
          <g key={n.id} filter="url(#glow)">
            <rect x={n.x - 38} y={n.y - 26} width={76} height={52} rx={8}
              fill="rgba(32,32,47,0.9)" stroke={n.color} strokeWidth="1.5" opacity="0.95" />
            <text x={n.x} y={n.y - 6} textAnchor="middle" fill="#fff" fontSize="11" fontFamily="'Orbitron', sans-serif" fontWeight="700">{n.label}</text>
            <text x={n.x} y={n.y + 10} textAnchor="middle" fill={n.color} fontSize="9" fontFamily="'Space Mono', monospace" opacity="0.85">{n.sub}</text>
          </g>
        ))}

        {/* Car side label */}
        <text x="200" y="30" textAnchor="middle" fill="rgba(214,171,57,0.45)" fontSize="9" fontFamily="'Space Mono', monospace" letterSpacing="3" style={{textTransform:"uppercase"}}>CAR SIDE</text>
        <line x1="60" y1="36" x2="340" y2="36" stroke="rgba(214,171,57,0.2)" strokeWidth="1" />

        {/* Base/server label */}
        <text x="680" y="30" textAnchor="middle" fill="rgba(168,85,247,0.45)" fontSize="9" fontFamily="'Space Mono', monospace" letterSpacing="3">BASE + SERVER</text>
        <line x1="540" y1="36" x2="840" y2="36" stroke="rgba(168,85,247,0.2)" strokeWidth="1" />
      </svg>
    </div>
  );
}

function StatPill({ value, label }) {
  return (
    <div style={{
      display: "flex", flexDirection: "column", alignItems: "center",
      padding: "12px 28px",
      background: "rgba(32,32,47,0.6)", border: "1px solid rgba(168,85,247,0.2)", borderRadius: 12,
    }}>
      <span style={{ fontFamily: "'Orbitron', sans-serif", fontWeight: 900, fontSize: 26, color: "#D6AB39", lineHeight: 1 }}>{value}</span>
      <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 10, color: "rgba(255,255,255,0.5)", letterSpacing: 2, marginTop: 4, textTransform: "uppercase" }}>{label}</span>
    </div>
  );
}

function Hero() {
  return (
    <section id="overview" style={{
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: "100px 2rem 60px",
      background: "radial-gradient(ellipse 80% 60% at 50% 20%, rgba(168,85,247,0.12) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 80%, rgba(214,171,57,0.07) 0%, transparent 70%)",
      position: "relative", overflow: "hidden",
    }}>
      {/* Background grid */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.04,
        backgroundImage: "linear-gradient(rgba(168,85,247,1) 1px, transparent 1px), linear-gradient(90deg, rgba(168,85,247,1) 1px, transparent 1px)",
        backgroundSize: "60px 60px",
        pointerEvents: "none",
      }} />

      <div style={{ textAlign: "center", maxWidth: 800, position: "relative", zIndex: 1 }}>
        {/* Tag */}
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8, marginBottom: 24,
          padding: "6px 16px", borderRadius: 20,
          border: "1px solid rgba(214,171,57,0.35)", background: "rgba(214,171,57,0.08)",
        }}>
          <div style={{ width: 7, height: 7, borderRadius: "50%", background: "#D6AB39", animation: "pulse 2s infinite" }} />
          <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 11, color: "#D6AB39", letterSpacing: 2, textTransform: "uppercase" }}>Western Formula Racing · FSAE 2026</span>
        </div>

        {/* Title */}
        <h1 style={{
          fontFamily: "'Orbitron', sans-serif", fontWeight: 900,
          fontSize: "clamp(2.8rem, 7vw, 5.5rem)", lineHeight: 1,
          marginBottom: 8, letterSpacing: "0.02em",
          color: "#fff",
        }}>
          PROJECT{" "}
          <span style={{ background: "linear-gradient(90deg, #a855f7 0%, #D6AB39 100%)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>PECAN</span>
        </h1>

        <p style={{
          fontFamily: "'Space Mono', monospace", fontSize: 13, letterSpacing: 3,
          color: "rgba(255,255,255,0.45)", marginBottom: 16, textTransform: "uppercase",
        }}>Data Acquisition · Telemetry · Real-Time Analytics</p>

        <p style={{
          fontSize: 18, lineHeight: 1.7, color: "rgba(255,255,255,0.65)",
          maxWidth: 620, margin: "0 auto 40px",
          fontFamily: "system-ui, sans-serif",
        }}>
          A full-stack, open-source telemetry platform — from CAN bus frames on the car to a real-time browser dashboard, built entirely in-house by Western Formula Racing.
        </p>

        {/* CTAs */}
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 60 }}>
          <button onClick={() => { const el = document.getElementById("architecture"); if (el) window.scrollTo({ top: el.offsetTop - 72, behavior: "smooth" }); }} style={{
            padding: "14px 32px", borderRadius: 10,
            background: "linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(168,85,247,0.05) 100%)",
            border: "1px solid rgba(168,85,247,0.5)", color: "#e9d5ff",
            fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: 2,
            cursor: "pointer", textTransform: "uppercase", transition: "all 0.2s",
          }}
            onMouseEnter={e => e.currentTarget.style.background = "rgba(168,85,247,0.3)"}
            onMouseLeave={e => e.currentTarget.style.background = "linear-gradient(135deg, rgba(168,85,247,0.2) 0%, rgba(168,85,247,0.05) 100%)"}
          >Explore Architecture</button>
          <a href="https://pecan.westernformularacing.org/dashboard" target="_blank" rel="noopener noreferrer" style={{
            padding: "14px 32px", borderRadius: 10,
            background: "linear-gradient(135deg, rgba(214,171,57,0.2) 0%, rgba(214,171,57,0.05) 100%)",
            border: "1px solid rgba(214,171,57,0.5)", color: "#fde68a",
            fontFamily: "'Orbitron', sans-serif", fontSize: 12, fontWeight: 700, letterSpacing: 2,
            cursor: "pointer", textDecoration: "none", textTransform: "uppercase", transition: "all 0.2s",
            display: "inline-block",
          }}
            onMouseEnter={e => e.currentTarget.style.background = "rgba(214,171,57,0.25)"}
            onMouseLeave={e => e.currentTarget.style.background = "linear-gradient(135deg, rgba(214,171,57,0.2) 0%, rgba(214,171,57,0.05) 100%)"}
          >Live Demo ↗</a>
        </div>

        {/* Stats */}
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 60 }}>
          <StatPill value="100%" label="In-house built" />
          <StatPill value="1 hour" label="Browser CAN data buffer" />
          <StatPill value="one" label="unified repository" />
          <StatPill value="42" label="Unit tests" />
        </div>

        {/* Architecture diagram */}
        <HeroFlow />
      </div>

      {/* Scroll indicator */}
      <div style={{ position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, opacity: 0.4 }}>
        <span style={{ fontFamily: "'Space Mono', monospace", fontSize: 9, letterSpacing: 3, color: "#fff", textTransform: "uppercase" }}>Scroll</span>
        <div style={{ width: 1, height: 36, background: "linear-gradient(to bottom, rgba(255,255,255,0.5), transparent)" }} />
      </div>

      <style>{`
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(1.3); }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero });