// New marketing pages — care, catalog, peptide PDP, practice (nurse affiliates).
// All read CATEGORIES from window. PDP uses the Lemme/Gruns DTC structure:
// gallery → title/rating → benefits → choice ladder → benefits strip → outcomes grid →
// how it works → pairs well with → "what we leave out" → FAQ → reviews → CTA.

// ─── PEPTIDE CATALOG (placeholder — pharmacy data plugs in here) ─────────────

const PEPTIDES = [
  // weight
  { slug: 'tirzepatide',   area: 'weight',       name: 'Tirzepatide',         tagline: 'Hunger noise quiets. Scale moves. Energy returns.', priceCents: null, rating: 4.9, reviews: 412, pairs: ['semaglutide'], sourceStatus: 'preferred' },
  { slug: 'semaglutide',   area: 'weight',       name: 'Semaglutide',         tagline: 'For when calorie math stops working.', priceCents: null, rating: 4.8, reviews: 387, pairs: ['tirzepatide'], sourceStatus: 'preferred' },
  { slug: 'retatrutide',   area: 'weight',       name: 'Retatrutide',         tagline: 'Triple-path metabolic support for advanced plans.', priceCents: null, rating: 4.7, reviews: 96, pairs: ['tirzepatide'], sourceStatus: 'manual' },
  // libido
  { slug: 'pt-141',        area: 'libido',       name: 'PT-141',              tagline: 'For desire that feels reachable again.', priceCents: null, rating: 4.7, reviews: 268, pairs: ['kisspeptin'], sourceStatus: 'partner' },
  { slug: 'kisspeptin',    area: 'libido',       name: 'Kisspeptin-10',       tagline: 'For arousal that doesn\'t cooperate anymore.', priceCents: null, rating: 4.5, reviews: 119, pairs: ['pt-141'], sourceStatus: 'manual' },
  { slug: 'hcg',           area: 'libido',       name: 'HCG',                 tagline: 'Hormone support when the foundation needs attention.', priceCents: null, rating: 4.6, reviews: 93, pairs: ['pt-141'], sourceStatus: 'manual' },
  // menopause
  { slug: 'estradiol',     area: 'menopause',    name: 'Estradiol',           tagline: 'Hormone support for the changes that stack together.', priceCents: null, rating: 4.8, reviews: 141, pairs: ['progesterone'], sourceStatus: 'manual' },
  { slug: 'progesterone',  area: 'menopause',    name: 'Progesterone',        tagline: 'Support for rest, balance, and the menopause transition.', priceCents: null, rating: 4.7, reviews: 132, pairs: ['estradiol'], sourceStatus: 'manual' },
  { slug: 'liraglutide',   area: 'menopause',    name: 'Liraglutide',         tagline: 'Metabolic support when body changes need more context.', priceCents: null, rating: 4.6, reviews: 98, pairs: ['estradiol'], sourceStatus: 'manual' },
  // hair
  { slug: 'ptd-dbm',       area: 'hair',         name: 'PTD-DBM',             tagline: 'For hair support plans that need a targeted signal.', priceCents: null, rating: 4.6, reviews: 88, pairs: ['zinc-thymulin'], sourceStatus: 'manual' },
  { slug: 'zinc-thymulin', area: 'hair',         name: 'Zinc Thymulin',       tagline: 'Scalp and follicle support for a stronger hair plan.', priceCents: null, rating: 4.5, reviews: 79, pairs: ['ptd-dbm'], sourceStatus: 'manual' },
  { slug: 'acetyl-tetrapeptide-3', area: 'hair', name: 'Acetyl Tetrapeptide-3', tagline: 'A hair-focused peptide for visible density support.', priceCents: null, rating: 4.5, reviews: 71, pairs: ['zinc-thymulin'], sourceStatus: 'manual' },
  // skin
  { slug: 'ghk-cu',        area: 'skin',         name: 'GHK-Cu',              tagline: 'Tone, texture, firmness. Quietly supported.', priceCents: null, rating: 4.7, reviews: 218, pairs: ['kpv'], sourceStatus: 'partner' },
  { slug: 'kpv',           area: 'skin',         name: 'KPV',                 tagline: 'Calm, barrier, and skin comfort support.', priceCents: null, rating: 4.6, reviews: 87, pairs: ['ghk-cu'], sourceStatus: 'partner' },
  { slug: 'epitalon',      area: 'skin',         name: 'Epitalon',            tagline: 'Skin that looks like yours, the version you remember.', priceCents: null, rating: 4.8, reviews: 289, pairs: ['ghk-cu'], sourceStatus: 'partner' },
  // sleep
  { slug: 'selank',        area: 'sleep',        name: 'Selank',              tagline: 'For a nervous system that needs to settle.', priceCents: null, rating: 4.6, reviews: 138, pairs: ['melatonin'], sourceStatus: 'partner' },
  { slug: 'melatonin-injectable', area: 'sleep', name: 'Melatonin',           tagline: 'Sleep signal support when timing is the issue.', priceCents: null, rating: 4.5, reviews: 82, pairs: ['selank'], sourceStatus: 'manual' },
  { slug: 'crh-analogue',  area: 'sleep',        name: 'CRH Analogue',        tagline: 'For complex sleep patterns that keep the body on alert.', priceCents: null, rating: 4.4, reviews: 54, pairs: ['melatonin-injectable'], sourceStatus: 'manual' },
  // energy
  { slug: 'nad-plus',      area: 'energy',       name: 'NAD+',                tagline: 'For a tank that never feels steady.', priceCents: null, rating: 4.8, reviews: 412, pairs: ['mots-c'], sourceStatus: 'preferred' },
  { slug: 'mots-c',        area: 'energy',       name: 'MOTS-c',              tagline: 'Mitochondrial support for the daily crash.', priceCents: null, rating: 4.7, reviews: 174, pairs: ['nad-plus'], sourceStatus: 'partner' },
  { slug: 'ss-31',         area: 'energy',       name: 'SS-31',               tagline: 'Deep cellular energy support for advanced plans.', priceCents: null, rating: 4.6, reviews: 116, pairs: ['nad-plus'], sourceStatus: 'partner' },
  // healing
  { slug: 'bpc-157',       area: 'healing',      name: 'BPC-157',             tagline: 'For tissue, tendon, and recovery support.', priceCents: null, rating: 4.9, reviews: 567, pairs: ['tb-500'], sourceStatus: 'partner' },
  { slug: 'tb-500',        area: 'healing',      name: 'TB-500',              tagline: 'Wake up a step ahead, not a step behind.', priceCents: null, rating: 4.8, reviews: 245, pairs: ['bpc-157'], sourceStatus: 'partner' },
  { slug: 'thymosin-alpha-1', area: 'healing',   name: 'Thymosin Alpha-1',    tagline: 'Immune and repair support for advanced recovery plans.', priceCents: null, rating: 4.6, reviews: 107, pairs: ['bpc-157'], sourceStatus: 'manual' },
  // cognition
  { slug: 'semax',         area: 'cognition',    name: 'Semax',               tagline: 'Focus that holds. Names that come back.', priceCents: null, rating: 4.7, reviews: 192, pairs: ['dihexa'], sourceStatus: 'partner' },
  { slug: 'n-acetyl-semax-amidate', area: 'cognition', name: 'N-Acetyl Semax Amidate', tagline: 'A sharper cognitive support path when focus needs help.', priceCents: null, rating: 4.6, reviews: 129, pairs: ['semax'], sourceStatus: 'partner' },
  { slug: 'dihexa',        area: 'cognition',    name: 'Dihexa',              tagline: 'Advanced cognitive support when clarity feels harder to reach.', priceCents: null, rating: 4.5, reviews: 93, pairs: ['semax'], sourceStatus: 'partner' },
  // stress
  { slug: 'oxytocin',      area: 'stress',       name: 'Oxytocin',            tagline: 'Connection, calm, and emotional ease.', priceCents: null, rating: 4.6, reviews: 104, pairs: ['n-acetyl-selank-amidate'], sourceStatus: 'partner' },
  { slug: 'n-acetyl-selank-amidate', area: 'stress', name: 'N-Acetyl Selank Amidate', tagline: 'Stress support without flattening your day.', priceCents: null, rating: 4.6, reviews: 118, pairs: ['oxytocin'], sourceStatus: 'partner' },
  { slug: 'acth-1-24',     area: 'stress',       name: 'ACTH 1-24',           tagline: 'Stress-axis support when the body keeps staying switched on.', priceCents: null, rating: 4.4, reviews: 61, pairs: ['n-acetyl-selank-amidate'], sourceStatus: 'manual' },
];

