// fun.jsx — cursor mascot, smoke puff, easter egg, eye-spin

function CursorSkull() {
  const [pos, setPos] = React.useState({x: -100, y: -100});
  React.useEffect(() => {
    const handler = (e) => setPos({ x: e.clientX, y: e.clientY });
    window.addEventListener('mousemove', handler);
    return () => window.removeEventListener('mousemove', handler);
  }, []);
  return (
    <div className="cursor-skull" style={{left: pos.x, top: pos.y}}>
      <img src="assets/skull-icon.png" alt=""/>
    </div>
  );
}

window.smokePuff = function(x, y) {
  if (!document.body.classList.contains('fun-mode')) return;
  const wrap = document.createElement('div');
  wrap.className = 'smoke-puff';
  wrap.style.left = x + 'px';
  wrap.style.top = y + 'px';
  for (let i = 0; i < 10; i++) {
    const s = document.createElement('span');
    const ang = (i / 10) * Math.PI * 2;
    const dist = 40 + Math.random() * 30;
    s.style.setProperty('--dx', (Math.cos(ang) * dist) + 'px');
    s.style.setProperty('--dy', (Math.sin(ang) * dist - 20) + 'px');
    s.style.animationDelay = (Math.random() * 0.1) + 's';
    if (i % 3 === 0) s.style.background = 'var(--bone)';
    if (i % 5 === 0) s.style.background = 'var(--ember)';
    wrap.appendChild(s);
  }
  document.body.appendChild(wrap);
  setTimeout(() => wrap.remove(), 1000);
};

function EasterEgg() {
  React.useEffect(() => {
    let buf = '';
    const handler = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') return;
      buf = (buf + e.key.toLowerCase()).slice(-3);
      if (buf === 'mad') {
        document.body.classList.add('shake');
        setTimeout(() => document.body.classList.remove('shake'), 400);
        rainSkulls();
        buf = '';
      }
    };
    const rainSkulls = () => {
      const wrap = document.createElement('div');
      wrap.className = 'skull-rain';
      for (let i = 0; i < 30; i++) {
        const d = document.createElement('div');
        d.className = 'drop';
        d.style.left = (Math.random() * 100) + 'vw';
        d.style.animationDuration = (1.5 + Math.random() * 2) + 's';
        d.style.animationDelay = (Math.random() * 0.6) + 's';
        d.style.transform = `rotate(${Math.random()*360}deg)`;
        const img = document.createElement('img');
        img.src = 'assets/skull-icon.png';
        img.style.width = '100%';
        img.style.height = '100%';
        d.appendChild(img);
        wrap.appendChild(d);
      }
      document.body.appendChild(wrap);
      setTimeout(() => wrap.remove(), 4000);
    };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, []);
  return null;
}

window.CursorSkull = CursorSkull;
window.EasterEgg = EasterEgg;