/* Orenwell marketing site — Home screen (mobile-first, fully responsive) */

/* Tone gradients for the category image placeholders (real photography to be dropped in later) */
const OW_CAT_TONES = {
  warm: "linear-gradient(135deg,#EADBC2,#C9A878 60%,#A98A5E)",
  teal: "linear-gradient(135deg,#1A5C57,#0A4C48 70%,#062E2B)",
  sage: "linear-gradient(135deg,#C0D5D2,#8FB2AE 70%,#5C918C)",
  mist: "linear-gradient(135deg,#DCE2E4,#A8B7B9 68%,#7B8E90)",
  cream: "linear-gradient(135deg,#F3E7D2,#D9C29A 68%,#B89A6A)",
};

/* Category card — responsive: horizontal row on mobile (image left, title + arrow right);
   vertical card on desktop (image on top, title + arrow below). Orientation is handled in CSS. */
function CategoryCard({ tone, photoLabel, title, hook, img, onClick }) {
  const [h, setH] = React.useState(false);
  const dark = tone === "teal";
  return (
    <div className="ow-cat-card" role="button" tabIndex={0} aria-label={title}
      onClick={onClick}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(); } }}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ cursor: "pointer", borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--border)",
        background: "var(--white)", boxShadow: h ? "var(--shadow-md)" : "var(--shadow-card)",
        transform: h ? "translateY(-2px)" : "none", transition: "all .22s var(--ease)" }}>
      <div className="ow-cat-photo" aria-hidden="true" title={photoLabel} style={{ background: OW_CAT_TONES[tone] }}>
        {img
          ? <img src={img} alt={photoLabel} loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
          : <Icon name="image" size={20} color={dark ? "rgba(255,255,255,.85)" : "rgba(79,89,87,.66)"} />}
      </div>
      <div className="ow-cat-body">
        <div style={{ minWidth: 0 }}>
          <h2 className="ow-cat-title">{title}</h2>
          {hook ? <div className="ow-cat-hook">{hook}</div> : null}
        </div>
        <span style={{ flexShrink: 0, width: 38, height: 38, borderRadius: "50%", background: h ? "var(--teal-100)" : "var(--teal-50)", display: "flex", alignItems: "center", justifyContent: "center", transition: "background .22s var(--ease)" }}>
          <Icon name="arrow-right" size={18} color="var(--teal-700)" />
        </span>
      </div>
    </div>
  );
}

/* As Seen On — compact horizontal press band (single tight row): "As Seen On"
   eyebrow → three publication wordmarks (supplied SVGs, shown muted) → "and over
   350 news sites" → the BrandPush verification badge. Wraps gracefully on narrow
   widths. Shared verbatim by the homepage and every category landing page. */
const OW_PRESS = [
  { src: "assets/press/minyanville.svg", alt: "MinyanVille", maxW: 116, maxH: 20 },
  { src: "assets/press/chronicle-journal.svg", alt: "The Chronicle Journal", maxW: 88, maxH: 33 },
  { src: "assets/press/mymotherlode.svg", alt: "myMotherlode.com", maxW: 116, maxH: 18 },
];
function AsSeenOn() {
  return (
    <section style={{ background: "var(--off-white)", borderBottom: "1px solid var(--border)" }}>
      <div className="ow-inner" style={{ paddingTop: 18, paddingBottom: 18 }}>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "center", gap: "12px 26px" }}>
          <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gray-500)", whiteSpace: "nowrap" }}>As Seen On</span>
          {OW_PRESS.map((p) => (
            <img key={p.alt} src={p.src} alt={p.alt} loading="lazy"
              style={{ height: "auto", width: "auto", maxWidth: p.maxW, maxHeight: p.maxH, opacity: 0.6, display: "block" }} />
          ))}
          <span style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gray-500)", whiteSpace: "nowrap" }}>And over 350 news sites</span>
          <a href="https://www.brandpush.co/?utm_source=Client+Referral&utm_medium=Trust+Badge&utm_campaign=Trust+Badge&utm_content=1738956941612" target="_blank" rel="noopener noreferrer"
            style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "6px 12px", borderRadius: "var(--radius-pill)", background: "var(--white)", border: "1px solid var(--border)", textDecoration: "none", whiteSpace: "nowrap" }}>
            <Icon name="badge-check" size={15} color="var(--success)" stroke={1.8} />
            <span style={{ fontSize: 12, fontWeight: 600, color: "var(--gray-600)" }}>Verified by <span style={{ color: "var(--ink-800)" }}>BrandPush.co</span></span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* Looping benefits ticker — clean, light strip with line icons + charcoal text */