window.PEPTIDES = PEPTIDES;
const MEMBERSHIP_BASE_PRICE = 299;
const MAX_STACK_SAVINGS = 20;
const priceDollars = (cents) => Math.round((cents || 0) / 100);
const hasCurrentPrice = (p) => typeof p?.priceCents === 'number' && p.priceCents > 0;
const membershipPrice = (p) => {
  if (!hasCurrentPrice(p)) return null;
  return Math.max(priceDollars(p.priceCents), MEMBERSHIP_BASE_PRICE);
};
const membershipExtra = (p) => {
  if (!hasCurrentPrice(p)) return null;
  return Math.max(0, priceDollars(p.priceCents) - MEMBERSHIP_BASE_PRICE);
};
const membershipLabel = (p) => {
  const extra = membershipExtra(p);
  if (extra === null) return 'Starts at $299/mo';
  return extra > 0 ? `$299 + $${extra}/mo` : '$299/mo';
};
const stackTotal = (items, savings = MAX_STACK_SAVINGS, slotCount = items.length) => {
  if (!items.length) return null;
  const hasAllCurrentPrices = items.every(item => membershipPrice(item) !== null);
  const pricedSubtotal = hasAllCurrentPrices
    ? items.reduce((sum, item) => sum + membershipPrice(item), 0)
    : items.length * MEMBERSHIP_BASE_PRICE;
  const missingSlots = Math.max(0, slotCount - items.length);
  const subtotal = pricedSubtotal + (missingSlots * MEMBERSHIP_BASE_PRICE);
  return Math.max(0, subtotal - savings);
};
const stackLabel = (items, slotCount = items.length) => {
  const total = stackTotal(items, MAX_STACK_SAVINGS, slotCount);
  if (total === null) return 'Confirmed before checkout';
  const hasAllCurrentPrices = items.length >= slotCount && items.every(item => membershipPrice(item) !== null);
  return `${hasAllCurrentPrices ? '' : 'From '}$${total}`;
};
const priceUnit = (label) => label.startsWith('$') ? <span>/mo</span> : null;
const priceNumber = (label) => Number((label || '').match(/\$([\d]+)/)?.[1] || MEMBERSHIP_BASE_PRICE);
const peptideBySlug = (slug) => PEPTIDES.find(p => p.slug === slug);
const peptidesByArea = (area) => PEPTIDES.filter(p => p.area === area);
const peptideMotionFor = (slug = '') => {
  const sum = slug.split('').reduce((total, char) => total + char.charCodeAt(0), 0);
  return sum % 2 === 0 ? 'wave' : 'particles';
};
const usePeptidePricing = () => {
  const [, setVersion] = React.useState(0);
  React.useEffect(() => {
    const refresh = () => setVersion(v => v + 1);
    window.addEventListener('axo:peptide-prices', refresh);
    return () => window.removeEventListener('axo:peptide-prices', refresh);
  }, []);
};
const applyPeptidePricing = (data) => {
  const prices = data?.prices || {};
  PEPTIDES.forEach((p) => {
    const next = prices[p.slug];
    if (typeof next?.productPriceCents === 'number' && next.productPriceCents > 0) {
      p.priceCents = next.productPriceCents;
      p.pricingSource = next.sourceName || 'current catalog';
      p.pricingUpdatedAt = next.sourceUpdatedAt || null;
    }
  });
  window.dispatchEvent(new Event('axo:peptide-prices'));
};
if (!window.__axoPeptidePricingPromise) {
  window.__axoPeptidePricingPromise = fetch('/api/site/peptide-prices')
    .then(res => res.ok ? res.json() : null)
    .then(applyPeptidePricing)
    .catch(() => null);
}
Object.assign(window, { MEMBERSHIP_BASE_PRICE, MAX_STACK_SAVINGS, membershipPrice, membershipExtra, membershipLabel, stackTotal, stackLabel });

// ─── CARE (provider on call) ─────────────────────────────────────────────────

