// Full desktop/web marketing page for The Bach Lists.

function DesktopSite({ onLaunch }) {
  const [showLogin, setShowLogin] = React.useState(false);
  const openLogin = () => setShowLogin(true);
  const scrollToThemes = () => {
    const el = document.getElementById('themes');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  return (
    <div style={{ background: TBL.cream, fontFamily: SANS, color: TBL.ink, minHeight: '100vh' }}>
      <DesktopNav onLaunch={onLaunch} onLogin={openLogin}/>
      <DesktopHero onLaunch={onLaunch} onExamples={scrollToThemes}/>
      <DesktopMarquee/>
      <DesktopProblem/>
      <DesktopHow/>
      <DesktopThemes/>
      <DesktopPinterest onLaunch={onLaunch}/>
      <DesktopTestimonials/>
      <DesktopFAQ/>
      <DesktopFooter/>
      {showLogin && <LoginModal onClose={() => setShowLogin(false)}/>}
    </div>
  );
}

function LoginModal({ onClose }) {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSending(true);
    // Optimistic UX — show success even if the request fails so we don't
    // make people retry. Server-side we always 200 even on storage failure.
    try {
      await fetch('/api/waitlist', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, source: 'home' }),
      });
      // Track in GA4 if consent was given
      if (typeof window.tblTrack === 'function') {
        window.tblTrack('waitlist_signup', { source: 'home' });
      } else if (typeof window.gtag === 'function') {
        window.gtag('event', 'waitlist_signup', { source: 'home' });
      }
    } catch (err) { /* swallow — already shown success */ }
    setSubmitted(true);
    setSending(false);
  };
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, background: 'rgba(42,26,31,0.55)',
      backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 20, zIndex: 1000,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: TBL.cream, borderRadius: 28, padding: 36,
        width: '100%', maxWidth: 440, position: 'relative',
        boxShadow: '0 40px 80px rgba(0,0,0,0.25)',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 16, right: 16, width: 34, height: 34, borderRadius: 999,
          background: 'rgba(42,26,31,0.06)', border: 'none', cursor: 'pointer', fontSize: 18, color: TBL.ink,
        }}>×</button>

        {!submitted ? (
          <>
            <div style={{ fontSize: 44, marginBottom: 14, textAlign: 'center' }}>🔐</div>
            <div style={{ fontFamily: SERIF, fontSize: 34, color: TBL.ink, fontStyle: 'italic', letterSpacing: -0.8, lineHeight: 1.05, marginBottom: 10, textAlign: 'center' }}>
              Accounts are<br/>coming soon.
            </div>
            <div style={{ fontSize: 14, color: TBL.subtle, lineHeight: 1.55, marginBottom: 22, textAlign: 'center' }}>
              We're still in beta — log-ins land this spring. Drop your email and we'll ping you the moment accounts open, with founding-member perks.
            </div>
            <form onSubmit={submit}>
              <div style={{ background: '#fff', border: `1px solid ${TBL.line}`, borderRadius: 999, padding: 5, display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  autoFocus
                  style={{ flex: 1, padding: '12px 16px', border: 'none', background: 'transparent', fontFamily: SANS, fontSize: 14, color: TBL.ink, outline: 'none' }}
                />
                <button type="submit" style={{
                  background: TBL.jam, color: TBL.cream, border: 'none', padding: '12px 20px', borderRadius: 999,
                  fontSize: 13, fontWeight: 500, cursor: 'pointer',
                  boxShadow: '0 1px 2px rgba(224,90,61,0.25), 0 4px 12px rgba(224,90,61,0.2)',
                }}>Notify me →</button>
              </div>
              <div style={{ fontSize: 11, color: TBL.mute, textAlign: 'center' }}>
                Already on the waitlist? We'll upgrade you automatically.
              </div>
            </form>
          </>
        ) : (
          <>
            <div style={{ fontSize: 44, marginBottom: 14, textAlign: 'center' }}>🥂</div>
            <div style={{ fontFamily: SERIF, fontSize: 34, color: TBL.ink, fontStyle: 'italic', letterSpacing: -0.8, lineHeight: 1.05, marginBottom: 10, textAlign: 'center' }}>
              You're on the list.
            </div>
            <div style={{ fontSize: 14, color: TBL.subtle, lineHeight: 1.55, marginBottom: 22, textAlign: 'center' }}>
              We'll email you the moment accounts go live. In the meantime — tap <i>Build my bach lists</i> and try the builder without signing in.
            </div>
            <button onClick={onClose} style={{
              background: TBL.ink, color: TBL.cream, border: 'none', padding: '14px 24px', borderRadius: 999,
              fontFamily: SANS, fontSize: 14, fontWeight: 500, cursor: 'pointer', width: '100%',
            }}>Back to site</button>
          </>
        )}
      </div>
    </div>
  );
}

