// V2 Marketing — performance-of-life angle, video hero, 10 areas, no catalog page,
// outcome-focused copy, men + women testimonials.

const TRUST_ITEMS = [
  'twice the potency',
  'compounded',
  'cold-chain shipped',
  'discreet packaging',
  'provider on call',
  'cancel any time',
];

// 10 areas — original 5 (locked names) + 5 new (single-word names)
const CATEGORIES = [
  { id: 'skin',         name: 'Skin',         blurb: 'Performance shows on the surface first. Twice the potency, made for the version of your skin you remember.' },
  { id: 'hair',         name: 'Hair',         blurb: 'For thinning that started so slowly you almost convinced yourself you were imagining it.' },
  { id: 'menopause',    name: 'Menopause',    blurb: 'For sleep, mood, and the parts of life menopause was quietly stealing back.' },
  { id: 'libido',       name: 'Libido',       blurb: 'Desire that disappeared on its own can come back the same way — supported, not performed.' },
  { id: 'weight',       name: 'Weight',       blurb: 'For when calorie math stops working and your body deserves real support, not another diet.' },
  { id: 'sleep',        name: 'Sleep',        blurb: 'For nights that fragment, mornings that don\'t feel like rest, and a body that never quite settles down.' },
  { id: 'energy',       name: 'Energy',       blurb: 'For the daily crash, the constant drag, and a tank that never feels steady.' },
  { id: 'healing',      name: 'Healing',      blurb: 'For the slow knit. Joints, soft tissue, the things that used to bounce back faster than they do now.' },
  { id: 'cognition',    name: 'Cognition',    blurb: 'For focus that flickers, names you used to know, and a mind that should be sharper than it feels.' },
  { id: 'stress',       name: 'Stress',       blurb: 'For carrying it in your shoulders, your sleep, your jaw. Calm is a performance metric too.' },
];

const FAQ_ITEMS = [
  { q: 'How is the membership priced?', a: 'Membership starts at $299/month. If the peptide costs more than the base membership, the difference is shown before you confirm — never any surprises.' },
  { q: 'How will I know if this fits?', a: 'Your assessment starts with what you want to feel different, what you have already tried, and what keeps getting in the way. The plan is reviewed before anything ships, and it can adjust when your needs change.' },
  { q: 'Do I have to choose just one area?', a: 'No. Many members start with one and add a second once they feel the first one working. The assessment recommends what fits — your plan adjusts as you do.' },
  { q: 'What if I don\'t feel a difference?', a: 'Tell us. We adjust. Most under-response is under-dosing — the same reason most members came to us in the first place. We start where others stop.' },
  { q: 'How does shipping work?', a: 'Cold-chain shipped, in discreet, unbranded packaging. Tracking appears once the pharmacy releases the order.' },
  { q: 'What\'s in the verification step?', a: 'Two things: a photo of a current government-issued ID (front and back) and a twelve-second video where you read a short consent sentence and say your name and date of birth. Review starts right away. If anything is off, a provider steps in before your shipment leaves the pharmacy — never after.' },
  { q: 'What is "provider on call" and how is it different from the membership?', a: 'It is optional provider access for questions you should not have to guess through alone. $129/month gives one provider care room, $199/month gives two, and $299/month adds private 1:1 direct support. Not for emergencies. Cancel any time.' },
  { q: 'What does "503A pharmacy compounded" mean?', a: '503A pharmacies are state-licensed facilities that compound medications for individual members. Your prescription is dispensed for you specifically. Every vial includes a Certificate of Analysis from a third-party lab — sterility, potency, identity. We don\'t hide it; you can request the COA on any vial.' },
  { q: 'Why is yours twice the standard potency?', a: 'Because under-support is one reason people keep feeling like nothing is changing. We build the plan around a clear intended effect, then keep the next step visible if something needs to change.' },
  { q: 'Is this safe?', a: 'Compounded peptides carry the same considerations as any prescribed medication. We screen at intake, monitor through the membership, and adjust when something is off. The honest answer: nothing is risk-free. The provider on call exists for the gray areas. If you\'re pregnant, trying to conceive, breastfeeding, or have an active cancer diagnosis, we\'ll likely recommend you wait.' },
  { q: 'Do you ask for medical records?', a: 'Sometimes — especially for hormone-adjacent areas (menopause, andropause). The intake includes a consent for our network to review records you upload, and to request additional information if needed. You can decline; certain recommendations may be unavailable without records.' },
  { q: 'Who reviews my assessment?', a: 'A licensed provider in our network reviews every recommendation before any prescription is issued. The assessment is the input — the provider is the decision. Provider on call gives members a care room and direct support path for ongoing questions.' },
  { q: 'Do I need to inject myself?', a: 'Most peptide therapy is subcutaneous — a tiny insulin needle, less sensation than a bee sting. Your first vial ships with supplies and a short video walkthrough. Members tell us the anticipation was worse than the act.' },
  { q: 'Can I pause or cancel?', a: 'Yes, any time. No fees, no calls to retention. You can pause or cancel from your member account.' },
  { q: 'Will my insurance cover this?', a: 'No. Compounded peptides are typically not reimbursable. You can submit receipts to FSA/HSA in many cases — we provide itemized receipts on request.' },
  { q: 'Where do you ship?', a: 'All 50 U.S. states. We don\'t ship internationally yet. Florida is our home state and where the company is incorporated.' },
  { q: 'Can I just buy the book?', a: 'Yes. $17. It\'s digital — yours instantly, read it tonight. Most members buy the book first and find themselves underlining the page that finally names what\'s been off.' },
  { q: 'How do I reach a human?', a: 'Email a real address that real people read. Members get a member-only inbox that routes to the team during business days. Provider on call adds provider care rooms, and the $299 tier adds private 1:1 direct support.' },
];

