/* Panterra Health — inner pages: About, Mission, Kalos, Hygeia, Contact */

const DSp = window.PanterraHealthDesignSystem_3c87ff;

/* Shared inner-page hero */
function PageHero({ eyebrow, title, lede, figLabel, figSrc }) {
  const hasFig = figLabel || figSrc;
  return (
    <section style={{ paddingTop: 'clamp(2.5rem, 6vw, 5rem)', paddingBottom: 'var(--space-9)' }}>
      <div className="container">
        <div className="ph-hero" style={{ display: 'grid', gridTemplateColumns: hasFig ? '1.1fr 0.9fr' : '1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-5)', maxWidth: hasFig ? undefined : '20ch' }}>
            <span className="eyebrow">{eyebrow}</span>
            <h1 style={{ fontSize: 'var(--text-d1)', margin: 0 }}>{title}</h1>
            {lede && <p className="lede" style={{ color: 'var(--text-muted)', margin: 0, maxWidth: '50ch' }}>{lede}</p>}
          </div>
          {hasFig && <Figure label={figLabel} src={figSrc} ratio="4 / 3" />}
        </div>
      </div>
    </section>
  );
}

function ValueRow({ items }) {
  return (
    <Section bg="var(--surface-2)">
      <div className="ph-pillars" style={{ display: 'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`, gap: 'var(--space-8)' }}>
        {items.map((it, i) => <Pillar key={i} icon={it.icon} title={it.title} body={it.body} />)}
      </div>
    </Section>
  );
}

/* ---------------- About ---------------- */
function AboutPage() {
  return (
    <>
      <PageHero eyebrow="About Us" title="At the forefront of health and science."
        lede="Here at Panterra Health we believe in being at the forefront of health and science technologies. We provide telehealth solutions to make health accessible for our base."
        figSrc={window.__asset('lab1', 'assets/lab-1.png')} figLabel="Lab bench & instruments" />
      <Section>
        <div className="prose">
          <p style={{ fontSize: 'var(--text-2xl)', fontFamily: 'var(--font-display)', lineHeight: 1.3, color: 'var(--ink-900)' }}>
            Panterra is a parent telehealth company built on a simple idea: modern science should make care easier to reach, not harder.
          </p>
          <p>We bring clinical-grade testing, responsible prescribing, and honest pricing together under one roof and deliver it through our focused brands that speak directly to the people they serve. No clinics to drive to. No information gate kept by the industry. Just health, <em style={{ fontStyle: 'italic' }}>first</em>.</p>
        </div>
      </Section>
      <ValueRow items={[
        { icon: ICONS.flask, title: 'Science-led', body: 'We adopt proven technologies early so our members get tomorrow’s care today.' },
        { icon: ICONS.shield, title: 'Trustworthy', body: 'Licensed providers, transparent labs, and prescribing that puts safety first.' },
        { icon: ICONS.pulse, title: 'Accessible', body: 'Telehealth that reaches every American, wherever they live, however they pay.' },
      ]} />
    </>
  );
}

/* ---------------- Mission ---------------- */
function MissionPage() {
  const { Button } = DSp;
  return (
    <>
      <section style={{ paddingTop: 'clamp(2.5rem, 6vw, 5rem)', paddingBottom: 'var(--space-8)' }}>
        <div className="container">
          <span className="eyebrow">Our Mission</span>
          <h1 style={{ fontSize: 'var(--text-d1)', margin: '18px 0 var(--space-8)', maxWidth: '20ch' }}>
            Health, <em style={{ fontStyle: 'italic' }}>first</em>. You call the shots.
          </h1>
          <div className="ph-mission" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
            <blockquote style={{
              fontFamily: 'var(--font-display)', fontSize: 'var(--text-d3)', lineHeight: 1.3, fontStyle: 'italic',
              color: 'var(--blue-700)', borderLeft: '3px solid var(--blue-300)', paddingLeft: 'var(--space-5)',
              margin: 0, maxWidth: '40ch',
            }}>
              “Once upon a time doctors made house calls. They worked for you. When did health CARE become the health INDUSTRY?”
            </blockquote>
            <img src={window.__asset('houseCall', 'assets/house-call.png')} alt="A clinician making a house call" style={{ width: '100%', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)', boxShadow: 'var(--shadow-sm)' }} />
          </div>
        </div>
      </section>

      <Section>
        <div className="ph-mission" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'start' }}>
          <div className="prose" style={{ maxWidth: 'none' }}>
            <p style={{ fontSize: 'var(--text-xl)', color: 'var(--ink-900)' }}>We aim to empower our users to make their own health decisions, and to revolutionize how Americans access and view their own health.</p>
            <p>Instead of gatekeeping information, we encourage people to learn more about their own bodies. We make that possible in three ways.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <MissionPoint icon={ICONS.lab} title="Learn through labs" body="We put real lab testing in your hands and help you understand the results so your health knowledge isn’t locked behind a desk." />
            <MissionPoint icon={ICONS.dollar} title="Honest pricing" body="By working with pharmacies all around the country, we secure the best pricing possible and pass it on to you." />
            <MissionPoint icon={ICONS.shield} title="Affordable for all" body="We prioritize affordability WITHOUT insurance while still working with insurance providers to extend further discounts to those who have it." />
          </div>
        </div>
      </Section>

      <section style={{ background: 'var(--ink-band)', color: '#fff', paddingBlock: 'var(--section-y)' }}>
        <div className="container" style={{ textAlign: 'center', maxWidth: 720 }}>
          <h2 style={{ fontSize: 'var(--text-d2)', color: '#fff', margin: 0 }}>Affordable health for ALL Americans.</h2>
          <p style={{ color: 'rgba(246,244,239,0.7)', fontSize: 'var(--text-lg)', marginTop: 'var(--space-4)' }}>
            With or without insurance, our goal is the same: care you can actually afford and understand.
          </p>
        </div>
      </section>
    </>
  );
}
function MissionPoint({ icon, title, body }) {
  return (
    <div style={{ display: 'flex', gap: 'var(--space-4)', padding: 'var(--space-5)', background: 'var(--surface-2)', borderRadius: 'var(--radius-md)' }}>
      <div style={{ flex: '0 0 auto', color: 'var(--blue-700)' }}><Icon d={icon} size={24} /></div>
      <div>
        <h4 style={{ margin: '0 0 6px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--text-lg)', color: 'var(--ink-900)' }}>{title}</h4>
        <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--text-md)', lineHeight: 1.6 }}>{body}</p>
      </div>
    </div>
  );
}

