/* global React, SparkleField, Sticker, spawnConfetti, confettiFromEvent, useCountUp, HeartIcon */
const { useState, useEffect, useRef, useCallback, useMemo } = React;

/* ====================================================
   HERO
   ==================================================== */
function HeroSection() {
  const handleEnter = (e) => {
    confettiFromEvent(e, 36);
    document.getElementById('mommy-cam')?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <section className="hero" id="hero">
      <SparkleField count={14} />

      <div className="hero-blob" style={{ top: '14%', left: '8%', transform: 'rotate(-12deg)', '--r': '-12deg', animation: 'float-y 4s ease-in-out infinite' }}>
        <Sticker variant="hot">★ Vol. 1 · est. 2026</Sticker>
      </div>
      <div className="hero-blob" style={{ top: '18%', right: '6%', transform: 'rotate(8deg)', '--r': '8deg', animation: 'float-y 5s ease-in-out infinite' }}>
        <Sticker variant="spark">PG-13 · CONTAINS GROVELING</Sticker>
      </div>
      <div className="hero-blob" style={{ bottom: '20%', left: '10%', transform: 'rotate(-6deg)', '--r': '-6deg', animation: 'float-y 6s ease-in-out infinite' }}>
        <Sticker variant="lime">No bf was harmed in the making of this site</Sticker>
      </div>
      <div className="hero-blob" style={{ bottom: '16%', right: '8%', transform: 'rotate(10deg)', '--r': '10deg', animation: 'float-y 5.5s ease-in-out infinite' }}>
        <Sticker variant="cherry">100% spoiled · 0% sorry</Sticker>
      </div>

      <div className="hero-stickers">
        <Sticker variant="deep">A MOTHER'S DAY APPRECIATION</Sticker>
        <Sticker>ONE-NIGHT-ONLY ENGAGEMENT</Sticker>
      </div>
      <h1>HAPPY<br/>MOTHER'S DAY</h1>
      <div className="row" style={{ marginTop: 8 }}>
        <span style={{ fontFamily: "'Bagel Fat One',system-ui", fontSize: 'clamp(28px,5vw,52px)' }}>★ to my one &amp; only ★</span>
      </div>
      <div className="hero-name-wrap" style={{ position:'relative' }}>
        <div className="name">VRINDA</div>
      </div>
      <div className="hero-stickers" style={{ marginTop: 4 }}>
        <Sticker variant="hot">CEO of Spoiling Me</Sticker>
        <Sticker variant="spark">★★★★★ 5 stars on Yelp</Sticker>
        <Sticker>Founder &amp; Chief Mommy Officer</Sticker>
      </div>
      <p className="hero-sub">A love letter, a tax-deductible thank-you, and a polite request for a PlayStation — from your favorite expense, <b>Strawberry Shortcake</b>.</p>
      <button className="chunk-btn" onClick={handleEnter}>
        Enter Mommy's Empire ↓
      </button>
    </section>
  );
}

/* ====================================================
   MARQUEE
   ==================================================== */
function Marquee({ items, variant = '' }) {
  const block = (
    <span>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span>{it}</span>
          <span style={{ fontSize: 24 }}>★</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className={`marquee ${variant}`}>
      <div className="marquee-track">
        {block}{block}
      </div>
    </div>
  );
}

/* ====================================================
   GALLERY (Mommy Cam)
   ==================================================== */
const PHOTOS = [
  { id: 'pic-1', col: '1 / span 4', row: 'span 6', rot: -3, caption: 'Boss energy', reveal: 'CEO behavior', shape: 'rounded', src: "photo2.jpg" },
  { id: 'pic-2', col: '5 / span 5', row: 'span 8', rot: 2,  caption: 'Drop dead gorgeous', reveal: 'I’m unwell', shape: 'rounded', src: 'photo3.jpg' },
  { id: 'pic-3', col: '10 / span 3', row: 'span 5', rot: -5, caption: 'My personal lockscreen', reveal: 'pls notice me', shape: 'circle', src: "photo1.jpg" },
  { id: 'pic-4', col: '1 / span 3', row: 'span 5', rot: 4,  caption: 'Sugar mommy on duty', reveal: 'paying my bills as we speak', shape: 'rounded', src: 'photo7.jpg' },
  { id: 'pic-5', col: '4 / span 4', row: 'span 5', rot: -2, caption: 'Smarter than me too', reveal: 'genius alert', shape: 'rounded', src: 'photo6.jpg' },
  { id: 'pic-6', col: '8 / span 5', row: 'span 5', rot: 5, caption: 'The face of my retirement plan', reveal: 'this is my entire 401(k)', shape: 'rounded', src: 'photo8.jpg' },
];