function DesktopNav({ onLaunch, onLogin }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navTo = (id) => { setMenuOpen(false); document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }); };
  return (
    <>
      <div className="ds-nav" style={{
        position: 'sticky', top: 0, zIndex: 100, background: 'rgba(251,238,224,0.85)',
        backdropFilter: 'blur(12px)', borderBottom: `1px solid ${TBL.line}`,
        padding: '16px 56px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <LogoLockup/>
        <div className="ds-nav-links" style={{ display: 'flex', gap: 32, fontSize: 14, color: TBL.ink, alignItems: 'center' }}>
          <a href="#themes" style={{ color: 'inherit', textDecoration: 'none' }}>Themes</a>
          <a href="#how" style={{ color: 'inherit', textDecoration: 'none' }}>How it works</a>
          <a href="/blog" style={{ color: 'inherit', textDecoration: 'none' }}>Blog</a>
          <a href="#faq" style={{ color: 'inherit', textDecoration: 'none' }}>FAQ</a>
          <span className="ds-nav-login"><SecondaryBtn size="sm" onClick={onLogin}>Log in</SecondaryBtn></span>
          <span className="ds-nav-cta-wrap"><PrimaryBtn size="sm" onClick={onLaunch}>Build my bach lists →</PrimaryBtn></span>
          {/* Mobile burger — visible only at < 768px (CSS rule in index.html) */}
          <button
            className="ds-nav-burger"
            aria-label="Open menu"
            onClick={() => setMenuOpen(true)}
            style={{ display: 'none', background: 'none', border: 'none', fontSize: 24, color: TBL.ink, cursor: 'pointer', padding: '4px 8px' }}
          >☰</button>
        </div>
      </div>
      {menuOpen && (
        <div onClick={() => setMenuOpen(false)} style={{
          position: 'fixed', inset: 0, background: 'rgba(42,26,31,0.45)', backdropFilter: 'blur(4px)',
          zIndex: 1000, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            background: TBL.cream, borderRadius: '28px 28px 0 0',
            padding: '28px 22px 36px', display: 'flex', flexDirection: 'column', gap: 2,
          }}>
            <a onClick={() => navTo('themes')} style={{ display: 'block', padding: '16px 14px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: TBL.ink, textDecoration: 'none', borderBottom: `1px solid rgba(42,26,31,0.08)`, cursor: 'pointer' }}>Themes</a>
            <a onClick={() => navTo('how')} style={{ display: 'block', padding: '16px 14px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: TBL.ink, textDecoration: 'none', borderBottom: `1px solid rgba(42,26,31,0.08)`, cursor: 'pointer' }}>How it works</a>
            <a href="/blog" style={{ display: 'block', padding: '16px 14px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: TBL.ink, textDecoration: 'none', borderBottom: `1px solid rgba(42,26,31,0.08)` }}>Blog</a>
            <a onClick={() => navTo('faq')} style={{ display: 'block', padding: '16px 14px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: TBL.ink, textDecoration: 'none', borderBottom: `1px solid rgba(42,26,31,0.08)`, cursor: 'pointer' }}>FAQ</a>
            <a onClick={() => { setMenuOpen(false); onLogin(); }} style={{ display: 'block', padding: '16px 14px', fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, color: TBL.ink, textDecoration: 'none', borderBottom: `1px solid rgba(42,26,31,0.08)`, cursor: 'pointer' }}>Log in</a>
            <a onClick={() => { setMenuOpen(false); onLaunch(); }} style={{ background: TBL.jam, color: TBL.cream, borderRadius: 999, textAlign: 'center', marginTop: 14, padding: '14px', fontFamily: SANS, fontSize: 15, fontWeight: 500, cursor: 'pointer', textDecoration: 'none', boxShadow: '0 8px 20px rgba(224,90,61,0.25)' }}>Build my bach lists →</a>
          </div>
        </div>
      )}
    </>
  );
}

function DesktopHero({ onLaunch, onExamples }) {
  return (
    <div className="ds-hero" style={{ padding: '80px 56px 40px', maxWidth: 1400, margin: '0 auto' }}>
      <div className="ds-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(224,90,61,0.1)', padding: '6px 14px', borderRadius: 999, marginBottom: 28 }}>
            <div style={{ width: 6, height: 6, borderRadius: 999, background: TBL.jam }}/>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 1.5, color: TBL.jam }}>NOW IN BETA · SPRING 2026</div>
          </div>
          <div className="ds-hero-title" style={{ fontFamily: SERIF, fontSize: 104, lineHeight: 0.92, color: TBL.ink, letterSpacing: -3.5, marginBottom: 4 }}>Plan the bach.</div>
          <div className="ds-hero-title" style={{ fontFamily: SERIF, fontSize: 104, lineHeight: 0.92, color: TBL.jam, letterSpacing: -3.5, fontStyle: 'italic', marginBottom: 28 }}>Skip the search.</div>
          <div className="ds-hero-body" style={{ fontSize: 19, lineHeight: 1.5, color: TBL.subtle, maxWidth: 560, marginBottom: 36 }}>
            Tell us your theme in one sentence. We'll build the entire shopping list — decor, outfits, drinkware, favors — in thirty seconds, across Shein, Amazon, Etsy, and Temu.
          </div>
          <div className="ds-hero-cta-row" style={{ display: 'flex', gap: 12, marginBottom: 28 }}>
            <PrimaryBtn size="lg" onClick={onLaunch}>Build my bach lists →</PrimaryBtn>
            <SecondaryBtn size="lg" onClick={onExamples}>See example themes</SecondaryBtn>
          </div>
          <div className="ds-hero-trust" style={{ display: 'flex', gap: 28, fontSize: 13, color: TBL.mute }}>
            <span>✓ No signup to preview</span>
            <span>✓ 600+ curated SKUs</span>
            <span>✓ UK · US · EU · AU · ZA</span>
          </div>
        </div>
        <div className="ds-hero-cards" style={{ position: 'relative', height: 560 }}>
          {[
            { rot: -9, left: -20, top: 60, grad: THEME_GRADIENTS.disco, em: '✨', name: 'Disco & Sparkles', items: 18, cost: 312, palette: ['#e8a3c4','#c56d98','#7a4e8e','#f3b94a'] },
            { rot: 4, left: 160, top: 0, grad: THEME_GRADIENTS.coastal, em: '🐚', name: 'Coastal Pool Party', items: 14, cost: 248, palette: ['#2d5d8a','#fbeee0','#e8d4c5'] },
            { rot: -2, left: 320, top: 110, grad: THEME_GRADIENTS.nashville, em: '🤠', name: 'Nashville Western', items: 16, cost: 284, palette: ['#f3b94a','#e05a3d','#2a1a1f'] },
          ].map((c, i) => (
            <div key={i} data-card style={{
              position: 'absolute', left: c.left, top: c.top, width: 240, height: 320,
              transform: `rotate(${c.rot}deg)`, background: c.grad, borderRadius: 20,
              padding: 22, boxShadow: '0 24px 60px rgba(0,0,0,0.15)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between', color: TBL.ink,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ fontSize: 54 }}>{c.em}</div>
                <PaletteDots colors={c.palette} size={10}/>
              </div>
              <div>
                <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 28, lineHeight: 1, letterSpacing: -0.5, marginBottom: 6 }}>{c.name}</div>
                <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1.5, opacity: 0.7 }}>{c.items} ITEMS · ${c.cost}</div>
              </div>
            </div>
          ))}
          {/* Sparkle decoration */}
          <svg width="40" height="40" viewBox="0 0 40 40" style={{ position: 'absolute', right: 10, top: 20 }}>
            <path d="M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z" fill={TBL.citrus}/>
          </svg>
          <svg width="22" height="22" viewBox="0 0 40 40" style={{ position: 'absolute', left: 20, bottom: 30 }}>
            <path d="M20 2 L23 17 L38 20 L23 23 L20 38 L17 23 L2 20 L17 17 Z" fill={TBL.jam}/>
          </svg>
        </div>
      </div>
    </div>
  );
}

function DesktopMarquee() {
  return (
    <div className="ds-marquee" style={{ padding: '40px 0 56px', borderTop: `1px solid ${TBL.line}`, borderBottom: `1px solid ${TBL.line}` }}>
      <div style={{ textAlign: 'center', marginBottom: 24 }}>
        <Eyebrow>One list. Every retailer.</Eyebrow>
      </div>
      <div className="ds-marquee-row" style={{ display: 'flex', justifyContent: 'center', gap: 72, flexWrap: 'wrap', fontFamily: SERIF, fontStyle: 'italic', fontSize: 28, color: TBL.mute, letterSpacing: -0.5 }}>
        {['Shein', 'Amazon', 'Etsy', 'Temu', 'Pinterest'].map(l => (
          <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 6, height: 6, borderRadius: 999, background: TBL.jam }}/>
            {l}
          </div>
        ))}
      </div>
    </div>
  );
}

function DesktopProblem() {
  return (
    <div className="ds-section" style={{ background: TBL.ink, color: TBL.cream, padding: '96px 56px' }}>
      <div className="ds-section-grid" style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow color={TBL.citrus} style={{ marginBottom: 20 }}>The problem</Eyebrow>
          <div className="ds-section-heading" style={{ fontFamily: SERIF, fontSize: 56, lineHeight: 1.02, letterSpacing: -1.8, marginBottom: 24 }}>
            <i>The Pinterest board</i> is stunning.
          </div>
          <div className="ds-section-heading" style={{ fontFamily: SERIF, fontSize: 56, lineHeight: 1.02, letterSpacing: -1.8, marginBottom: 32 }}>
            The shopping is a <span style={{ color: TBL.citrus, fontStyle: 'italic' }}>graveyard</span> of 40 tabs.
          </div>
          <div style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.8, maxWidth: 480 }}>
            Most MOHs spend <b style={{ color: TBL.citrus }}>10-20 hours</b> shopping across Amazon, Shein, Etsy, and Temu — matching palettes, guessing quantities, forgetting the straws. We do that in thirty seconds.
          </div>
        </div>
        <div style={{ background: 'rgba(251,238,224,0.04)', border: `1px solid rgba(251,238,224,0.12)`, borderRadius: 20, padding: 32, fontFamily: MONO, fontSize: 13, color: 'rgba(251,238,224,0.8)', lineHeight: 1.9 }}>
          <div style={{ color: TBL.citrus, marginBottom: 16, letterSpacing: 2, fontSize: 10 }}>BACH FINAL V3 · UNTITLED TAB GROUP</div>
          <div>🛒 amazon.com/acrylic-flutes-navy</div>
          <div>🛒 shein.com/sash-bride-to-be</div>
          <div>🛒 etsy.com/pearl-garland-12ft</div>
          <div>🛒 temu.com/straws-gold-50pk</div>
          <div>🛒 amazon.com/rattan-tray-small</div>
          <div style={{ opacity: 0.5 }}>🛒 shein.com/monokini-white-size...</div>
          <div style={{ opacity: 0.4 }}>🛒 pinterest.com/pin/8371234...</div>
          <div style={{ opacity: 0.3 }}>🛒 amazon.com/confetti-biodeg...</div>
          <div style={{ opacity: 0.2 }}>🛒 etsy.com/custom-sashes-pack...</div>
          <div style={{ opacity: 0.15 }}>🛒 <i>+ 31 more tabs</i></div>
        </div>
      </div>
    </div>
  );
}

