"use client";

import * as React from "react";
import { ArrowRight, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SpotlightHeroProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  primaryLabel?: string;
  secondaryLabel?: string;
  className?: string;
}

export function SpotlightHero({
  badge = "v2.0 is live",
  title = "Everything you ship, one spotlight away",
  subtitle = "A dark hero that reacts to the pointer. No canvas, no dependencies — just a radial gradient that follows the mouse.",
  primaryLabel = "Start building",
  secondaryLabel = "Read the docs",
  className,
}: SpotlightHeroProps) {
  const ref = React.useRef<HTMLDivElement>(null);
  const [spot, setSpot] = React.useState({ x: 50, y: 30, active: false });

  function onPointerMove(event: React.PointerEvent<HTMLDivElement>) {
    const rect = ref.current?.getBoundingClientRect();
    if (!rect) return;
    setSpot({
      x: ((event.clientX - rect.left) / rect.width) * 100,
      y: ((event.clientY - rect.top) / rect.height) * 100,
      active: true,
    });
  }

  return (
    <div
      ref={ref}
      onPointerMove={onPointerMove}
      onPointerLeave={() => setSpot((value) => ({ ...value, active: false }))}
      className={cn(
        "relative w-full overflow-hidden rounded-2xl border border-white/10 bg-neutral-950 px-6 py-24 text-center sm:px-12",
        className
      )}
    >
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 transition-opacity duration-500"
        style={{
          opacity: spot.active ? 1 : 0.45,
          background:
            "radial-gradient(600px circle at " + spot.x + "% " + spot.y +
            "%, rgba(139,92,246,0.18), transparent 45%)",
        }}
      />

      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 opacity-[0.06]"
        style={{
          backgroundImage:
            "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
          backgroundSize: "48px 48px",
        }}
      />

      <div className="relative mx-auto flex max-w-3xl flex-col items-center gap-6">
        <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs font-medium text-white/80 backdrop-blur">
          <Sparkles className="size-3.5 text-violet-400" />
          {badge}
        </span>

        <h1 className="text-balance text-4xl font-semibold tracking-tight text-white sm:text-6xl">
          {title}
        </h1>

        <p className="max-w-xl text-pretty text-base text-white/60 sm:text-lg">{subtitle}</p>

        <div className="flex flex-wrap items-center justify-center gap-3 pt-2">
          <button className="group inline-flex h-11 items-center gap-2 rounded-lg bg-white px-6 text-sm font-medium text-neutral-950 transition-transform hover:scale-[1.02] active:scale-[0.98]">
            {primaryLabel}
            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
          </button>
          <button className="inline-flex h-11 items-center rounded-lg border border-white/15 px-6 text-sm font-medium text-white/80 transition-colors hover:bg-white/5">
            {secondaryLabel}
          </button>
        </div>
      </div>
    </div>
  );
}
Related components