function GallerySection() {
  return (
    <section className="gallery" id="mommy-cam">
      <div className="wrap">
        <div className="section-tag">★ EXHIBIT A</div>
        <h2>MOMMY <span style={{ color:'var(--cherry)' }}>CAM</span></h2>
        <p className="lede">Ladies and gentlemen, the woman, the myth, the reason my Google Pay still works. Hover for unsolicited commentary.</p>

        <div className="gallery-grid">
          {PHOTOS.map((p, i) => {
            const badges = [
              <Sticker variant="hot">SUGAR MOMMY</Sticker>,
              <Sticker variant="spark">10/10</Sticker>,
              <Sticker variant="cherry">CEO</Sticker>,
              <Sticker variant="lime">ICONIC</Sticker>,
              <Sticker variant="sky">MUSE</Sticker>,
              <Sticker variant="deep">BADASS</Sticker>,
            ];
            return (
              <div key={p.id} className="poly" style={{
                gridColumn: p.col,
                gridRow: p.row,
                transform: `rotate(${p.rot}deg)`,
              }}>
                <img src={p.src} alt={p.caption} className={`poly-img ${p.shape}`}/>

                <div className="reveal">{p.reveal}</div>
                <div className="caption">{p.caption}</div>
                <div className="badge">{badges[i % badges.length]}</div>
              </div>
            );
          })}
        </div>

        <p style={{ textAlign:'center', marginTop: 60, fontStyle:'italic', fontSize: 16 }}>
          ↑ drag your favorite photos onto the frames. she belongs in a museum, but a wall of polaroids will do for now.
        </p>
      </div>
    </section>
  );
}

/* ====================================================
   RECEIPTS
   ==================================================== */
const RECEIPT_ITEMS = [
  { name: 'Laneige / Ordinary skincare hauls', qty: 'lifetime', amt: 1280 },
  { name: 'Desserts and Nepali Candy 😋', qty: 'x∞', amt: 642 },
  { name: 'Snacks(including mommy🥵) and groceries 🤤', qty: 'x73', amt: 489 },
  { name: 'Pizza (ty for bday countdown🥹)', qty: 'x46', amt: 712 },
  { name: 'Sallu Bhai Movie tickets', qty: 'x18', amt: 524 },
  { name: 'Random "I saw this and thought of you"', qty: 'priceless', amt: 388 },
];
const RECEIPT_TOTAL = RECEIPT_ITEMS.reduce((a, b) => a + b.amt, 0);

function ReceiptsSection() {
  const ref = useRef(null);
  const total = useCountUp(RECEIPT_TOTAL, 1800, ref);
  return (
    <section className="receipts" id="receipts">
      <div className="wrap" style={{ textAlign:'center' }}>
        <div className="section-tag">★ THE PAPER TRAIL</div>
        <h2>THE <span style={{ color:'var(--cherry)' }}>RECEIPTS</span></h2>
        <p className="lede" style={{ margin: '0 auto 40px' }}>Year-to-date investments in the Strawberry Shortcake fund. (Yes, I’m the asset.)</p>

        <div ref={ref} className="receipt-paper">
          <div className="receipt-head">
            <h3>SUGAR MOMMY INC.</h3>
            <div className="meta">★ ORDER #SHORTCAKE-2026 ★ TABLE FOR ONE: ME ★</div>
          </div>
          <div style={{ padding: '12px 0' }}>
            {RECEIPT_ITEMS.map((it, i) => (
              <div key={i} className="receipt-line">
                <span className="qty">{it.qty}</span>
                <span className="name">{it.name}</span>
                <span className="amt">${it.amt}</span>
              </div>
            ))}
          </div>
          <div className="receipt-total">
            <span>TOTAL</span>
            <span>${total.toLocaleString()}</span>
          </div>
          <div className="receipt-status">★ PAYMENT METHOD: MOMMY ★ STATUS: STILL SPOILED ★</div>
          <div style={{ fontSize: 11, marginTop: 14, textAlign:'center', opacity:0.6 }}>
            Tip: 100% of my heart · Service: impeccable<br/>
            Refunds not accepted. You’re stuck with me.
          </div>
        </div>

        <div style={{ marginTop: 40, display:'flex', gap: 12, justifyContent:'center', flexWrap:'wrap' }}>
          <Sticker variant="cherry">NON-REFUNDABLE</Sticker>
          <Sticker variant="hot">VIP CUSTOMER</Sticker>
          <Sticker>AUTO-RENEWS FOREVER</Sticker>
        </div>
      </div>
    </section>
  );
}

