/* global React, Button, Chip, Stamp, Marquee, MascotFollow, Reveal, Sticker */
const { useState, useEffect, useRef } = React;

/* ============================================================
   NavBar
   ============================================================ */
function NavBar({ onBook, onNav }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [active, setActive] = useState('');
  // Services and Brand partnerships now live on their own pages; the rest are
  // homepage anchors written root-relative so they work from any page.
  const links = [
    ['Services', '/menu'], ['Babes say', '/#testimonials'],
    ['Glow ups', '/#beforeafter'], ['Memberships', '/#memberships'],
    ['Brand partnerships', '/collab']];
  const hashOf = (h) => (h.includes('#') ? h.slice(h.indexOf('#')) : null);


  useEffect(() => {
    if (!menuOpen) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
  }, [menuOpen]);

  // Scroll-spy: highlight a link only while the viewport is actually inside
  // that section (the line just under the fixed nav). Clears when you're in a
  // section that isn't in the nav, so nothing stays lit after you scroll past.
  useEffect(() => {
    const hashes = links.map(([, h]) => hashOf(h)).filter(Boolean);
    if (!hashes.length) return;
    let raf = 0;
    function measure() {
      raf = 0;
      const line = window.scrollY + 110; // sits just below the fixed navbar
      let current = '';
      for (const hash of hashes) {
        const el = document.querySelector(hash);
        if (!el) continue;
        const top = el.getBoundingClientRect().top + window.scrollY;
        const bottom = top + el.offsetHeight;
        if (line >= top && line < bottom) { current = hash; break; }
      }
      setActive(current);
    }
    function onScroll() { if (!raf) raf = requestAnimationFrame(measure); }
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    measure();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  // Same-page anchors scroll smoothly; everything else (page links, or anchors
  // that don't exist on this page) falls through to normal browser navigation.
  function handleNav(e, h) {
    setMenuOpen(false);
    const hash = hashOf(h);
    if (hash) {
      const el = document.querySelector(hash);
      if (el) { e.preventDefault(); onNav(hash); }
    }
  }

  return (
    <React.Fragment>
      <header className="tbb-nav" style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 30,
        background: 'var(--tbb-paper)',
        borderBottom: '3px solid var(--tbb-ink)',
        padding: '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16
      }}>
        <a href="/#top" onClick={(e) => handleNav(e, '/#top')} style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }}>
          <img src="assets/logo-wordmark.png" alt="Tokyo Bikini Bar" style={{ height: 48, width: 'auto' }} />
        </a>
        <nav className="tbb-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          {links.map(([l, h]) =>
          <a key={l} href={h} onClick={(e) => handleNav(e, h)}
          className="tbb-nav-link"
          data-active={active === hashOf(h) ? '1' : '0'}
          style={{
            fontFamily: 'Nunito Sans, system-ui', fontWeight: 800, fontSize: 13,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: active === hashOf(h) ? 'var(--tbb-hotpink)' : 'var(--tbb-ink)',
            textDecoration: 'none',
            transition: 'color 200ms ease'
          }}>
              {l}
            </a>
          )}
          <Button onClick={onBook}>Book now ✦</Button>
        </nav>
        <button
          type="button"
          className="tbb-burger"
          data-open={menuOpen ? '1' : '0'}
          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((o) => !o)}>
          <span /><span /><span />
        </button>
      </header>

      <div
        className="tbb-drawer-backdrop"
        data-open={menuOpen ? '1' : '0'}
        onClick={() => setMenuOpen(false)} />
      <aside className="tbb-drawer" data-open={menuOpen ? '1' : '0'} aria-hidden={!menuOpen}>
        <button
          type="button"
          className="tbb-drawer-close"
          aria-label="Close menu"
          onClick={() => setMenuOpen(false)}>
          ×
        </button>
        <nav className="tbb-drawer-inner">
          {links.map(([l, h], idx) =>
          <a key={l} href={h}
          onClick={(e) => handleNav(e, h)}
          data-active={active === hashOf(h) ? '1' : '0'}
          style={{ animationDelay: `${120 + idx * 60}ms` }}>
              {l}
            </a>
          )}
          <Button size="lg" onClick={() => {setMenuOpen(false);onBook();}}
          style={{ marginTop: 18, width: '100%', justifyContent: 'center', animationDelay: `${120 + links.length * 60}ms` }}
          className="tbb-drawer-cta">
            Book now ✦
          </Button>
        </nav>
      </aside>
    </React.Fragment>);

}

/* ============================================================
   Hero
   ============================================================ */
