// GlowCard — adapted from TypeScript for CDN/vanilla-React usage.
// Pointer position is tracked globally so every card on the page responds
// to the same cursor, matching the original component's behaviour.
function GlowCard({ children, className, glowColor, width, height, customSize, onClick, style: extraStyle }) {
  glowColor = glowColor || 'red';

  const cardRef = React.useRef(null);

  // Gemini-aligned hues: sapphire, violet, aurora, rose, coral.
  const glowColorMap = {
    blue:   { base: 217, spread: 220 },  // Gemini sapphire (#C8102E)
    purple: { base: 270, spread: 320 },  // Gemini violet (#8B0A1F)
    green:  { base: 145, spread: 200 },  // Gemini aurora (#FFFFFF)
    red:    { base: 348, spread: 240 },  // Gemini rose (#C8102E)
    orange: { base: 12,  spread: 220 },  // Gemini coral (#E63048)
  };

  React.useEffect(() => {
    const el = cardRef.current;
    if (!el) return;
    const sync = ({ clientX: x, clientY: y }) => {
      el.style.setProperty('--x', x.toFixed(2));
      el.style.setProperty('--xp', (x / window.innerWidth).toFixed(2));
      el.style.setProperty('--y', y.toFixed(2));
      el.style.setProperty('--yp', (y / window.innerHeight).toFixed(2));
    };
    document.addEventListener('pointermove', sync);
    return () => document.removeEventListener('pointermove', sync);
  }, []);

  const { base, spread } = glowColorMap[glowColor];

  const cardStyle = {
    '--base': base,
    '--spread': spread,
    '--radius': '16',
    '--border': '2',
    '--backdrop': 'hsl(0 0% 5% / 0.92)',
    '--backup-border': 'hsl(0 0% 14% / 1)',
    '--size': '300',
    '--outer': '1',
    '--border-size': 'calc(var(--border, 2) * 1px)',
    '--spotlight-size': 'calc(var(--size, 150) * 1px)',
    '--hue': 'calc(var(--base) + (var(--xp, 0) * var(--spread, 0)))',
    '--saturation': '100',
    '--lightness': '62',
    '--bg-spot-opacity': '0.22',
    '--border-spot-opacity': '1',
    '--border-light-opacity': '0.5',
    backgroundImage: 'radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px), hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 65) * 1%) / var(--bg-spot-opacity, 0.12)), transparent)',
    backgroundColor: 'var(--backdrop, transparent)',
    backgroundSize: 'calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)))',
    backgroundPosition: '50% 50%',
    backgroundAttachment: 'fixed',
    border: 'var(--border-size) solid var(--backup-border)',
    position: 'relative',
    touchAction: 'none',
    borderRadius: 'calc(var(--radius) * 1px)',
    boxShadow: '0 1rem 2rem -1rem black',
    backdropFilter: 'blur(5px)',
    overflow: 'hidden',
    ...extraStyle,
  };

  if (width  !== undefined) cardStyle.width  = typeof width  === 'number' ? `${width}px`  : width;
  if (height !== undefined) cardStyle.height = typeof height === 'number' ? `${height}px` : height;

  return (
    <div
      ref={cardRef}
      data-glow
      style={cardStyle}
      className={className || ''}
      onClick={onClick}
    >
      <div data-glow />
      {children}
    </div>
  );
}

window.GlowCard = GlowCard;