/* Orenwell marketing site — Program / category landing (conversion LP).
   Data-driven: one template, four category entries (OW_PROGRAMS). The Weight Loss &
   GLP-1 entry reproduces the original page exactly; the other three carry their own
   copy. Compliance: category-level only (no drug/product names), [Pricing TBD],
   consult-gate framing, provider-determined eligibility, disclaimers preserved. */

const OW_PROGRAMS = {
  "weight-loss-glp-1": {
    eyebrow: "Medically guided weight loss",
    h1: { pre: "A weight program with a ", accent: "provider", post: " behind it" },
    subhead: "Not a quick fix — a considered, medically guided plan that adapts to your body and your goals over time.",
    heroMicro: false,
    photo: { tone: "sage", label: "Calm, aspirational lifestyle" },
    bullets: [
      "A licensed provider reviews your health and personalizes your plan",
      "Medically guided — never automated, never one-size-fits-all",
      "Discreet delivery to your door, with ongoing check-ins",
      "Transparent, all-in pricing — cancel anytime",
    ],
    lifestyle: [
      { tone: "sage", label: "Woman in her 30s preparing a fresh meal at home", src: "assets/lifestyle/glp1-row-meal-prep.png" },
      { tone: "warm", label: "Man walking outdoors, relaxed and active", src: "assets/lifestyle/glp1-row-walking-man.png" },
      { tone: "cream", label: "Couple laughing together on a morning walk", src: "assets/lifestyle/glp1-row-couple-walk.png" },
      { tone: "mist", label: "Person checking a fitness watch after a workout", src: "assets/lifestyle/glp1-row-fitness-watch.png" },
    ],
    included: [
      { icon: "stethoscope", title: "A licensed provider, start to finish", body: "Your plan is reviewed and guided by a clinician — never automated." },
      { icon: "clipboard-list", title: "A plan personalized by your provider", body: "Tailored to your health profile and adjusted as you progress." },
      { icon: "truck", title: "Delivered to your door", body: "Discreet shipping with everything you need to get started." },
      { icon: "messages-square", title: "Ongoing check-ins & support", body: "Message your care team and adjust your plan as life changes." },
    ],
    faq: [
      ["Is GLP-1 weight loss right for me?", "That's a question only a licensed provider can answer. Your provider reviews your health history, goals, and any relevant information to determine what's appropriate for you."],
      ["Do I need labs first?", "Sometimes — your provider will let you know if any lab work is needed for a safe, personalized plan."],
      ["What if I'm not a fit?", "That's okay — qualification is determined by a licensed provider, and there's no charge for finding out."],
      ["How does pricing work?", "Transparent, all-in pricing — you'll see your exact price before you commit, no hidden fees, cancel anytime."],
    ],
    finalCta: { heading: "Care that respects your time and trust", subhead: "Honest guidance, real providers, and a plan that's yours alone.", button: "See if you qualify" },
  },

  "mens-vitality-trt": {
    eyebrow: "Men's health & TRT",
    h1: { pre: "Men's vitality care, with a ", accent: "provider", post: " behind it" },
    subhead: "Not a quick fix or a pill mill — a considered, provider-guided plan for energy, drive, and strength, built around you and adjusted over time.",
    heroMicro: true,
    photo: { tone: "teal", label: "Aspirational lifestyle, natural light" },
    bullets: [
      "A licensed provider reviews your symptoms, labs, and goals",
      "A plan built around you — for energy, drive, and strength",
      "Discreet delivery in plain, private packaging",
      "Transparent, all-in pricing — cancel anytime",
    ],
    lifestyle: [
      { tone: "teal", label: "Man in his 40s outdoors, energized", src: "assets/lifestyle/trt-row-outdoors.png" },
      { tone: "warm", label: "Father playing with his kids in the yard", src: "assets/lifestyle/trt-row-kids-yard.png" },
      { tone: "mist", label: "Man lifting weights at the gym", src: "assets/lifestyle/trt-row-gym.png" },
      { tone: "sage", label: "Confident professional man at work", src: "assets/lifestyle/trt-row-professional.png" },
    ],
    included: [
      { icon: "stethoscope", title: "A licensed provider, start to finish", body: "Your plan is reviewed and guided by a clinician, never automated." },
      { icon: "clipboard-list", title: "A plan personalized by your provider", body: "Built around your symptoms, goals, and health profile, and adjusted over time." },
      { icon: "truck", title: "Discreet delivery", body: "Everything you need, shipped to your door in plain, private packaging." },
      { icon: "messages-square", title: "Ongoing check-ins & support", body: "Message your care team and revisit your plan as your needs change." },
    ],
    faq: [
      ["Is TRT right for me?", "That's a question only a licensed provider can answer. Your provider reviews your symptoms, health history, and any relevant labs to determine what's appropriate for you."],
      ["Do I need labs first?", "Often, yes — your provider will let you know what's needed for a safe, personalized plan."],
      ["What if I'm not a fit?", "That's okay — qualification is determined by a licensed provider, and there's no charge for finding out."],
      ["How does pricing work?", "Transparent, all-in pricing — you'll see your exact price before you commit, no hidden fees, cancel anytime."],
    ],
    finalCta: { heading: "Ready to feel like yourself again?", subhead: "Honest guidance, real providers, and a plan that's yours alone.", button: "See if you qualify" },
  },

  "menopause-hrt": {
    eyebrow: "Women's health & HRT",
    h1: { pre: "Perimenopause & menopause care, with a ", accent: "provider", post: " behind it" },
    subhead: "From the first signs of perimenopause through menopause — a considered, provider-guided plan for your symptoms and your stage, personalized to you and adjusted over time.",
    heroMicro: true,
    photo: { tone: "sage", label: "Aspirational lifestyle, natural light" },
    bullets: [
      "A menopause-literate provider reviews your symptoms and history",
      "A plan for hot flashes, sleep, mood, and the rest",
      "Discreet delivery to your door, with ongoing support",
      "Transparent, all-in pricing — cancel anytime",
    ],
    lifestyle: [
      { tone: "sage", label: "Woman around 50 resting calmly by a window", src: "assets/lifestyle/hrt-row-window.png" },
      { tone: "cream", label: "Two friends laughing over coffee", src: "assets/lifestyle/hrt-row-coffee-friends.png" },
      { tone: "mist", label: "Woman doing yoga at home", src: "assets/lifestyle/hrt-row-yoga.png" },
      { tone: "warm", label: "Woman sleeping peacefully", src: "assets/lifestyle/hrt-row-sleep.png" },
    ],
    included: [
      { icon: "stethoscope", title: "A licensed provider, start to finish", body: "Your plan is reviewed and guided by a clinician, never automated." },
      { icon: "clipboard-list", title: "A plan personalized by your provider", body: "Built around your symptoms and your stage of life, and adjusted as you go." },
      { icon: "truck", title: "Discreet delivery", body: "Everything you need, shipped to your door in plain, private packaging." },
      { icon: "messages-square", title: "Ongoing check-ins & support", body: "Message your care team and revisit your plan as your needs change." },
    ],
    faq: [
      ["Is HRT right for me?", "That's a question only a licensed provider can answer. Your provider reviews your symptoms, health history, and goals to determine what's appropriate for you."],
      ["Do I need labs first?", "Sometimes — your provider will let you know if recent lab work is needed."],
      ["What if I'm not a fit?", "That's okay — qualification is determined by a licensed provider, and there's no charge for finding out."],
      ["How does pricing work?", "Transparent, all-in pricing — you'll see your exact price before you commit, no hidden fees, cancel anytime."],
    ],
    finalCta: { heading: "Ready to feel like yourself again?", subhead: "Honest guidance, real providers, and a plan that's yours alone.", button: "See if you qualify" },
  },

  "peptides-longevity": {
    eyebrow: "Wellness & peptides",
    h1: { pre: "Peptide & longevity care, with a ", accent: "provider", post: " behind it" },
    subhead: "Not DIY peptides off the internet — a considered, provider-guided approach to energy, recovery, and healthy aging, personalized to you.",
    heroMicro: true,
    photo: { tone: "mist", label: "Aspirational lifestyle, natural light" },
    bullets: [
      "A licensed provider guides your protocol — never DIY",
      "A plan for energy, recovery, and healthy aging",
      "Discreet delivery to your door, with ongoing support",
      "Transparent, all-in pricing — cancel anytime",
    ],
    lifestyle: [
      { tone: "mist", label: "Active older adult stretching outdoors", src: "assets/lifestyle/wellness-row-stretching.png" },
      { tone: "sage", label: "Person hiking on a sunny trail", src: "assets/lifestyle/wellness-row-hiking.png" },
      { tone: "warm", label: "Adult recovering after a workout", src: "assets/lifestyle/wellness-row-recovery.png" },
      { tone: "teal", label: "Couple cycling together", src: "assets/lifestyle/wellness-row-cycling.png" },
    ],
    included: [
      { icon: "stethoscope", title: "A licensed provider, start to finish", body: "Your plan is reviewed and guided by a clinician, never automated." },
      { icon: "clipboard-list", title: "A plan personalized by your provider", body: "Built around your goals and health profile, and adjusted over time." },
      { icon: "truck", title: "Discreet delivery", body: "Everything you need, shipped to your door in plain, private packaging." },
      { icon: "messages-square", title: "Ongoing check-ins & support", body: "Message your care team and revisit your plan as your needs change." },
    ],
    faq: [
      ["Is peptide therapy right for me?", "That's a question only a licensed provider can answer, based on your goals and health history."],
      ["What can it support?", "Peptide and longevity protocols are used to support areas like energy, recovery, and healthy aging — your provider determines what's appropriate for you."],
      ["What if I'm not a fit?", "That's okay — qualification is determined by a licensed provider, and there's no charge for finding out."],
      ["How does pricing work?", "Transparent, all-in pricing — you'll see your exact price before you commit, no hidden fees, cancel anytime."],
    ],
    finalCta: { heading: "Ready to feel your best?", subhead: "Honest guidance, real providers, and a plan that's yours alone.", button: "See if you qualify" },
  },

  "hair-loss": {
    eyebrow: "Hair loss",
    h1: { pre: "Hair loss care, with a ", accent: "provider", post: " behind it" },
    subhead: "Not a guess from a forum thread — a considered, provider-guided plan to support healthier hair, personalized to you and adjusted over time.",
    heroMicro: true,
    photo: { tone: "warm", label: "Aspirational lifestyle, natural light" },
    bullets: [
      "A licensed provider reviews your pattern, history, and goals",
      "A plan to support healthier, fuller-looking hair",
      "Discreet delivery to your door, with ongoing support",
      "Transparent, all-in pricing — cancel anytime",
    ],
    lifestyle: [
      { tone: "cream", label: "Man with healthy hair, natural light", src: "assets/lifestyle/hair-row-man-healthy.png" },
      { tone: "warm", label: "Woman running hands through full hair", src: "assets/lifestyle/hair-row-woman-hair.png" },
      { tone: "sage", label: "Person smiling confidently outdoors", src: "assets/lifestyle/hair-row-confident-outdoors.png" },
      { tone: "mist", label: "Close, natural portrait in soft light", src: "assets/lifestyle/hair-row-portrait.png" },
    ],
    included: [
      { icon: "stethoscope", title: "A licensed provider, start to finish", body: "Your plan is reviewed and guided by a clinician, never automated." },
      { icon: "clipboard-list", title: "A plan personalized by your provider", body: "Built around your hair-loss pattern, history, and goals, and adjusted over time." },
      { icon: "truck", title: "Discreet delivery", body: "Everything you need, shipped to your door in plain, private packaging." },
      { icon: "messages-square", title: "Ongoing check-ins & support", body: "Message your care team and revisit your plan as your needs change." },
    ],
    faq: [
      ["Is hair loss treatment right for me?", "That's a question only a licensed provider can answer, based on your hair-loss pattern, health history, and goals."],
      ["How soon might I notice a difference?", "Hair changes gradually, so consistency matters. Your provider will set realistic expectations and adjust your plan over time."],
      ["What if I'm not a fit?", "That's okay — qualification is determined by a licensed provider, and there's no charge for finding out."],
      ["How does pricing work?", "Transparent, all-in pricing — you'll see your exact price before you commit, no hidden fees, cancel anytime."],
    ],
    finalCta: { heading: "Ready to invest in your hair?", subhead: "Honest guidance, real providers, and a plan that's yours alone.", button: "See if you qualify" },
  },
};