function Hero({ onBook }) {
  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '100svh',
      padding: '108px 48px 48px',
      overflow: 'hidden',
      background: 'var(--tbb-paper)',
      display: 'flex',
      alignItems: 'center'
    }}>
      <div className="tbb-halftone" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.7 }} />

      {/* floating stickers */}
      <div className="tbb-hero-sticker tbb-hero-sticker-tl" style={{ position: 'absolute', top: 'calc(90px + 4svh)', left: 'calc(42% + 120px)', '--rot': '-8deg' }}>
        <Stamp tone="lime" rot={-8}>♡ Hot girl hours</Stamp>
      </div>
      <div className="tbb-hero-sticker tbb-hero-sticker-tr" style={{ position: 'absolute', top: 180, right: 90, '--rot': '6deg' }}>
        <Stamp tone="cyan" rot={6}>✦ 805 get smooth</Stamp>
      </div>
      <div className="tbb-hero-sticker tbb-hero-sticker-bottom" style={{ position: 'absolute', bottom: 80, right: 80, '--rot': '-4deg' }}>
        <Stamp tone="butter" rot={-4}>✦ Glow szn</Stamp>
      </div>

      <div className="tbb-hero-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 32, alignItems: 'center', width: '100%', maxWidth: 1400, margin: '0 auto' }}>
        <div>
          <Chip tone="pink" rot={-3} sticker>CAMARILLO WAX STUDIO</Chip>
          <h1 className="tbb-hero-h1" style={{
            fontFamily: 'Olivita, system-ui', fontStyle: 'italic',
            fontSize: 'clamp(40px, 5.2vw, 82px)', lineHeight: 1.08,
            margin: '11px 0 22px', color: 'var(--tbb-ink)', letterSpacing: '0.01em',
            paddingTop: '0.12em'
          }}>
            Smooth where<br />
            it counts.<br />
            <span style={{ color: 'var(--tbb-hotpink)' }}>
              Glow where<br />it shows.
            </span>
          </h1>
          <p style={{ fontFamily: 'Nunito', fontSize: 20, fontWeight: 500, color: '#3A3A3A', maxWidth: 520, marginBottom: 28, lineHeight: 1.5 }}>
            Full body, lashes, brows, vibes — a private little studio run by{' '}
            <span style={{ background: 'var(--tbb-butter)', padding: '0 6px', borderRadius: 6, fontWeight: 800 }}>Leia</span>. Come hang, get smooth, leave glowing!
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button size="xl" onClick={onBook}>Book your spot →</Button>
            <Button size="xl" variant="secondary" as="a" href="/menu">See the menu</Button>
          </div>
          <div className="tbb-hero-rating" style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 32 }}>
            <div className="tbb-hero-rating-circles" style={{ display: 'flex' }}>
              {['var(--tbb-hotpink)', 'var(--tbb-lime)', 'var(--tbb-sky)', 'var(--tbb-butter)'].map((c, i) =>
              <div key={i} style={{ width: 36, height: 36, borderRadius: 999, background: c, border: '3px solid var(--tbb-ink)', marginLeft: i ? -12 : 0 }} />
              )}
            </div>
            <div style={{ fontFamily: 'Nunito Sans', fontWeight: 800, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              5.0 ✦✦✦✦✦ · 380+ babes glowing
            </div>
          </div>
        </div>

        {/* Mascot side */}
        <div className="tbb-hero-mascot" style={{ position: 'relative' }}>
          <div className="tbb-spin" style={{ position: 'absolute', inset: '-40px', zIndex: 0 }}>
            <SunburstSVG />
          </div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <MascotFollow src="assets/mascot-primary.png" size={520} />
          </div>
          <div style={{ position: 'absolute', bottom: -10, left: -10, zIndex: 2 }}>
            <Stamp tone="pink" rot={-10}>Hi babe ♡</Stamp>
          </div>
        </div>
      </div>
    </section>);

}

function SunburstSVG() {
  return (
    <svg viewBox="0 0 600 600" style={{ width: '100%', height: '100%' }}>
      <g transform="translate(300,300)">
        {Array.from({ length: 24 }).map((_, i) => {
          const a = i / 24 * Math.PI * 2;
          const r1 = 180,r2 = 280 + i % 2 * 30;
          const x1 = Math.cos(a) * r1,y1 = Math.sin(a) * r1;
          const x2 = Math.cos(a) * r2,y2 = Math.sin(a) * r2;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#FF8FBE" strokeWidth="10" strokeLinecap="round" opacity="0.55" />;
        })}
      </g>
    </svg>);

}

