cinny/src/app/components/seasonal/SeasonalEffect.tsx

import React, { useMemo } from 'react';
import { useAtomValue } from 'jotai';
import { settingsAtom } from '../../state/settings';
import {
  animSeasonFall,
  animLeafFall,
  animFloatUp,
  animBob,
  animTasselSway,
  animGoldShimmer,
  animCloverDrift,
  animEarthLeafDrift,
  animWarp,
  animScanline,
  animPixelBlink,
} from './Seasonal.css';

export type SeasonTheme =
  | 'halloween'
  | 'christmas'
  | 'newyear'
  | 'autumn'
  | 'aprilfools'
  | 'lunar'
  | 'valentines'
  | 'stpatricks'
  | 'earthday'
  | 'deepspace'
  | 'arcade';

function getActiveSeason(now: Date): SeasonTheme | null {
  const m = now.getMonth() + 1; // 1-12
  const d = now.getDate();

  // New Year takes highest priority (Dec 31 – Jan 2)
  if ((m === 12 && d === 31) || (m === 1 && d <= 2)) return 'newyear';
  // Valentine's Day (Feb 10–15)
  if (m === 2 && d >= 10 && d <= 15) return 'valentines';
  // St. Patrick's Day (March 15–18)
  if (m === 3 && d >= 15 && d <= 18) return 'stpatricks';
  // April Fool's (April 1)
  if (m === 4 && d === 1) return 'aprilfools';
  // Earth Day (April 20–23)
  if (m === 4 && d >= 20 && d <= 23) return 'earthday';
  // Lunar New Year (Jan 22 – Feb 5, approximate fixed window)
  if ((m === 1 && d >= 22) || (m === 2 && d <= 5)) return 'lunar';
  // International Video Game Day (Sept 12)
  if (m === 9 && d === 12) return 'arcade';
  // World Space Week (Oct 4–10)
  if (m === 10 && d >= 4 && d <= 10) return 'deepspace';
  // Halloween (Oct 15 – Nov 1)
  if ((m === 10 && d >= 15) || (m === 11 && d === 1)) return 'halloween';
  // Christmas (Dec 10–30)
  if (m === 12 && d >= 10) return 'christmas';
  // Autumn (Sept 21 – Oct 31, excluding Halloween/Deep Space windows above)
  if ((m === 9 && d >= 21) || (m === 10 && d <= 14)) return 'autumn';

  return null;
}

// ─── Individual theme overlays ────────────────────────────────────────────────

function HalloweenOverlay({ reduced }: { reduced: boolean }) {
  const particles = Array.from({ length: 22 });
  return (
    <>
      {/* Dark purple ambient tint */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: 'rgba(25,0,45,0.22)',
          backgroundImage:
            'radial-gradient(ellipse at 50% 50%, rgba(100,0,180,0.08) 0%, transparent 70%)',
        }}
      />
      {/* Spider web corners */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '160px',
          height: '160px',
          backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g stroke='rgba(180,120,255,0.35)' stroke-width='0.7' fill='none'><line x1='0' y1='0' x2='80' y2='80'/><line x1='40' y1='0' x2='80' y2='80'/><line x1='80' y1='0' x2='80' y2='80'/><line x1='0' y1='40' x2='80' y2='80'/><line x1='0' y1='80' x2='80' y2='80'/><ellipse cx='80' cy='80' rx='20' ry='20'/><ellipse cx='80' cy='80' rx='40' ry='40'/><ellipse cx='80' cy='80' rx='60' ry='60'/><ellipse cx='80' cy='80' rx='80' ry='80'/></g></svg>")`,
          backgroundRepeat: 'no-repeat',
          opacity: 0.7,
        }}
      />
      {/* Falling purple/orange particles */}
      {!reduced &&
        particles.map((_, i) => {
          const isOrange = i % 3 === 0;
          const size = 4 + (i % 3) * 2;
          const left = (i * 4597 + 137) % 100;
          const duration = 8 + (i % 7) * 1.5;
          const delay = (i * 0.45) % 7;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-8px',
                left: `${left}%`,
                width: `${size}px`,
                height: `${size}px`,
                borderRadius: '50%',
                backgroundColor: isOrange ? 'rgba(255,100,0,0.75)' : 'rgba(160,0,255,0.7)',
                boxShadow: isOrange
                  ? '0 0 8px rgba(255,100,0,0.5)'
                  : '0 0 8px rgba(160,0,255,0.5)',
                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
              }}
            />
          );
        })}
    </>
  );
}