/* ---------------- Subsidiary template ---------------- */
function BrandPage({ name, audience, lede, categories, figLabel, figSrc, logoSrc, visitLabel, siteHref = '#' }) {
  const { Badge, Button } = DSp;
  return (
    <>
      {/* Brand hero — logo + intro left, image right, single screen */}
      <section style={{ paddingTop: 'clamp(2rem, 4vw, 3.5rem)', paddingBottom: 'var(--space-8)' }}>
        <div className="container">
          <div className="ph-hero" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 'var(--space-9)', alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-4)' }}>
              <img src={logoSrc} alt={name + ' logo'} style={{ height: 200, maxWidth: '100%', width: 'auto', objectFit: 'contain', display: 'block', marginBottom: 'calc(var(--space-4) * 0.6)' }} />
              <Badge variant="accent">A Panterra Health brand</Badge>
              <h1 style={{ fontSize: 'var(--text-d1)', margin: 0 }}>{name}</h1>
              <p className="lede" style={{ color: 'var(--text-muted)', margin: 0, maxWidth: '48ch' }}>{lede}</p>
              <div style={{ marginTop: 'var(--space-2)' }}>
                <Button as="a" href={siteHref} variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={18} />}>{visitLabel || ('Visit ' + name)}</Button>
              </div>
            </div>
            <Figure label={figLabel} src={figSrc} ratio="4 / 5" />
          </div>
        </div>
      </section>

      <Section bg="var(--surface-2)">
        <div style={{ marginBottom: 'var(--space-8)', maxWidth: '46ch' }}>
          <span className="eyebrow">{audience}</span>
          <h2 style={{ fontSize: 'var(--text-d2)', marginTop: 14 }}>Areas of care.</h2>
          <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-lg)', marginTop: 'var(--space-3)' }}>
            Cutting-edge solutions, delivered through telehealth. Specific treatments live on the {name} site.
          </p>
        </div>
        <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {categories.map((c, i) => (
            <div key={i} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)' }}>
              <div style={{ color: 'var(--blue-700)', marginBottom: 'var(--space-3)' }}><Icon d={ICONS[c.icon] || ICONS.pill} size={24} /></div>
              <h4 style={{ margin: '0 0 6px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--text-lg)', color: 'var(--ink-900)' }}>{c.label}</h4>
              <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--text-sm)', lineHeight: 1.55 }}>{c.note}</p>
            </div>
          ))}
        </div>
      </Section>
    </>
  );
}