/* Numbered "How it works" step */
function HowStep({ n, title, body }) {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <div style={{ flexShrink: 0, width: 40, height: 40, borderRadius: "50%", border: "1.5px solid var(--amber-400)", color: "var(--amber-700)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20 }}>{n}</div>
      <div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, color: "var(--teal-700)", margin: "7px 0 5px" }}>{title}</h3>
        <p style={{ fontSize: 15, color: "var(--gray-600)", lineHeight: 1.55, margin: 0 }}>{body}</p>
      </div>
    </div>
  );
}

function Program({ category = "weight-loss-glp-1", onQualify, onBack }) {
  const p = OW_PROGRAMS[category] || OW_PROGRAMS["weight-loss-glp-1"];
  const [open, setOpen] = React.useState(0);
  const FaqRow = window.FaqRow;
  const faqItems = window.OW_FAQ_ITEMS || [];
  const AsSeenOn = window.AsSeenOn;
  const pad = { padding: "0 22px" };
  return (
    <div>
      {/* Back */}
      <div style={{ ...pad, paddingTop: 16 }}>
        <button onClick={onBack} style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "none", border: "none", color: "var(--teal-700)", fontSize: 14.5, fontWeight: 600, cursor: "pointer", padding: "6px 0" }}>
          <Icon name="arrow-left" size={16} color="var(--teal-700)" /> All programs
        </button>
      </div>

      {/* Hero — headline + bullets + primary Get Started (→ #intake) */}
      <section style={{ ...pad, paddingTop: 14, paddingBottom: 30 }}>
        <Eyebrow style={{ marginBottom: 12 }}>{p.eyebrow}</Eyebrow>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 46, lineHeight: 1.04, color: "var(--teal-700)", margin: "0 0 16px" }}>
          {p.h1.pre}<span style={{ color: "var(--amber-500)", fontStyle: "italic" }}>{p.h1.accent}</span>{p.h1.post}
        </h1>
        <p style={{ fontSize: 17.5, lineHeight: 1.6, color: "var(--gray-600)", margin: "0 0 30px" }}>{p.subhead}</p>

        {/* How it works with Orenwell — the 3-step process leads the hero */}
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 26, color: "var(--teal-700)", margin: "0 0 6px" }}>How it works with Orenwell</h2>
        <p style={{ fontSize: 15.5, color: "var(--gray-600)", lineHeight: 1.55, margin: "0 0 24px" }}>Getting started is simple and takes just a few minutes.</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 24, margin: "0 0 28px" }}>
          <HowStep n="1" title="Complete Intake" body="Answer a few questions about your health and goals. It takes about 5 minutes." />
          <HowStep n="2" title="Meet Your Provider" body="A licensed provider reviews your information and determines if treatment is right for you." />
          <HowStep n="3" title="Get Your Medication" body="If approved, your medication ships free and arrives at your door in 2-3 business days." />
        </div>

        <Button variant="primary" size="lg" fullWidth onClick={onQualify} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get Started</Button>
        <div style={{ display: "flex", alignItems: "center", gap: 7, marginTop: 12, fontSize: 13.5, fontWeight: 500, color: "var(--gray-500)" }}>
          <Icon name="badge-check" size={14} color="var(--teal-600)" stroke={1.7} /> Transparent, all-in pricing — cancel anytime.
        </div>
      </section>

      {/* Lifestyle image row — a variety of people relevant to the category */}
      <section style={{ ...pad, paddingTop: 6, paddingBottom: 34 }}>
        <div className="ow-life-row">
          {p.lifestyle.map((ph, i) => (
            <Photo key={i} tone={ph.tone} label={ph.label} src={ph.src} height={154} />
          ))}
        </div>
      </section>

      {/* As Seen On — same press band as the homepage */}
      {AsSeenOn ? <AsSeenOn /> : null}

      {/* Treatment options — transparent pricing menu by product & supply length */}
      <section id="ow-products" style={{ ...pad, paddingTop: 36, paddingBottom: 36 }}>
        <Eyebrow style={{ marginBottom: 12 }}>Treatment options</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 30, color: "var(--teal-700)", margin: "0 0 6px" }}>Transparent pricing</h2>
        <p style={{ fontSize: 14.5, color: "var(--gray-600)", lineHeight: 1.55, margin: "0 0 20px" }}>
          Prices by product and supply length. Eligibility and any prescription are determined by a licensed provider.
        </p>
        {window.PriceMenu ? <window.PriceMenu slug={category} /> : null}
      </section>

      {/* Closing Get Started CTA before the FAQ */}
      <section style={{ ...pad, paddingTop: 20, paddingBottom: 12 }}>
        <Button variant="primary" size="lg" fullWidth onClick={onQualify} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get Started</Button>
      </section>

      {/* FAQ — same set as the homepage / FAQ page */}
      <section style={{ ...pad, paddingTop: 36, paddingBottom: 44 }}>
        <Eyebrow style={{ marginBottom: 12 }}>Frequently asked questions</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 30, color: "var(--teal-700)", margin: "0 0 14px" }}>Good to know</h2>
        {FaqRow && faqItems.map(([q, a], i) => (
          <FaqRow key={i} q={q} a={a} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
        ))}
      </section>
    </div>
  );
}

Object.assign(window, { Program, OW_PROGRAMS });