function ChristmasOverlay({ reduced }: { reduced: boolean }) {
  const flakes = Array.from({ length: 28 });
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'radial-gradient(ellipse at 50% 0%, rgba(220,240,255,0.06) 0%, transparent 60%)',
        }}
      />
      {!reduced &&
        flakes.map((_, i) => {
          const size = 3 + (i % 4) * 2;
          const left = (i * 3571 + 251) % 100;
          const duration = 10 + (i % 8) * 2;
          const delay = (i * 0.55) % 10;
          const drift = ((i % 5) - 2) * 12;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-10px',
                left: `${left}%`,
                width: `${size}px`,
                height: `${size}px`,
                borderRadius: '50%',
                backgroundColor: 'rgba(255,255,255,0.82)',
                boxShadow: '0 0 4px rgba(200,230,255,0.6)',
                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
                transform: `translateX(${drift}px)`,
              }}
            />
          );
        })}
    </>
  );
}

// Replaced flashing burst rays with gentle falling confetti
function NewYearOverlay({ reduced }: { reduced: boolean }) {
  const confetti = Array.from({ length: 24 });
  const colors = ['#ffd700', '#ff4466', '#00d4ff', '#aa44ff', '#ff8800', '#ffffff'];

  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: 'rgba(10,5,0,0.10)',
          backgroundImage:
            'radial-gradient(ellipse at 50% 50%, rgba(255,200,0,0.04) 0%, transparent 70%)',
        }}
      />
      {/* Gentle falling confetti */}
      {!reduced &&
        confetti.map((_, i) => {
          const c = colors[i % colors.length];
          const left = (i * 4597 + 137) % 100;
          const size = 3 + (i % 3) * 2;
          const duration = 8 + (i % 7) * 1.5;
          const delay = (i * 0.4) % 8;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-8px',
                left: `${left}%`,
                width: `${size}px`,
                height: `${size}px`,
                borderRadius: i % 2 === 0 ? '50%' : '1px',
                backgroundColor: c,
                boxShadow: `0 0 ${size + 2}px ${c}`,
                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
                opacity: 0.7 + (i % 3) * 0.1,
              }}
            />
          );
        })}
      {/* Slow gold shimmer */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'linear-gradient(105deg, transparent 30%, rgba(255,215,0,0.05) 50%, transparent 70%)',
          backgroundSize: '200% 100%',
          animation: reduced ? 'none' : `${animGoldShimmer} 5s linear infinite`,
        }}
      />
    </>
  );
}

function AutumnOverlay({ reduced }: { reduced: boolean }) {
  const leaves = Array.from({ length: 18 });
  const colors = [
    'rgba(220,80,20,0.75)',
    'rgba(200,120,0,0.7)',
    'rgba(180,50,10,0.7)',
    'rgba(230,150,0,0.65)',
    'rgba(160,80,0,0.6)',
  ];
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'radial-gradient(ellipse at 50% 100%, rgba(180,80,0,0.06) 0%, transparent 60%)',
        }}
      />
      {!reduced &&
        leaves.map((_, i) => {
          const left = (i * 5381 + 179) % 100;
          const duration = 12 + (i % 6) * 2;
          const delay = (i * 0.65) % 12;
          const size = 10 + (i % 4) * 4;
          const col = colors[i % colors.length];
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-15px',
                left: `${left}%`,
                width: `${size}px`,
                height: `${size * 0.7}px`,
                borderRadius: '50% 0 50% 0',
                backgroundColor: col,
                boxShadow: `0 0 4px ${col}`,
                animation: `${animLeafFall} ${duration}s ease-in ${delay}s infinite`,
              }}
            />
          );
        })}
    </>
  );
}

// Replaced aggressive glitch with playful confetti rain
function AprilFoolsOverlay({ reduced }: { reduced: boolean }) {
  const particles = Array.from({ length: 20 });
  const symbols = ['?', '!', '¿', '‽', '?', '!'];
  const colors = [
    'rgba(255,80,80,0.55)',
    'rgba(255,200,0,0.55)',
    'rgba(80,200,80,0.55)',
    'rgba(80,80,255,0.55)',
    'rgba(200,80,200,0.55)',
    'rgba(80,200,200,0.55)',
  ];

  return (
    <>
      {/* Subtle rainbow stripe along top edge */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '3px',
          backgroundImage:
            'linear-gradient(90deg, rgba(255,0,0,0.4), rgba(255,165,0,0.4), rgba(255,255,0,0.4), rgba(0,200,0,0.4), rgba(0,0,255,0.4), rgba(128,0,128,0.4))',
          opacity: 0.7,
        }}
      />
      {/* Gentle falling punctuation symbols */}
      {!reduced &&
        particles.map((_, i) => {
          const left = (i * 5381 + 179) % 100;
          const duration = 11 + (i % 5) * 2.5;
          const delay = (i * 0.55) % 10;
          const col = colors[i % colors.length];
          const sym = symbols[i % symbols.length];
          const size = 12 + (i % 3) * 5;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-20px',
                left: `${left}%`,
                fontSize: `${size}px`,
                color: col,
                fontWeight: 700,
                fontFamily: 'monospace',
                animation: `${animSeasonFall} ${duration}s ease-in ${delay}s infinite`,
                userSelect: 'none',
              }}
            >
              {sym}
            </div>
          );
        })}
    </>
  );
}