function KalosPage() {
  return <BrandPage
    name="Kalos Health" audience="Men's health · Sport · Fitness"
    visitLabel="Visit Kalos Health" siteHref="https://kalos.panterrahealth.com"
    logoSrc={window.__asset('kalosLogoTrim', 'assets/kalos-logo-trim.png')} figSrc={window.__asset('kalosTrail', 'assets/kalos-trail.png')} figLabel="Performance & recovery"
    lede="Our brand aimed at men’s health, sports, and fitness offering cutting-edge solutions for performance, recovery, and longevity."
    categories={[
      { icon: 'flask', label: 'Peptides', note: 'Targeted peptide therapies for recovery and performance.' },
      { icon: 'pulse', label: 'Weight loss', note: 'Modern, medically-guided weight management.' },
      { icon: 'pill', label: 'TRT', note: 'Testosterone replacement, monitored and responsible.' },
      { icon: 'shield', label: 'Hair loss', note: 'Evidence-based treatments to keep what you have.' },
      { icon: 'pulse', label: 'Sexual wellness', note: 'Discreet, clinician-led support.' },
      { icon: 'lab', label: 'Performance labs', note: 'Know your baseline and track progress.' },
    ]} />;
}

function HygeiaPage() {
  return <BrandPage
    name="Hygeia Rx" audience="Women's health · Fitness · Vitality"
    visitLabel="Visit Hygeia Rx" siteHref="https://hygeia.panterrahealth.com"
    logoSrc={window.__asset('hygeiaLogoTrim', 'assets/hygeia-logo-trim.png')} figSrc={window.__asset('hygeiaYoga', 'assets/hygeia-yoga.jpg')} figLabel="Vitality & skin"
    lede="Our brand aimed at women’s health and fitness deploying advanced health technologies designed around women’s bodies and goals."
    categories={[
      { icon: 'flask', label: 'Peptides', note: 'Peptide therapies for recovery and wellness.' },
      { icon: 'pulse', label: 'Weight loss', note: 'Medically-guided, sustainable weight management.' },
      { icon: 'pill', label: 'HRT', note: 'Hormone replacement, personalized and monitored.' },
      { icon: 'shield', label: 'Fertility', note: 'Support and testing for every stage of the journey.' },
      { icon: 'flask', label: 'Collagen', note: 'Therapies that support collagen production.' },
      { icon: 'pulse', label: 'Skin care', note: 'Clinical skin health, beyond the surface.' },
    ]} />;
}