const PageCare = ({ onStart, onNav }) => {
  const CARE_TIERS = {
    monthly: {
      label: 'Monthly',
      price: 129,
      title: 'One provider care room',
      sub: 'A monthly care room for check-ins and focused questions.',
      cta: 'Add monthly provider care room',
      bullets: [
        'One provider care room per month.',
        'Submit your question before the room opens.',
        'Hear provider-led answers in the care room.',
        'Best for light check-ins and general guidance.',
      ],
    },
    twice: {
      label: 'Twice monthly',
      price: 199,
      title: 'Two provider care rooms',
      sub: 'Two monthly care rooms for members with more moving parts.',
      cta: 'Add two provider care rooms',
      bullets: [
        'Two provider care rooms per month.',
        'Use the second room when you are starting, adjusting, or stacking.',
        'Submit questions before each eligible session.',
        'Best when you need more frequent guidance without a private call.',
      ],
    },
    private: {
      label: '1:1 access',
      price: 299,
      title: 'Provider care rooms plus 1:1 access',
      sub: 'For members who need a private support path in addition to care rooms.',
      cta: 'Add group + 1:1 access',
      bullets: [
        'Provider care room access.',
        'Private 1:1 call access when the question should not be handled in group.',
        'Audio-first private call path with optional video.',
        'Does not require buying peptides.',
      ],
    },
  };
  const [tier, setTier] = React.useState('twice');
  const selected = CARE_TIERS[tier];
  const beginCareAccess = () => {
    const careTier = tier === 'monthly' ? 'group_monthly' : tier === 'twice' ? 'group_twice_monthly' : 'private_access';
    window.sessionStorage?.setItem('axo_care_tier', careTier);
    window.sessionStorage?.setItem('axo_care_group_calls', tier === 'monthly' ? '1' : '2');
    window.sessionStorage?.setItem('axo_care_private_access', tier === 'private' ? '1' : '0');
    onStart();
  };
  return (
  <>
    <div className="section page-header" style={{ paddingTop: 80, paddingBottom: 32 }}>
      <div className="section-eyebrow">— PROVIDER ON CALL</div>
      <h2 className="serif page-h">Provider-led care rooms.</h2>
      <p className="section-lede">For the questions you do not want to guess through alone. Join a provider care room once or twice a month, or add 1:1 access when the question needs a private room.</p>
    </div>

    <div className="section" style={{ paddingTop: 0 }}>
      <div className="care-grid">
        <VideoPlaceholder aspect="4/5" src={SITE_VIDEOS.providerOnCall} objectPosition="center top" />
        <div>
          <div className="care-price">
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>SUBSCRIPTION · ADD-ON</div>

            <div className="care-tiers">
              {Object.entries(CARE_TIERS).map(([id, option]) => (
                <button
                  key={id}
                  className={`care-tier ${tier === id ? 'is-active' : ''}`}
                  onClick={() => setTier(id)}
                >
                  <div className="care-tier-name mono">— {option.label.toUpperCase()}</div>
                  <div className="care-tier-price">${option.price}<span>/mo</span></div>
                  <div className="care-tier-sub">{option.title}</div>
                  {id === 'twice' && <span className="care-tier-badge">RECOMMENDED</span>}
                </button>
              ))}
            </div>

            <ul className="price-list">
              {selected.bullets.map((item) => <li key={item}>{item}</li>)}
              <li>Cancel any time. Unused group sessions do not roll over.</li>
            </ul>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
              <button className="btn btn-primary btn-lg" onClick={beginCareAccess}>{selected.cta} · ${selected.price}/mo</button>
              <button className="btn btn-soft btn-lg" onClick={() => onNav('office-hours')}>Open office hours →</button>
            </div>
            <div style={{ borderTop: '1px solid var(--rule)', paddingTop: 16, fontSize: 13, color: 'var(--ink-mute)', marginTop: 8 }}>
              Provider access is separate from peptide purchase. Buying peptides requires ID, video verification, and provider approval; it does not automatically include a nurse or provider call. Calls are not for emergencies; if you're in crisis call 911 or your local equivalent.
              <br />
              <a href="/practice-with-us" onClick={(e) => { e.preventDefault(); onNav('practice'); }} style={{ color: 'var(--accent)', cursor: 'pointer', textDecoration: 'underline', textUnderlineOffset: 3, marginTop: 8, display: 'inline-block' }}>Are you a provider? →</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div className="section" style={{ paddingTop: 0 }}>
      <div className="care-office">
        <div>
          <div className="section-eyebrow">— OFFICE HOURS</div>
          <h2 className="serif">Provider-led rooms, <em>built around focused questions.</em></h2>
        </div>
        <div className="care-office-grid">
          <div className="care-office-card">
            <div className="mono">01</div>
            <h3>Share your question first.</h3>
            <p>Members submit one question before the room opens so the provider can lead the session clearly.</p>
          </div>
          <div className="care-office-card">
            <div className="mono">02</div>
            <h3>The provider leads.</h3>
            <p>The answer can happen in the care room, as a posted provider response, or as private follow-up when the plan includes it.</p>
          </div>
          <div className="care-office-card">
            <div className="mono">03</div>
            <h3>Upload records or labs.</h3>
            <p>Members can share files before or during the room when they want the provider to review added context.</p>
          </div>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => onNav('office-hours')}>Go to office hours →</button>
      </div>
    </div>

    <div className="section">
      <div className="section-eyebrow">— WHAT YOU CAN ASK</div>
      <h2 className="serif">The things you'd <em>usually</em> Google.</h2>
      <div className="care-asks">
        {[
          'Why am I feeling this side effect — is it normal?',
          'Should I move my dose to mornings or evenings?',
          'Can I stack this with what I\'m already taking?',
          'What does it mean if I missed a dose?',
          'Why hasn\'t the scale moved yet?',
          'I had a hard stretch — am I supposed to push through?',
          'My partner is asking questions I can\'t answer.',
          'When can I expect to feel something?',
        ].map((q, i) => (
          <div key={i} className="care-ask">
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-mute)' }}>Q · {String(i + 1).padStart(2, '0')}</div>
            <p>"{q}"</p>
          </div>
        ))}
      </div>
    </div>

    <div className="section section-deep" style={{ maxWidth: 'none', margin: 0 }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '64px 32px' }}>
        <div className="care-cta">
          <div>
            <div className="section-eyebrow" style={{ color: 'rgba(244,237,228,0.6)' }}>— STILL DECIDING</div>
            <h2 className="serif" style={{ color: 'var(--bg)' }}>The intake is the same <em style={{ color: 'var(--accent-soft)' }}>either way.</em></h2>
            <p className="section-lede" style={{ color: 'rgba(244,237,228,0.7)' }}>
              Whether you start with peptides or just the provider, you'll fill out the same assessment. We need it to actually help. You can add or drop either side at any time.
            </p>
            <button className="btn btn-primary btn-lg" onClick={() => onStart()}>Take the assessment</button>
          </div>
        </div>
      </div>
    </div>
  </>
  );
};

// ─── AREA LANDING PAGES -2 ARCHIVE ──────────────────────────────────────────
// Kept intentionally. The live /{area} routes use the tiered peptide landing
// pages; this archived area version is retained so it can be revisited later.

