export function VerticalBeamsHero() {
  const bars = Array.from({ length: 48 }, (_, i) => ({
    h: 20 + Math.abs(Math.sin(i * 0.7)) * 70,
    dur: 0.8 + (i % 7) * 0.12,
    delay: (i % 11) * 0.08,
  }));

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#0a0510] text-white antialiased grid place-items-center px-6">
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(60% 60% at 50% 40%, rgba(217,70,239,0.18), transparent 65%)" }}
      />

      <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 FM</span>
        <a href="#" className="rounded-full border border-white/20 px-4 py-1.5 text-[12.5px] text-white/80 hover:bg-white/10 transition-colors">Listen ↗</a>
      </div>

      <div className="relative z-10 w-full max-w-3xl text-center">
        <p className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.04] px-3 py-1 font-mono text-[11px] uppercase tracking-[0.22em] text-fuchsia-200/80">
          <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-fuchsia-400" /> Now playing · Live
        </p>
        <h1 className="text-[clamp(44px,7vw,96px)] font-semibold leading-[0.92] tracking-[-0.04em]">
          Sound that
          <br />
          <span className="bg-clip-text text-transparent" style={{ backgroundImage: "linear-gradient(90deg,#f0abfc,#a78bfa,#22d3ee)" }}>
            moves the room.
          </span>
        </h1>

        {/* equalizer */}
        <div className="mx-auto mt-10 flex h-28 max-w-xl items-end justify-center gap-[3px]">
          {bars.map((b, i) => (
            <span
              key={i}
              className="flex-1 rounded-full"
              style={{
                height: `${b.h}%`,
                background: "linear-gradient(180deg,#f0abfc,#7c3aed)",
                transformOrigin: "bottom",
                animation: `eq-bounce ${b.dur}s ease-in-out ${b.delay}s infinite alternate`,
              }}
            />
          ))}
        </div>

        {/* player controls */}
        <div className="mx-auto mt-8 flex max-w-sm items-center justify-center gap-5">
          <button className="text-white/60 hover:text-white transition-colors">⏮</button>
          <button className="grid h-14 w-14 place-items-center rounded-full bg-white text-[20px] text-black transition-transform hover:scale-105">▶</button>
          <button className="text-white/60 hover:text-white transition-colors">⏭</button>
        </div>
      </div>

      <style>{`
        @keyframes eq-bounce { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
      `}</style>
    </div>
  );
}
Audio Equalizer Hero

Sound thatmoves the room.

Sound that
moves the room.