/* ---------------- Products ---------------- */
function ProdIcon({ k }) {
  const w = (ch) => <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{ch}</svg>;
  switch (k) {
    case 'mol1': return w(<React.Fragment><circle cx="6" cy="6" r="2.3" /><circle cx="18" cy="10" r="2.3" /><circle cx="9" cy="17" r="2.3" /><path d="M8 7.5l8 1.4" /><path d="M16.4 12l-6 3.5" /></React.Fragment>);
    case 'mol2': return w(<React.Fragment><circle cx="6" cy="7" r="2.3" /><circle cx="18" cy="6" r="2.3" /><circle cx="17" cy="18" r="2.3" /><circle cx="7" cy="17" r="2.3" /><path d="M8 8l8-1" /><path d="M17.6 8.5l-.5 7" /><path d="M15 17.6l-6-.5" /></React.Fragment>);
    case 'mol3': return w(<React.Fragment><circle cx="12" cy="5" r="2.3" /><circle cx="5" cy="18" r="2.3" /><circle cx="19" cy="18" r="2.3" /><path d="M11 7l-5 8.6" /><path d="M13 7l5 8.6" /><path d="M7.6 18h8.8" /></React.Fragment>);
    case 'hair': return w(<React.Fragment><path d="M9 21c-1.6-3-1.6-6 0-9s1.6-6 0-9" /><path d="M15 21c1.6-3 1.6-6 0-9s-1.6-6 0-9" /></React.Fragment>);
    case 'droplet': return w(<path d="M12 3c2.6 3.2 6 4.6 6 9a6 6 0 0 1-12 0c0-4.4 3.4-5.8 6-9Z" />);
    case 'mars': return w(<React.Fragment><circle cx="10" cy="14" r="5" /><path d="M14.5 9.5L20 4" /><path d="M15 4h5v5" /></React.Fragment>);
    case 'venus': return w(<React.Fragment><circle cx="12" cy="9" r="5" /><path d="M12 14v7" /><path d="M9 18h6" /></React.Fragment>);
    case 'dna': return w(<React.Fragment><path d="M7 3c0 4.5 10 6 10 9.5S7 17 7 21" /><path d="M17 3c0 4.5-10 6-10 9.5S17 17 17 21" /><path d="M9 7h6" /><path d="M9 17h6" /></React.Fragment>);
    case 'flask': return <Icon d={ICONS.flask} size={24} />;
    default: return <Icon d={ICONS.pill} size={24} />;
  }
}