const PageArea2 = ({ areaSlug, onStart, onNav }) => {
  usePeptidePricing();
  const categories = window.CATEGORIES || [];
  const cat = categories.find(c => c.id === areaSlug) || categories[0];
  if (!cat) return null;
  const areaPeptides = peptidesByArea(cat.id).slice(0, 4);
  const areaVideo = (window.PDP_VIDEOS_BY_AREA || {})[cat.id] || null;
  const areaName = cat.name.toLowerCase();

  return (
    <>
      <section className="section area-hero">
        <div className="area-hero-copy">
          <div className="section-eyebrow">— {cat.name.toUpperCase()}</div>
          <h1 className="serif">Support for {areaName} that starts with <em>what changed.</em></h1>
          <p className="section-lede">{cat.blurb}</p>
          <div className="area-actions">
            <button className="btn btn-primary btn-lg" onClick={() => onStart(cat.id)}>Take the {areaName} assessment →</button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNav('catalog')}>View peptides →</button>
          </div>
        </div>
        <VideoPlaceholder aspect="4/5" src={areaVideo} />
      </section>

      <section className="section area-detail">
        <div className="area-detail-card">
          <span className="mono">01</span>
          <h3 className="serif">What we look for</h3>
          <p>Symptoms, timing, prior attempts, and what better would actually feel like.</p>
        </div>
        <div className="area-detail-card">
          <span className="mono">02</span>
          <h3 className="serif">How the plan forms</h3>
          <p>The assessment can land on one peptide or a two/three-slot plan before checkout.</p>
        </div>
        <div className="area-detail-card">
          <span className="mono">03</span>
          <h3 className="serif">How you move forward</h3>
          <p>Verification, plan fit, then fulfillment from a licensed compounding pharmacy.</p>
        </div>
      </section>

      <section className="section area-peptides">
        <div>
          <div className="section-eyebrow">— PEPTIDES</div>
          <h2 className="serif">Often considered for <em>{areaName}.</em></h2>
        </div>
        <div className="area-peptide-grid">
          {areaPeptides.map(p => (
            <a key={p.slug} className="area-peptide-card" href={`/peptides/${p.slug}`} onClick={(e) => { e.preventDefault(); onNav(`peptide/${p.slug}`); }}>
              <div className="mono">{membershipLabel(p)}</div>
              <h3 className="serif">{p.name}</h3>
              <p>{p.tagline}</p>
              <span>Read more →</span>
            </a>
          ))}
        </div>
      </section>

      <section className="section area-final">
        <div>
          <div className="section-eyebrow">— START HERE</div>
          <h2 className="serif">Start with the area. <em>Confirm the plan later.</em></h2>
          <p className="section-lede">The assessment carries your area into checkout. You can still adjust your peptide plan and provider support before you confirm.</p>
        </div>
        <button className="btn btn-primary btn-lg" onClick={() => onStart(cat.id)}>Take the {areaName} assessment →</button>
      </section>
    </>
  );
};

// ─── CATALOG ─────────────────────────────────────────────────────────────────

const R2_VIAL_BASE = 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/vials';
const CATALOG_AREA_VIAL_IMAGES = {
  skin: `${R2_VIAL_BASE}/skin-vial.png`,
  hair: `${R2_VIAL_BASE}/hair-vial.png`,
  menopause: `${R2_VIAL_BASE}/menopause-vial.png`,
  libido: `${R2_VIAL_BASE}/libido-vial.png`,
  weight: `${R2_VIAL_BASE}/weight-vial.png`,
  sleep: `${R2_VIAL_BASE}/sleep-vial.png`,
  energy: `${R2_VIAL_BASE}/energy-vial.png`,
  healing: `${R2_VIAL_BASE}/healing-vial.png`,
  cognition: `${R2_VIAL_BASE}/cognition-vial.png`,
  stress: `${R2_VIAL_BASE}/stress-vial.png`
};

const CatalogCardImage = ({ peptide }) => {
  const src = CATALOG_AREA_VIAL_IMAGES[peptide.area];
  const areaName = (window.CATEGORIES.find(c => c.id === peptide.area) || {}).name || peptide.name;
  if (!src) return <ImagePlaceholder label={peptide.name} ratio="1/1" tone="cream" />;
  return (
    <div className="catalog-card-image">
      <img src={src} alt={`${areaName} peptide vial`} loading="lazy" />
    </div>
  );
};

