const STREAKS = Array.from({ length: 64 }, (_, i) => ({
  angle: (i * 137.5) % 360,
  delay: (i % 12) * 0.25,
  dur: 2.2 + (i % 6) * 0.4,
  hue: ["#ffffff", "#a5b4fc", "#67e8f9", "#f0abfc"][i % 4],
}));

export function StarfieldHero() {
  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#030309] text-white antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(40% 40% at 50% 50%, rgba(99,102,241,0.22), transparent 70%)" }}
      />

      {/* warp-speed streaks emanating from center */}
      <div aria-hidden className="absolute left-1/2 top-1/2 h-0 w-0">
        {STREAKS.map((s, i) => (
          <span
            key={i}
            className="absolute left-0 top-0 h-px origin-left rounded-full"
            style={{
              width: 220,
              background: `linear-gradient(90deg, transparent, ${s.hue})`,
              ["--a" as string]: `${s.angle}deg`,
              transform: `rotate(${s.angle}deg)`,
              animation: `warp ${s.dur}s cubic-bezier(0.5,0,1,0.5) ${s.delay}s infinite`,
              opacity: 0,
            }}
          />
        ))}
      </div>

      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-8 lg:px-12 py-6">
        <span className="text-[13px] font-semibold tracking-[0.18em] uppercase text-white/85">Velynkit Cloud</span>
        <a href="#" className="rounded-full bg-white px-4 py-1.5 text-[12.5px] font-medium text-black">Launch project</a>
      </div>

      <div className="relative z-10 max-w-2xl text-center">
        <p className="mb-6 font-mono text-[11px] uppercase tracking-[0.3em] text-white/45">
          28 regions · new: SYD
        </p>
        <h1 className="text-[clamp(44px,7vw,104px)] font-semibold leading-[0.9] tracking-[-0.04em]">
          Infrastructure on
          <br />
          <span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(90deg,#a5b4fc,#67e8f9,#f0abfc)" }}>
            every continent.
          </span>
        </h1>
        <p className="mx-auto mt-6 max-w-md text-[15.5px] leading-relaxed text-white/55">
          Sub-100ms reads worldwide and a control plane that doesn&apos;t require
          a PhD in YAML.
        </p>
        <div className="mt-9 flex items-center justify-center gap-3">
          <a href="#" className="rounded-full bg-white px-6 py-3 text-[13px] font-medium text-[#030309] transition-transform hover:scale-[1.03]">
            Deploy now →
          </a>
          <a href="#" className="text-[13px] text-white/55 underline-offset-4 hover:text-white hover:underline">
            Status page
          </a>
        </div>
      </div>

      <style>{`
        @keyframes warp {
          0% { transform: rotate(var(--a)) translateX(0) scaleX(0.2); opacity: 0; }
          15% { opacity: 1; }
          100% { transform: rotate(var(--a)) translateX(520px) scaleX(1); opacity: 0; }
        }
      `}</style>
    </div>
  );
}
Warp Speed Hero

Infrastructure onevery continent.

Infrastructure on
every continent.
