// Background — aurora mesh that adapts to dark/light + accent

function SiteBackground({ dark, accent }) {
  return (
    <>
      {/* Base color */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 0,
        background: dark ? '#0c0a14' : '#fafaff',
      }} />
      {/* Aurora mesh */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 0,
        background: dark
          ? `
            radial-gradient(60% 50% at 15% 10%, ${accent}3a, transparent 65%),
            radial-gradient(55% 45% at 85% 20%, rgba(99,179,237,0.32), transparent 70%),
            radial-gradient(50% 40% at 50% 90%, rgba(180,138,255,0.30), transparent 70%),
            radial-gradient(40% 35% at 95% 80%, rgba(255,200,120,0.18), transparent 70%)
          `
          : `
            radial-gradient(60% 50% at 15% 10%, ${accent}28, transparent 70%),
            radial-gradient(55% 45% at 85% 20%, rgba(99,179,237,0.22), transparent 75%),
            radial-gradient(50% 40% at 50% 90%, rgba(180,138,255,0.20), transparent 75%)
          `,
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />
      {/* Noise grain */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 0,
        backgroundImage: dark
          ? 'radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px)'
          : 'radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px)',
        backgroundSize: '4px 4px', pointerEvents: 'none',
      }} />
    </>
  );
}

window.SiteBackground = SiteBackground;