// ── Shared chrome ──────────────────────────────────────────────────────────

const NAV_LINKS = [
  { id: 'categories',  label: 'What we help with' },
  { id: 'care',        label: 'Provider on call' },
  { id: 'philosophy',  label: 'Philosophy' },
  { id: 'book',        label: 'Buy the book' },
  { id: 'faq',         label: 'FAQ' },
];

const navHref = (id) => ({
  home: '/',
  categories: '/categories',
  care: '/provider-on-call',
  philosophy: '/philosophy',
  catalog: '/catalog',
  practice: '/practice-with-us',
  book: '/book',
  faq: '/faq',
  login: '/login',
  check: '/check',
}[id] || '/');

const MarketingNav = ({ page, onNav, onStart, onHero }) => {
  const [mobileOpen, setMobileOpen] = React.useState(false);
  React.useEffect(() => { setMobileOpen(false); }, [page]);
  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);
  return (
    <nav className={`nav ${onHero ? 'nav-on-hero' : ''} ${mobileOpen ? 'nav-mobile-open' : ''}`}>
      <div className="nav-inner">
        <Logo onClick={() => onNav('home')} />
        <div className="nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={navHref(l.id)} className={page === l.id ? 'is-active' : ''} onClick={(e) => { e.preventDefault(); onNav(l.id); }}>{l.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <a className="nav-login" href="/login" onClick={(e) => { e.preventDefault(); onNav('login'); }}>Login</a>
          <button className="btn btn-primary btn-sm" onClick={onStart}>Take assessment</button>
        </div>
        <button
          className={`nav-burger ${mobileOpen ? 'is-open' : ''}`}
          onClick={() => setMobileOpen(o => !o)}
          aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
          aria-expanded={mobileOpen}
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      {/* Mobile sheet */}
      <div className={`nav-sheet ${mobileOpen ? 'is-open' : ''}`} aria-hidden={!mobileOpen}>
        <div className="nav-sheet-inner">
          {NAV_LINKS.map(l => (
            <a key={l.id} href={navHref(l.id)} className={page === l.id ? 'is-active' : ''} onClick={(e) => { e.preventDefault(); onNav(l.id); setMobileOpen(false); }}>{l.label}</a>
          ))}
          <div className="nav-sheet-actions">
            <button className="btn btn-primary" onClick={() => { onStart(); setMobileOpen(false); }}>Take assessment</button>
            <button className="btn btn-soft" onClick={() => { onNav('login'); setMobileOpen(false); }}>Login</button>
          </div>
        </div>
      </div>
    </nav>
  );
};

const MarketingFooter = ({ onNav, onStart }) => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-grid">
        <div>
          <div className="footer-mark">AmazingXO</div>
          <p style={{ color: 'rgba(244,237,228,0.6)', fontSize: 14, lineHeight: 1.5, maxWidth: 360 }}>
            A peptide membership built around how you actually want to perform — in your skin, your sleep, your focus, your body.
          </p>
        </div>
        <div>
          <h4>What we help with</h4>
          <div className="footer-links footer-links-grid">
            {CATEGORIES.map(c => (
              <a key={c.id} href={`/${c.id}`} onClick={(e) => { e.preventDefault(); onNav(`area/${c.id}`); }}>{c.name}</a>
            ))}
          </div>
        </div>
        <div>
          <h4>Site</h4>
          <div className="footer-links">
            <a href="/" onClick={(e) => { e.preventDefault(); onNav('home'); }}>Home</a>
            <a href="/philosophy" onClick={(e) => { e.preventDefault(); onNav('philosophy'); }}>Philosophy</a>
            <a href="/provider-on-call" onClick={(e) => { e.preventDefault(); onNav('care'); }}>Provider on call</a>
            <a href="/catalog" onClick={(e) => { e.preventDefault(); onNav('catalog'); }}>Catalog</a>
            <a href="/book" onClick={(e) => { e.preventDefault(); onNav('book'); }}>Buy the book</a>
            <a href="/practice-with-us" onClick={(e) => { e.preventDefault(); onNav('practice'); }}>Practice with us</a>
            <a href="/faq" onClick={(e) => { e.preventDefault(); onNav('faq'); }}>FAQ</a>
            <a href="/check" onClick={(e) => { e.preventDefault(); onNav('check'); }}>Quick assessment</a>
          </div>
        </div>
        <div>
          <h4>Legal</h4>
          <div className="footer-links">
            <a href="/policy/terms" target="_top">Terms</a>
            <a href="/policy/privacy" target="_top">Privacy</a>
            <a href="/policy/hipaa" target="_top">HIPAA</a>
            <a href="/policy/voice" target="_top">Telehealth consent</a>
          </div>
          <div className="footer-badges" aria-label="Certification badges">
            <img
              src="assets/footer-badges/legitscript-certified.svg"
              alt="LegitScript Certified"
              className="footer-badge-img footer-badge-legit"
            />
            <img
              src="assets/footer-badges/group.avif"
              alt="Certification badge"
              className="footer-badge-img"
            />
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 AMAZINGXO. ALL RIGHTS RESERVED. — FLORIDA</span>
        <span>TWICE THE POTENCY · hello@amazingxo.com</span>
      </div>
    </div>
  </footer>
);

