export function CometTrailHero() {
  // Light editorial meteor field. The subject is an oversized chrome wordmark;
  // thin diagonal streaks fall behind it. No badge, no navbar clutter.
  const meteors = Array.from({ length: 16 }).map((_, i) => ({
    left: `${(i * 6.4) % 100}%`,
    delay: (i % 8) * 0.7,
    dur: 3.4 + (i % 5) * 0.6,
    len: 90 + (i % 4) * 50,
  }));

  return (
    <div className="relative min-h-[680px] w-full overflow-hidden bg-[#f4f4f5] text-[#0a0a0a] antialiased flex items-center px-10 lg:px-20">
      {/* faint ruled paper grid */}
      <div
        aria-hidden
        className="absolute inset-0 opacity-[0.6]"
        style={{
          backgroundImage:
            "linear-gradient(#e4e4e7 1px, transparent 1px), linear-gradient(90deg, #e4e4e7 1px, transparent 1px)",
          backgroundSize: "64px 64px",
          maskImage: "linear-gradient(180deg, transparent, black 30%, black 70%, transparent)",
          WebkitMaskImage: "linear-gradient(180deg, transparent, black 30%, black 70%, transparent)",
        }}
      />

      {/* diagonal meteor streaks */}
      <div aria-hidden className="absolute inset-0 overflow-hidden">
        {meteors.map((m, i) => (
          <span
            key={i}
            className="absolute top-[-10%] h-px"
            style={{
              left: m.left,
              width: m.len,
              background: "linear-gradient(90deg, transparent, rgba(15,23,42,0.55))",
              transform: "rotate(40deg)",
              transformOrigin: "left center",
              animation: `meteor ${m.dur}s linear ${m.delay}s infinite`,
              opacity: 0,
            }}
          />
        ))}
      </div>

      {/* slim top row */}
      <div className="absolute top-0 left-0 right-0 z-20 flex items-center justify-between px-10 lg:px-20 py-7 font-mono text-[11px] uppercase tracking-[0.2em] text-black/45">
        <span>Velynkit / Motion</span>
        <span>Fig. 07 — Meteors</span>
      </div>

      <div className="relative z-10 max-w-2xl">
        <h1
          className="font-semibold leading-[0.92] tracking-[-0.04em]"
          style={{ fontSize: "clamp(72px, 15vw, 200px)" }}
        >
          <span
            className="bg-clip-text text-transparent"
            style={{
              backgroundImage:
                "linear-gradient(180deg, #1e293b 0%, #94a3b8 45%, #e2e8f0 60%, #475569 100%)",
              textShadow: "0 1px 0 rgba(255,255,255,0.6)",
            }}
          >
            Meteors
          </span>
        </h1>

        <p className="mt-4 max-w-md text-[16px] leading-relaxed text-black/55">
          A streaking light effect for backgrounds that should feel alive —
          tunable count, speed and angle, zero dependencies.
        </p>

        <div className="mt-9 flex items-center gap-5">
          <a
            href="#"
            className="rounded-md bg-[#0a0a0a] px-5 py-3 text-[13px] font-medium text-white transition-transform hover:-translate-y-0.5"
          >
            Copy the component
          </a>
          <a
            href="#"
            className="font-mono text-[12px] uppercase tracking-[0.16em] text-black/50 underline-offset-4 hover:text-black hover:underline"
          >
            npx velynkit add meteors
          </a>
        </div>
      </div>

      <style>{`
        @keyframes meteor {
          0% { transform: rotate(40deg) translateX(0); opacity: 0; }
          12% { opacity: 1; }
          100% { transform: rotate(40deg) translateX(760px); opacity: 0; }
        }
      `}</style>
    </div>
  );
}
Meteors Hero

Meteors
