Spotlight Card

'use client';

import { useRef } from 'react';

export function SpotlightCard() {
  const cardRef = useRef<HTMLElement>(null);

  const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
    const card = cardRef.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    // Written straight to the element so the pointer never triggers a re-render.
    card.style.setProperty('--x', `${event.clientX - rect.left}px`);
    card.style.setProperty('--y', `${event.clientY - rect.top}px`);
  };

  const cardStyle = { '--x': '50%', '--y': '0%' } as React.CSSProperties;
  const glowStyle: React.CSSProperties = {
    background: 'radial-gradient(240px at var(--x) var(--y), rgba(200,169,106,0.15), transparent)',
    transition: 'opacity 300ms ease',
  };

  return (
    <article
      ref={cardRef}
      onMouseMove={handleMouseMove}
      style={cardStyle}
      className="group relative h-40 w-[280px] overflow-hidden rounded-xl border border-[#26282e] bg-[#16181c] p-5"
    >
      <span
        aria-hidden="true"
        style={glowStyle}
        className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100"
      />
      <h3 className="relative text-[16px] font-semibold text-[#ece9e2]">Quiet by default</h3>
      <p className="relative mt-2.5 text-[13px] leading-[1.6] text-[#8a8d96]">
        Move your cursor across the card and a soft brass light will follow it.
      </p>
    </article>
  );
}