/* Orenwell marketing site — Blog framework (index + single-post template).
   Structure & layout only; titles, excerpts, and body are placeholder/lorem
   until real editorial lands. Categories mirror the site's program areas. */

/* category → { label, slug, photo tone }. `slug` matches the program routes so
   real posts can later deep-link to the matching program. */
const OW_BLOG_CATS = [
  { label: "Weight Loss & GLP-1", slug: "weight-loss-glp-1", tone: "warm", img: "assets/blog/blog-weight-loss-glp1.png" },
  { label: "Men's Health & TRT", slug: "mens-vitality-trt", tone: "teal", img: "assets/blog/blog-mens-health-trt.png" },
  { label: "Hair Loss", slug: "hair-loss", tone: "cream", img: "assets/blog/blog-hair-loss.png" },
  { label: "Women's Health & HRT", slug: "menopause-hrt", tone: "sage", img: "assets/blog/blog-womens-health-hrt.png" },
  { label: "Wellness & Peptides", slug: "peptides-longevity", tone: "mist", img: "assets/blog/blog-wellness-peptides.png" },
];

/* Five placeholder posts — one per category. `read` is the minutes-to-read stand-in. */
const OW_BLOG_POSTS = [
  { cat: "weight-loss-glp-1", title: "Understanding GLP-1: how medically guided weight loss actually works", excerpt: "A plain-language look at what GLP-1 medications do, who they're for, and what a provider-guided plan involves.", read: 6 },
  { cat: "mens-vitality-trt", title: "Low energy or low testosterone? What the numbers really mean", excerpt: "Fatigue, focus, and drive can have many causes. Here's how providers think about evaluating men's hormone health.", read: 7 },
  { cat: "hair-loss", title: "The science of hair loss — and what a treatment plan can include", excerpt: "From early thinning to long-term maintenance, a look at the evidence behind provider-guided hair care.", read: 5 },
  { cat: "menopause-hrt", title: "Perimenopause to menopause: a calmer guide to your options", excerpt: "Hot flashes, sleep, mood, and more. Understanding HRT and how a menopause-literate provider personalizes care.", read: 8 },
  { cat: "peptides-longevity", title: "Peptides and longevity: separating the signal from the hype", excerpt: "What peptide therapy is, what the research supports today, and how providers approach whole-body wellness.", read: 6 },
];

const owCat = (slug) => OW_BLOG_CATS.find((c) => c.slug === slug) || OW_BLOG_CATS[0];

/* Cover image that fills its area (cropped, centered, no distortion). */
function BlogImage({ cat, height, radius = "var(--radius-lg)", style = {} }) {
  return (
    <div style={{ height, borderRadius: radius, overflow: "hidden", background: "var(--off-white)", ...style }}>
      <img src={cat.img} alt={cat.label + " — article image"} loading="lazy"
        style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
    </div>
  );
}

/* ---------- Shared little pieces ---------- */
function CatTag({ slug, style = {} }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", fontFamily: "var(--font-body)", fontSize: 11.5, fontWeight: 600,
      letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--teal-700)", background: "var(--teal-50)",
      padding: "5px 11px", borderRadius: "var(--radius-pill)", lineHeight: 1, ...style }}>{owCat(slug).label}</span>
  );
}

/* ---------- Blog index ---------- */
function BlogCard({ post, onRead }) {
  const [h, setH] = React.useState(false);
  const cat = owCat(post.cat);
  return (
    <article onClick={onRead} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "flex", flexDirection: "column", 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)" }}>
      <BlogImage cat={cat} height={184} radius="0" />
      <div style={{ display: "flex", flexDirection: "column", flex: 1, padding: "20px 20px 22px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 13 }}>
          <CatTag slug={post.cat} />
          <span style={{ fontSize: 12.5, color: "var(--gray-500)" }}>{post.read} min read</span>
        </div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, lineHeight: 1.25, color: "var(--teal-700)", margin: "0 0 9px", textWrap: "pretty" }}>{post.title}</h3>
        <p style={{ fontSize: 14.5, color: "var(--gray-600)", lineHeight: 1.6, margin: "0 0 16px" }}>{post.excerpt}</p>
        <span style={{ marginTop: "auto", display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14, fontWeight: 600, color: "var(--teal-700)" }}>
          Read more <Icon name="arrow-right" size={16} color="var(--teal-700)" style={{ transform: h ? "translateX(3px)" : "none", transition: "transform .2s var(--ease)" }} />
        </span>
      </div>
    </article>
  );
}

