// Standalone polished Studio Sarah card.
// Wraps DiscoVariation with an "envelope" intro overlay + a stage on desktop.

function BirthdayCard() {
  const [opened, setOpened] = React.useState(false);
  const cardRef = React.useRef(null);

  function open() {
    if (opened) return;
    setOpened(true);
    // First click unlocks AudioContext on most browsers
    try { sounds.cheer(); } catch (e) {}
    // Big celebratory burst after the card slides up
    setTimeout(() => {
      const el = cardRef.current;
      if (el && el.__burst) {
        const r = el.getBoundingClientRect();
        el.__burst(r.left + r.width * 0.5, r.top + 80, 80);
        setTimeout(() => el.__burst(r.left + r.width * 0.25, r.top + 120, 50), 200);
        setTimeout(() => el.__burst(r.left + r.width * 0.75, r.top + 120, 50), 380);
      }
    }, 650);
  }

  return (
    <div className="stage">
      <div className="stage-bg" />
      <div className={`stage-card ${opened ? 'opened' : ''}`} ref={cardRef}>
        <DiscoVariation />
      </div>

      {!opened && (
        <div className="intro" onClick={open}>
          <div className="intro-inner">
            <div className="intro-eyebrow">★ A LITTLE SOMETHING FOR ★</div>
            <div className="intro-name">SARAH</div>
            <div className="intro-envelope">
              <svg viewBox="0 0 200 130" width="180" height="117" style={{ display: 'block' }}>
                <defs>
                  <linearGradient id="envFill" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#ff2d95" />
                    <stop offset="55%" stopColor="#a855f7" />
                    <stop offset="100%" stopColor="#06d6e8" />
                  </linearGradient>
                </defs>
                <rect x="6" y="30" width="188" height="94" rx="6" fill="url(#envFill)" stroke="#ffd60a" strokeWidth="2.5" />
                <path d="M6 36 L100 92 L194 36" fill="none" stroke="#ffd60a" strokeWidth="2.5" strokeLinejoin="round" />
                <path d="M6 30 L100 86 L194 30 L194 8 L6 8 Z" fill="#1a0a3d" stroke="#ffd60a" strokeWidth="2.5" strokeLinejoin="round" />
                <circle cx="100" cy="78" r="14" fill="#ffd60a" stroke="#0b0420" strokeWidth="2" />
                <text x="100" y="84" textAnchor="middle" fontFamily="Audiowide" fontSize="16" fill="#0b0420">S</text>
              </svg>
            </div>
            <button className="intro-btn">TAP TO OPEN ✨</button>
            <div className="intro-from">from Henri &amp; Tiff</div>
          </div>
          <div className="intro-stars">
            {Array.from({ length: 40 }).map((_, i) => (
              <span key={i} style={{
                left: `${Math.random() * 100}%`,
                top: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 3}s`,
                animationDuration: `${1.6 + Math.random() * 3}s`,
              }} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<BirthdayCard />);