export function PulseGridHero() {
  // Layered sine waves drift horizontally behind a structured content block:
  // eyebrow → headline → CTAs → capability pills → live stats bar.
  const waves = [
    { stroke: "rgba(99,102,241,0.5)", amp: 26, y: 360, dur: 9, w: 1.6 },
    { stroke: "rgba(236,72,153,0.4)", amp: 38, y: 380, dur: 13, w: 1.4 },
    { stroke: "rgba(255,255,255,0.18)", amp: 18, y: 400, dur: 7, w: 1 },
  ];
  const wavePath = (y: number, amp: number) =>
    `M0 ${y} C 240 ${y - amp} 360 ${y + amp} 600 ${y} S 960 ${y - amp} 1200 ${y} S 1560 ${y + amp} 1800 ${y}`;

  const pills = ["Immersive visuals", "Responsive motion", "GPU friendly"];
  const stats = [
    { k: "Live installs", v: "320+" },
    { k: "Latency", v: "8ms" },
    { k: "Teams onboarded", v: "120+" },
  ];

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#080a12] text-white antialiased grid place-items-center px-6">
      <svg
        aria-hidden
        viewBox="0 0 1200 720"
        preserveAspectRatio="none"
        className="absolute inset-0 h-full w-full opacity-80"
      >
        {waves.map((w, i) => (
          <path
            key={i}
            d={wavePath(w.y, w.amp)}
            fill="none"
            stroke={w.stroke}
            strokeWidth={w.w}
            style={{ animation: `wave-drift ${w.dur}s linear infinite` }}
          />
        ))}
      </svg>
      <div
        aria-hidden
        className="absolute inset-0"
        style={{ background: "radial-gradient(70% 60% at 50% 35%, rgba(99,102,241,0.16), transparent 70%)" }}
      />

      <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-medium tracking-[0.22em] uppercase text-white/75">
          Velynkit<span className="text-indigo-400">.</span>
        </span>
        <div className="hidden items-center gap-7 text-[13px] text-white/55 md:flex">
          <a href="#" className="hover:text-white transition-colors">Studio</a>
          <a href="#" className="hover:text-white transition-colors">Showcase</a>
          <a href="#" className="hover:text-white transition-colors">Docs</a>
        </div>
      </div>

      <div className="relative z-10 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.2em] text-white/60">
          <span className="text-indigo-300">⚡</span> Reactive canvas hero
        </p>

        <h1 className="text-[clamp(40px,6.2vw,80px)] font-semibold leading-[0.98] tracking-[-0.03em]">
          Welcome to immersive
          <br />
          <span className="text-white/55">realtime playgrounds</span>
        </h1>

        <p className="mx-auto mt-6 max-w-lg text-[15.5px] leading-relaxed text-white/55">
          Build living surfaces that respond to every interaction — cinematic
          hero moments and luminous gradients without leaving your design system.
        </p>

        <div className="mt-9 flex items-center justify-center gap-3">
          <a
            href="#"
            className="group inline-flex items-center gap-2 rounded-full bg-white px-5 py-2.5 text-[13px] font-medium text-black transition-transform hover:scale-[1.03]"
          >
            Launch studio
            <span aria-hidden className="transition-transform group-hover:translate-x-0.5">→</span>
          </a>
          <a href="#" className="rounded-full border border-white/15 px-5 py-2.5 text-[13px] text-white/80 hover:bg-white/5 transition-colors">
            Explore stories
          </a>
        </div>

        <div className="mt-7 flex flex-wrap items-center justify-center gap-2">
          {pills.map((p) => (
            <span
              key={p}
              className="rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 font-mono text-[10.5px] uppercase tracking-[0.16em] text-white/55"
            >
              {p}
            </span>
          ))}
        </div>

        <div className="mx-auto mt-9 grid max-w-xl grid-cols-3 overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] backdrop-blur">
          {stats.map((s, i) => (
            <div
              key={s.k}
              className={`px-4 py-4 ${i > 0 ? "border-l border-white/10" : ""}`}
            >
              <div className="text-[22px] font-semibold tracking-tight">{s.v}</div>
              <div className="mt-1 font-mono text-[10px] uppercase tracking-[0.16em] text-white/45">
                {s.k}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes wave-drift {
          from { transform: translateX(0); }
          to { transform: translateX(-600px); }
        }
      `}</style>
    </div>
  );
}
Reactive Playground Hero

Welcome to immersiverealtime playgrounds

Welcome to immersive
realtime playgrounds