// Reduced to 4 lanterns, subtler tint and shimmer
function LunarNewYearOverlay({ reduced }: { reduced: boolean }) {
  const lanterns = Array.from({ length: 4 }); // was 9
  return (
    <>
      {/* Very subtle red silk tint */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: 'rgba(140,0,0,0.05)',
          backgroundImage: [
            'repeating-linear-gradient(45deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
            'repeating-linear-gradient(135deg, rgba(200,20,0,0.015) 0px, rgba(200,20,0,0.015) 1px, transparent 1px, transparent 8px)',
          ].join(','),
        }}
      />
      {/* Slow gold shimmer */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'linear-gradient(100deg, transparent 25%, rgba(255,200,0,0.05) 45%, rgba(255,220,50,0.07) 50%, rgba(255,200,0,0.05) 55%, transparent 75%)',
          backgroundSize: '300% 100%',
          animation: reduced ? 'none' : `${animGoldShimmer} 8s linear infinite`,
        }}
      />
      {/* 4 floating lanterns */}
      {lanterns.map((_, i) => {
        const left = 10 + ((i * 4603 + 311) % 75);
        const top = 10 + ((i * 2311 + 97) % 50);
        const duration = 3.5 + (i % 4) * 0.7;
        const delay = i * 0.9;
        return (
          <div
            key={i}
            aria-hidden="true"
            style={{
              position: 'absolute',
              left: `${left}%`,
              top: `${top}%`,
              animation:
                reduced ? 'none' : `${animBob} ${duration}s ease-in-out ${delay}s infinite`,
            }}
          >
            <div
              style={{
                width: '18px',
                height: '5px',
                backgroundColor: '#ffd700',
                borderRadius: '2px',
                margin: '0 auto',
                boxShadow: '0 0 4px rgba(255,215,0,0.6)',
              }}
            />
            <div
              style={{
                width: '24px',
                height: '32px',
                backgroundColor: '#cc0000',
                borderRadius: '50%',
                border: '1.5px solid #ffd700',
                boxShadow: '0 0 14px rgba(200,0,0,0.5), inset 0 0 10px rgba(255,200,0,0.2)',
                margin: '1px auto',
              }}
            />
            <div
              style={{
                width: '18px',
                height: '5px',
                backgroundColor: '#ffd700',
                borderRadius: '2px',
                margin: '0 auto',
              }}
            />
            <div
              style={{
                width: '2px',
                height: '14px',
                backgroundColor: '#ffd700',
                margin: '0 auto',
                animation:
                  reduced
                    ? 'none'
                    : `${animTasselSway} ${duration * 0.6}s ease-in-out ${delay}s infinite`,
                transformOrigin: 'top center',
              }}
            />
          </div>
        );
      })}
    </>
  );
}

function ValentinesOverlay({ reduced }: { reduced: boolean }) {
  const hearts = Array.from({ length: 18 });
  const colors = [
    'rgba(255,100,140,0.8)',
    'rgba(255,150,180,0.65)',
    'rgba(220,70,110,0.7)',
    'rgba(255,180,200,0.55)',
  ];
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'radial-gradient(ellipse at 50% 100%, rgba(255,100,140,0.06) 0%, transparent 55%)',
        }}
      />
      {!reduced &&
        hearts.map((_, i) => {
          const left = 3 + ((i * 6271 + 443) % 94);
          const duration = 9 + (i % 6) * 1.8;
          const delay = (i * 0.6) % 9;
          const size = 14 + (i % 4) * 5;
          const col = colors[i % colors.length];
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                bottom: '-20px',
                left: `${left}%`,
                fontSize: `${size}px`,
                color: col,
                filter: 'drop-shadow(0 0 4px rgba(255,100,140,0.4))',
                animation: `${animFloatUp} ${duration}s ease-in ${delay}s infinite`,
                userSelect: 'none',
              }}
            >
              ♥
            </div>
          );
        })}
    </>
  );
}

