"use client";

import { useRef } from "react";

export function SpotlightFeatureCard() {
  const ref = useRef<HTMLDivElement>(null);

  function onMove(e: React.MouseEvent<HTMLDivElement>) {
    const el = ref.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    el.style.setProperty("--x", `${e.clientX - rect.left}px`);
    el.style.setProperty("--y", `${e.clientY - rect.top}px`);
  }

  return (
    <div className="bg-[#0B0E16] antialiased px-10 py-14 grid place-items-center text-zinc-100">
      <article
        ref={ref}
        onMouseMove={onMove}
        className="group relative w-full max-w-md overflow-hidden rounded-2xl border border-white/10 bg-[#0F1320] p-7"
        style={{
          ["--x" as string]: "50%",
          ["--y" as string]: "50%",
        }}
      >
        {/* Spotlight glow */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
          style={{
            background:
              "radial-gradient(420px circle at var(--x) var(--y), rgba(94,96,206,0.25), transparent 50%)",
          }}
        />
        {/* Border gradient */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-500 group-hover:opacity-100"
          style={{
            background:
              "radial-gradient(280px circle at var(--x) var(--y), rgba(94,96,206,0.55), transparent 70%)",
            mask:
              "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
            WebkitMask:
              "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
            WebkitMaskComposite: "xor",
            maskComposite: "exclude",
            padding: 1,
          }}
        />

        <div className="relative">
          <span className="inline-flex items-center gap-1.5 rounded-full bg-white/5 border border-white/10 px-2 py-0.5 text-[10.5px] font-mono uppercase tracking-[0.18em] text-zinc-300">
            <span className="h-1.5 w-1.5 rounded-full bg-[#5E60CE]" />
            New · Edge
          </span>
          <h3 className="mt-4 text-[22px] font-medium tracking-tight leading-snug">
            Run anywhere, in milliseconds.
          </h3>
          <p className="mt-3 text-[13px] text-zinc-400 leading-relaxed">
            Ship your code to 320 cities — cold-start under 5 ms, same fetch
            API, zero config. Move your move-fast back to the actual code.
          </p>

          <div className="mt-5 grid grid-cols-3 gap-3 border-t border-white/10 pt-4 text-[11.5px]">
            <Stat n="320" l="Cities" />
            <Stat n="<5 ms" l="Cold start" />
            <Stat n="99.99%" l="Uptime" />
          </div>

          <a
            href="#"
            className="mt-5 inline-flex items-center gap-1 text-[12.5px] font-medium text-zinc-100 hover:text-white"
          >
            Read the launch post
            <span aria-hidden className="transition-transform group-hover:translate-x-1">→</span>
          </a>
        </div>
      </article>
    </div>
  );
}

function Stat({ n, l }: { n: string; l: string }) {
  return (
    <div>
      <div className="font-mono text-[15px] text-zinc-100">{n}</div>
      <div className="mt-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-zinc-500">
        {l}
      </div>
    </div>
  );
}
Spotlight Feature Card

Run anywhere, in milliseconds.

Dependencies