function BenefitsBar() {
  const items = [
    { icon: "stethoscope", t: "Real licensed providers" },
    { icon: "user-round-check", t: "Personalized by your provider" },
    { icon: "monitor-smartphone", t: "100% online & discreet" },
    { icon: "shield-check", t: "Licensed in your state" },
    { icon: "calendar-x", t: "Cancel anytime" },
  ];
  const Row = () => (
    <div className="ow-marquee-row" aria-hidden="false">
      {items.map((it, i) => (
        <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "0 28px", borderRight: "1px solid var(--border)" }}>
          <Icon name={it.icon} size={17} color="var(--teal-700)" stroke={1.6} />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 600, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--ink-800)", whiteSpace: "nowrap" }}>{it.t}</span>
        </span>
      ))}
    </div>
  );
  return (
    <section className="ow-benefits" style={{ background: "var(--white)", overflow: "hidden", borderBottom: "1px solid var(--border)" }}>
      <div className="ow-marquee"><Row /><Row /></div>
    </section>
  );
}

function Step({ n, title, body }) {
  return (
    <div style={{ display: "flex", gap: 16 }}>
      <div style={{ flexShrink: 0, width: 38, height: 38, 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: 19 }}>{n}</div>
      <div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 21, color: "var(--teal-700)", margin: "6px 0 5px" }}>{title}</h3>
        <p style={{ fontSize: 15, color: "var(--gray-600)", lineHeight: 1.55, margin: 0 }}>{body}</p>
      </div>
    </div>
  );
}

/* Soft-sell category sections lower on the homepage. The hero cards smooth-scroll
   here; each section's "Get Started" opens that category's program page (onProgram).
   Category-level copy only (no drug/product names), provider-determined eligibility. */
const OW_HOME_CATS = [
  {
    slug: "weight-loss-glp-1",
    eyebrow: "Medically guided weight loss",
    title: "Weight Loss & GLP-1",
    body: "A considered, medically guided plan that adapts to your body and goals over time — reviewed and personalized by a licensed provider, with discreet delivery and ongoing support.",
    lifestyle: { tone: "sage", label: "Person preparing a fresh, balanced meal at home in natural light", img: "assets/lifestyle/weight-loss-glp1.jpg", pos: "center" },
    med: { tone: "cream", label: "Medication — treatment shown on a clean surface", img: "assets/med/weight-loss-glp1.png" },
    explainer: "See what's included and how it works — no commitment.",
  },
  {
    slug: "mens-vitality-trt",
    eyebrow: "Men's health & TRT",
    title: "Men's Health & TRT",
    body: "A provider-guided plan for energy, drive, and strength — built around your symptoms and goals, and adjusted over time. Real clinicians, discreet delivery, no pill mill.",
    lifestyle: { tone: "teal", label: "Man at home in natural light, relaxed and energized", img: "assets/lifestyle/mens-health-trt.jpg", pos: "center" },
    med: { tone: "mist", label: "Medication — treatment shown on a clean surface", img: "assets/med/mens-health-trt.png" },
    explainer: "See what's included and how it works — no commitment.",
  },
  {
    slug: "hair-loss",
    eyebrow: "Hair loss",
    title: "Hair Loss",
    body: "A provider-guided plan to support healthier, fuller-looking hair — personalized to your pattern and history, and adjusted over time. No guesswork from forum threads.",
    lifestyle: { tone: "cream", label: "Man with healthy hair smiling at home in natural light", img: "assets/lifestyle/hair-loss.jpg", pos: "center" },
    med: { tone: "warm", label: "Medication — treatment shown on a clean surface", img: "assets/med/hair-loss.png" },
    explainer: "See what's included and how it works — no commitment.",
  },
  {
    slug: "menopause-hrt",
    eyebrow: "Women's health & HRT",
    title: "Women's Health & HRT",
    body: "A provider-guided plan for hot flashes, sleep, mood, and the rest — personalized to your symptoms and stage of life, and adjusted as you go. Not “just deal with it.”",
    lifestyle: { tone: "sage", label: "Woman resting calmly by a sunlit window with a warm drink", img: "assets/lifestyle/womens-health-hrt.jpg", pos: "center" },
    med: { tone: "cream", label: "Medication — treatment shown on a clean surface", img: "assets/med/womens-health-hrt.png" },
    explainer: "See what's included and how it works — no commitment.",
  },
  {
    slug: "peptides-longevity",
    eyebrow: "Wellness & peptides",
    title: "Wellness & Peptides",
    body: "A provider-guided approach to energy, recovery, and healthy aging — personalized to your goals and health profile. Considered care, never DIY peptides off the internet.",
    lifestyle: { tone: "mist", label: "Woman meditating calmly at home in natural light", img: "assets/lifestyle/wellness-peptides.jpg", pos: "center" },
    med: { tone: "warm", label: "Medication — treatment shown on a clean surface", img: "assets/med/wellness-peptides.png" },
    explainer: "See what's included and how it works — no commitment.",
  },
];

