import DotGrid from "./DotGrid";
import NetworkTopology from "./NetworkTopology";

export default function HeroVisual() {
  return (
    <div className="relative aspect-[6/5] w-full overflow-hidden rounded-3xl border border-ink-700 bg-ink-900/50">
      <DotGrid />
      <div
        className="absolute left-1/2 top-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-40 blur-3xl"
        style={{ background: "radial-gradient(circle, var(--color-river-500), transparent 70%)" }}
      />
      <NetworkTopology className="relative h-full w-full p-6" />

      <div className="absolute left-6 top-6 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
        status: <span className="text-river-300">operational</span>
      </div>
      <div className="absolute bottom-6 right-6 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
        uptime 99.98 %
      </div>
    </div>
  );
}