/* ============================================================
   About — Meet Leia
   ============================================================ */
function About() {
  return (
    <section id="about" style={{
      position: 'relative',
      padding: '80px 48px',
      background: 'var(--tbb-hotpink)',
      color: 'var(--tbb-paper)',
      borderTop: '3px solid var(--tbb-ink)',
      borderBottom: '3px solid var(--tbb-ink)',
      overflow: 'hidden'
    }}>
      <div className="tbb-halftone" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.25 }} />
      <div className="tbb-about-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'center', maxWidth: 1400, margin: '0 auto' }}>
        <Reveal>
          <div style={{ position: 'relative' }}>
            <div style={{
              width: '100%', aspectRatio: '4/5',
              border: '5px solid var(--tbb-ink)', borderRadius: 32,
              boxShadow: '10px 10px 0 0 var(--tbb-ink)',
              overflow: 'hidden', background: 'var(--tbb-paper)',
              transform: 'rotate(-3deg)'
            }}>
              <image-slot id="about-leia-2" shape="rect" style={{ display: 'block', width: '100%', height: '100%' }} placeholder="Drop a photo of Leia ♡"></image-slot>
            </div>
            <div style={{ position: 'absolute', bottom: -18, right: -12, transform: 'rotate(8deg)' }}>
              <Stamp tone="butter" rot={0}>✦ The girl ✦</Stamp>
            </div>
            <div style={{ position: 'absolute', top: -22, left: -22, transform: 'rotate(-8deg)' }}>
              <Sticker tone="lime" radius={999} style={{ padding: '12px 18px', boxShadow: '5px 5px 0 0 var(--tbb-ink)' }}>
                <span style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 28 }}>Leia Serrano</span>
              </Sticker>
            </div>
          </div>
        </Reveal>

        <Reveal delay={150}>
          <div>
            <Chip tone="ink" rot={-2} sticker>Meet your wax girl</Chip>
            <h2 style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 0.88, margin: '18px 0 18px', color: 'var(--tbb-paper)' }}>
              Hi, I'm Leia.
            </h2>
            <p style={{ fontFamily: 'Nunito', fontSize: 20, fontWeight: 600, lineHeight: 1.55, marginBottom: 18, color: 'var(--tbb-paper)' }}>
              Licensed esthetician, certified hard-wax lifer, and the loudest playlist in the 805. I built Tokyo Bikini Bar for babes who want
              their wax appointment to feel like a sleepover — not a sterile spa.
            </p>
            <p style={{ fontFamily: 'Nunito', fontSize: 17, fontWeight: 500, lineHeight: 1.55, marginBottom: 24, color: '#FBE5EE' }}>Five+ years behind the wax pot and obsessed with making this the most chill hour of your month. Soft lighting, real conversation, and a playlist that’s actually good. ♡

            </p>
            <div className="tbb-about-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 18 }}>
              {[
              ['5+', 'yrs waxing'],
              ['380+', 'happy babes'],
              ['100%', 'good vibes']].
              map(([n, l]) =>
              <Sticker key={l} tone="paper" rot={0} style={{ padding: '18px 16px', textAlign: 'center', color: 'var(--tbb-ink)' }}>
                  <div className="tbb-about-stat-num" style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 48, lineHeight: 1 }}>{n}</div>
                  <div className="tbb-about-stat-label" style={{ fontFamily: 'Nunito Sans', fontWeight: 900, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 6 }}>{l}</div>
                </Sticker>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ============================================================
   Services
   ============================================================ */