function DesktopHow() {
  const steps = [
    { n: '01', t: 'Describe your vibe', d: 'One sentence. Or drop in Pinterest screenshots — we read the palette, the mood, the energy.', em: '✨' },
    { n: '02', t: 'We build the list in 30 seconds', d: 'Decor, outfits, drinkware, favors — palette-matched, guest-count sized, budget-aware.', em: '📝' },
    { n: '03', t: 'Shop with one tap per retailer', d: 'Grouped by Shein, Amazon, Etsy, Temu. Share with the group chat. Track the shipments.', em: '🛍️' },
  ];
  return (
    <div id="how" className="ds-section" style={{ padding: '112px 56px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 72 }}>
        <Eyebrow style={{ marginBottom: 14 }}>How it works</Eyebrow>
        <div className="ds-how-title" style={{ fontFamily: SERIF, fontSize: 64, lineHeight: 1, color: TBL.ink, letterSpacing: -2, maxWidth: 760, margin: '0 auto' }}>
          Three steps between you<br/>and a <i>done</i> weekend.
        </div>
      </div>
      <div className="ds-grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {steps.map((s, i) => (
          <div key={s.n} style={{
            background: '#fff', borderRadius: 24, padding: 36, border: `1px solid ${TBL.line}`,
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: 24, right: 24, fontSize: 42, opacity: 0.9 }}>{s.em}</div>
            <div style={{ fontFamily: MONO, fontSize: 11, color: TBL.jam, letterSpacing: 2, marginBottom: 28 }}>{s.n}</div>
            <div style={{ fontFamily: SERIF, fontSize: 32, fontStyle: 'italic', color: TBL.ink, letterSpacing: -0.8, lineHeight: 1.05, marginBottom: 12 }}>{s.t}</div>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: TBL.subtle }}>{s.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DesktopThemes() {
  const themes = [
    { name: 'Last Toast on the Coast', em: '🐚', grad: THEME_GRADIENTS.lasttoast, tag: 'Navy · pearls · champagne', palette: ['#2d5d8a','#fbeee0','#e8d4c5','#f3b94a'], items: 14, cost: 248 },
    { name: 'La Fiesta', em: '🌺', grad: THEME_GRADIENTS.fiesta, tag: 'Marigold · mezcal · maracas', palette: ['#f3b94a','#e05a3d','#7a4e8e'], items: 16, cost: 284 },
    { name: 'Nashville Nights', em: '🤠', grad: THEME_GRADIENTS.nashville, tag: 'Rhinestones · fringe · boots', palette: ['#f3b94a','#e05a3d','#2a1a1f'], items: 18, cost: 312 },
    { name: 'Boujee in Bali', em: '🌴', grad: THEME_GRADIENTS.bali, tag: 'Rattan · gold · frangipani', palette: ['#e8b87a','#c4605a','#fbeee0'], items: 15, cost: 264 },
    { name: 'Après All Night', em: '❄️', grad: THEME_GRADIENTS.apres, tag: 'Fur · fire · mulled wine', palette: ['#dce4ea','#c88fa4','#2a1a1f'], items: 12, cost: 208 },
    { name: 'Vegas Baby', em: '🎰', grad: THEME_GRADIENTS.vegas, tag: 'Neon · feathers · late nights', palette: ['#7a4e8e','#e05a3d','#f3b94a'], items: 20, cost: 348 },
    { name: 'English Garden', em: '🌹', grad: THEME_GRADIENTS.garden, tag: 'Roses · linen · Pimms', palette: ['#c6d4b8','#f0d4c0','#c88fa4'], items: 13, cost: 226 },
    { name: 'Parisian Affair', em: '🥂', grad: THEME_GRADIENTS.parisian, tag: 'Cream · ribbon · Sancerre', palette: ['#e8d8c4','#b8939a','#2a1a1f'], items: 11, cost: 186 },
  ];
  return (
    <div id="themes" className="ds-section" style={{ background: TBL.creamDeep, padding: '112px 56px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="ds-themes-heading" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56 }}>
          <div>
            <Eyebrow style={{ marginBottom: 14 }}>The library</Eyebrow>
            <div className="ds-section-heading" style={{ fontFamily: SERIF, fontSize: 64, lineHeight: 1, color: TBL.ink, letterSpacing: -2 }}>
              Eight starter themes,<br/>infinitely <i>remixable.</i>
            </div>
          </div>
          <div style={{ fontSize: 14, color: TBL.subtle, maxWidth: 320, textAlign: 'right' }}>
            Every theme is a starting point. Swap the palette, bump the guest count, change the budget — we rebuild the list instantly.
          </div>
        </div>
        <div className="ds-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {themes.map((t, i) => (
            <div key={i} style={{
              background: t.grad, borderRadius: 20, padding: 22, aspectRatio: '0.82',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              color: TBL.ink, boxShadow: '0 12px 28px rgba(0,0,0,0.08)',
              cursor: 'pointer', transition: 'transform 0.2s',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ fontSize: 38 }}>{t.em}</div>
                <div style={{ fontFamily: MONO, fontSize: 9, letterSpacing: 1, opacity: 0.7, textAlign: 'right' }}>
                  № {String(i+1).padStart(2,'0')}
                </div>
              </div>
              <div>
                <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 26, lineHeight: 1.05, letterSpacing: -0.4, marginBottom: 4 }}>{t.name}</div>
                <div style={{ fontSize: 12, opacity: 0.75, marginBottom: 14 }}>{t.tag}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <PaletteDots colors={t.palette} size={10}/>
                  <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1, opacity: 0.8 }}>{t.items} · ${t.cost}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function DesktopPinterest({ onLaunch }) {
  return (
    <div className="ds-section" style={{ padding: '112px 56px', maxWidth: 1400, margin: '0 auto' }}>
      <div className="ds-pin" style={{
        background: `linear-gradient(135deg, ${TBL.jam} 0%, ${TBL.sky} 100%)`,
        borderRadius: 32, padding: '72px 72px', color: TBL.cream, position: 'relative', overflow: 'hidden',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center',
      }}>
        {Array.from({length: 20}).map((_, i) => (
          <div key={i} style={{ position: 'absolute', width: 5, height: 5, borderRadius: 999, background: TBL.citrus, left: `${(i*37)%95}%`, top: `${(i*61)%95}%`, opacity: 0.5 }}/>
        ))}
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'inline-block', background: 'rgba(251,238,224,0.2)', padding: '5px 12px', borderRadius: 999, fontFamily: MONO, fontSize: 10, letterSpacing: 2, marginBottom: 24 }}>
            NEW · AI POWERED
          </div>
          <div className="ds-pin-title" style={{ fontFamily: SERIF, fontSize: 64, lineHeight: 1, letterSpacing: -2, marginBottom: 20 }}>
            Drop your <i>Pinterest board.</i>
          </div>
          <div style={{ fontSize: 17, lineHeight: 1.55, opacity: 0.9, marginBottom: 32, maxWidth: 440 }}>
            Upload screenshots of your inspiration board. We'll read the palette, the textures, and the vibe — and build the shopping list from your actual taste.
          </div>
          <button onClick={onLaunch} style={{
            background: TBL.cream, color: TBL.ink, border: 'none', padding: '16px 28px',
            borderRadius: 999, fontFamily: SANS, fontSize: 15, fontWeight: 500, cursor: 'pointer',
          }}>📌 Try it with my board →</button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, position: 'relative' }}>
          {['#c88fa4','#f3b94a','#fbeee0','#2d5d8a','#e05a3d','#7a4e8e','#c6d4b8','#e8b87a','#fbeee0'].map((c, i) => (
            <div key={i} style={{ background: c, aspectRatio: '1', borderRadius: 10, transform: `rotate(${((i*7)%13)-6}deg)`, boxShadow: '0 6px 14px rgba(0,0,0,0.15)' }}/>
          ))}
        </div>
      </div>
    </div>
  );
}

