/* Star field + particle-dissolve background for GFC hero */
const GFCParticleField = ({ count = 60 }) => {
  const particles = React.useMemo(() => {
    return Array.from({ length: count }, (_, i) => {
      const colors = ['#00E5FF', '#7B2CFF', '#FF2BD1', '#FFB800'];
      return {
        left: Math.random() * 100,
        top: Math.random() * 100,
        size: Math.random() * 2.5 + 0.5,
        color: colors[i % colors.length],
        delay: Math.random() * 4,
        duration: Math.random() * 4 + 3,
      };
    });
  }, [count]);
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {particles.map((p, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${p.left}%`, top: `${p.top}%`,
          width: p.size, height: p.size, borderRadius: '50%',
          background: p.color,
          boxShadow: `0 0 ${p.size * 4}px ${p.color}`,
          animation: `gfc-twinkle ${p.duration}s ease-in-out ${p.delay}s infinite`,
        }} />
      ))}
    </div>
  );
};

const GFCGridOverlay = () => (
  <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.25 }}>
    <defs>
      <pattern id="gfc-grid" width="60" height="60" patternUnits="userSpaceOnUse">
        <path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(0,229,255,0.15)" strokeWidth="1"/>
      </pattern>
      <radialGradient id="gfc-grid-fade" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor="#fff" stopOpacity="1"/>
        <stop offset="100%" stopColor="#fff" stopOpacity="0"/>
      </radialGradient>
      <mask id="gfc-mask"><rect width="100%" height="100%" fill="url(#gfc-grid-fade)"/></mask>
    </defs>
    <rect width="100%" height="100%" fill="url(#gfc-grid)" mask="url(#gfc-mask)"/>
  </svg>
);

Object.assign(window, { GFCParticleField, GFCGridOverlay });