function ServiceCard({ title, jp, price, priceLabel, mins, minsLabel, tone, tag, rot = 0, popular = false, onBook }) {
  const palette = {
    paper: { bg: 'var(--tbb-paper)', fg: 'var(--tbb-ink)' },
    pink: { bg: 'var(--tbb-hotpink)', fg: 'var(--tbb-paper)' },
    sky: { bg: 'var(--tbb-sky)', fg: 'var(--tbb-ink)' },
    lime: { bg: 'var(--tbb-lime)', fg: 'var(--tbb-ink)' },
    butter: { bg: 'var(--tbb-butter)', fg: 'var(--tbb-ink)' },
    coral: { bg: 'var(--tbb-coral)', fg: 'var(--tbb-paper)' },
    bubble: { bg: 'var(--tbb-bubblegum)', fg: 'var(--tbb-ink)' },
    cyan: { bg: 'var(--tbb-cyan)', fg: 'var(--tbb-ink)' }
  }[tone];
  return (
    <div className="tbb-peel tbb-service-card" onClick={() => onBook(title)} style={{
      background: palette.bg, color: palette.fg,
      border: popular ? '4px solid var(--tbb-ink)' : '3px solid var(--tbb-ink)', borderRadius: 28,
      boxShadow: popular ? '8px 8px 0 0 var(--tbb-ink)' : '5px 5px 0 0 var(--tbb-ink)',
      padding: 24, minHeight: 300,
      display: 'flex', flexDirection: 'column', gap: 10,
      cursor: 'pointer',
      transform: rot ? `rotate(${rot}deg)` : undefined
    }}>
      {/* Tag row — always reserves space so cards stay aligned */}
      <div style={{ display: 'flex', minHeight: 30, alignItems: 'flex-start' }}>
        {popular ?
          <Chip tone={tone === 'pink' ? 'butter' : 'pink'} size="md">★ Most popular</Chip> :
          tag && <Chip tone={tone === 'pink' ? 'butter' : tone === 'butter' ? 'pink' : 'pink'}>{tag}</Chip>}
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 'clamp(20px, 1.9vw, 24px)', lineHeight: 1.05, textWrap: 'balance', overflowWrap: 'normal', wordBreak: 'keep-all', hyphens: 'none' }}>{title}</div>
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div>
          <div style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 36, lineHeight: 1 }}>{priceLabel || `$${price}`}</div>
          <div style={{ fontFamily: 'Nunito Sans', fontWeight: 800, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.8, marginTop: 2 }}>{minsLabel || `${mins} min`}</div>
        </div>
        <div style={{
          fontFamily: 'Nunito Sans', fontWeight: 900, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
          padding: '12px 16px', border: '2.5px solid currentColor', borderRadius: 999,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          whiteSpace: 'nowrap', alignSelf: 'stretch'
        }}>
          Book&nbsp;→
        </div>
      </div>
    </div>);

}

function ServicesSection({ onBook }) {
  const services = [
  { title: 'Brazilian', jp: 'ブラジリアン', price: 53, mins: 45, tone: 'pink', popular: true, rot: -1 },
  { title: 'Brow tint', jp: 'ブロウティント', price: 18, mins: 10, tone: 'coral', tag: 'Add-on', rot: -1 },
  { title: 'Brow lam', jp: 'ブロウラム', price: 75, mins: 45, tone: 'pink', tag: 'NEW ✦', rot: 1 },
  { title: 'Korean lash lift', jp: 'ラッシュリフト', price: 95, mins: 60, minsLabel: 'Lift + tint · 60 min', tone: 'butter', popular: true, rot: -1 },
  { title: 'Lash extensions', jp: 'まつげエクステ', priceLabel: 'from $100', minsLabel: '90–120 min', tone: 'paper', tag: 'Hot ♡', rot: 1 },
  { title: 'Full body', jp: 'フルボディ', priceLabel: '$110 / $200', minsLabel: 'Tier 1 / Tier 2', tone: 'pink', tag: 'Glow up', rot: 1 },
  { title: 'Bikini line', jp: 'ビキニライン', price: 28, mins: 25, tone: 'bubble', rot: 1 },
  { title: 'Half leg', jp: 'ハーフレッグ', price: 45, mins: 30, tone: 'sky', rot: -1 },
  { title: 'Full leg', jp: 'フルレッグ', price: 70, mins: 60, tone: 'lime', rot: 1 },
  { title: 'Underarm', jp: 'ワキ', price: 18, mins: 15, tone: 'butter', rot: -1 },
  { title: 'Brow wax', jp: 'ブロウワックス', price: 18, mins: 15, tone: 'cyan', rot: 1 },
  { title: 'Full back', jp: 'フルバック', price: 68, mins: 45, tone: 'sky', rot: -1 }];

  return (
    <section id="services" style={{
      padding: '120px 48px 80px',
      background: 'var(--tbb-paper-warm)',
      borderTop: '3px solid var(--tbb-ink)',
      borderBottom: '3px solid var(--tbb-ink)',
      position: 'relative'
    }}>
      <div className="tbb-halftone-light" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1400, margin: '0 auto' }}>
        <a href="/#top" style={{ fontFamily: 'Nunito Sans, system-ui', fontWeight: 900, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--tbb-ink)', textDecoration: 'none', display: 'inline-block', marginBottom: 18 }}>← Back home</a>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 36, gap: 16, flexWrap: 'wrap' }}>
          <div>
            <Chip tone="ink" rot={-2} sticker>The menu</Chip>
            <h2 style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 0.9, margin: '18px 0 8px', letterSpacing: '-0.01em' }}>
              What we wax.
            </h2>
            <p style={{ fontFamily: 'Nunito', fontWeight: 600, fontSize: 17, lineHeight: 1.5, color: 'var(--fg2)', maxWidth: 460, margin: '4px 0 0' }}>
              Babe-favorites? The <strong>Brazilian</strong> and the <strong>Korean lash lift</strong> — booked more than anything else on the menu. ♡
            </p>
          </div>
          <Stamp tone="lime" rot={-6}>↓ Tap a card to book ↓</Stamp>
        </div>
        <div className="tbb-services-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {services.map((s, i) =>
          <Reveal key={s.title} delay={i * 60}>
              <ServiceCard {...s} onBook={onBook} />
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   Pre/Post wax care tabs
   ============================================================ */