/* ====================================================
   PS5 PETITION
   ==================================================== */
const ESCALATION = [
  { label: 'Add to Cart', status: 'awaiting Mommy approval...', cls: '' },
  { label: 'pretty please??', status: 'mommy please i’ll be so good', cls: 'escalated-1' },
  { label: 'i’ve been a GOOD boy', status: 'i did the dishes TWICE this week', cls: 'escalated-1' },
  { label: 'mommy i’m on my knees', status: 'literally begging right now', cls: 'escalated-2' },
  { label: 'i’ll cook dinner all week', status: 'pasta. risotto. WHATEVER YOU WANT.', cls: 'escalated-2' },
  { label: 'i’ll cook for a MONTH', status: 'a whole month. zero takeout.', cls: 'escalated-3' },
  { label: 'i’ll start the sports car fund', status: 'lambo first, then mine. fair trade.', cls: 'escalated-3' },
  { label: 'I LOVE YOU MOMMY', status: 'the credit card is RIGHT THERE babe', cls: 'escalated-4' },
  { label: 'MOMMMMMMMY', status: '★★★ MAXIMUM PATHETIC ACHIEVED ★★★', cls: 'escalated-5' },
];

function Ps5Section() {
  const [qty, setQty] = useState(1);
  const [clicks, setClicks] = useState(0);
  const stage = ESCALATION[Math.min(clicks, ESCALATION.length - 1)];
  const handleAdd = (e) => {
    confettiFromEvent(e, 12);
    setClicks(c => c + 1);
  };
  return (
    <section className="ps5" id="ps5">
      <div className="wrap">
        <div style={{ textAlign:'center' }}>
          <div className="section-tag">★ ITEM 1 OF 1 IN CART</div>
          <h2>THE PS5 <span style={{ color:'var(--cherry)' }}>PETITION</span></h2>
          <p className="lede" style={{ margin:'0 auto 40px' }}>Hi mommy. I noticed there’s a Mommy-shaped hole in my Amazon cart. I have prepared a humble formal request below. Click the button. Click it again.</p>
        </div>

        <div className="ps5-card">
          <div className="ps5-toast">★ MOMMY EXCLUSIVE ★</div>
          <div className="ps5-mock" style={{background:'#000',padding:0}}>
            <img src="ps5.png" alt="PlayStation 5" style={{width:'100%',height:'100%',objectFit:'contain'}}/>
          </div>
          <div className="ps5-info">
            <h3>PlayStation 5 Pro</h3>
            <div style={{ display:'flex', alignItems:'center', gap: 12, margin:'8px 0' }}>
              <span className="price">$699</span>
              <span className="free">→ $0 (mommy)</span>
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.4, marginBottom: 8 }}>
              <b>Color:</b> Strawberry Shortcake Pink (limited)<br/>
              <b>Bundle:</b> + 1 (one) extremely good boyfriend<br/>
              <b>Delivery:</b> Tuesday, by mommy, with a kiss
            </div>
            <div className="qty-row">
              <span style={{ fontWeight: 700, marginRight: 8 }}>Quantity:</span>
              <button className="qty-btn" onClick={() => setQty(q => Math.max(1, q - 1))}>−</button>
              <span className="qty-val">{qty}</span>
              <button className="qty-btn" onClick={() => setQty(q => q + 1)}>+</button>
              {qty > 1 && <span style={{ marginLeft: 8, fontSize: 12, fontStyle:'italic' }}>...for the boys</span>}
            </div>
            <button className={`cart-btn ${stage.cls}`} onClick={handleAdd}>
              {stage.label}
            </button>
            <div className="ps5-status">
              <span className="heart">♥</span> {stage.status}
              {clicks > 0 && <span style={{ float:'right', opacity:0.6 }}>requests sent: {clicks}</span>}
            </div>
            {clicks >= ESCALATION.length - 1 && (
              <div style={{ marginTop: 12, padding: 12, background: 'var(--spark)', border: '3px solid var(--ink)', fontFamily:'Bagel Fat One,system-ui', textAlign:'center' }}>
                ★ achievement unlocked: MAXIMUM SIMP ★
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ====================================================
   5-YEAR PLAN
   ==================================================== */
const PLAN = [
  { year: 'Y1', emoji: '🎮', title: 'The PS5', body: 'Mommy buys me the PS5. The investment compounds.' },
  { year: 'Y2', emoji: '💼', title: 'Business #1', body: 'Mommy launches her salon empire. I become Chief Hype Husband.' },
  { year: 'Y3', emoji: '📈', title: 'Business #2', body: 'Mommy starts dessert café chain. I am the official taste tester.' },
  { year: 'Y4', emoji: '🏎️', title: 'The Sports Car', body: 'Lambo. Cherry red. Custom plate: SPLD4ME. Non-negotiable.' },
  { year: 'Y5', emoji: '👨‍🍳', title: 'Househusband Era', body: 'Mommy runs 4 companies. I cook every meal. The system works.' },
];

function PlanSection() {
  return (
    <section className="plan" id="plan">
      <div className="wrap">
        <div style={{ textAlign:'center' }}>
          <div className="section-tag" style={{ background: 'var(--spark)', color: 'var(--ink)' }}>★ THE ROADMAP</div>
          <h2>THE 5-YEAR <span style={{ color:'var(--hot)' }}>PLAN</span></h2>
          <p className="lede" style={{ margin:'0 auto 40px', color:'var(--cream)' }}>A binding contract between mommy &amp; her favorite dependent. Notarized in glitter, enforceable in court.</p>
        </div>
        <div className="plan-track">
          {PLAN.map((p, i) => (
            <div key={i} className="plan-step">
              <div className="plan-bubble">
                <div style={{ fontSize: 14, opacity: 0.85, marginBottom: 2 }}>{p.year}</div>
                <div style={{ fontSize: 40, lineHeight: 1 }}>{p.emoji}</div>
                <div className="plan-check">✓</div>
              </div>
              <h4>{p.title}</h4>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign:'center', marginTop: 60 }}>
          <Sticker variant="hot">SIGNED &amp; SEALED</Sticker>
          <span style={{ display:'inline-block', width: 12 }}/>
          <Sticker variant="spark">EFFECTIVE IMMEDIATELY</Sticker>
        </div>
      </div>
    </section>
  );
}

/* ====================================================
   HOWL FOR MOMMY
   ==================================================== */
const HOWL_LINES = {
  howl: [
    'okay one howl. that was reasonable.',
    'AWOO!',
    'AWOOOOOOO!!',
    'the neighbors definitely heard',
    'you have awakened something',
    'this is who i am now 🐺',
    '🌕 baying at the moon for mommy',
    '★ certified mommy’s howling boy ★',
  ],
  bark: [
    'one (1) bark deployed.',
    'BARK BARK!',
    'WOOF WOOF WOOF!!',
    'tail wagging at illegal speeds',
    'the zoomies have begun',
    'aggressive cuteness incoming',
    'MAXIMUM PUPPY ENERGY',
    '★ best boy. best boy. best boy. ★',
  ],
  whimper: [
    '*small whimper*',
    'pls notice me mommy 🥺',
    'tiny pathetic noise',
    'big eyes engaged',
    'i am trembling slightly',
    'this is emotional manipulation',
    'and yet... it works every time',
    '★ peak pathetic achieved ★',
  ],
};
const SOUND_BUBBLES = {
  howl: ['AWOO!', 'AWOOOOO!', 'AWOOOOOOOOO!!', '🌕 AWOOO!!'],
  bark: ['BARK!', 'BARK BARK!', 'WOOF!', 'WOOF WOOF!'],
  whimper: ['🥺', '*whimper*', 'mrrr...', 'pls...'],
};

function HowlBoy({ active, mode }) {
  return (
    <svg className={`howl-boy-svg ${active ? 'is-active' : ''}`} viewBox="0 0 200 290">
      <ellipse cx="100" cy="278" rx="52" ry="5" fill="rgba(0,0,0,0.25)"/>
      {/* legs */}
      <rect x="78" y="195" width="16" height="68" rx="3" fill="#2A6FDB" stroke="#1A0010" strokeWidth="2.5"/>
      <rect x="106" y="195" width="16" height="68" rx="3" fill="#2A6FDB" stroke="#1A0010" strokeWidth="2.5"/>
      <ellipse cx="86" cy="268" rx="13" ry="5" fill="#1A0010"/>
      <ellipse cx="114" cy="268" rx="13" ry="5" fill="#1A0010"/>
      {/* shirt */}
      <path d="M68 134 L132 134 L134 205 L66 205 Z" fill="#FF3D9A" stroke="#1A0010" strokeWidth="3"/>
      <text x="100" y="178" textAnchor="middle" fontFamily="'Bagel Fat One',system-ui" fontSize="20" fill="#fff" letterSpacing="1">SIMP</text>
      {/* arms */}
      <rect x="52" y="138" width="14" height="52" rx="7" fill="#FFD8B5" stroke="#1A0010" strokeWidth="2.5"/>
      <rect x="134" y="138" width="14" height="52" rx="7" fill="#FFD8B5" stroke="#1A0010" strokeWidth="2.5"/>
      {/* hands */}
      <circle cx="59" cy="194" r="8" fill="#FFD8B5" stroke="#1A0010" strokeWidth="2.5"/>
      <circle cx="141" cy="194" r="8" fill="#FFD8B5" stroke="#1A0010" strokeWidth="2.5"/>
      {/* neck */}
      <rect x="92" y="115" width="16" height="22" fill="#FFD8B5" stroke="#1A0010" strokeWidth="2.5"/>
      {/* head — pivots back when active */}
      <g className="howl-head">
        <circle cx="100" cy="78" r="40" fill="#FFD8B5" stroke="#1A0010" strokeWidth="3"/>
        {/* hair */}
        <path d="M62 70 Q56 32 100 32 Q144 32 138 70 Q120 50 100 50 Q80 50 62 70 Z" fill="#3A2515" stroke="#1A0010" strokeWidth="3"/>
        <path d="M108 32 Q124 22 134 36" stroke="#1A0010" strokeWidth="3" fill="#3A2515"/>
        {/* blush */}
        <circle cx="76" cy="92" r="6" fill="#FF3D9A" opacity="0.55"/>
        <circle cx="124" cy="92" r="6" fill="#FF3D9A" opacity="0.55"/>
        {/* face — calm */}
        <g className="face-calm">
          <circle cx="88" cy="80" r="3" fill="#1A0010"/>
          <circle cx="112" cy="80" r="3" fill="#1A0010"/>
          <path d="M92 96 Q100 101 108 96" stroke="#1A0010" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
        </g>
        {/* face — howling */}
        <g className="face-active">
          <path d="M82 78 Q88 74 94 78" stroke="#1A0010" strokeWidth="2.8" fill="none" strokeLinecap="round"/>
          <path d="M106 78 Q112 74 118 78" stroke="#1A0010" strokeWidth="2.8" fill="none" strokeLinecap="round"/>
          {mode === 'whimper' ? (
            <path d="M93 96 Q100 92 107 96" stroke="#1A0010" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
          ) : (
            <>
              <ellipse cx="100" cy="98" rx="9" ry="13" fill="#1A0010"/>
              <ellipse cx="100" cy="100" rx="4" ry="6" fill="#E0166E"/>
            </>
          )}
        </g>
      </g>
    </svg>
  );
}

function MommySection() {
  const [count, setCount] = useState(0);
  const [mode, setMode] = useState('howl');
  const [active, setActive] = useState(false);
  const [bubble, setBubble] = useState('');
  const audioRef = useRef(null);

  const playSound = useCallback((m) => {
    try {
      if (!audioRef.current) audioRef.current = new (window.AudioContext || window.webkitAudioContext)();
      const ctx = audioRef.current;
      if (ctx.state === 'suspended') ctx.resume();
      const t0 = ctx.currentTime;
      if (m === 'howl') {
        const o = ctx.createOscillator(), g = ctx.createGain();
        o.type = 'sawtooth';
        o.frequency.setValueAtTime(220, t0);
        o.frequency.exponentialRampToValueAtTime(520, t0 + 0.35);
        o.frequency.exponentialRampToValueAtTime(180, t0 + 1.2);
        g.gain.setValueAtTime(0.0001, t0);
        g.gain.exponentialRampToValueAtTime(0.12, t0 + 0.06);
        g.gain.exponentialRampToValueAtTime(0.0001, t0 + 1.2);
        o.connect(g).connect(ctx.destination);
        o.start(t0); o.stop(t0 + 1.25);
      } else if (m === 'bark') {
        for (let i = 0; i < 2; i++) {
          const o = ctx.createOscillator(), g = ctx.createGain();
          o.type = 'square';
          const t = t0 + i * 0.18;
          o.frequency.setValueAtTime(200, t);
          o.frequency.linearRampToValueAtTime(110, t + 0.1);
          g.gain.setValueAtTime(0.0001, t);
          g.gain.exponentialRampToValueAtTime(0.1, t + 0.02);
          g.gain.exponentialRampToValueAtTime(0.0001, t + 0.13);
          o.connect(g).connect(ctx.destination);
          o.start(t); o.stop(t + 0.16);
        }
      } else {
        const o = ctx.createOscillator(), g = ctx.createGain();
        o.type = 'sine';
        o.frequency.setValueAtTime(380, t0);
        o.frequency.exponentialRampToValueAtTime(260, t0 + 0.35);
        o.frequency.exponentialRampToValueAtTime(420, t0 + 0.7);
        g.gain.setValueAtTime(0.0001, t0);
        g.gain.exponentialRampToValueAtTime(0.07, t0 + 0.06);
        g.gain.exponentialRampToValueAtTime(0.0001, t0 + 0.75);
        o.connect(g).connect(ctx.destination);
        o.start(t0); o.stop(t0 + 0.8);
      }
    } catch (err) {/* sound is optional */}
  }, []);

  const handlePress = (e) => {
    confettiFromEvent(e, 22);
    setCount(c => c + 1);
    setActive(true);
    const opts = SOUND_BUBBLES[mode];
    setBubble(opts[Math.floor(Math.random() * opts.length)]);
    playSound(mode);
    setTimeout(() => setActive(false), 1400);
  };

  const lines = HOWL_LINES[mode];
  const stageLine = count > 0 ? lines[Math.min(count - 1, lines.length - 1)] : 'go on. press the button.';
  const verb = mode.toUpperCase();

  return (
    <section className="mommy" id="mommy">
      <div className="mommy-bubbles">
        <SparkleField count={10} />
      </div>
      <div className="wrap" style={{ textAlign:'center' }}>
        <div className="section-tag" style={{ background: 'var(--spark)', color: 'var(--ink)' }}>★ EMERGENCY USE ONLY</div>
        <h2>HOWL <span style={{ color:'var(--cream)', WebkitTextStroke: '3px var(--ink)' }}>FOR</span> MOMMY</h2>
        <p className="lede" style={{ margin:'0 auto 24px', color: 'var(--cream)', textAlign:'center' }}>The boy. The mommy. The unbreakable bond. Pick your sound and let it rip.</p>

        <div className="howl-stage">
          <div className="howl-col">
            <div className="howl-mommy-frame">
              <img src="mommy.jpg" alt="Mommy" className="howl-mommy-img"/>
              <div className="howl-heart-deco">♡</div>
            </div>
            <div className="howl-label">MOMMY</div>
          </div>
          <div className="howl-arrow-wrap">
            <div className={`howl-arrow ${active ? 'pulse' : ''}`}>♡</div>
            {active && <div className="sound-bubble">{bubble}</div>}
          </div>
          <div className="howl-col">
            <HowlBoy active={active} mode={mode} />
            <div className="howl-label">ME</div>
          </div>
        </div>

        <div className="howl-modes">
          {['howl','bark','whimper'].map(m => (
            <button
              key={m}
              className={`howl-mode-btn ${mode === m ? 'is-active' : ''}`}
              onClick={() => setMode(m)}
            >
              {m === 'howl' ? '🐺 HOWL' : m === 'bark' ? '🐶 BARK' : '🥺 WHIMPER'}
            </button>
          ))}
        </div>

        <button className="mommy-btn" onClick={handlePress}>
          PRESS TO {verb}
        </button>
        <div style={{ marginTop: 14, fontFamily:"'Bagel Fat One',system-ui", fontSize: 24, color: 'var(--spark)', minHeight: 32 }}>
          {stageLine}
        </div>
        <div className="mommy-counter" style={{ marginTop: 16 }}>
          ☆ {verb}S DEPLOYED FOR MOMMY: {count.toString().padStart(3, '0')} ☆
        </div>
      </div>
    </section>
  );
}

/* ====================================================
   FINAL CARD
   ==================================================== */
function CardSection() {
  return (
    <section className="card-section" id="card">
      <div className="wrap">
        <div className="section-tag">★ THE ACTUAL CARD</div>
        <h2 style={{ color: 'var(--cherry)' }}>FOR REAL THOUGH</h2>
        <p className="lede" style={{ margin:'0 auto 12px' }}>Beneath all the bits — a sappy little card.</p>

        <div className="envelope">
          <div className="envelope-card">
            <div className="envelope-stamp">
              FIRST<br/>CLASS<br/>
              <span className="big">♡</span>
              MOMMY<br/>POST
            </div>
            <h3>Happy Mother’s Day,<br/>Herb 💖</h3>
            <p>You take care of me in a thousand small ways every single day — the snacks, the skincare, the morning wakeup calls, tips to live a healthy lifestyle.</p>
            <p>I joke about being your favorite dependent, but the truth is I just feel really, really lucky to be loved by someone as kind, brilliant, and absurdly hot as you.</p>
            <p>I can’t wait to cook for you in the kitchen of one of your future empires. Until then — thank you for putting with my drama and childish behaviour. And maybe, you know, the PS5 thing.</p>
            <div className="signoff">— your favorite expense ♡</div>
            <div style={{ fontSize: 14, marginTop: 8, fontFamily:"'DM Mono',monospace" }}>strawberry shortcake</div>
          </div>
        </div>

        <div style={{ marginTop: 60, display:'flex', justifyContent:'center', gap: 10, flexWrap:'wrap' }}>
          <Sticker variant="hot">P.S. THE PS5</Sticker>
          <Sticker variant="cherry">P.P.S. ALSO THE LAMBO</Sticker>
          <Sticker variant="spark">P.P.P.S. I LOVE YOU</Sticker>
        </div>
      </div>
    </section>
  );
}

/* ====================================================
   NAV
   ==================================================== */
function TopNav() {
  const items = [
    { id: 'mommy-cam', label: 'Mommy Cam' },
    { id: 'receipts', label: 'The Receipts' },
    { id: 'ps5', label: 'PS5 Petition' },
    { id: 'plan', label: '5-Year Plan' },
    { id: 'mommy', label: 'Call Her Mommy' },
    { id: 'card', label: 'The Card' },
  ];
  const handleClick = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <div className="topnav">
      <div className="topnav-inner">
        <a href="#hero" className="topnav-brand" onClick={(e)=>handleClick(e,'hero')}>♡ V × S</a>
        {items.map(it => (
          <a key={it.id} href={'#' + it.id} onClick={(e)=>handleClick(e, it.id)}>{it.label}</a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  HeroSection, Marquee, GallerySection, ReceiptsSection,
  Ps5Section, PlanSection, MommySection, CardSection, TopNav
});