function ProductCard({ name, tag, body, icon, comingSoon, eta }) {
  return (
    <div style={{
      position: 'relative', background: 'var(--paper)', border: '1px solid var(--line)',
      borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column',
      gap: 'var(--space-3)', transition: 'transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)',
    }}
      onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
        <div style={{ width: 46, height: 46, borderRadius: 'var(--radius-md)', background: 'var(--surface-blue)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--blue-700)', flexShrink: 0 }}>
          <ProdIcon k={icon} />
        </div>
        <div>
          <h4 style={{ margin: 0, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--text-lg)', color: 'var(--ink-900)' }}>{name}</h4>
          {tag && <span style={{ fontSize: 'var(--text-sm)', color: 'var(--blue-700)', fontWeight: 600 }}>{tag}</span>}
        </div>
      </div>
      <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--text-sm)', lineHeight: 1.6 }}>{body}</p>
      {comingSoon && (
        <span style={{ marginTop: 'auto', alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', gap: 7, padding: '0.35rem 0.8rem', borderRadius: 'var(--radius-pill)', background: 'var(--blue-100)', color: 'var(--blue-700)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
          Coming soon · ETA {eta}
        </span>
      )}
    </div>
  );
}

function GroupHead({ eyebrow, title, blurb }) {
  return (
    <div style={{ marginBottom: 'var(--space-8)', maxWidth: '52ch' }}>
      <span className="eyebrow">{eyebrow}</span>
      <h2 style={{ fontSize: 'var(--text-d2)', marginTop: 14 }}>{title}</h2>
      {blurb && <p style={{ marginTop: 'var(--space-3)', color: 'var(--text-muted)', fontSize: 'var(--text-lg)', lineHeight: 1.6 }}>{blurb}</p>}
    </div>
  );
}

function ProductsPage({ onNavigate }) {
  const { Button } = DSp;
  const go = (id) => { onNavigate(id); window.scrollTo({ top: 0 }); };

  const weightLoss = [
    { name: 'Semaglutide', tag: 'GLP-1', icon: 'mol1', body: 'A once-weekly GLP-1 that curbs appetite and slows digestion, the well-studied starting point for steady, lasting weight loss.' },
    { name: 'Tirzepatide', tag: 'GLP-1 + GIP', icon: 'mol2', body: 'A dual agonist that works on two hormone pathways at once, for greater appetite control and results.' },
    { name: 'Retatrutide', tag: 'GLP-1 + GIP + glucagon', icon: 'mol3', body: 'A next-generation triple agonist that adds a third pathway, the most complete metabolic approach yet.', comingSoon: true, eta: 'early–mid 2027' },
  ];
  const skinHair = [
    { name: 'Finasteride', tag: 'Hair loss · DHT', icon: 'hair', body: 'A daily tablet that blocks the hormone behind male-pattern hair loss, so you keep the hair you have.' },
    { name: 'Minoxidil', tag: 'Hair regrowth', icon: 'hair', body: 'Topical or oral therapy that reawakens follicles and supports thicker, fuller regrowth.' },
    { name: 'Tretinoin', tag: 'Skin · retinoid', icon: 'droplet', body: 'The gold-standard prescription retinoid for acne, texture, and visible signs of aging.' },
    { name: 'Accutane', tag: 'Isotretinoin · acne', icon: 'droplet', body: 'A powerful, clinician-supervised course for stubborn, severe acne, start to finish.' },
  ];
  const hormone = [
    { name: 'TRT: Testosterone', tag: 'TRT', icon: 'mars', body: 'Testosterone replacement for low energy, drive, and recovery. Custom dosed to your labs and monitored.' },
    { name: 'HRT: Estrogen', tag: 'HRT', icon: 'venus', body: 'Estrogen therapy to ease the symptoms of perimenopause and menopause, tuned to your body.' },
    { name: 'HRT: Estradiol', tag: 'HRT', icon: 'venus', body: 'Bioidentical estradiol for steady, balanced hormone support and symptom relief.' },
  ];
  const longevity = [
    { name: 'NAD+', tag: 'Cellular energy', icon: 'dna', body: 'A coenzyme central to energy and cellular repair, supporting vitality, focus, and healthy aging.' },
    { name: 'Sermorelin', tag: 'GH secretagogue', icon: 'dna', body: 'A peptide that prompts your body’s own growth-hormone production to aid recovery, sleep, and body composition.' },
  ];
  const peptides = [
    { name: 'BPC-157', tag: 'Recovery peptide', icon: 'flask', body: 'Studied for tissue repair and gut health. A recovery-focused peptide.' },
    { name: 'TB-500', tag: 'Recovery peptide', icon: 'flask', body: 'A peptide explored for healing, flexibility, and reduced inflammation.' },
    { name: 'CJC-1295', tag: 'Growth-hormone peptide', icon: 'flask', body: 'A long-acting peptide that supports natural growth-hormone release.' },
    { name: 'Ipamorelin', tag: 'Growth-hormone peptide', icon: 'flask', body: 'A gentle GH secretagogue often paired for recovery and lean mass.' },
    { name: 'GHK-Cu', tag: 'Copper peptide · skin', icon: 'droplet', body: 'A copper peptide studied for skin renewal, collagen, and hair.' },
    { name: 'Semax', tag: 'Nootropic peptide', icon: 'dna', body: 'A peptide explored for focus, memory, and neuroprotection.' },
    { name: 'Selank', tag: 'Nootropic peptide', icon: 'dna', body: 'A peptide studied for calm, stress resilience, and mental clarity.' },
  ].map(p => ({ ...p, comingSoon: true, eta: 'July 2027' }));

  return (
    <>
      {/* Hero — full-bleed lab still with ink scrim (matches home) */}
      <section style={{ position: 'relative', minHeight: 'min(72vh, 640px)', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <img src={window.__asset('lab1', 'assets/lab-1.png')} alt="Clinical pharmacy"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(var(--blue-900-rgb),0.86) 0%, rgba(var(--blue-900-rgb),0.62) 40%, rgba(var(--blue-900-rgb),0.18) 70%, rgba(var(--blue-900-rgb),0) 100%)' }}></div>
        <div className="container" style={{ position: 'relative' }}>
          <div style={{ maxWidth: 640, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-5)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', padding: '0.35rem 0.85rem', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(4px)', color: '#fff', fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase' }}>Products</span>
            <h1 style={{ fontSize: 'var(--text-hero)', margin: 0, lineHeight: 1.05, color: '#fff' }}>
              Industry leading<br /><em style={{ fontStyle: 'italic', color: 'var(--blue-300)' }}>pharmaceuticals.</em>
            </h1>
            <p style={{ fontSize: 'var(--text-xl)', lineHeight: 'var(--leading-relaxed)', color: 'rgba(255,255,255,0.88)', margin: 0, maxWidth: '46ch' }}>
              The following treatments are prescribed and dispensed through our brands, Kalos Health and Hygeia Rx with supervision and guidance by a licensed clinician.
            </p>
          </div>
        </div>
      </section>

      {/* Weight loss */}
      <Section bg="var(--paper)">
        <GroupHead eyebrow="Weight loss" title="GLP-1 &amp; metabolic." blurb="The molecules behind today’s biggest results, prescribed and monitored by licensed clinicians." />
        <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {weightLoss.map((p, i) => <ProductCard key={i} {...p} />)}
        </div>
      </Section>

      {/* Skin & hair */}
      <Section bg="var(--surface-2)">
        <GroupHead eyebrow="Skin &amp; hair" title="Dermatology, prescribed." blurb="Clinical-grade skin and hair treatments: the real molecules, not the marketing." />
        <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)' }}>
          {skinHair.map((p, i) => <ProductCard key={i} {...p} />)}
        </div>
      </Section>

      {/* Hormone therapy — TRT & HRT */}
      <Section bg="var(--paper)">
        <GroupHead eyebrow="Hormone therapy" title="TRT &amp; HRT." blurb="Replacement therapy dosed to your labs and reviewed on a schedule." />
        <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {hormone.map((p, i) => <ProductCard key={i} {...p} />)}
        </div>
      </Section>

      {/* Longevity & peptides */}
      <Section bg="var(--surface-2)">
        <GroupHead eyebrow="Longevity &amp; peptides" title="Optimize, repair, recover." blurb="Cellular-health and peptide therapies for energy, recovery, and healthy aging." />
        <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)', maxWidth: 800 }}>
          {longevity.map((p, i) => <ProductCard key={i} {...p} />)}
        </div>

        <div style={{ marginTop: 'var(--space-9)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginBottom: 'var(--space-6)', flexWrap: 'wrap' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '0.4rem 0.9rem', borderRadius: 'var(--radius-pill)', background: 'var(--blue-100)', color: 'var(--blue-700)', fontSize: 'var(--text-xs)', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase' }}>On the way · ETA July 2027</span>
            <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--text-md)' }}>Peptide therapies we’re bringing to our brands next.</p>
          </div>
          <div className="ph-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)' }}>
            {peptides.map((p, i) => <ProductCard key={i} {...p} />)}
          </div>
        </div>
      </Section>

      {/* Where to get them */}
      <Section bg="var(--paper)">
        <div className="ph-cta" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-6)',
          flexWrap: 'wrap', padding: 'var(--space-9)', background: 'var(--surface-blue)', borderRadius: 'var(--radius-xl)',
        }}>
          <div style={{ maxWidth: '40ch' }}>
            <span className="eyebrow">Get care</span>
            <h2 style={{ fontSize: 'var(--text-d2)', margin: '14px 0 0' }}>Prescribed through our brands.</h2>
            <p style={{ marginTop: 'var(--space-3)', color: 'var(--text-muted)', fontSize: 'var(--text-md)' }}>Choose the brand built for you. Each handles consults, pricing, and shipping.</p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-5)' }}>
              <span style={{ width: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <img src={window.__asset('kalosLogo', 'assets/kalos-logo.png')} alt="Kalos Health" style={{ height: 96, width: 'auto', maxWidth: '100%', objectFit: 'contain' }} />
              </span>
              <span style={{ width: 320, flexShrink: 0 }}>
                <Button variant="primary" size="lg" fullWidth iconRight={<Icon d={ICONS.arrow} size={18} />} onClick={() => go('kalos')}>Explore Kalos Health</Button>
              </span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'var(--space-5)' }}>
              <span style={{ width: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <img src={window.__asset('hygeiaLogo', 'assets/hygeia-logo.png')} alt="Hygeia Rx" style={{ height: 96, width: 'auto', maxWidth: '100%', objectFit: 'contain' }} />
              </span>
              <span style={{ width: 320, flexShrink: 0 }}>
                <Button variant="primary" size="lg" fullWidth iconRight={<Icon d={ICONS.arrow} size={18} />} onClick={() => go('hygeia')}>Explore Hygeia Rx</Button>
              </span>
            </div>
          </div>
        </div>
        <p style={{ marginTop: 'var(--space-7)', color: 'var(--text-faint)', fontSize: 'var(--text-sm)', lineHeight: 1.6, maxWidth: '92ch' }}>
          Panterra Health does not sell or dispense medication. Prescription products are available only through our brands and only if a licensed clinician determines they’re appropriate for you. This page is informational and not medical advice.
        </p>
      </Section>
    </>
  );
}