function CareSection() {
  const [tab, setTab] = useState('pre');
  const content = {
    pre: {
      title: 'Pre-wax checklist',
      jp: 'ワックス前',
      tone: 'lime',
      tips: [
      ['☼ 24h ahead', 'Exfoliate gently. No harsh scrubs — just buff with a soft mitt in the shower.'],
      ['☼ Hair length', 'At least ¼ inch (a grain of rice). Too short = the wax can\'t grab.'],
      ['☼ Caffeine', 'Skip the third espresso. It makes your skin more sensitive, babe.'],
      ['☼ Day of', 'Shower before. Wear loose cotton — your skin\'ll thank you on the drive home.'],
      ['☼ Period?', 'Totally fine to come in. You\'ll just be a touch more sensitive — wear a tampon/cup.'],
      ['☼ Meds', 'Tell me if you\'re on retinoids, accutane, or antibiotics. We\'ll adjust.']]

    },
    post: {
      title: 'Post-wax glow code',
      jp: 'ワックス後',
      tone: 'sky',
      tips: [
      ['♡ First 24h', 'No hot tubs, saunas, beaches, or sweaty workouts. Pores need to chill.'],
      ['♡ Clothing', 'Loose. Cotton. Trust me on this one.'],
      ['♡ 48h+', 'Start exfoliating again with a soft mitt — keeps ingrowns away.'],
      ['♡ Moisturize', 'Daily. Fragrance-free is best for the first week.'],
      ['♡ Sun', 'Wait 24h before tanning. Lather SPF the rest of the time.'],
      ['♡ Rebook', 'Every 4 weeks keeps you smooth. We\'ll get you on a schedule.']]

    }
  };
  const c = content[tab];
  return (
    <section id="care" style={{
      padding: '80px 48px', background: 'var(--tbb-paper)', position: 'relative'
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <Chip tone="pink" rot={-3} sticker>Glow code</Chip>
          <h2 style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 'clamp(36px, 5vw, 68px)', lineHeight: 0.9, margin: '18px 0 8px' }}>
            How to stay smoooth.
          </h2>
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginBottom: 32 }}>
          <Button variant={tab === 'pre' ? 'lime' : 'secondary'} size="lg" onClick={() => setTab('pre')}>Before your wax</Button>
          <Button variant={tab === 'post' ? 'sky' : 'secondary'} size="lg" onClick={() => setTab('post')}>After your wax</Button>
        </div>

        <Sticker tone={c.tone} radius={32} style={{ padding: 36, boxShadow: '8px 8px 0 0 var(--tbb-ink)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 24, gap: 16, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: 'Olivita, system-ui', fontStyle: 'italic', fontSize: 52, lineHeight: 0.95 }}>{c.title}</div>
            </div>
            <Stamp tone="paper" rot={4}>✦ Save this</Stamp>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18 }}>
            {c.tips.map(([h, body], i) =>
            <div key={i} style={{
              background: 'var(--tbb-paper)', color: 'var(--tbb-ink)',
              border: '3px solid var(--tbb-ink)', borderRadius: 18,
              padding: '16px 18px',
              boxShadow: '3px 3px 0 0 var(--tbb-ink)'
            }}>
                <div style={{ fontFamily: 'Nunito Sans', fontWeight: 900, fontSize: 13, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6 }}>{h}</div>
                <div style={{ fontFamily: 'Nunito', fontWeight: 500, fontSize: 15, lineHeight: 1.5, color: 'var(--fg2)' }}>{body}</div>
              </div>
            )}
          </div>
        </Sticker>
      </div>
    </section>);

}

Object.assign(window, { NavBar, Hero, About, ServicesSection, CareSection });