function StPatricksOverlay({ reduced }: { reduced: boolean }) {
  const clovers = Array.from({ length: 18 });
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: [
            'radial-gradient(ellipse at 50% 0%, rgba(0,160,60,0.07) 0%, transparent 50%)',
            'radial-gradient(ellipse at 50% 100%, rgba(0,130,50,0.05) 0%, transparent 40%)',
          ].join(','),
        }}
      />
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '3px',
          backgroundImage:
            'linear-gradient(90deg, transparent 0%, #ffd700 20%, #fff4a0 40%, #ffd700 60%, transparent 100%)',
          backgroundSize: '300% 100%',
          animation: reduced ? 'none' : `${animGoldShimmer} 3s linear infinite`,
        }}
      />
      {!reduced &&
        clovers.map((_, i) => {
          const left = (i * 4129 + 223) % 100;
          const duration = 14 + (i % 6) * 2;
          const delay = (i * 0.7) % 12;
          const size = 14 + (i % 3) * 6;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-20px',
                left: `${left}%`,
                fontSize: `${size}px`,
                opacity: 0.45 + (i % 3) * 0.1,
                filter: 'drop-shadow(0 0 3px rgba(0,180,60,0.3))',
                animation: `${animCloverDrift} ${duration}s linear ${delay}s infinite`,
                userSelect: 'none',
              }}
            >
              ☘
            </div>
          );
        })}
    </>
  );
}

function EarthDayOverlay({ reduced }: { reduced: boolean }) {
  const leaves = Array.from({ length: 16 });
  const leafEmoji = ['🌿', '🍃', '🌱', '🍀'];
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: [
            'radial-gradient(ellipse at 30% 70%, rgba(60,160,60,0.07) 0%, transparent 50%)',
            'radial-gradient(ellipse at 70% 30%, rgba(100,180,80,0.05) 0%, transparent 45%)',
          ].join(','),
        }}
      />
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          left: 0,
          top: 0,
          bottom: 0,
          width: '3px',
          backgroundImage:
            'linear-gradient(180deg, transparent 0%, rgba(60,160,60,0.4) 20%, rgba(80,180,60,0.6) 50%, rgba(60,160,60,0.4) 80%, transparent 100%)',
        }}
      />
      {!reduced &&
        leaves.map((_, i) => {
          const left = 3 + ((i * 5023 + 317) % 92);
          const duration = 13 + (i % 5) * 2;
          const delay = (i * 0.75) % 11;
          const size = 14 + (i % 3) * 5;
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                top: '-20px',
                left: `${left}%`,
                fontSize: `${size}px`,
                opacity: 0.5 + (i % 3) * 0.1,
                animation: `${animEarthLeafDrift} ${duration}s ease-in ${delay}s infinite`,
                userSelect: 'none',
              }}
            >
              {leafEmoji[i % leafEmoji.length]}
            </div>
          );
        })}
    </>
  );
}

function DeepSpaceOverlay({ reduced }: { reduced: boolean }) {
  const stars = Array.from({ length: 24 });
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundColor: 'rgba(0,0,8,0.3)',
          backgroundImage: [
            'radial-gradient(ellipse at 30% 40%, rgba(80,0,180,0.10) 0%, transparent 50%)',
            'radial-gradient(ellipse at 70% 60%, rgba(0,60,180,0.10) 0%, transparent 50%)',
            'radial-gradient(ellipse at 50% 20%, rgba(120,0,200,0.07) 0%, transparent 40%)',
          ].join(','),
        }}
      />
      {!reduced &&
        stars.map((_, i) => {
          const angle = (i / stars.length) * 360;
          const duration = 2.5 + (i % 5) * 0.4;
          const delay = (i * 0.18) % 2.5;
          const period = 3 + (i % 4) * 0.5;
          const size = 1 + (i % 3);
          const starColors = [
            'rgba(200,180,255,0.9)',
            'rgba(150,200,255,0.8)',
            'rgba(255,255,255,0.7)',
          ];
          return (
            <div
              key={i}
              aria-hidden="true"
              style={{
                position: 'absolute',
                left: '50%',
                top: '50%',
                width: `${80 + i * 6}px`,
                height: `${size}px`,
                backgroundColor: starColors[i % starColors.length],
                transformOrigin: '0 50%',
                transform: `rotate(${angle}deg)`,
                boxShadow: `0 0 ${size * 2}px ${starColors[i % starColors.length]}`,
                animation: `${animWarp} ${duration}s ease-out ${delay}s ${period}s infinite`,
                opacity: 0,
              }}
            />
          );
        })}
    </>
  );
}

