import './style.css'

document.querySelector('#app').innerHTML = `
  <div class="balloon-container">
    ${Array.from({length: 20}).map(() => `<div class="balloon" style="--left: ${Math.random() * 100}%; --delay: ${Math.random() * 5}s; --color: hsl(${Math.random() * 360}, 80%, 60%); --scale: ${0.5 + Math.random() * 0.8}"></div>`).join('')}
  </div>
  
  <main class="glass-panel">
    <h1>The Ultimate Balloon Gala</h1>
    <p class="subtitle">Join us for a night of floating fun, vivid colors, and high-altitude entertainment.</p>
    
    <div class="details">
      <div class="detail-item">
        <span class="icon">📅</span>
        <span>Saturday, August 29th, 2026</span>
      </div>
      <div class="detail-item">
        <span class="icon">📍</span>
        <span>The Sky Lounge, Downtown</span>
      </div>
    </div>

    <button id="rsvp-btn">RSVP NOW</button>
  </main>
`

document.querySelector('#rsvp-btn').addEventListener('click', (e) => {
  e.target.innerHTML = '🎉 YOU ARE ON THE GUEST LIST! 🎉';
  e.target.style.backgroundColor = '#10b981';
  e.target.style.color = 'white';
  e.target.style.transform = 'scale(1.05)';
});