function BlogIndexPage({ nav, onReadPost }) {
  const [filter, setFilter] = React.useState("all");
  const shown = filter === "all" ? OW_BLOG_POSTS : OW_BLOG_POSTS.filter((p) => p.cat === filter);
  const chip = (active) => ({
    fontFamily: "var(--font-body)", fontSize: 13.5, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap",
    padding: "8px 16px", borderRadius: "var(--radius-pill)", lineHeight: 1, transition: "all .18s var(--ease)",
    background: active ? "var(--teal-700)" : "var(--white)", color: active ? "#fff" : "var(--ink-800)",
    border: "1px solid " + (active ? "var(--teal-700)" : "var(--border)"),
  });
  return (
    <div>
      <PageHero eyebrow="Orenwell Blog" title="Hormones & wellness, explained"
        sub="Clear, provider-informed guidance on weight, vitality, and balance — written to help you make confident decisions about your health." />

      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 32, paddingBottom: 56 }}>
          {/* Category filter row */}
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 30 }}>
            <button onClick={() => setFilter("all")} style={chip(filter === "all")}>All articles</button>
            {OW_BLOG_CATS.map((c) => (
              <button key={c.slug} onClick={() => setFilter(c.slug)} style={chip(filter === c.slug)}>{c.label}</button>
            ))}
          </div>

          {/* Article grid */}
          <div className="ow-blog-grid">
            {shown.map((p, i) => (
              <BlogCard key={i} post={p} onRead={() => onReadPost(p.cat)} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ---------- Single post template ---------- */
function ProseH2({ children }) {
  return <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(24px, 3vw, 30px)", lineHeight: 1.18, color: "var(--teal-700)", margin: "38px 0 12px", textWrap: "pretty" }}>{children}</h2>;
}
function ProseH3({ children }) {
  return <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 20, lineHeight: 1.25, color: "var(--ink-900)", margin: "28px 0 8px" }}>{children}</h3>;
}
function ProseP({ children }) {
  return <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--gray-600)", margin: "0 0 18px" }}>{children}</p>;
}