const PageCatalog = ({ onStart, onNav }) => {
  usePeptidePricing();
  const [area, setArea] = React.useState('all');
  const list = area === 'all' ? PEPTIDES : peptidesByArea(area);
  return (
    <>
      <div className="section page-header" style={{ paddingTop: 80, paddingBottom: 24 }}>
        <div className="catalog-hero">
          <div>
            <div className="section-eyebrow">— CATALOG</div>
            <h2 className="serif page-h">The <em>peptide catalog.</em></h2>
            <p className="section-lede">Plainly listed. Membership starts at $299/month. If a selected peptide costs more, the difference is shown before checkout. Click any peptide to see how it works, what it pairs with, and how members describe it.</p>
          </div>
          <div className="catalog-hero-product">
            <img src={`${R2_VIAL_BASE}/inject-vial.png`} alt="AmazingXO peptide therapy vial" />
          </div>
        </div>
      </div>
      <div className="section" style={{ paddingTop: 0 }}>
        <div className="catalog-filters">
          <button className={`chip ${area === 'all' ? 'is-active' : ''}`} onClick={() => setArea('all')}>All ({PEPTIDES.length})</button>
          {window.CATEGORIES.map(c => {
            const n = peptidesByArea(c.id).length;
            return <button key={c.id} className={`chip ${area === c.id ? 'is-active' : ''}`} onClick={() => setArea(c.id)}>{c.name} ({n})</button>;
          })}
        </div>
        <div className="catalog-grid">
          {list.map(p => (
            <a key={p.slug} className="catalog-card" href={`/peptides/${p.slug}`} onClick={(e) => { e.preventDefault(); onNav(`peptide/${p.slug}`); }}>
              <CatalogCardImage peptide={p} />
              <div className="catalog-card-body">
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>{(window.CATEGORIES.find(c => c.id === p.area) || {}).name} Rx</div>
                <h3 className="serif">{p.name}</h3>
                <p>{p.tagline}</p>
                <div className="catalog-card-foot">
                  <span className="mono">{membershipLabel(p)}</span>
                  <span className="mono" style={{ color: 'var(--ink-mute)' }}>★ {p.rating} · {p.reviews}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </>
  );
};

// ─── PEPTIDE PDP (DTC product page) ─────────────────────────────────────────

const PDP_TIER_VIALS = {
  solo: 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/vials/one-vial.png',
  paired: 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/vials/two-vials.png',
  full: 'https://pub-1f7c6593e8b340608c6be61665e37310.r2.dev/vials/three-vials.png',
};

const AREA_PAGE_COPY = {
  weight: {
    heroSub: 'The food noise gets quieter. Choices feel less like a fight. Your body starts feeling responsive again.',
    bullets: ['Less fighting yourself around food.', 'More control between meals.', 'More confidence around choices.', 'A body that starts feeling responsive again.'],
    outcomesTitle: 'A calmer relationship with food, follow-through, and your body.',
    outcomes: [
      { h: 'Food noise', txt: 'The constant negotiation around eating can feel less consuming.' },
      { h: 'Follow-through', txt: 'Daily choices can start feeling more possible and less punishing.' },
      { h: 'Confidence', txt: 'You get a plan built around the pattern you actually live with.' },
      { h: 'Adjustment', txt: 'You can change the vial plan when your body needs a different path.' },
    ],
    howTitle: 'Start with what weight has been costing you.',
    howBody: 'We look at hunger, cravings, energy, sleep, prior attempts, and where things keep breaking down. From there, your plan is built around what your body is doing, not another generic diet rule.',
    considerations: {
      'tirzepatide': 'For quieter appetite and steadier weight support.',
      'semaglutide': 'For people who need help making food feel less constant.',
      'aod-9604': 'For stubborn fat support when the basics are already in place.',
    },
  },
  skin: {
    heroSub: 'You want your face to look like you again: clearer, firmer, less tired, less covered up.',
    bullets: ['Skin that feels smoother to live in.', 'A brighter look without covering up as much.', 'More confidence in the mirror.', 'A plan built around what changed in your skin.'],
    outcomesTitle: 'Skin that feels more like the version you remember.',
    outcomes: [
      { h: 'Texture', txt: 'The goal is skin that feels smoother and easier to live in.' },
      { h: 'Tone', txt: 'You should not have to keep compensating for dullness or unevenness.' },
      { h: 'Confidence', txt: 'Less covering up. More ease walking out as yourself.' },
      { h: 'Fit', txt: 'Your plan should reflect what your skin is actually asking for.' },
    ],
    howTitle: 'Start with what changed in the mirror.',
    howBody: 'We look at tone, texture, firmness, dryness, sensitivity, prior treatments, and what you want to stop hiding. Your vial plan is built around the skin experience you are trying to get back to.',
  },
  hair: {
    heroSub: 'Less checking the brush. Less watching the drain. More confidence that your hair still has a path forward.',
    bullets: ['Less panic around shedding.', 'More confidence in your hair path.', 'A plan built around your actual pattern.', 'A simpler way to keep going.'],
    outcomesTitle: 'A calmer way to deal with thinning hair.',
    outcomes: [
      { h: 'Less watching', txt: 'The goal is to stop feeling like every shower tells the story.' },
      { h: 'More confidence', txt: 'Your plan should help you feel less cornered by what is changing.' },
      { h: 'Pattern', txt: 'We look at where thinning is happening and what else changed around it.' },
      { h: 'Consistency', txt: 'The plan needs to be simple enough to stay with.' },
    ],
    howTitle: 'Start with what you keep noticing.',
    howBody: 'We look at shedding, thinning pattern, stress, hormones, scalp changes, prior attempts, and what would make you feel confident again. Then we match the vial plan to that picture.',
  },
  menopause: {
    heroSub: 'Sleep, mood, temperature, recovery, and desire can all shift at once. You deserve support that sees the whole picture.',
    bullets: ['More steadiness in the day.', 'Less feeling caught off guard by your body.', 'A plan built around what changed.', 'More room to feel like yourself again.'],
    outcomesTitle: 'More steadiness in the parts of life that started feeling unpredictable.',
    outcomes: [
      { h: 'Sleep', txt: 'Rest should not feel like something you have to chase every night.' },
      { h: 'Mood', txt: 'You deserve more steadiness when your body feels less predictable.' },
      { h: 'Recovery', txt: 'Your body should not feel like it stopped bouncing back.' },
      { h: 'Desire', txt: 'Wanting again matters. It is part of feeling like yourself.' },
    ],
    howTitle: 'Start with what menopause changed.',
    howBody: 'We look at sleep, mood, temperature changes, recovery, desire, prior support, and what feels most disruptive. Your plan is built around the pattern, not a single symptom.',
  },
  libido: {
    heroSub: 'Desire can go quiet without warning. The goal is not performance; it is feeling connected to wanting again.',
    bullets: ['More ease around wanting.', 'More confidence with closeness.', 'Less pressure around performance.', 'A private path back to feeling connected.'],
    outcomesTitle: 'More ease around wanting, closeness, and confidence.',
    outcomes: [
      { h: 'Desire', txt: 'The goal is wanting that feels available, not forced.' },
      { h: 'Ease', txt: 'Less pressure to perform. More room to feel present.' },
      { h: 'Connection', txt: 'Your plan should support the life and relationship you want back.' },
      { h: 'Privacy', txt: 'Sensitive questions should have a clear and respectful path.' },
    ],
    howTitle: 'Start with what disappeared.',
    howBody: 'We look at desire, arousal, stress, sleep, hormones, medications, relationship context, and what you want to feel again. Then we build the vial plan around that reality.',
  },
  sleep: {
    heroSub: 'You want rest that actually feels like rest. Not another morning where your body starts behind.',
    bullets: ['A body that can settle.', 'Mornings that feel less behind.', 'More recovery from the rest you get.', 'A plan built around what keeps sleep out of reach.'],
    outcomesTitle: 'A body that can settle instead of staying on alert.',
    outcomes: [
      { h: 'Settling', txt: 'The goal is less fighting your own nervous system at night.' },
      { h: 'Recovery', txt: 'Rest should help your body feel more ready for the day.' },
      { h: 'Clarity', txt: 'Better rest can change how the whole day feels.' },
      { h: 'Pattern', txt: 'We look at what interrupts sleep, not just when you go to bed.' },
    ],
    howTitle: 'Start with what sleep feels like right now.',
    howBody: 'We look at trouble falling asleep, staying asleep, waking tired, pain, stress, recovery, and what you have already tried. Your vial plan is built around the pattern that keeps showing up.',
  },
  energy: {
    heroSub: 'You want a tank that does not feel empty before the day is done.',
    bullets: ['More capacity for your day.', 'Less planning around the crash.', 'More stamina for real life.', 'A plan built around where your energy drops.'],
    outcomesTitle: 'More capacity for the day you are actually living.',
    outcomes: [
      { h: 'Capacity', txt: 'The goal is having more left for the parts of life that matter.' },
      { h: 'Stamina', txt: 'Less planning your day around when you expect to crash.' },
      { h: 'Recovery', txt: 'Your body should not make ordinary life feel like a deficit.' },
      { h: 'Clarity', txt: 'Energy and focus often live closer together than people think.' },
    ],
    howTitle: 'Start with where your energy drops.',
    howBody: 'We look at fatigue, crashes, sleep, stress, recovery, appetite, and what your day asks from you. Your vial plan is built around the kind of energy you need back.',
  },
  healing: {
    heroSub: 'Your body used to bounce back faster. The goal is to support recovery without pretending time alone is a plan.',
    bullets: ['A recovery path that feels less stuck.', 'More confidence moving through the day.', 'Less feeling held back by the same setback.', 'A plan built around what is not bouncing back.'],
    outcomesTitle: 'A recovery path that respects what your body is carrying.',
    outcomes: [
      { h: 'Recovery', txt: 'The goal is less feeling stuck in the same physical setback.' },
      { h: 'Mobility', txt: 'Daily movement should not feel like a negotiation with discomfort.' },
      { h: 'Resilience', txt: 'Your plan should support the life you want to return to.' },
      { h: 'Context', txt: 'We look at the whole pattern, not just the sore spot.' },
    ],
    howTitle: 'Start with what is not bouncing back.',
    howBody: 'We look at injury history, training load, pain, inflammation, sleep, recovery, and what you need your body to do again. The vial plan follows the recovery picture.',
  },
  cognition: {
    heroSub: 'You want your mind to feel available again: focused, clear, calm, and easier to trust.',
    bullets: ['More trust in your attention.', 'Clearer follow-through.', 'Less mental noise during the day.', 'A plan built around what feels harder to access.'],
    outcomesTitle: 'More trust in your attention, recall, and mental energy.',
    outcomes: [
      { h: 'Focus', txt: 'The goal is attention that feels easier to hold.' },
      { h: 'Recall', txt: 'You want names, words, and next steps to come back easier.' },
      { h: 'Calm', txt: 'Clear thinking is harder when your system feels loud.' },
      { h: 'Confidence', txt: 'Your plan should support the way you need to show up.' },
    ],
    howTitle: 'Start with what feels harder to access.',
    howBody: 'We look at focus, memory, stress, sleep, workload, mood, and what you need your mind to do. Your vial plan is built around the way clarity is missing from your day.',
  },
  stress: {
    heroSub: 'You want calm that does not require disappearing from your life.',
    bullets: ['More room in your body and mind.', 'Less carrying stress through the whole day.', 'More calm without disappearing from life.', 'A plan built around how stress shows up for you.'],
    outcomesTitle: 'More room in your body, your mind, and your day.',
    outcomes: [
      { h: 'Calm', txt: 'The goal is less carrying everything in your jaw, shoulders, and sleep.' },
      { h: 'Recovery', txt: 'Stress should not leave your body feeling permanently behind.' },
      { h: 'Presence', txt: 'You want enough calm to actually be in your own life.' },
      { h: 'Support', txt: 'Your plan should match the way stress shows up for you.' },
    ],
    howTitle: 'Start with how stress lives in your body.',
    howBody: 'We look at sleep, tension, appetite, focus, mood, recovery, and what keeps your system switched on. Your vial plan is built around the stress pattern you are living with.',
  },
};

const areaConsiderationItems = (area, catName) => {
  const items = peptidesByArea(area).slice(0, 3);
  if (items.length >= 3) return items;
  return [
    ...items,
    {
      slug: `${area}-assessment-fit`,
      name: 'Assessment fit',
      tagline: `Your answers decide whether this belongs in the ${catName?.toLowerCase() || 'area'} plan before you confirm.`,
      area,
      customAssessment: true,
    },
  ].slice(0, 3);
};

const WeightProofTiles = () => (
  <>
    <div className="pdp-proof-tile pdp-proof-image">
      <img src={PDP_TIER_VIALS.solo} alt="" />
    </div>
    <div className="pdp-proof-tile pdp-proof-image">
      <img src={PDP_TIER_VIALS.paired} alt="" />
    </div>
    <div className="pdp-proof-tile pdp-proof-image">
      <img src={PDP_TIER_VIALS.full} alt="" />
    </div>
  </>
);

const PagePeptide = ({ slug, areaSlug, onStart, onNav }) => {
  usePeptidePricing();
  const p = peptideBySlug(slug);
  if (!p) return <div className="section"><h2 className="serif">Peptide not found.</h2><button className="btn btn-soft" onClick={() => onNav('catalog')}>← Back to catalog</button></div>;
  const cat = window.CATEGORIES.find(c => c.id === p.area);
  const isAreaLanding = areaSlug === p.area;
  const areaCopy = AREA_PAGE_COPY[p.area] || {};
  const heroTitle = isAreaLanding && cat?.name ? cat.name : p.name;
  const [tier, setTier] = React.useState('paired');
  const pairs = p.pairs.map(s => peptideBySlug(s)).filter(Boolean);
  const recommendations = isAreaLanding ? areaConsiderationItems(p.area, cat?.name) : pairs.slice(0, 3);
  const pairedItems = [p, pairs[0]].filter(Boolean);
  const fullItems = [p, ...pairs.slice(0, 2)].filter(Boolean);
  const soloLabel = membershipLabel(p).replace('/mo', '');
  const pairedTotal = stackLabel(pairedItems, 2);
  const fullTotal = stackLabel(fullItems, 3);
  const selectedPlan = {
    solo: { slots: 1, price: priceNumber(soloLabel), label: '1 peptide plan' },
    paired: { slots: 2, price: priceNumber(pairedTotal), label: '2 peptide plan' },
    full: { slots: 3, price: priceNumber(fullTotal), label: '3 peptide plan' },
  }[tier];
  const beginPeptideAssessment = () => {
    window.sessionStorage?.setItem('axo_peptide_plan_tier', tier);
    window.sessionStorage?.setItem('axo_peptide_plan_slots', String(selectedPlan.slots));
    window.sessionStorage?.setItem('axo_peptide_plan_price', String(selectedPlan.price));
    window.sessionStorage?.setItem('axo_peptide_plan_label', selectedPlan.label);
    window.sessionStorage?.setItem('axo_peptide_anchor_slug', p.slug);
    window.sessionStorage?.setItem('axo_peptide_anchor_name', p.name);
    window.sessionStorage?.setItem('axo_peptide_anchor_area', p.area);
    onStart(p.area);
  };

  return (
    <>
      {/* Sticky breadcrumb + suggested rail */}
      <div className="pdp-rail">
        <a className="pdp-rail-back" href="/catalog" onClick={(e) => { e.preventDefault(); onNav('catalog'); }}>← All peptides</a>
        <div className="pdp-rail-suggested">
          <span className="mono">More in {cat?.name}:</span>
          {peptidesByArea(p.area).filter(x => x.slug !== p.slug).slice(0, 4).map(x => (
            <a key={x.slug} href={`/peptides/${x.slug}`} onClick={(e) => { e.preventDefault(); onNav(`peptide/${x.slug}`); }}>{x.name}</a>
          ))}
        </div>
      </div>

      {/* Hero: gallery + buy module */}
      <section className="section pdp-hero">
        <div className="pdp-gallery">
          <VideoPlaceholder aspect="1/1" src={videoForArea(p.area)} motion={peptideMotionFor(p.slug)} />
          <div className="pdp-thumbs">
            {[
              ['what you’re getting', 'sand'],
              ['what it will do for you', 'cream'],
              ['what you do next', 'sage'],
            ].map(([label, tone]) => (
              <button
                key={label}
                className="pdp-thumb-link"
                type="button"
                onClick={() => onStart(p.area)}
                aria-label={`Take the ${cat?.name?.toLowerCase() || p.area} assessment`}
              >
                <ImagePlaceholder label={label} ratio="1/1" tone={tone} />
              </button>
            ))}
          </div>
        </div>
        <div className="pdp-buy">
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>{cat?.name?.toUpperCase()}</div>
          <h1 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 56px)', margin: '8px 0 12px' }}>{heroTitle}</h1>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
            <span className="mono" style={{ fontSize: 14 }}>★★★★★</span>
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-mute)' }}>{p.rating} · {p.reviews} member reviews</span>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.5, marginBottom: 24 }}>{isAreaLanding ? areaCopy.heroSub : p.tagline}</p>
          <ul className="price-list" style={{ marginBottom: 24 }}>
            {(areaCopy.bullets || []).map(item => <li key={item}>{item}</li>)}
          </ul>

          {/* The choice ladder */}
          <div className="pdp-ladder">
            <button className={`pdp-tier has-vial ${tier === 'solo' ? 'is-active' : ''}`} onClick={() => setTier('solo')}>
              <div className="pdp-tier-head">
                <span className="mono">1 PEPTIDE PLAN</span>
              </div>
              <div className="pdp-tier-price serif">{soloLabel}<span>/mo</span></div>
              <div className="pdp-tier-desc">One monthly vial.</div>
              <div className="pdp-tier-vial pdp-tier-vial-single" aria-hidden="true">
                <img src={PDP_TIER_VIALS.solo} alt="" />
              </div>
            </button>
            <button className={`pdp-tier has-vial ${tier === 'paired' ? 'is-active' : ''}`} onClick={() => setTier('paired')}>
              <div className="pdp-tier-head">
                <span className="mono">2 PEPTIDE PLAN</span>
                <span className="pdp-tier-badge">MOST PICKED</span>
              </div>
              <div className="pdp-tier-price serif">{pairedTotal}{priceUnit(pairedTotal)}</div>
              <div className="pdp-tier-desc">Two monthly vials. Save $20.</div>
              <div className="pdp-tier-vial" aria-hidden="true">
                <img src={PDP_TIER_VIALS.paired} alt="" />
              </div>
            </button>
            <button className={`pdp-tier has-vial ${tier === 'full' ? 'is-active' : ''}`} onClick={() => setTier('full')}>
              <div className="pdp-tier-head">
                <span className="mono">3 PEPTIDE PLAN</span>
              </div>
              <div className="pdp-tier-price serif">{fullTotal}{priceUnit(fullTotal)}</div>
              <div className="pdp-tier-desc">Three monthly vials. Save $20.</div>
              <div className="pdp-tier-vial" aria-hidden="true">
                <img src={PDP_TIER_VIALS.full} alt="" />
              </div>
            </button>
          </div>

          <button className="btn btn-primary btn-lg pdp-cta" onClick={beginPeptideAssessment}>
            Take the {cat?.name?.toLowerCase()} assessment →
          </button>
          <p className="mono" style={{ fontSize: 11, letterSpacing: '0.05em', color: 'var(--ink-mute)', textAlign: 'center', marginTop: 12 }}>
            We confirm fit before any peptide ships.
          </p>
        </div>
      </section>

      {/* Benefits strip */}
      <div className="pdp-strip">
        {[
          { h: 'What you want back', s: areaCopy.outcomes?.[0]?.txt || 'A plan that matches the reason you came in.' },
          { h: 'Why this fits', s: areaCopy.outcomes?.[1]?.txt || 'The assessment connects your answers to the next step.' },
          { h: 'What changes', s: areaCopy.outcomes?.[2]?.txt || 'You see a path that feels clear before you confirm.' },
          { h: 'What happens next', s: areaCopy.outcomes?.[3]?.txt || 'Your plan can move with what your body needs.' },
        ].map((it, i) => (
          <div key={i} className="pdp-strip-item">
            <h4 className="serif">{it.h}</h4>
            <span className="mono">{it.s}</span>
          </div>
        ))}
      </div>

      {/* Iconified outcomes grid */}
      <div className="section">
        <div className="section-eyebrow">— WHAT CHANGES</div>
        <h2 className="serif">{isAreaLanding ? areaCopy.outcomesTitle : p.tagline}</h2>
        <div className="pdp-outcomes">
          {(isAreaLanding ? areaCopy.outcomes : [
            { h: 'Fit', txt: 'The plan should match what you actually came in for.' },
            { h: 'Ease', txt: 'The next step should feel clear, not like another maze.' },
            { h: 'Support', txt: 'You should know where to go when something feels off.' },
            { h: 'Adjustment', txt: 'Your vial plan can change when your needs change.' },
          ]).map((it, i) => (
            <div key={i} className="pdp-outcome">
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>{it.h.toUpperCase()}</div>
              <p>{it.txt}</p>
            </div>
          ))}
        </div>
      </div>

      {/* How it works */}
      <div className="section">
        <div className="pdp-howworks">
          <div className="pdp-howworks-copy">
            <div className="section-eyebrow">— HOW IT WORKS</div>
            <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)' }}>{isAreaLanding ? areaCopy.howTitle : <>Clear plan. <em>Clear next steps.</em></>}</h2>
            <p className="section-lede">
              {isAreaLanding ? areaCopy.howBody : 'Your assessment helps us understand what changed, what you have already tried, and which vial plan fits before you confirm. Your plan can adjust as your needs change.'}
            </p>
            <button className="btn btn-ghost btn-lg" onClick={() => onStart(p.area)}>Take the assessment →</button>
          </div>
          <div className="pdp-howworks-steps" aria-label="Assessment steps">
            {[
              { h: 'Tell us what changed', p: 'Start with the reason you are here and what you want to feel different.' },
              { h: 'See the plan clearly', p: 'Your answers carry into the vial plan before you confirm anything.' },
              { h: 'Move forward with fit', p: 'Choose the monthly plan that makes sense for what your body needs now.' },
            ].map((step, i) => (
              <div key={step.h} className="pdp-howworks-step">
                <span className="mono">{String(i + 1).padStart(2, '0')}</span>
                <div>
                  <h3 className="serif">{step.h}</h3>
                  <p>{step.p}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Recommendations */}
      {recommendations.length > 0 && (
        <div className="section pdp-pairs-section">
          <div className="section-eyebrow">— CONSIDERATIONS</div>
          <h2 className="serif pdp-pairs-title">Members often add <em>one or more of these.</em></h2>
          <div className="pdp-pairs">
            {recommendations.map(x => {
              const xc = window.CATEGORIES.find(c => c.id === x.area);
              return (
                <a key={x.slug} className="pdp-pair-card" href={x.customAssessment ? `/${p.area}` : `/peptides/${x.slug}`} onClick={(e) => { e.preventDefault(); x.customAssessment ? onStart(p.area) : onNav(`peptide/${x.slug}`); }}>
                  <div className="pdp-pair-body">
                    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>{isAreaLanding ? cat?.name?.toUpperCase() : xc?.name?.toUpperCase()}</div>
                    <h3 className="serif">{x.name}</h3>
                    <p>{isAreaLanding ? (areaCopy.considerations?.[x.slug] || x.tagline) : x.tagline}</p>
                    <div className="catalog-card-foot">
                      <span className="mono">{x.customAssessment ? 'Start assessment' : membershipLabel(x)}</span>
                      <span className="mono" style={{ color: 'var(--ok)' }}>{isAreaLanding ? `${cat?.name} consideration` : `+ pairs with ${p.name.split(' ')[0]}`}</span>
                    </div>
                  </div>
                </a>
              );
            })}
          </div>
        </div>
      )}

      {/* What we leave out */}
      <div className="section section-deep" style={{ maxWidth: 'none', margin: 0 }}>
        <div style={{ maxWidth: 1320, margin: '0 auto', padding: '80px 32px' }}>
          <div className="section-eyebrow" style={{ color: 'rgba(244,237,228,0.6)' }}>— WHAT WE LEAVE OUT</div>
          <h2 className="serif" style={{ color: 'var(--bg)', maxWidth: 800 }}>The list of things we <em style={{ color: 'var(--accent-soft)' }}>don't do.</em></h2>
          <div className="pdp-leaveout">
            {(isAreaLanding ? [
              'Plans that make you feel like failure is the problem.',
              'One-size-fits-all language.',
              'Surprise steps after you decide to start.',
              'Confusing next steps when your body changes.',
              'Pressure to stay on something that is not working.',
              'Being left alone when you need help adjusting.',
            ] : [
              'Visit fees on top of your peptide.',
              'Ten-minute consults that aren\'t.',
              'Surprise charges when you re-order.',
              '"Premium" tiers that gate basic care.',
              'Brand-name retail pricing on compounded peptides.',
              'Confusing care steps or unclear follow-up.',
            ]).map((it, i) => (
              <div key={i} className="pdp-leaveout-item">
                <span className="mono" style={{ color: 'rgba(244,237,228,0.5)' }}>×</span>
                <span style={{ color: 'var(--bg)' }}>{it}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Reviews wall */}
      <div className="section">
        <div className="section-eyebrow">— MEMBER REVIEWS</div>
        <h2 className="serif">{p.reviews} <em>reviews</em>, {p.rating} <em>average.</em></h2>
        <div className="pdp-reviews">
          {[
            { q: 'I stopped feeling like I had to figure it out alone.', cite: 'L · 47 · F · paired stack', stars: 5 },
            { q: 'The plan finally matched what I was actually dealing with.', cite: 'M · 41 · M · solo', stars: 5 },
            { q: 'I felt more in control instead of starting over again.', cite: 'A · 53 · F · 3 peptide plan', stars: 4 },
            { q: 'When I had a question, provider on call gave me a clear next step.', cite: 'D · 49 · M · paired stack + provider' , stars: 5 },
          ].map((r, i) => (
            <div key={i} className="pdp-review">
              <div className="mono" style={{ fontSize: 12 }}>{'★'.repeat(r.stars)}{'☆'.repeat(5 - r.stars)}</div>
              <blockquote>"{r.q}"</blockquote>
              <div className="mono" style={{ fontSize: 11, color: 'var(--ink-mute)' }}>— {r.cite}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Final CTA */}
      <div className="section" style={{ textAlign: 'center', paddingBottom: 96 }}>
        <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.5vw, 48px)' }}>Start now.</h2>
        <p className="section-lede" style={{ margin: '0 auto 24px' }}>Start with what has been costing you. We will help you see what belongs in the plan.</p>
        <button className="btn btn-primary btn-lg" onClick={() => onStart(p.area)}>Take the {cat?.name?.toLowerCase()} assessment →</button>
      </div>
    </>
  );
};

// ─── PRACTICE WITH US (nurse / provider affiliates) ─────────────────────────

const PagePractice = ({ onStart }) => {
  const [showFlow, setShowFlow] = React.useState(false);

  if (showFlow && window.PracticeOnboarding) {
    return <window.PracticeOnboarding onBack={() => setShowFlow(false)} />;
  }

  return (
    <>
      <div className="section page-header" style={{ paddingTop: 80, paddingBottom: 32 }}>
        <div className="section-eyebrow">— PRACTICE WITH US</div>
        <h2 className="serif page-h">For licensed providers. <em>Build your own bench.</em></h2>
        <p className="section-lede">If you're a licensed nurse practitioner, RN, or provider — you can practice through AmazingXO. Set your own hours. Pick your own members. Earn for what you do, not for being on a payroll.</p>
        <div style={{ marginTop: 24 }}>
          <button className="btn btn-primary btn-lg" onClick={() => setShowFlow(true)}>Start application →</button>
        </div>
      </div>

      <div className="section" style={{ paddingTop: 0 }}>
        <div className="practice-cards">
          {[
            { h: 'How you earn', p: 'Earn for provider care rooms, private 1:1 support, and reviewed follow-up. The platform keeps notes, transcript, and routing organized so you are paid for care time, not admin drag.' },
            { h: 'Your members', p: 'You build your own roster from the platform pool. Members can pick a provider they vibe with. Repeat work compounds.' },
            { h: 'Your time', p: 'Set office-hour windows and direct-support limits. Cap it. We never overload your care panel.' },
            { h: 'Onboarding', p: 'Upload license, government-issued ID, and a 60-second self-intro video. We verify, then you go live.' },
          ].map((it, i) => (
            <div key={i} className="practice-card">
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-mute)' }}>{String(i + 1).padStart(2, '0')}</div>
              <h3 className="serif">{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 64, padding: '48px 0', borderTop: '1px solid var(--rule)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
          <div>
            <h3 className="serif" style={{ fontSize: 28, marginBottom: 6 }}>Ready to apply?</h3>
            <p style={{ color: 'var(--ink-mute)', maxWidth: 540 }}>About ten minutes. License + ID verification. A short self-intro video. Then we credential you within 2 business days.</p>
          </div>
          <button className="btn btn-primary btn-lg" onClick={() => setShowFlow(true)}>Start application →</button>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { PageCare, PageArea2, PageCatalog, PagePeptide, PagePractice, peptideBySlug, peptidesByArea });