// V1 — "Studio Sarah" — Disco / glitter / sparkles nightclub vibes.
// Dark cosmic background, mirror ball, neon chrome type, drifting sparkles.

const DISCO = {
  pink: '#ff2d95',
  purple: '#a855f7',
  cyan: '#06d6e8',
  gold: '#ffd60a',
  magenta: '#e635c0',
  ink: '#0b0420',
  ink2: '#1a0a3d',
  ink3: '#2a0f5e',
};

const discoFont = "'Audiowide', 'Monoton', system-ui, sans-serif";
const discoBody = "'Space Grotesk', 'Inter', system-ui, sans-serif";

const discoBtn = {
  fontFamily: discoFont,
  fontSize: 13,
  letterSpacing: 2,
  padding: '14px 26px',
  background: `linear-gradient(135deg, ${DISCO.pink}, ${DISCO.magenta} 50%, ${DISCO.purple})`,
  color: '#fff',
  border: '2px solid rgba(255,255,255,0.25)',
  borderRadius: 999,
  textTransform: 'uppercase',
  cursor: 'pointer',
  boxShadow: `0 0 0 1px rgba(0,0,0,0.4), 0 0 24px ${DISCO.pink}66, 0 8px 30px rgba(0,0,0,0.5)`,
  textShadow: '0 1px 2px rgba(0,0,0,0.4)',
};

const discoSoundBtn = {
  background: 'rgba(255,255,255,0.06)',
  border: `1.5px solid ${DISCO.purple}`,
  borderRadius: 14,
  color: '#fff',
  boxShadow: `inset 0 0 12px rgba(168,85,247,0.25), 0 0 14px rgba(168,85,247,0.2)`,
};

function DiscoSparkles({ count = 60 }) {
  const sparkles = React.useMemo(() =>
    Array.from({ length: count }, (_, i) => ({
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: 2 + Math.random() * 4,
      delay: Math.random() * 4,
      dur: 2 + Math.random() * 4,
      color: [DISCO.gold, DISCO.cyan, DISCO.pink, '#fff'][Math.floor(Math.random() * 4)],
    })), []);
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
      {sparkles.map((s, i) => (
        <div key={i} style={{
          position: 'absolute', left: `${s.x}%`, top: `${s.y}%`,
          width: s.size, height: s.size,
          background: s.color,
          boxShadow: `0 0 ${s.size * 3}px ${s.color}`,
          borderRadius: '50%',
          animation: `sarahTwinkle ${s.dur}s ease-in-out ${s.delay}s infinite`,
        }} />
      ))}
    </div>
  );
}

