/* global React, ReactDOM,
   TopNav, HeroSection, Marquee, GallerySection,
   ReceiptsSection, Ps5Section, PlanSection,
   MommySection, CardSection, spawnConfetti */

function App() {
  // Click-anywhere-on-the-page heart trail (lightly throttled)
  React.useEffect(() => {
    let last = 0;
    const onClick = (e) => {
      const now = performance.now();
      if (now - last < 80) return;
      last = now;
      // skip if click was on something that already spawns confetti
      const skip = e.target.closest('.cart-btn, .mommy-btn, .chunk-btn, button');
      if (skip) return;
      // spawn a tiny burst
      const piece = document.createElement('div');
      piece.className = 'confetti-piece';
      piece.textContent = ['💖','✨','💕'][Math.floor(Math.random()*3)];
      piece.style.left = e.clientX + 'px';
      piece.style.top  = e.clientY + 'px';
      piece.style.fontSize = '24px';
      piece.style.setProperty('--dx', ((Math.random()-0.5)*60) + 'px');
      piece.style.setProperty('--dy', '-60px');
      piece.style.setProperty('--rot', (Math.random()*360-180) + 'deg');
      document.body.appendChild(piece);
      setTimeout(()=>piece.remove(), 1700);
    };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);

  return (
    <>
      <TopNav />
      <HeroSection />
      <Marquee variant="" items={[
        'HAPPY MOTHER\u2019S DAY VRINDA',
        '★ CEO MOMMY ★',
        'THE GOAT',
        'SUGAR MOMMY EST. 2026',
        '♡ STRAWBERRY SHORTCAKE\u2019S #1 INVESTOR ♡',
      ]} />
      <GallerySection />
      <Marquee variant="spark" items={[
        '★ NEW INVOICE JUST DROPPED',
        'PAYMENT METHOD: MOMMY',
        '★ AUTO-RENEW: ON',
        'TIPS APPRECIATED IN KISSES',
      ]} />
      <ReceiptsSection />
      <Ps5Section />
      <Marquee variant="bubble" items={[
        '★ PRE-ORDER NOW ★',
        'LIMITED EDITION: ONE BOYFRIEND',
        '★ FREE SHIPPING IF YOU LIVE WITH ME ★',
        'SUBSCRIBE FOR LIFE',
      ]} />
      <PlanSection />
      <MommySection />
      <CardSection />

      <footer style={{
        background: 'var(--ink)',
        color: 'var(--cream)',
        textAlign:'center',
        padding: '40px 20px',
        fontFamily: "'DM Mono',monospace",
        fontSize: 12,
        letterSpacing: '0.1em',
        borderTop: '4px solid var(--ink)',
      }}>
        <div>♡ MADE WITH GLITTER, GROVELING, AND GENUINE LOVE ♡</div>
        <div style={{ marginTop: 8, opacity: 0.6 }}>SUGAR MOMMY INC. © 2026 · A Jinda Laash PRODUCTION · NO PS5S WERE HARMED</div>
      </footer>
    </>
  );
}

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