function DesktopTestimonials() {
  const reviews = [
    { q: 'I booked the Airbnb, the bach lists did the rest. I was done shopping in twenty minutes.', n: 'Mariana R.', r: 'MOH · Austin, TX', em: '🌵' },
    { q: 'The palette match is uncanny. Everything looked cohesive in the photos — like we hired a stylist.', n: 'Pip H.', r: 'MOH · Manchester, UK', em: '🪩' },
    { q: 'Cut my planning from every-weekend-in-March to one Sunday afternoon. Game changer.', n: 'Lauren K.', r: 'Bridesmaid · Sydney', em: '🌴' },
  ];
  return (
    <div id="testimonials" className="ds-section" style={{ padding: '112px 56px', maxWidth: 1400, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <Eyebrow style={{ marginBottom: 14 }}>From the group chat</Eyebrow>
        <div className="ds-testimonials-title" style={{ fontFamily: SERIF, fontSize: 56, lineHeight: 1, color: TBL.ink, letterSpacing: -1.6 }}>
          The MOHs <i>are talking.</i>
        </div>
      </div>
      <div className="ds-grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20 }}>
        {reviews.map((r, i) => (
          <div key={i} style={{
            background: '#fff', borderRadius: 20, padding: 32, border: `1px solid ${TBL.line}`,
            display: 'flex', flexDirection: 'column', gap: 22,
          }}>
            <div style={{ fontFamily: SERIF, fontSize: 36, color: TBL.jam, lineHeight: 0.8 }}>"</div>
            <div style={{ fontFamily: SERIF, fontSize: 22, fontStyle: 'italic', color: TBL.ink, lineHeight: 1.3, letterSpacing: -0.3, flex: 1 }}>
              {r.q}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 16, borderTop: `1px solid ${TBL.line}` }}>
              <div style={{ width: 40, height: 40, borderRadius: 999, background: TBL.creamDeep, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>{r.em}</div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: TBL.ink }}>{r.n}</div>
                <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 1, color: TBL.mute }}>{r.r.toUpperCase()}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DesktopFAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Who\'s this for?', a: 'Maids of honour, bridesmaids, and brides who want the planning handled without losing the aesthetic. We\'re especially good for weekends with multiple themed events — brunch, pool party, bar night — all with different vibes and guest counts.' },
    { q: 'What does it cost?', a: 'Free to build and preview your lists. When you\'re ready to shop, you check out on each retailer\'s own site and we earn a small affiliate cut — so we only make money when we\'ve actually saved you time.' },
    { q: 'Which retailers do you support?', a: 'Shein, Amazon, Etsy, and Temu — regionally adapted for UK, US, EU, AU-NZ, and South Africa so prices show in your currency.' },
    { q: 'Can I share lists with my bridesmaids?', a: 'Yes. Every theme has a share link you can paste in the group chat. Recipients see a preview of the list and can save their own copy to edit or just use as inspiration. Fully collaborative themes (where the whole group edits together) are coming soon.' },
    { q: 'Can I build more than one theme?', a: 'Yes — a bach weekend usually has multiple themes (Friday pool, Saturday brunch, Saturday night). Each theme has its own shopping list, guest count, and palette. You can add as many as you need.' },
    { q: 'What if I have my own Pinterest board?', a: 'Drop screenshots into the builder and we\'ll read the palette and mood automatically. It\'s the fastest way to get a list that matches your exact taste — no guessing.' },
    { q: 'Will you save my lists if I come back later?', a: 'Yes. Everything is saved to your browser immediately — close the tab, come back in a month, your themes and items are exactly where you left them. Email accounts so you can log in from other devices are launching this spring.' },
  ];
  return (
    <div id="faq" className="ds-faq" style={{ padding: '112px 56px', maxWidth: 900, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 56 }}>
        <Eyebrow style={{ marginBottom: 14 }}>FAQ</Eyebrow>
        <div className="ds-faq-title" style={{ fontFamily: SERIF, fontSize: 56, lineHeight: 1, color: TBL.ink, letterSpacing: -1.6 }}>
          Questions, <i>answered.</i>
        </div>
      </div>
      <div>
        {items.map((f, i) => (
          <div key={i} style={{ borderBottom: `1px solid ${TBL.line}` }}>
            <button onClick={()=>setOpen(open===i?-1:i)} style={{
              width: '100%', background: 'none', border: 'none', padding: '24px 0',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', cursor: 'pointer',
              textAlign: 'left',
            }}>
              <div className="ds-faq-q" style={{ fontFamily: SERIF, fontSize: 26, fontStyle: 'italic', color: TBL.ink, letterSpacing: -0.5 }}>{f.q}</div>
              <div style={{ fontSize: 28, color: TBL.jam, transform: open===i?'rotate(45deg)':'none', transition: 'transform 0.2s', fontWeight: 200 }}>+</div>
            </button>
            {open===i && (
              <div style={{ padding: '0 0 24px', fontSize: 16, lineHeight: 1.6, color: TBL.subtle, maxWidth: 700 }}>
                {f.a}
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function DesktopFooter() {
  const linkStyle = { fontSize: 14, marginBottom: 10, opacity: 0.75, color: 'inherit', textDecoration: 'none', display: 'block', cursor: 'pointer' };
  const cols = [
    { t: 'Product', l: [
      { label: 'How it works', href: '#how' },
      { label: 'Themes', href: '#themes' },
      { label: 'Reviews', href: '#testimonials' },
      { label: 'FAQ', href: '#faq' },
    ]},
    { t: 'Legal', l: [
      { label: 'Terms of service', href: '/terms' },
      { label: 'Privacy policy', href: '/privacy' },
      { label: 'Cookie policy', href: '/cookies' },
      { label: 'Affiliate disclosure', href: '/affiliate-disclosure' },
    ]},
  ];
  return (
    <div className="ds-footer" style={{ background: TBL.ink, color: TBL.cream, padding: '80px 56px 40px' }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div className="ds-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 56, marginBottom: 56 }}>
          <div>
            <LogoLockup color={TBL.cream} accent={TBL.citrus}/>
            <div style={{ fontFamily: SERIF, fontStyle: 'italic', fontSize: 22, marginTop: 20, marginBottom: 16, lineHeight: 1.3, letterSpacing: -0.4, maxWidth: 300 }}>
              Plan the bach.<br/>Skip the search.
            </div>
            <div style={{ fontSize: 13, opacity: 0.7, lineHeight: 1.5, marginBottom: 18, maxWidth: 320 }}>
              Questions, press, partnership?{' '}
              <a href="mailto:hello@thebachlists.com" style={{ color: TBL.citrus, textDecoration: 'none' }}>hello@thebachlists.com</a>
            </div>
            <div style={{ display: 'flex', gap: 10 }}>
              {['IG', 'TT', 'PIN'].map(s => (
                <div key={s} style={{ width: 36, height: 36, borderRadius: 999, background: 'rgba(251,238,224,0.1)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: MONO, fontSize: 10, letterSpacing: 1 }}>{s}</div>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.t}>
              <div style={{ fontFamily: MONO, fontSize: 10, letterSpacing: 2, color: TBL.citrus, marginBottom: 18 }}>{c.t.toUpperCase()}</div>
              {c.l.map(x => (
                <a key={x.label} href={x.href} style={linkStyle}>{x.label}</a>
              ))}
            </div>
          ))}
        </div>
        <div className="ds-footer-legal" style={{ paddingTop: 24, borderTop: `1px solid rgba(251,238,224,0.15)`, display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(251,238,224,0.5)' }}>
          <div>© 2026 The Bach Lists · Plan the bach. Skip the search.</div>
          <div>Made with 🥂 for the group chat</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DesktopSite });