export function PulseRingsHero() {
  const blips = [
    { x: 64, y: 30, d: "0s" },
    { x: 28, y: 56, d: "0.8s" },
    { x: 74, y: 70, d: "1.6s" },
    { x: 46, y: 40, d: "2.4s" },
  ];
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#050810] text-white antialiased flex items-center px-10 lg:px-16">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(55% 65% at 78% 50%, rgba(16,185,129,0.14), transparent 65%)" }}
      />

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-16 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velynkit Watch</span>
        <a href="#" className="rounded-full bg-emerald-400 px-4 py-1.5 text-[12.5px] font-medium text-[#04130d]">Start monitoring</a>
      </div>

      <div className="relative z-10 grid w-full max-w-6xl grid-cols-1 items-center gap-12 lg:grid-cols-2">
        {/* copy */}
        <div>
          <p className="mb-5 inline-flex items-center gap-2 font-mono text-[11px] uppercase tracking-[0.2em] text-emerald-300/80">
            <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-400" /> All systems operational
          </p>
          <h1 className="text-[clamp(40px,5.2vw,76px)] font-semibold leading-[0.94] tracking-[-0.035em]">
            See every signal
            <br />
            <span className="text-white/55">before your users do.</span>
          </h1>
          <p className="mt-6 max-w-md text-[15.5px] leading-relaxed text-white/55">
            Uptime, latency and error budgets on one radar — with alerts that
            reach the right person, not the whole channel.
          </p>
          <div className="mt-8 flex items-center gap-3">
            <a href="#" className="rounded-full bg-white px-5 py-2.5 text-[13px] font-medium text-black transition-transform hover:-translate-y-0.5">
              Add your first check →
            </a>
            <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">Live status</a>
          </div>
        </div>

        {/* radar */}
        <div className="hidden justify-center lg:flex">
          <div className="relative h-72 w-72 rounded-full border border-emerald-400/25">
            {[0.66, 0.42, 0.2].map((s) => (
              <div key={s} className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border border-emerald-400/20" style={{ width: `${s * 100}%`, height: `${s * 100}%` }} />
            ))}
            {/* crosshair */}
            <div className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-emerald-400/15" />
            <div className="absolute top-1/2 left-0 h-px w-full -translate-y-1/2 bg-emerald-400/15" />
            {/* rotating sweep */}
            <div
              className="absolute inset-0 rounded-full"
              style={{
                background: "conic-gradient(from 0deg, rgba(16,185,129,0.45), transparent 60deg)",
                animation: "radar-sweep 4s linear infinite",
              }}
            />
            {/* blips */}
            {blips.map((b, i) => (
              <span
                key={i}
                className="absolute h-2 w-2 rounded-full bg-emerald-300"
                style={{ left: `${b.x}%`, top: `${b.y}%`, boxShadow: "0 0 10px rgba(16,185,129,0.9)", animation: `blip 4s ease-out ${b.d} infinite` }}
              />
            ))}
            <span className="absolute left-1/2 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-300 shadow-[0_0_16px_rgba(16,185,129,0.9)]" />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes radar-sweep { to { transform: rotate(360deg); } }
        @keyframes blip { 0%,100% { opacity: 0; transform: scale(0.6); } 20% { opacity: 1; transform: scale(1); } }
      `}</style>
    </div>
  );
}
Radar Sweep Hero

See every signalbefore your users do.

See every signal
before your users do.