function MirrorBall({ size = 130 }) {
  const facets = React.useMemo(() => {
    const arr = [];
    const rows = 9;
    for (let r = 0; r < rows; r++) {
      const lat = (r / (rows - 1)) - 0.5;
      const cols = Math.max(4, Math.round(Math.cos(lat * Math.PI) * 12));
      for (let c = 0; c < cols; c++) {
        arr.push({
          x: 50 + Math.cos(lat * Math.PI) * 48 * Math.cos((c / cols) * Math.PI * 2),
          y: 50 + 48 * lat,
          w: 100 / cols * Math.cos(lat * Math.PI) * 0.8,
          h: 100 / rows * 0.85,
          bright: 0.3 + Math.random() * 0.7,
        });
      }
    }
    return arr;
  }, []);
  return (
    <div style={{
      position: 'relative', width: size, height: size,
      animation: 'sarahSpin 6s linear infinite',
    }}>
      <div style={{
        position: 'absolute', inset: 0, borderRadius: '50%',
        background: `radial-gradient(circle at 32% 28%, #fff 0%, #d1e8ff 22%, #6b8cb0 60%, #1a2540 100%)`,
        boxShadow: `0 0 40px rgba(167,200,255,0.55), 0 0 80px rgba(255,45,149,0.35), inset -20px -20px 40px rgba(0,0,0,0.4)`,
        overflow: 'hidden',
      }}>
        {facets.map((f, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${f.x - f.w / 2}%`, top: `${f.y - f.h / 2}%`,
            width: `${f.w}%`, height: `${f.h}%`,
            background: `rgba(255,255,255,${f.bright * 0.5})`,
            border: '0.5px solid rgba(0,0,0,0.2)',
            mixBlendMode: 'screen',
          }} />
        ))}
      </div>
      <div style={{
        position: 'absolute', left: '50%', top: -22, width: 2, height: 22,
        background: 'linear-gradient(to bottom, transparent, #aaa)',
        transform: 'translateX(-50%)',
      }} />
    </div>
  );
}

function ChromeText({ children, size = 44, family = discoFont }) {
  return (
    <div style={{
      fontFamily: family,
      fontSize: size,
      fontWeight: 400,
      lineHeight: 0.95,
      letterSpacing: 2,
      background: 'linear-gradient(180deg, #fff 0%, #ffd60a 28%, #ff2d95 55%, #a855f7 78%, #06d6e8 100%)',
      WebkitBackgroundClip: 'text', backgroundClip: 'text',
      WebkitTextFillColor: 'transparent',
      filter: 'drop-shadow(0 2px 0 rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(255,45,149,0.7))',
      textAlign: 'center',
    }}>{children}</div>
  );
}

function DiscoVariation() {
  const ref = React.useRef(null);
  useConfetti(ref, [DISCO.pink, DISCO.purple, DISCO.cyan, DISCO.gold, '#fff', DISCO.magenta],
              { shapes: ['rect', 'circle', 'star', 'rect'] });

  const compliments = [
    'Brightest in the room',
    'Funnier than us all',
    'Has THE best laugh',
    'Disco queen',
    'Excellent taste',
    'Most fun SisLaw',
    'Radiates joy',
    'Cool aunt energy',
  ];

  const soundButtons = [
    { sound: 'horn', icon: '📯', label: 'Horn' },
    { sound: 'kazoo', icon: '🎺', label: 'Kazoo' },
    { sound: 'applause', icon: '👏', label: 'Clap' },
    { sound: 'yay', icon: '🎉', label: 'Yay!' },
    { sound: 'cheer', icon: '📢', label: 'Cheer' },
    { sound: 'airhorn', icon: '🚨', label: 'Airhorn' },
    { sound: 'ding', icon: '🔔', label: 'Ding' },
    { sound: 'drumroll', icon: '🥁', label: 'Drumroll' },
    { sound: 'boing', icon: '💫', label: 'Boing' },
  ];

  return (
    <div ref={ref} data-confetti-root style={{
      position: 'relative',
      background: `
        radial-gradient(ellipse at 20% 0%, ${DISCO.purple}55 0%, transparent 55%),
        radial-gradient(ellipse at 80% 30%, ${DISCO.pink}44 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, ${DISCO.cyan}33 0%, transparent 55%),
        linear-gradient(180deg, ${DISCO.ink} 0%, ${DISCO.ink2} 50%, ${DISCO.ink} 100%)`,
      color: '#fff',
      fontFamily: discoBody,
      overflow: 'hidden',
      cursor: 'crosshair',
    }}>
      <DiscoSparkles count={70} />

      {/* HERO */}
      <section style={{
        position: 'relative', padding: '40px 24px 32px', textAlign: 'center',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
      }}>
        <div style={{
          fontFamily: discoFont, fontSize: 11, letterSpacing: 6, color: DISCO.cyan,
          textShadow: `0 0 12px ${DISCO.cyan}`,
        }}>★ TONIGHT ONLY ★</div>
        <MirrorBall size={120} />
        <ChromeText size={66}>SARAH</ChromeText>
        <div style={{
          fontFamily: discoFont, fontSize: 18, letterSpacing: 4,
          color: '#fff', textShadow: `0 0 14px ${DISCO.pink}`,
        }}>HAPPY BIRTHDAY</div>
        <div style={{
          marginTop: 4, fontSize: 12, letterSpacing: 3, opacity: 0.7,
          fontFamily: discoFont, color: DISCO.gold,
        }}>★ TAP ANYWHERE FOR CONFETTI ★</div>
      </section>

      {/* MESSAGE */}
      <section style={{
        position: 'relative', padding: '24px 20px 36px',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{
          maxWidth: 360, padding: '24px 22px',
          background: 'rgba(255,255,255,0.04)',
          backdropFilter: 'blur(8px)',
          border: `1.5px solid ${DISCO.purple}`,
          borderRadius: 18,
          boxShadow: `0 0 30px ${DISCO.purple}55, inset 0 0 30px rgba(168,85,247,0.1)`,
          textAlign: 'center',
        }}>
          <div style={{
            fontFamily: discoFont, fontSize: 10, letterSpacing: 4, color: DISCO.cyan, marginBottom: 14,
          }}>— A NOTE FROM THE FAN CLUB —</div>
          <div style={{ fontSize: 17, lineHeight: 1.55, fontWeight: 500 }}>
            Happy Birthday day SisLaw — hope you have a wonderful day!! 🎉
          </div>
          <div style={{
            marginTop: 18, fontFamily: discoFont, fontSize: 11, letterSpacing: 3, color: DISCO.gold,
          }}>★ HENRI & TIFF ★</div>
        </div>
      </section>

      {/* WHEEL */}
      <section style={{ position: 'relative', padding: '28px 20px', textAlign: 'center' }}>
        <div style={{
          fontFamily: discoFont, fontSize: 13, letterSpacing: 4, color: DISCO.pink, marginBottom: 6,
        }}>WHEEL OF</div>
        <ChromeText size={36}>COMPLIMENTS</ChromeText>
        <div style={{ marginTop: 18 }}>
          <WheelOfCompliments
            compliments={compliments}
            colors={[DISCO.pink, DISCO.purple, DISCO.cyan, DISCO.gold, DISCO.magenta, '#ff61b8', '#7d51e8', '#2bb6f0']}
            fontFamily={discoFont}
            accent={DISCO.gold}
            textColor="#fff"
            btnStyle={discoBtn}
            size={300}
          />
        </div>
      </section>

      {/* GAME */}
      <section style={{ position: 'relative', padding: '28px 20px', textAlign: 'center' }}>
        <div style={{
          fontFamily: discoFont, fontSize: 13, letterSpacing: 4, color: DISCO.cyan, marginBottom: 6,
        }}>MINI GAME</div>
        <ChromeText size={32}>CAKE FRENZY</ChromeText>
        <div style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}>
          <CatchCake
            duration={25}
            fontFamily={discoFont}
            accent={DISCO.pink}
            fieldStyle={{
              background: `radial-gradient(ellipse at 50% 30%, ${DISCO.purple}33, transparent 70%),
                           linear-gradient(180deg, ${DISCO.ink2}, ${DISCO.ink})`,
              border: `2.5px solid ${DISCO.gold}`,
              borderRadius: 20,
              boxShadow: `0 0 24px ${DISCO.gold}55, inset 0 0 30px rgba(168,85,247,0.2)`,
            }}
            btnStyle={discoBtn}
            textColor="#fff"
            width={340} height={380}
          />
        </div>
      </section>

      {/* SOUNDBOARD */}
      <section style={{ position: 'relative', padding: '28px 24px' }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{
            fontFamily: discoFont, fontSize: 13, letterSpacing: 4, color: DISCO.gold, marginBottom: 6,
          }}>SOUND</div>
          <ChromeText size={32}>BOARD</ChromeText>
        </div>
        <div style={{ marginTop: 18 }}>
          <SoundBoard buttons={soundButtons} fontFamily={discoFont} baseStyle={discoSoundBtn} cols={3} />
        </div>
      </section>

      {/* SIGN OFF */}
      <section style={{
        position: 'relative', padding: '36px 24px 56px',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, textAlign: 'center',
      }}>
        <div style={{
          fontFamily: discoFont, fontSize: 12, letterSpacing: 4, color: DISCO.cyan,
        }}>★ ★ ★</div>
        <div style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.95, maxWidth: 320 }}>
          You make every family thing 10× more fun.<br/>Dance like nobody's watching today. 💃
        </div>
        <div style={{
          marginTop: 8, fontFamily: discoFont, fontSize: 11, letterSpacing: 3, color: DISCO.pink,
          textShadow: `0 0 10px ${DISCO.pink}`,
        }}>WITH LOVE — H &amp; T</div>
      </section>
    </div>
  );
}

window.DiscoVariation = DiscoVariation;