export function DashboardMock() {
  return (
    <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-black/30 shadow-[0_0_80px_oklch(0.55_0.22_305/0.35)] backdrop-blur-xl">
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-violet-500/15 via-transparent to-cyan-400/10" />
      <div className="relative flex items-center justify-between border-b border-white/10 px-4 py-3">
        <div className="flex items-center gap-2">
          <span className="size-2.5 rounded-full bg-fuchsia-400 shadow-[0_0_10px_#e879f9]" />
          <span className="size-2.5 rounded-full bg-white/20" />
          <span className="size-2.5 rounded-full bg-white/20" />
        </div>
        <p className="font-mono text-[10px] uppercase tracking-[0.18em] text-violet-200/80">
          Agentic operating surface
        </p>
        <span className="hidden font-mono text-[10px] text-cyan-300 sm:inline">
          PPoE 94.2
        </span>
      </div>
      <div className="relative grid md:grid-cols-[188px_1fr_200px]">
        <aside className="hidden border-r border-white/10 p-4 md:block">
          {[
            "Agents",
            "Data fabric",
            "Mesh",
            "Quantum",
            "Zero trust",
            "Bio-sync",
            "Carbon",
          ].map((item, i) => (
            <div
              key={item}
              className={`mb-1 rounded-lg px-2.5 py-1.5 text-xs ${
                i === 0
                  ? "bg-gradient-to-r from-violet-500/30 to-fuchsia-500/20 text-violet-100"
                  : "text-violet-100/50"
              }`}
            >
              {item}
            </div>
          ))}
        </aside>
        <div className="relative min-h-[280px] p-4 sm:min-h-[340px]">
          <svg viewBox="0 0 520 320" className="h-full w-full" aria-hidden>
            <defs>
              <linearGradient id="line" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#c084fc" stopOpacity="0.2" />
                <stop offset="50%" stopColor="#e879f9" stopOpacity="0.7" />
                <stop offset="100%" stopColor="#67e8f9" stopOpacity="0.8" />
              </linearGradient>
              <filter id="glow">
                <feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
                <feMerge>
                  <feMergeNode in="coloredBlur" />
                  <feMergeNode in="SourceGraphic" />
                </feMerge>
              </filter>
            </defs>
            <line x1="80" y1="160" x2="250" y2="70" stroke="url(#line)" />
            <line x1="80" y1="160" x2="250" y2="250" stroke="url(#line)" />
            <line x1="250" y1="70" x2="430" y2="160" stroke="url(#line)" />
            <line x1="250" y1="250" x2="430" y2="160" stroke="url(#line)" />
            <line x1="250" y1="70" x2="250" y2="250" stroke="#a78bfa" strokeOpacity="0.25" />
            <line x1="80" y1="160" x2="430" y2="160" stroke="#67e8f9" strokeOpacity="0.15" />
            <circle cx="80" cy="160" r="9" className="pulse-node" fill="#c084fc" filter="url(#glow)" />
            <circle cx="250" cy="70" r="7" className="pulse-node-2" fill="#e879f9" filter="url(#glow)" />
            <circle cx="250" cy="250" r="7" className="pulse-node-3" fill="#818cf8" filter="url(#glow)" />
            <circle cx="430" cy="160" r="11" fill="#67e8f9" filter="url(#glow)" />
            <circle cx="170" cy="110" r="4" fill="#c084fc" fillOpacity="0.6" />
            <circle cx="340" cy="110" r="4" fill="#67e8f9" fillOpacity="0.6" />
            <circle cx="170" cy="210" r="4" fill="#e879f9" fillOpacity="0.5" />
            <circle cx="340" cy="210" r="4" fill="#a78bfa" fillOpacity="0.5" />
            <text
              x="80"
              y="188"
              textAnchor="middle"
              fill="#ddd6fe"
              fontSize="9"
              fontFamily="ui-monospace, monospace"
            >
              AGENT
            </text>
            <text
              x="250"
              y="58"
              textAnchor="middle"
              fill="#f5d0fe"
              fontSize="9"
              fontFamily="ui-monospace, monospace"
            >
              LAKE
            </text>
            <text
              x="250"
              y="278"
              textAnchor="middle"
              fill="#c4b5fd"
              fontSize="9"
              fontFamily="ui-monospace, monospace"
            >
              MESH
            </text>
            <text
              x="430"
              y="188"
              textAnchor="middle"
              fill="#a5f3fc"
              fontSize="9"
              fontFamily="ui-monospace, monospace"
            >
              SYNERGY
            </text>
          </svg>
        </div>
        <aside className="hidden space-y-3 border-l border-white/10 p-4 md:block">
          <Metric label="Agent velocity" value="+3.2×" />
          <Metric label="Semantic coverage" value="87%" />
          <Metric label="eBPF map health" value="99.4" />
          <Metric label="ESG score" value="A−" />
        </aside>
      </div>
    </div>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-xl border border-white/10 bg-white/5 px-3 py-2.5">
      <p className="font-mono text-[10px] uppercase tracking-wider text-violet-200/70">
        {label}
      </p>
      <p className="mt-1 font-heading text-xl text-white">{value}</p>
    </div>
  );
}