function BlogPostPage({ nav, slug, onBack, onReadPost }) {
  const cat = owCat(slug);
  const post = OW_BLOG_POSTS.find((p) => p.cat === slug) || OW_BLOG_POSTS[0];
  const related = OW_BLOG_POSTS.filter((p) => p.cat !== slug).slice(0, 3);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const li = { fontSize: 17, lineHeight: 1.7, color: "var(--gray-600)", margin: "0 0 10px", paddingLeft: 4 };

  return (
    <div style={{ background: "var(--white)" }}>
      {/* Back to blog */}
      <div className="ow-inner" style={{ paddingTop: 22 }}>
        <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: 0 }}>
          <Icon name="arrow-left" size={16} color="var(--teal-700)" /> All articles
        </button>
      </div>

      {/* Article header */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 20, paddingBottom: 8, maxWidth: 760 }}>
          <Eyebrow style={{ marginBottom: 14 }}>{cat.label}</Eyebrow>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(32px, 5vw, 46px)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--teal-700)", margin: "0 0 18px", textWrap: "pretty" }}>{post.title}</h1>
          <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "6px 14px", fontSize: 14.5, color: "var(--gray-500)" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
              <Icon name="badge-check" size={17} color="var(--teal-600)" stroke={1.8} />
              Medically reviewed by <span style={{ color: "var(--ink-800)", fontWeight: 600 }}>[Provider Name, Credentials]</span>
            </span>
            <span style={{ color: "var(--gray-300)" }}>·</span>
            <span>Published [Month DD, YYYY]</span>
            <span style={{ color: "var(--gray-300)" }}>·</span>
            <span>{post.read} min read</span>
          </div>
        </div>
      </section>

      {/* Hero image */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 18, paddingBottom: 8, maxWidth: 880 }}>
          <BlogImage cat={cat} height={340} />
        </div>
      </section>

      {/* Body */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 18, paddingBottom: 8, maxWidth: 720 }}>
          <ProseP>This is placeholder body copy for the Orenwell blog post template. The layout below demonstrates the long-form reading styles — headings, paragraphs, lists, a pull-quote, and an embedded video — so editorial can drop real, provider-reviewed content into a consistent, on-brand frame.</ProseP>
          <ProseP>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae dignissim velit. Praesent euismod, nisi vel consectetur euismod, nunc nisi aliquam nunc, vitae aliquam nisl nunc vitae nisl. Sed euismod, nisi vel consectetur euismod.</ProseP>

          <ProseH2>What the evidence tells us</ProseH2>
          <ProseP>Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris.</ProseP>

          <ProseH3>Who it may be appropriate for</ProseH3>
          <ProseP>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. A licensed provider determines eligibility based on the following considerations:</ProseP>
          <ul style={{ margin: "0 0 20px", paddingLeft: 22 }}>
            <li style={li}>Your health history and any relevant lab work</li>
            <li style={li}>Your goals and current symptoms</li>
            <li style={li}>Potential interactions with existing medications</li>
            <li style={li}>Ongoing monitoring and how your plan may adjust over time</li>
          </ul>

          {/* Pull-quote */}
          <blockquote style={{ margin: "30px 0", padding: "6px 0 6px 26px", borderLeft: "4px solid var(--amber-500)" }}>
            <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontWeight: 500, fontSize: "clamp(21px, 2.6vw, 26px)", lineHeight: 1.4, color: "var(--teal-700)", margin: 0, textWrap: "pretty" }}>
              “Care should be personalized, transparent, and guided by a real licensed provider — never a guessing game.”
            </p>
          </blockquote>

          <ProseH2>What a provider-guided plan looks like</ProseH2>
          <ProseP>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin eget tortor risus.</ProseP>
        </div>
      </section>

      {/* Embedded video slot */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 10, paddingBottom: 8, maxWidth: 720 }}>
          <div role="img" aria-label="Embedded video placeholder" style={{ position: "relative", aspectRatio: "16 / 9", borderRadius: "var(--radius-lg)",
            background: "linear-gradient(135deg,#1A5C57,#0A4C48 70%,#062E2B)", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12, overflow: "hidden" }}>
            <span style={{ width: 62, height: 62, borderRadius: "50%", background: "rgba(255,255,255,.16)", display: "flex", alignItems: "center", justifyContent: "center", backdropFilter: "blur(4px)" }}>
              <Icon name="play" size={26} color="#fff" stroke={1.8} />
            </span>
            <span style={{ fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500, letterSpacing: "0.02em", color: "rgba(255,255,255,.9)" }}>Embedded video — drop in YouTube / Vimeo embed</span>
          </div>
          <p style={{ fontSize: 13, color: "var(--gray-500)", textAlign: "center", margin: "12px 0 0" }}>Video caption / source goes here.</p>
        </div>
      </section>

      {/* CTA block */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 30, paddingBottom: 30, maxWidth: 720 }}>
          <div style={{ background: "var(--teal-700)", borderRadius: "var(--radius-xl)", padding: "clamp(26px, 4vw, 40px)", textAlign: "center" }}>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(26px, 3.4vw, 34px)", lineHeight: 1.12, color: "#fff", margin: "0 auto 10px", maxWidth: 460 }}>Ready to feel your best?</h2>
            <p style={{ fontSize: 16, color: "var(--text-on-dark-muted)", lineHeight: 1.55, margin: "0 auto 22px", maxWidth: 380 }}>See if you qualify in about five minutes — no commitment.</p>
            <Button variant="accent" size="lg" onClick={() => nav("get-started")} iconRight={<Icon name="arrow-right" size={18} color="var(--ink-900)" />}>See if you qualify</Button>
          </div>
        </div>
      </section>

      {/* Medical disclaimer */}
      <section style={{ background: "var(--white)" }}>
        <div className="ow-inner" style={{ paddingTop: 6, paddingBottom: 16, maxWidth: 720 }}>
          <p style={{ fontSize: 13, fontStyle: "italic", color: "var(--gray-500)", lineHeight: 1.65, margin: 0 }}>
            This article is for general educational purposes only and is not medical advice. It does not establish a provider–patient relationship. Always consult a licensed healthcare provider about your individual circumstances. Eligibility and any treatment are determined by your provider. Individual results vary. Prescription medications are fulfilled by licensed US pharmacies.
          </p>
        </div>
      </section>

      {/* Related articles */}
      <section style={{ background: "var(--off-white)", borderTop: "1px solid var(--border)" }}>
        <div className="ow-inner" style={{ paddingTop: 44, paddingBottom: 52 }}>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(24px, 3vw, 30px)", color: "var(--teal-700)", margin: "0 0 24px" }}>Related articles</h2>
          <div className="ow-related-grid">
            {related.map((p, i) => (
              <BlogCard key={i} post={p} onRead={() => onReadPost(p.cat)} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BlogIndexPage, BlogPostPage, OW_BLOG_POSTS, OW_BLOG_CATS });