/* OnSumn — Spotlight Card (adapted from GlowCard for CDN React stack)
   Pointer-tracking glow effect. No Tailwind or TypeScript required.
   Usage: <SpotlightCard glowColor="orange" size="md">content</SpotlightCard> */

const GLOW_COLORS = {
  blue:   { base: 220, spread: 200 },
  purple: { base: 280, spread: 300 },
  green:  { base: 120, spread: 200 },
  red:    { base: 0,   spread: 200 },
  orange: { base: 30,  spread: 200 },
};

const SPOT_SIZES = {
  sm: { width: 192, height: 256 },
  md: { width: 256, height: 320 },
  lg: { width: 320, height: 384 },
};

function SpotlightCard({
  children,
  glowColor = 'orange',
  size = 'md',
  width,
  height,
  customSize = false,
  style = {},
}) {
  const cardRef = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => {
      if (!cardRef.current) return;
      cardRef.current.style.setProperty('--spot-x', e.clientX + 'px');
      cardRef.current.style.setProperty('--spot-y', e.clientY + 'px');
      cardRef.current.style.setProperty('--spot-xp', (e.clientX / window.innerWidth).toFixed(3));
    };
    document.addEventListener('pointermove', handler);
    return () => document.removeEventListener('pointermove', handler);
  }, []);

  const { base, spread } = GLOW_COLORS[glowColor] || GLOW_COLORS.orange;
  const dims = customSize ? {} : (SPOT_SIZES[size] || SPOT_SIZES.md);

  const hueCalc = `calc(${base} + (var(--spot-xp, 0) * ${spread}))`;

  return (
    <div
      ref={cardRef}
      className="spotlight-card"
      style={{
        position: 'relative',
        width: width || dims.width || 'auto',
        height: height || dims.height || 'auto',
        borderRadius: 14,
        padding: 16,
        display: 'grid',
        gridTemplateRows: '1fr auto',
        gap: 16,
        touchAction: 'none',
        background: `
          radial-gradient(
            200px 200px at var(--spot-x, 50%) var(--spot-y, 50%),
            hsla(${hueCalc}, 100%, 70%, 0.1),
            transparent
          ),
          hsl(0 0% 60% / 0.12)
        `,
        backgroundSize: '100% 100%, 100% 100%',
        backgroundAttachment: 'fixed, fixed',
        border: '3px solid hsl(0 0% 60% / 0.12)',
        boxShadow: '0 1rem 2rem -1rem rgba(0,0,0,0.6)',
        backdropFilter: 'blur(5px)',
        WebkitBackdropFilter: 'blur(5px)',
        overflow: 'hidden',
        ...style,
      }}
    >
      {/* Outer glow layer */}
      <div style={{
        position: 'absolute', inset: 0,
        borderRadius: 14,
        pointerEvents: 'none',
        filter: 'blur(30px)',
        opacity: 1,
        background: `radial-gradient(
          150px 150px at var(--spot-x, 50%) var(--spot-y, 50%),
          hsla(${hueCalc}, 100%, 50%, 0.15),
          transparent
        )`,
        backgroundAttachment: 'fixed',
      }} />
      {children}
    </div>
  );
}

window.SpotlightCard = SpotlightCard;
window.GLOW_COLORS = GLOW_COLORS;