// Outcomes-focused testimonials — men + women, no medical jargon, no process talk
const GoodHands = () => {
  const ITEMS = [
    { mark: 'M·H', q: "Rest started feeling possible again. My wife noticed before I did.", cite: 'Marcus · 51 · sleep + healing' },
    { mark: 'A·M', q: "My skin looks like it belongs to me again. I just stopped covering up.", cite: 'Annette · 47 · skin' },
    { mark: 'J·T', q: "I used to crash by 3pm. Now I'm finishing the day with energy left over.", cite: 'Jordan · 42 · energy' },
    { mark: 'V·R', q: "I forgot what wanting felt like. It came back. That's the whole story.", cite: 'Vanessa · 39 · libido' },
    { mark: 'D·K', q: "The fog lifted. Names came back. I can read for an hour again.", cite: 'David · 55 · cognition' },
    { mark: 'L·B', q: "Down 22 pounds and the number isn't even the point. I feel like myself.", cite: 'Lauren · 44 · weight' },
  ];
  return (
    <div className="section" style={{ paddingTop: 56, paddingBottom: 56 }}>
      <div className="good-hands">
        <div>
          <div className="section-eyebrow">— OUTCOMES</div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>
            What members <em>actually say.</em>
          </h2>
          <p className="section-lede" style={{ marginBottom: 0 }}>
            Real members. Their words, lightly edited for length. Names changed where requested.
          </p>
        </div>
        <div className="good-hands-quotes good-hands-quotes-3">
          {ITEMS.map((it, i) => (
            <div key={i} className="good-hands-quote">
              <div className="good-hands-mark mono">{it.mark}</div>
              <blockquote className="serif">"{it.q}"</blockquote>
              <div className="good-hands-cite mono">— {it.cite}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// R2 video registry — every video is used in exactly one place.
// LOCKED: Hero/hero1-7 belong to the hero rotation only. Center clips belong to
// their assigned homepage spotlights only. PDP videos must be unique additions;
// until those exist, peptide pages render the static placeholder graphic.
const R2_VIDEO_BASE = 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/videos';
const SITE_VIDEOS = {
  memberStory:       `${R2_VIDEO_BASE}/Center/skin.mp4`,
  philosophyFounder: null,
  bookAuthor:        null,
  providerOnCall:    'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/site/providercall.mp4',
  howItWorks:        null,
};
const HOME_SPOTLIGHT_VIDEOS = {
  hair:   `${R2_VIDEO_BASE}/Center/hair.mp4`,
  weight: `${R2_VIDEO_BASE}/Center/weight-loss.mp4`,
  libido: `${R2_VIDEO_BASE}/Center/libido.mp4`,
};
const PDP_VIDEOS_BY_AREA = {};
const videoForArea = (area) => PDP_VIDEOS_BY_AREA[area] || null;

// Reusable video placeholder — when `src` is set, renders a real autoplay muted loop video
const VideoPlaceholder = ({ src, aspect = '4/5', label = 'video', sublabel = 'placeholder', dark = false, accent = false, objectPosition = 'center center', motion = null }) => {
  if (src) {
    return (
      <div className="video-ph video-ph-live" style={{ aspectRatio: aspect }}>
        <video
          src={src}
          style={{ objectPosition }}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
        />
      </div>
    );
  }
  if (motion) {
    return (
      <div className={`video-ph video-ph-motion video-ph-${motion}`} style={{ aspectRatio: aspect }} aria-hidden="true">
        <div className="motion-field">
          <span></span><span></span><span></span><span></span><span></span>
        </div>
      </div>
    );
  }
  return (
    <div className={`video-ph ${dark ? 'is-dark' : ''} ${accent ? 'is-accent' : ''}`} style={{ aspectRatio: aspect }}>
      <div className="video-ph-grain" />
      <div className="video-ph-play">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
          <path d="M8 5v14l11-7z" />
        </svg>
      </div>
      <div className="video-ph-label mono">{label}</div>
      <div className="video-ph-sub mono">{sublabel}</div>
    </div>
  );
};

// ── Pages ──────────────────────────────────────────────────────────────────

const HERO_VIDEO_BASE = 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/videos/Hero';
const HERO_VIDEOS = [
  `${HERO_VIDEO_BASE}/hero1.mp4`,
  `${HERO_VIDEO_BASE}/hero2.mp4`,
  `${HERO_VIDEO_BASE}/hero3.mp4`,
  `${HERO_VIDEO_BASE}/hero4.mp4`,
  `${HERO_VIDEO_BASE}/hero5.mp4`,
  `${HERO_VIDEO_BASE}/hero6.mp4`,
  `${HERO_VIDEO_BASE}/hero7.mp4`,
];

// Plain rotator — plays each video raw, advances on end. No transitions.
const RotatingHeroVideo = () => {
  const [idx, setIdx] = React.useState(() => Math.floor(Math.random() * HERO_VIDEOS.length));
  const advance = () => setIdx((i) => (i + 1) % HERO_VIDEOS.length);
  return (
    <video
      key={idx}
      autoPlay
      muted
      playsInline
      preload="auto"
      onEnded={advance}
      onError={advance}
    >
      <source src={HERO_VIDEOS[idx]} type="video/mp4" />
    </video>
  );
};

const PageHome = ({ tweaks, onStart, onNav }) => {
  const headline = {
    classic:     <>Perform as <em>yourself.</em></>,
    declarative: <>You're not <em>tired.</em><br/>You're undertreated.</>,
    question:    <>How are you <em>actually</em> performing?</>,
  }[tweaks.headlineVariant] || <>Perform as <em>yourself.</em></>;

  return (
    <>
      {/* HERO with full-bleed background video */}
      <section className="hero hero-video">
        <div className="hero-video-bg">
          <div className="hero-video-fallback" />
          <RotatingHeroVideo />
          <div className="hero-video-veil" />
        </div>
        <div className="hero-trust-strip">
          <Marquee items={TRUST_ITEMS} dark />
        </div>
        <div className="hero-video-inner">
          <div className="hero-video-content">
            <Eyebrow light>AmazingXO · Peptide membership</Eyebrow>
            <h1 className="serif">{headline}</h1>
            <p className="hero-sub">A peptide membership for performing in your own life — your skin, your sleep, your focus, your body. Twice the potency, made the way it should have been the first time.</p>
            <div className="hero-actions">
              <button className="btn btn-primary btn-lg" onClick={() => onStart()}>
                Take the assessment
                <span style={{ marginLeft: 4 }}>→</span>
              </button>
            </div>
            <div className="mono hero-microcite">
              Twice the potency &nbsp;·&nbsp; Cancel any time
            </div>
          </div>
        </div>
      </section>

      {/* TRUST BANNER — clearly visible, full-width, just below the hero */}
      <section className="trust-banner">
        <Marquee items={TRUST_ITEMS} />
      </section>

      {/* OUTCOMES INTRO */}
      <div className="section section-outcomes-intro home-reveal">
        <div className="section-eyebrow">— THE WHOLE IDEA</div>
        <h2 className="serif">Most people aren't tired. <em>They're undertreated.</em></h2>
        <p className="section-lede">
          You've been told this is just how it goes after 35, 45, 55. We disagree. The version of you that performs — sleeps deep, thinks clearly, recovers fast, wants again — is still in there. We help you reach it.
        </p>
      </div>

      {/* CATEGORIES — 10 areas, 5×2 grid */}
      <div className="section home-reveal home-area-intro" style={{ paddingTop: 16, paddingBottom: 24 }}>
        <div className="section-eyebrow">— WHAT WE HELP WITH</div>
        <h2 className="serif">The areas of life that <em>increase performance.</em></h2>
        <p className="section-lede">The assessment walks you through what's loudest, what's quietest, and what's been quietly costing you the most. Pick the one you came in for — we'll take it from there.</p>
        <div style={{ marginTop: 32 }}>
          <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take the assessment →</button>
        </div>
      </div>
      <div className="tracks tracks-10 home-tracks">
        {CATEGORIES.map((c, i) => (
          <a key={c.id} className="track" style={{ '--track-index': i }} href={`/${c.id}`} onClick={(e) => { e.preventDefault(); onNav(`area/${c.id}`); }}>
            <h3>{c.name}</h3>
            <p>{c.blurb}</p>
            <span className="track-tag">Learn more <span>→</span></span>
          </a>
        ))}
      </div>

      <GoodHands />

      {/* VIDEO BLOCK — outcomes spotlight */}
      <div className="section">
        <div className="outcome-spotlight">
          <div>
            <div className="section-eyebrow">— A MEMBER</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>"I stopped covering up."</h2>
            <p className="section-lede">
              Annette came in wanting her skin to feel like hers again. The real shift was not just in the mirror — it was walking into her daughter's wedding without hiding.
            </p>
            <button className="btn btn-ghost btn-lg" onClick={() => onStart('skin')}>Start your skin assessment →</button>
          </div>
          <VideoPlaceholder aspect="4/5" src={SITE_VIDEOS.memberStory} />
        </div>
      </div>

      {/* MEMBERSHIP TEASER */}
      <div className="section">
        <div className="membership">
          <div>
            <div className="section-eyebrow">— HOW IT WORKS</div>
            <h2 className="serif">Built around your <em>plan,</em> not their <em>protocol.</em></h2>
            <p className="section-lede">Your assessment recommends what you actually need — sometimes one peptide, sometimes a stack of two or three. You see the total before you confirm. Cancel any time.</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take assessment</button>
            </div>
          </div>
          <PriceCard onStart={onStart} />
        </div>
      </div>

      {/* VIDEO BLOCK — hair spotlight */}
      <div className="section">
        <div className="outcome-spotlight">
          <VideoPlaceholder aspect="4/5" src={HOME_SPOTLIGHT_VIDEOS.hair} />
          <div>
            <div className="section-eyebrow">— A MEMBER</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>"I stopped checking the drain every morning."</h2>
            <p className="section-lede">
              This member came in tired of watching the brush, the drain, and the mirror for proof that things were getting worse. The goal was simple: less hiding, more confidence.
            </p>
            <button className="btn btn-ghost btn-lg" onClick={() => onStart('hair')}>Start your hair assessment →</button>
          </div>
        </div>
      </div>

      {/* VIDEO BLOCK — weight spotlight */}
      <div className="section">
        <div className="outcome-spotlight">
          <div>
            <div className="section-eyebrow">— A MEMBER</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>"The number changed, but so did everything around it."</h2>
            <p className="section-lede">
              Weight was the loudest signal, not the whole story. This member came in tired of doing the math alone and started feeling the difference in appetite, energy, and the way her body finally responded.
            </p>
            <button className="btn btn-ghost btn-lg" onClick={() => onStart('weight')}>Start your weight assessment →</button>
          </div>
          <VideoPlaceholder aspect="4/5" src={HOME_SPOTLIGHT_VIDEOS.weight} />
        </div>
      </div>

      {/* VIDEO BLOCK — libido spotlight */}
      <div className="section">
        <div className="outcome-spotlight">
          <VideoPlaceholder aspect="4/5" src={HOME_SPOTLIGHT_VIDEOS.libido} />
          <div>
            <div className="section-eyebrow">— A MEMBER</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>"I remembered what wanting felt like."</h2>
            <p className="section-lede">
              Desire does not always disappear loudly. This member had stopped expecting it to come back, then noticed the quiet return first — more ease, more signal, less performing.
            </p>
            <button className="btn btn-ghost btn-lg" onClick={() => onStart('libido')}>Start your libido assessment →</button>
          </div>
        </div>
      </div>
    </>
  );
};

const PageCategories = ({ onStart, onNav }) => (
  <>
    <PageHeader eyebrow="— WHAT WE HELP WITH" h={<>The areas of life that <em>increase performance.</em></>} sub="The assessment walks you through everything. Your recommendation is built around what you actually tell us — sometimes one peptide, sometimes a stack of two or three. You see the total before you confirm." />
    <div className="tracks tracks-10 tracks-page">
      {CATEGORIES.map((c) => (
        <a key={c.id} className="track" href={`/${c.id}`} onClick={(e) => { e.preventDefault(); onNav(`area/${c.id}`); }}>
          <h3>{c.name}</h3>
          <p>{c.blurb}</p>
          <span className="track-tag">Learn more <span>→</span></span>
        </a>
      ))}
    </div>
    <GoodHands />
  </>
);

const PagePhilosophy = ({ onStart }) => (
  <>
    <div className="section section-deep" style={{ maxWidth: 'none', margin: 0 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '0 32px' }}>
        <div className="manifesto">
          <div>
            <div className="section-eyebrow" style={{ color: 'rgba(244,237,228,0.6)' }}>— PHILOSOPHY</div>
            <h2 className="serif" style={{ color: 'var(--bg)' }}>Perform as <em style={{ color: 'var(--accent-soft)' }}>yourself.</em></h2>
            <p className="section-lede" style={{ color: 'rgba(244,237,228,0.7)' }}>
              You don't need to train for a triathlon. You need to feel awake at 3pm, sharp in a meeting, recovered by morning, present with your kids, hungry for things that used to feel automatic. That's performance. We help you get there.
            </p>
            <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take the assessment</button>
          </div>
          <div className="philosophy-video">
            <VideoPlaceholder aspect="4/5" src={SITE_VIDEOS.philosophyFounder} />
          </div>
        </div>
        <div className="philo-rows">
          {[
            { n: '01', h: 'Twice the potency.', p: "Most under-response is under-dosing. We start where others stop." },
            { n: '02', h: 'Outcomes, not ingredients.', p: "We don't sell you a compound. We sell you a result you can feel — sleep deeper, think clearer, recover faster, want again." },
            { n: '03', h: 'Listen first, dose second.', p: "Your assessment shapes your stack. One vial, two, three — only what your answers actually call for." },
            { n: '04', h: "You're not too much.", p: "You don't need to negotiate to be heard. Tell us what's real and we'll meet you there." },
          ].map(it => (
            <div key={it.n} className="manifesto-row" style={{ borderColor: 'rgba(244,237,228,0.2)' }}>
              <span className="manifesto-num" style={{ color: 'rgba(244,237,228,0.5)' }}>{it.n}</span>
              <div>
                <h3 style={{ color: 'var(--bg)' }}>{it.h}</h3>
                <p style={{ color: 'rgba(244,237,228,0.7)' }}>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* SECTION 2 — WHAT WE MEAN BY POTENCY */}
    <div className="section section-philo-light">
      <div className="philo-block">
        <div className="philo-block-eyebrow mono">— SECTION TWO</div>
        <h2 className="serif">Potency is not a <em>marketing word.</em></h2>
        <p className="section-lede">
          When the standard dose stops being enough, most people stay at the standard dose anyway — because that's what's on the shelf. We compound to higher concentrations on purpose. The body doesn't grade on a curve; it either responds or it doesn't. So we start where the response actually lives, then taper down once you've felt it.
        </p>
        <div className="philo-pillars">
          <div className="philo-pillar">
            <div className="philo-pillar-num">2×</div>
            <div className="philo-pillar-h">Concentration</div>
            <p>Twice the active per mL of typical retail compounding. Same volume in the syringe; meaningfully more peptide.</p>
          </div>
          <div className="philo-pillar">
            <div className="philo-pillar-num">¼</div>
            <div className="philo-pillar-h">Settling time</div>
            <p>If the plan is not matching what you need, the next step should be clear before you feel stuck.</p>
          </div>
          <div className="philo-pillar">
            <div className="philo-pillar-num">1:1</div>
            <div className="philo-pillar-h">Match</div>
            <p>The assessment recommends what your answers call for. Sometimes that's one vial. Sometimes three. Never more than your body asked for.</p>
          </div>
        </div>
      </div>
    </div>

    {/* SECTION 3 — WHO THIS IS FOR */}
    <div className="section section-philo-quote">
      <div className="philo-block">
        <div className="philo-block-eyebrow mono">— SECTION THREE</div>
        <h2 className="serif">For people who are <em>done shrinking</em> the question.</h2>
        <p className="section-lede">
          You've already tried the obvious things. Better sleep. Cleaner food. The supplement aisle. Maybe an appointment that gave you nowhere else to go from there. We are not interested in convincing you that you don't have a problem. You're here because you do — and because the version of you that handles it is still in there. Our job is to bring that version forward.
        </p>
        <div className="philo-tenets">
          <div className="philo-tenet">
            <h3 className="serif">We assume you're paying attention.</h3>
            <p>You don't need to be talked down to about your own body. The intake is long because the answers matter, not because we're padding it.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">We don't reward symptom suppression.</h3>
            <p>If something is wrong, we want to know what's underneath it. A peptide that hides the signal isn't doing you any favors.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">We don't treat performance as vanity.</h3>
            <p>Sleeping through the night is performance. Recovering from a hard stretch is performance. Wanting your partner again is performance. None of those are extra.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">We make the off-ramp obvious.</h3>
            <p>Cancel any time, pause any time, change your stack at any time. The membership only earns its keep if you're still feeling something worth paying for.</p>
          </div>
        </div>
      </div>
    </div>

    {/* SECTION 4 — HOW THIS IS DIFFERENT */}
    <div className="section section-deep" style={{ maxWidth: 'none', margin: 0 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 32px' }}>
        <div className="philo-block-eyebrow mono" style={{ color: 'var(--accent-soft)' }}>— SECTION FOUR</div>
        <h2 className="serif" style={{ color: 'var(--bg)' }}>The difference between us and the <em style={{ color: 'var(--accent-soft)' }}>everywhere else.</em></h2>
        <div className="philo-compare">
          <div className="philo-col">
            <div className="philo-col-h mono">— EVERYWHERE ELSE</div>
            <ul>
              <li>Standard dose, regardless of body weight, stress load, or response.</li>
              <li>A rushed answer as the end of the conversation.</li>
              <li>Subscription that's hard to leave once you realize it does not fit.</li>
              <li>A provider you'll never see again after the first appointment.</li>
              <li>Marketing that pretends one peptide solves everything.</li>
            </ul>
          </div>
          <div className="philo-col philo-col-us">
            <div className="philo-col-h mono" style={{ color: 'var(--accent-soft)' }}>— AMAZINGXO</div>
            <ul>
              <li>Twice the potency, sized to your assessment, adjusted as you go.</li>
              <li>"Normal" isn't the goal — feeling like yourself again is.</li>
              <li>Cancel any time. Pause any time. No phone-tree exit.</li>
              <li>A provider path you can use by message or video when something feels off.</li>
              <li>One to three peptides at a time, only what your answers asked for.</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    {/* SECTION 5 — HOW WE WRITE THE ASSESSMENT */}
    <div className="section section-philo-light">
      <div className="philo-block">
        <div className="philo-block-eyebrow mono">— SECTION FIVE</div>
        <h2 className="serif">The assessment is the <em>real product.</em></h2>
        <p className="section-lede">
          Most telehealth intakes are ten checkboxes wide and a mile shallow. Ours takes about twelve minutes and asks the questions a friend who happened to be a clinician would ask: when did this start, what's the texture of the bad days, what have you already tried, what would "better" actually feel like. We wrote every question ourselves, and we re-write them every quarter as members tell us what landed and what didn't.
        </p>
        <div className="philo-pillars">
          <div className="philo-pillar">
            <div className="philo-pillar-num">42</div>
            <div className="philo-pillar-h">Questions we ask</div>
            <p>Most are short. A few are open-ended on purpose — those are usually the ones that change the recommendation.</p>
          </div>
          <div className="philo-pillar">
            <div className="philo-pillar-num">12m</div>
            <div className="philo-pillar-h">Time required</div>
            <p>Long enough to be useful, short enough to do in one sitting. You can save and come back.</p>
          </div>
          <div className="philo-pillar">
            <div className="philo-pillar-num">100%</div>
            <div className="philo-pillar-h">Read by humans</div>
            <p>Every assessment is reviewed before a vial leaves the pharmacy. We do not auto-ship from a form.</p>
          </div>
        </div>
      </div>
    </div>

    {/* SECTION 6 — WHAT WE WON'T DO */}
    <div className="section section-philo-quote">
      <div className="philo-block">
        <div className="philo-block-eyebrow mono">— SECTION SIX</div>
        <h2 className="serif">There are things we <em>won't sell you.</em></h2>
        <p className="section-lede">
          A short list, kept short on purpose. If a member asks for any of these, we explain why we don't carry them and where they could go instead. Saying no is part of the job.
        </p>
        <div className="philo-tenets">
          <div className="philo-tenet">
            <h3 className="serif">Anabolic steroids.</h3>
            <p>Different category, different risk profile, different conversation. We're not the right place for it.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">Stacks designed by influencers.</h3>
            <p>If a six-peptide rotation goes viral, we still won't ship it on request. Your assessment writes your stack — not a screenshot.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">Anything we can't compound at twice potency.</h3>
            <p>If we can't make the dose meaningful, we don't carry it. Better to recommend nothing than to ship a placebo at retail price.</p>
          </div>
          <div className="philo-tenet">
            <h3 className="serif">Indefinite escalation.</h3>
            <p>If three vials are not helping you feel a difference, we don't add a fourth just to keep adding. We pause, re-assess, and look at what we missed.</p>
          </div>
        </div>
      </div>
    </div>

    {/* SECTION 7 — THE LONG VIEW */}
    <div className="section section-deep" style={{ maxWidth: 'none', margin: 0 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '96px 32px' }}>
        <div className="philo-block-eyebrow mono" style={{ color: 'var(--accent-soft)' }}>— SECTION SEVEN</div>
        <h2 className="serif" style={{ color: 'var(--bg)', maxWidth: 900 }}>What we want this to look like <em style={{ color: 'var(--accent-soft)' }}>as it grows.</em></h2>
        <div className="philo-longview">
          <div className="philo-longview-item">
            <div className="philo-longview-num mono" style={{ color: 'var(--accent-soft)' }}>2026</div>
            <p style={{ color: 'rgba(244,237,228,0.78)' }}>The peptide membership most members start with. Ten areas, sourced from licensed compounding pharmacies in Florida, shipped at twice the standard potency. The version of the company you're looking at right now.</p>
          </div>
          <div className="philo-longview-item">
            <div className="philo-longview-num mono" style={{ color: 'var(--accent-soft)' }}>2027</div>
            <p style={{ color: 'rgba(244,237,228,0.78)' }}>Same membership, with better memory — the assessment becomes a living record, and each review can pull from what you already told us. Member-led research on what actually moved the needle, by area.</p>
          </div>
          <div className="philo-longview-item">
            <div className="philo-longview-num mono" style={{ color: 'var(--accent-soft)' }}>2028</div>
            <p style={{ color: 'rgba(244,237,228,0.78)' }}>A small affiliate network of independent providers running their own practices on our infrastructure — same potency standard, same assessment, same off-ramp. We stay the wholesaler and the assessment author; they stay the relationship.</p>
          </div>
          <div className="philo-longview-item">
            <div className="philo-longview-num mono" style={{ color: 'var(--accent-soft)' }}>2031</div>
            <p style={{ color: 'rgba(244,237,228,0.78)' }}>A rushed answer stops being the end of the conversation for the people we reach. That's the whole job. If we get there, we'll have done it.</p>
          </div>
        </div>
        <div style={{ marginTop: 64, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take the assessment</button>
        </div>
      </div>
    </div>

    <GoodHands />
  </>
);

const BOOK_CHAPTERS = [
  { num: '01', title: 'The Undertreated Generation', subtitle: 'How people were handed the minimum dose and told to wait.' },
  { num: '02', title: 'What Peptides Actually Do', subtitle: 'The science behind peptides, explained for real people.' },
  { num: '03', title: "The Weight That Wouldn't Budge", subtitle: 'Stories from members who tried everything before finding real support.' },
  { num: '04', title: 'Getting Your Drive Back', subtitle: 'Libido, energy, confidence, and the things that slip away quietly.' },
  { num: '05', title: 'The Menopause Chapter Nobody Wrote', subtitle: 'Sleep, mood, body changes, and the women who refused to just live with it.' },
  { num: '06', title: 'Mirror, Mirror', subtitle: 'Hair, skin, and the visible changes that make people feel like themselves again.' },
  { num: '07', title: 'Why 2x Changes Everything', subtitle: 'Why the lowest dose was never the answer for people who needed movement.' },
  { num: '08', title: 'The AmazingXO Peptide', subtitle: 'How AmazingXO built a system for people who were told to wait.' },
];

const BOOK_AUDIENCES = [
  { label: 'The undertreated', desc: 'You were given the minimum and told to wait, but nothing changed.' },
  { label: 'The dismissed', desc: 'You were told your symptoms were normal, aging, or stress.' },
  { label: 'The seekers', desc: 'You know something better exists and want the language for it.' },
  { label: 'The ready', desc: 'You are done accepting a version of yourself that feels smaller than it should.' },
];

const PageBook = ({ onStart, onBuyBook }) => (
  <>
    <div className="book-page-hero">
      <div className="book-page-inner">
        <div className="book-page-cover">
          <div>
            <div className="book-page-mark">AmazingXO · digital edition</div>
          </div>
          <div className="book-page-title">Never <em>Under-<br/>treated.</em></div>
          <div className="book-page-mark">why the lowest dose was never the answer</div>
        </div>
        <div className="book-page-content">
          <div className="section-eyebrow">— THE BOOK · $17 · DIGITAL</div>
          <h1 className="serif book-page-h">Never <em>Undertreated.</em></h1>
          <p className="section-lede">The peptide treatment landscape is confusing by design. This book breaks it down: what potency means, why people stay undertreated, and what changes when your care is built around the life you want back.</p>
          <ul className="price-list" style={{ marginBottom: 32 }}>
            <li>Eight chapters built around the AmazingXO treatment thesis.</li>
            <li>A paid digital copy, available after checkout.</li>
            <li>No public reader access before purchase.</li>
          </ul>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="btn btn-primary btn-lg" onClick={onBuyBook}>Buy the book · $17</button>
          </div>
        </div>
      </div>
    </div>

    <div className="section">
      <div className="section-eyebrow">— INSIDE THE BOOK</div>
      <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)' }}>Eight chapters. One <em>clear argument.</em></h2>
      <p className="section-lede">From the undertreated generation to the AmazingXO protocol, the book gives language to what people have been feeling but could not name.</p>
      <div className="chapters-grid">
        {BOOK_CHAPTERS.map((chapter) => (
          <div key={chapter.num} className="chapter-card">
            <div className="mono" style={{ color: 'var(--ink-mute)', fontSize: 11, letterSpacing: '0.15em' }}>CH·{chapter.num}</div>
            <h3 className="serif">{chapter.title}</h3>
            <p>{chapter.subtitle}</p>
          </div>
        ))}
      </div>
    </div>

    <div className="section">
      <div className="section-eyebrow">— WHO IT'S FOR</div>
      <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)' }}>For people who are done being told to <em>wait.</em></h2>
      <div className="chapters-grid" style={{ marginTop: 32 }}>
        {BOOK_AUDIENCES.map((item) => (
          <div key={item.label} className="chapter-card">
            <h3 className="serif">{item.label}</h3>
            <p>{item.desc}</p>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 36 }}>
        <button className="btn btn-primary btn-lg" onClick={onBuyBook}>Buy the book · $17 →</button>
      </div>
    </div>
  </>
);

const PageBookSuccess = () => (
  <>
    <PageHeader
      eyebrow="— BOOK ORDER"
      h={<>Your copy is <em>ready.</em></>}
      sub="Check your email for access. The reader is only available after purchase."
    />
    <div className="section" style={{ paddingTop: 0 }}>
      <div className="chapter-card" style={{ maxWidth: 720 }}>
        <h3 className="serif">Never Undertreated</h3>
        <p>Your purchase is tied to the email used at checkout. If the email is delayed, contact hello@amazingxo.com.</p>
      </div>
    </div>
  </>
);

const PageFAQ = ({ onStart }) => (
  <>
    <PageHeader eyebrow="— FAQ" h={<>Questions, <em>asked plainly.</em></>} sub="If yours isn't here, write to us — every member of the team reads inbound mail." />
    <div className="section" style={{ paddingTop: 0 }}>
      <FAQList items={FAQ_ITEMS} />
      <div style={{ marginTop: 56, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take the assessment</button>
      </div>
    </div>
  </>
);

// ── Shared sub-components ──────────────────────────────────────────────────

const PageHeader = ({ eyebrow, h, sub }) => (
  <div className="section page-header" style={{ paddingTop: 80, paddingBottom: 32 }}>
    <div className="section-eyebrow">{eyebrow}</div>
    <h2 className="serif page-h">{h}</h2>
    {sub && <p className="section-lede">{sub}</p>}
  </div>
);

const PriceCard = ({ onStart }) => (
  <div className="price-card">
    <div>
      <div className="mono" style={{ fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--ink-mute)', marginBottom: 8 }}>Membership</div>
      <div className="price-amount">
        <span className="num">$299</span>
        <span className="unit">/MONTH · STARTING MEMBERSHIP</span>
      </div>
    </div>
    <ul className="price-list">
      <li>Your peptide, compounded at twice the potency.</li>
      <li>Cold-chain shipping in discreet packaging.</li>
      <li>Monthly check-ins. Dose adjustments any time.</li>
      <li>Member library, member-only sessions, plain answers.</li>
      <li>Switch areas, add an area, pause, resume — no fees.</li>
    </ul>
    <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 16, fontSize: 13, color: 'var(--ink-mute)' }}>
      Some peptides cost more than the base membership. Your assessment shows the total before you confirm. Cancel any time.
    </div>
    <button className="btn btn-primary btn-lg" style={{ alignSelf: 'flex-start' }} onClick={() => onStart()}>Take assessment →</button>
  </div>
);

const FAQList = ({ items }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq-list">
      {items.map((it, i) => (
        <div key={i} className="faq-row" onClick={() => setOpen(open === i ? -1 : i)}>
          <div className="faq-row-q serif">
            {it.q}
            <span className="faq-toggle">{open === i ? '—' : '+'}</span>
          </div>
          {open === i && <div className="faq-row-a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
};

// ── Top-level Marketing router ─────────────────────────────────────────────

const Marketing = ({ tweaks, onStart, onBuyBook, page = 'home', areaSlug, onNav }) => {
  const ctx = { tweaks, onStart, onBuyBook, onNav };
  return (
    <div className="shell">
      <MarketingNav page={page} onNav={onNav} onStart={() => onStart()} onHero={page === 'home'} />
      {page === 'home'       && <PageHome {...ctx} />}
      {page === 'categories' && <PageCategories {...ctx} />}
      {page === 'philosophy' && <PagePhilosophy {...ctx} />}
      {page === 'care'       && <PageCare {...ctx} />}
      {page === 'catalog'    && <PageCatalog {...ctx} />}
      {page === 'practice'   && <PagePractice {...ctx} />}
      {page === 'book'       && <PageBook {...ctx} />}
      {page === 'book-success' && <PageBookSuccess {...ctx} />}
      {page === 'faq'        && <PageFAQ {...ctx} />}
      <MarketingFooter onNav={onNav} onStart={onStart} />
    </div>
  );
};

Object.assign(window, { Marketing, MarketingNav, MarketingFooter, CATEGORIES, TRUST_ITEMS, NAV_LINKS, VideoPlaceholder, PDP_VIDEOS_BY_AREA });