function ArcadeOverlay({ reduced }: { reduced: boolean }) {
  return (
    <>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0px, rgba(0,0,0,0.12) 1px, transparent 1px, transparent 3px)',
          animation: reduced ? 'none' : `${animScanline} 3s ease-in-out infinite`,
        }}
      />
      {(['0,0', '0,auto', 'auto,0', 'auto,auto'] as const).map((corner, i) => {
        const [t, b] = corner.split(',');
        return (
          <div
            key={i}
            aria-hidden="true"
            style={{
              position: 'absolute',
              top: t === '0' ? '8px' : undefined,
              bottom: b === '0' ? '8px' : undefined,
              left: i % 2 === 0 ? '8px' : undefined,
              right: i % 2 === 1 ? '8px' : undefined,
              fontFamily: 'monospace',
              fontSize: '11px',
              color: 'rgba(0,255,136,0.5)',
              letterSpacing: '0.05em',
              animation: reduced ? 'none' : `${animPixelBlink} ${1 + i * 0.3}s step-end infinite`,
              userSelect: 'none',
            }}
          >
            {['[■]', '[■]', '[■]', '[■]'][i]}
          </div>
        );
      })}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          bottom: '16px',
          left: '50%',
          transform: 'translateX(-50%)',
          fontFamily: 'monospace',
          fontSize: '12px',
          letterSpacing: '0.2em',
          color: 'rgba(255,220,0,0.4)',
          animation: reduced ? 'none' : `${animPixelBlink} 1.2s step-end infinite`,
          userSelect: 'none',
          whiteSpace: 'nowrap',
        }}
      >
        — INSERT COIN —
      </div>
      <div
        aria-hidden="true"
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage:
            'radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.35) 100%)',
        }}
      />
    </>
  );
}

// ─── Overlay content map (shared between SeasonalOverlay and SeasonalPreview) ──

function buildOverlayContent(theme: SeasonTheme, reduced: boolean): React.ReactNode {
  switch (theme) {
    case 'halloween':
      return <HalloweenOverlay reduced={reduced} />;
    case 'christmas':
      return <ChristmasOverlay reduced={reduced} />;
    case 'newyear':
      return <NewYearOverlay reduced={reduced} />;
    case 'autumn':
      return <AutumnOverlay reduced={reduced} />;
    case 'aprilfools':
      return <AprilFoolsOverlay reduced={reduced} />;
    case 'lunar':
      return <LunarNewYearOverlay reduced={reduced} />;
    case 'valentines':
      return <ValentinesOverlay reduced={reduced} />;
    case 'stpatricks':
      return <StPatricksOverlay reduced={reduced} />;
    case 'earthday':
      return <EarthDayOverlay reduced={reduced} />;
    case 'deepspace':
      return <DeepSpaceOverlay reduced={reduced} />;
    case 'arcade':
      return <ArcadeOverlay reduced={reduced} />;
    default:
      return null;
  }
}

// ─── Full-screen overlay (fixed position, used in App) ────────────────────────

function SeasonalOverlay({ theme, reduced }: { theme: SeasonTheme; reduced: boolean }) {
  return (
    <div
      aria-hidden="true"
      style={{
        position: 'fixed',
        inset: 0,
        pointerEvents: 'none',
        zIndex: 9999,
        overflow: 'hidden',
      }}
    >
      {buildOverlayContent(theme, reduced)}
    </div>
  );
}

// ─── Preview overlay (absolute position, contained in a card) ─────────────────

/**
 * Renders the ambient (reduced-motion) version of a seasonal overlay inside
 * a parent container. The parent must have `position: relative; overflow: hidden`.
 */
export function SeasonalPreview({ theme }: { theme: SeasonTheme }) {
  return (
    <div
      aria-hidden="true"
      style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}
    >
      {buildOverlayContent(theme, true)}
    </div>
  );
}

// ─── Main exported component ──────────────────────────────────────────────────

export function SeasonalEffect() {
  const settings = useAtomValue(settingsAtom);
  const reduced =
    typeof window !== 'undefined' &&
    window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const theme = useMemo<SeasonTheme | null>(() => {
    const override = settings.seasonalThemeOverride ?? 'auto';
    if (override === 'off') return null;
    if (override === 'auto') return getActiveSeason(new Date());
    return override as SeasonTheme;
  }, [settings.seasonalThemeOverride]);

  if (!theme) return null;
  return <SeasonalOverlay theme={theme} reduced={reduced} />;
}