/* ---------------- Contact ---------------- */
function ContactPage() {
  const { Input, Textarea, Button } = DSp;
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };

  return (
    <Section>
      <div className="ph-contact" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 'var(--space-10)', alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-5)' }}>
          <span className="eyebrow">Contact Us</span>
          <h1 style={{ fontSize: 'var(--text-d1)', margin: 0, maxWidth: '14ch' }}>Let’s talk.</h1>
          <p style={{ color: 'var(--text-muted)', fontSize: 'var(--text-lg)', margin: 0, maxWidth: '40ch' }}>
            Questions, partnerships, or press.<br />Send us a note and the right person will get back to you.
          </p>
          <div style={{ marginTop: 'var(--space-3)', display: 'flex', alignItems: 'center', gap: 'var(--space-3)', color: 'var(--ink-900)' }}>
            <span style={{ color: 'var(--blue-700)' }}><Icon d={ICONS.mail} size={22} /></span>
            <a href="mailto:hello@panterrahealth.com" style={{ fontSize: 'var(--text-lg)', color: 'var(--ink-900)', textDecoration: 'none' }}>hello@panterrahealth.com</a>
          </div>
        </div>

        <div style={{ background: 'var(--surface-2)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-8)' }}>
          {sent ? (
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-4)', minHeight: 320, justifyContent: 'center' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: 'var(--blue-100)', color: 'var(--blue-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={ICONS.check} size={30} />
              </div>
              <h3 style={{ margin: 0, fontSize: 'var(--text-d3)' }}>Thank you, message sent.</h3>
              <p style={{ margin: 0, color: 'var(--text-muted)' }}>We’ll be in touch shortly. (Demo form, no data is stored.)</p>
              <Button variant="secondary" onClick={() => setSent(false)}>Send another</Button>
            </div>
          ) : (
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)' }}>
                <Input id="c-first" label="First name" placeholder="Jane" required />
                <Input id="c-last" label="Last name" placeholder="Rivera" required />
              </div>
              <Input id="c-email" label="Email" type="email" placeholder="you@example.com" required />
              <Input id="c-subject" label="Subject" placeholder="How can we help?" />
              <Textarea id="c-msg" label="Message" rows={5} placeholder="Tell us a little about what you’re looking for…" required />
              <Button type="submit" variant="primary" size="lg" fullWidth>Send message</Button>
              <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-faint)', textAlign: 'center' }}>
                By submitting you agree to be contacted by Panterra Health.
              </span>
            </form>
          )}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { PageHero, ValueRow, AboutPage, MissionPage, MissionPoint, BrandPage, KalosPage, HygeiaPage, ProdIcon, ProductCard, GroupHead, ProductsPage, ContactPage });