function HomeCategorySection({ cat, reversed, dark, onProgram }) {
  return (
    <section id={`cat-${cat.slug}`} style={{ background: dark ? "var(--off-white)" : "var(--white)", borderTop: "1px solid var(--border)", scrollMarginTop: 80 }}>
      <div className="ow-inner" style={{ paddingTop: 52, paddingBottom: 52 }}>
        <div className={`ow-catsec-grid${reversed ? " ow-catsec--rev" : ""}`}>
          {/* Images: one lifestyle, one medication */}
          <div className="ow-catsec-body">
            <div className="ow-catsec-imgs">
              <Photo tone={cat.lifestyle.tone} label={cat.lifestyle.label} src={cat.lifestyle.img} objectPosition={cat.lifestyle.pos || "center"} height={208} />
              <Photo tone={cat.med.tone} label={cat.med.label} src={cat.med.img} objectPosition={cat.med.pos || "center"} height={208} />
            </div>
          </div>

          {/* Copy + the funnel's forward path */}
          <div className="ow-catsec-body">
            <Eyebrow style={{ marginBottom: 12 }}>{cat.eyebrow}</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(28px, 3.6vw, 36px)", lineHeight: 1.1, color: "var(--teal-700)", margin: "0 0 14px", textWrap: "pretty" }}>{cat.title}</h2>
            <p style={{ fontSize: "clamp(15.5px, 1.2vw, 17px)", color: "var(--gray-600)", lineHeight: 1.6, margin: "0 0 22px", maxWidth: 460 }}>{cat.body}</p>
            <div style={{ maxWidth: 300 }}>
              <Button variant="primary" size="lg" fullWidth onClick={() => onProgram(cat.slug)} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get Started</Button>
            </div>
            <p style={{ display: "flex", alignItems: "center", gap: 7, fontSize: 13.5, fontWeight: 500, color: "var(--gray-500)", margin: "12px 0 0" }}>
              <Icon name="clock" size={14} color="var(--gray-500)" stroke={1.7} /> {cat.explainer}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Home({ onProgram }) {
  const [faq, setFaq] = React.useState(0);
  return (
    <div>
      {/* Hero — single centered column on desktop: eyebrow → headline → subhead → category cards.
         Real photography to be added later once the layout is locked. */}
      <section className="ow-hero-sec" style={{ background: "var(--off-white)" }}>
        <div className="ow-inner">
          <div className="ow-hero-copy">
            <Badge variant="outline" dot style={{ marginBottom: 18 }}>Licensed providers · Transparent pricing</Badge>
            <h1 className="ow-hero-h1" style={{ fontFamily: "var(--font-display)", fontWeight: 600, lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--teal-700)", margin: "0 0 8px", textWrap: "pretty" }}>
              Hormones and peptides, <span style={{ color: "var(--amber-700)", fontStyle: "italic" }}>dialed in</span>.
            </h1>
            <p className="ow-hero-online" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(26px, 6vw, 38px)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--teal-700)", margin: "0 0 20px" }}>
              100% Online.
            </p>
            <p className="ow-hero-sub" style={{ fontSize: "clamp(18px, 1.4vw, 20px)", lineHeight: 1.6, color: "var(--gray-600)" }}>
              Personalized, medically guided care for weight, vitality, and balance — tailored to you by your provider.
            </p>
          </div>

          {/* Category cards — the primary hero action. Full-width horizontal rows on mobile (overlapping the
             trust bar below); a balanced, centered two-up grid on desktop. */}
          <div className="ow-cat-grid" id="ow-cat-cards">
            <CategoryCard tone="warm" img="assets/cards/weight-loss-glp1.png" photoLabel="Person preparing a fresh, balanced meal at home in natural light" eyebrow="Medically guided" title="Weight Loss & GLP-1" hook="From $99/mo" onClick={() => onProgram("weight-loss-glp-1")} />
            <CategoryCard tone="teal" img="assets/cards/mens-health-trt.png" photoLabel="Active man in his forties outdoors, looking energized and healthy" eyebrow="Men's health" title="Men's Health & TRT" hook="ED from $124/mo · TRT coming soon" onClick={() => onProgram("mens-vitality-trt")} />
            <CategoryCard tone="cream" img="assets/cards/hair-loss.png" photoLabel="Confident adult with healthy hair, natural light" eyebrow="Hair health" title="Hair Loss" hook="From $124/mo" onClick={() => onProgram("hair-loss")} />
            <CategoryCard tone="sage" img="assets/cards/womens-health-hrt.png" photoLabel="Woman around fifty resting calmly by a sunlit window" eyebrow="Women's health" title="Women's Health & HRT" hook="From $58/mo" onClick={() => onProgram("menopause-hrt")} />
            <CategoryCard tone="mist" img="assets/cards/wellness-peptides.png" photoLabel="Active older adult stretching outdoors, vibrant and well" eyebrow="Whole-body wellness" title="Wellness & Peptides" hook="From $79/mo" onClick={() => onProgram("peptides-longevity")} />
          </div>
        </div>
      </section>

      {/* Benefits strip — clean light bar directly under the hero */}
      <BenefitsBar />

      {/* As Seen On — press band, directly under the rolling trust ticker */}
      <AsSeenOn />

      {/* Nationwide availability — interactive 50-state map */}
      <section style={{ background: "var(--off-white)", borderTop: "1px solid var(--border)" }}>
        <div className="ow-inner" style={{ paddingTop: 46, paddingBottom: 48 }}>
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 30px" }}>
            <Eyebrow style={{ marginBottom: 12 }}>Nationwide telehealth</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(30px, 4.6vw, 42px)", lineHeight: 1.08, color: "var(--teal-700)", margin: "0 0 12px" }}>Available in all 50 states</h2>
            <p style={{ fontSize: "clamp(15.5px, 1.2vw, 17px)", color: "var(--gray-600)", lineHeight: 1.6, margin: 0 }}>
              We connect patients with licensed providers across the country. Hover your state to confirm availability.
            </p>
          </div>
          <UsMap />
        </div>
      </section>

      {/* Category sections — soft-sell funnel. The hero cards smooth-scroll to these;
         each "Get Started" opens that category's program page. */}
      {OW_HOME_CATS.map((cat, i) => (
        <HomeCategorySection key={cat.slug} cat={cat} reversed={i % 2 === 1} dark={i % 2 === 0} onProgram={onProgram} />
      ))}

      {/* FAQ — full set, mirrored from the dedicated FAQ page */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 44, paddingBottom: 48, maxWidth: 820 }}>
          <Eyebrow style={{ marginBottom: 12 }}>Frequently asked questions</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(34px, 8vw, 42px)", lineHeight: 1.08, color: "var(--teal-700)", margin: "0 0 14px" }}>Good to know</h2>
          <p style={{ fontSize: "clamp(15.5px, 1.2vw, 17px)", color: "var(--gray-600)", lineHeight: 1.6, margin: "0 0 22px", maxWidth: 620 }}>
            Answers to the questions we hear most. For anything medical, your provider is available through the Patient Portal.
          </p>
          {OW_FAQ_ITEMS.map(([q, a], i) => (
            <FaqRow key={i} q={q} a={a} open={faq === i} onToggle={() => setFaq(faq === i ? -1 : i)} />
          ))}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 30 }}>
            <Button variant="secondary" size="md" onClick={() => onProgram("contact")}>Contact us</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home, AsSeenOn });