const { useState, useEffect, useRef, useMemo } = React;

function cls(...xs) { return xs.filter(Boolean).join(" "); }

// ---------- Shared data ----------
// All 7 Bloom IVF centres. North-India centres carry a dedicated landing page (url).
const LOCATIONS = [
  { id: "lilavati", region: "West", city: "Mumbai · Bandra", title: "Bloom IVF, Lilavati", addrLine1: "2nd Floor, Lilavati Hospital & Research Centre", addrLine2: "A-791, Bandra Reclamation Road, Bandra West, Mumbai 400050", hours: "Mon–Sat · 9:00 AM – 7:00 PM", phone: "+91 7259 597 048", url: "#contact", mapNote: "Inside Lilavati Hospital", img: "https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=800&q=80" },
  { id: "opera", region: "West", city: "Mumbai · Opera House", title: "Babies & Us — Bloom IVF", addrLine1: "Babies and Us Fertility IVF & ICSI Centre", addrLine2: "534, 4th Floor, Bombay Mutual Terrace, Opera House, Mumbai 400004", hours: "Mon–Sat · 9:00 AM – 7:00 PM", phone: "+91 7259 597 048", url: "#contact", mapNote: "South Mumbai", img: "https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=800&q=80" },
  { id: "dypatil", region: "West", city: "Navi Mumbai · Nerul", title: "DY Patil Fertility Centre", addrLine1: "DY Patil Hospital, Sector-5, Nerul", addrLine2: "Navi Mumbai 400706", hours: "Mon–Sat · 9:00 AM – 6:30 PM", phone: "+91 7259 597 048", url: "#contact", mapNote: "Inside DY Patil Hospital", img: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=800&q=80" },
  { id: "dadar", region: "West", city: "Mumbai · Dadar", title: "Budget Fertility Centre", addrLine1: "3rd Floor, Senapati Bapat Marg", addrLine2: "Dadar West, Mumbai 400028", hours: "Mon–Sat · 9:00 AM – 6:30 PM", phone: "+91 7259 597 048", url: "#contact", mapNote: "Central Mumbai", img: "https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=800&q=80" },
  { id: "delhi", region: "North", city: "Delhi · GK-2", title: "Fortis Bloom IVF, GK-2", addrLine1: "Fortis LaFemme, S-549", addrLine2: "Greater Kailash II, New Delhi 110048", hours: "Mon–Sat · 8:30 AM – 7:30 PM", phone: "+91 7259 597 048", url: "Delhi NCR.html", mapNote: "South Delhi", img: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&w=800&q=80" },
  { id: "gurgaon", region: "North", city: "Gurgaon", title: "Bloom IVF & Gynaecology Centre", addrLine1: "3rd Floor, Medsovis Hospital, Ardee City", addrLine2: "Sector 52, Gurugram 122003", hours: "Mon–Sat · 9:00 AM – 7:00 PM", phone: "+91 7259 597 048", url: "Gurgaon.html", mapNote: "Sector 52, Ardee City", img: "https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&w=800&q=80" },
  { id: "mohali", region: "North", city: "Mohali", title: "Fortis Bloom IVF, Mohali", addrLine1: "Fortis Hospital, Sector-62, Phase-VIII", addrLine2: "Mohali, Chandigarh 160062", hours: "Mon–Sat · 9:00 AM – 6:30 PM", phone: "+91 7259 597 048", url: "Mohali.html", mapNote: "Inside Fortis Hospital, Phase-VIII", img: "https://images.unsplash.com/photo-1586773860418-d37222d8fce3?auto=format&fit=crop&w=800&q=80" }
];

const FOUNDERS = [
  {
    id: "pai",
    name: "Dr. Hrishikesh Pai",
    creds: "MD, FRCOG (UK-Hon), FCPS, FICOG, MSc (USA)",
    role: "Founder & Medical Director",
    href: "doctors/dr-hrishikesh-pai.html",
    shortBio: "One of India's most senior reproductive medicine specialists with 35+ years of practice, Dr. Pai founded Bloom IVF in 1991 and has introduced many of the country's firsts in Assisted Reproductive Technology — from oocyte vitrification to AI-assisted embryo assessment.",
    img: "assets/dr-hrishikesh-pai.webp"
  },
  {
    id: "palshetkar",
    name: "Dr. Nandita Palshetkar",
    creds: "MD, FCPS, FICOG, FRCOG (UK-Hon)",
    role: "Co-founder & Medical Director",
    href: "doctors/dr-nandita-palshetkar.html",
    shortBio: "A pioneer in Assisted Reproductive Technology in India, Dr. Palshetkar has helped more than 25,000 couples achieve successful pregnancies in over three decades of practice, championing techniques such as Embryoscope™, ICSI, IMSI and laser-assisted hatching in Indian fertility care.",
    img: "assets/dr-nandita-palshetkar.webp"
  }
];

const SERVICES = [
  { id: "ivf", slug: "ivf-treatment", href: "services/ivf-treatment.html", title: "IVF Treatment", desc: "In-vitro fertilization with standardized clinical protocols and precise laboratory monitoring.", icon: <IconFlask size={22} />, featured: true },
  { id: "iui", slug: "iui-treatment", href: "services/iui-treatment.html", title: "IUI Treatment", desc: "A preliminary fertility intervention conducted in a controlled clinical environment.", icon: <IconSparkle size={22} /> },
  { id: "consult", slug: "fertility-consultation", href: "services/fertility-consultation.html", title: "Fertility Consultation", desc: "Thorough evaluation by reproductive specialists with transparent, evidence-based guidance.", icon: <IconHeart size={22} /> },
  { id: "freeze", slug: "egg-freezing", href: "services/egg-freezing.html", title: "Egg Freezing", desc: "Medical-grade vitrification for long-term storage of oocytes and embryos.", icon: <IconSnow size={22} /> },
  { id: "male", slug: "male-fertility-care", href: "services/male-fertility-care.html", title: "Male Fertility Care", desc: "Semen analysis, andrology evaluation and specialist consultations.", icon: <IconMicroscope size={22} /> },
  { id: "female", slug: "female-fertility-care", href: "services/female-fertility-care.html", title: "Female Fertility Care", desc: "Hormone profiling, ultrasound imaging and reproductive diagnostics.", icon: <IconLeaf size={22} /> }
];

const WHY = [
  { title: "Registered ART Clinic", desc: "Operating under the ART (Regulation) Act, 2021 with full compliance.", icon: <IconShield size={20} /> },
  { title: "Laboratory Standards", desc: "Grade-A cleanrooms and advanced monitoring systems for embryology.", icon: <IconFlask size={20} /> },
  { title: "Experienced Specialists", desc: "Senior clinicians with years of reproductive medicine experience.", icon: <IconUsers size={20} /> },
  { title: "Patient-Centric Protocols", desc: "Transparent clinical workflows with informed consent at every step.", icon: <IconHeart size={20} /> }
];

const TESTIMONIALS = [
  { name: "Priya", loc: "Gurgaon", quote: "The team never rushed us. Every question was answered, every step explained. We felt seen throughout a hard journey.", rating: 5 },
  { name: "Arjun", loc: "Delhi NCR", quote: "What we valued most was the honesty. They told us what was realistic and gave us confidence through every cycle.", rating: 5 },
  { name: "Kavya", loc: "Mohali", quote: "Warm, patient, and genuinely caring. The counselling support made the emotional side so much easier to navigate.", rating: 5 }
];

const BLOG_POSTS = [
  { slug: "ivf-journey-step-by-step-clinical-guide", href: "blog/ivf-journey-step-by-step-clinical-guide.html", tag: "IVF Basics", title: "Understanding your IVF journey: a step-by-step clinical guide", excerpt: "From initial consultation to embryo transfer — what to expect at each stage, how long each takes, and the questions worth asking.", author: "Clinical Team", date: "Apr 12, 2026", readTime: "7 min read", img: "https://images.unsplash.com/photo-1530497610245-94d3c16cda28?auto=format&fit=crop&w=1200&q=80", alt: "Patient and fertility specialist in clinical consultation" },
  { slug: "fertility-diagnostics-tests-that-matter", href: "blog/fertility-diagnostics-tests-that-matter.html", tag: "Diagnostics", title: "Fertility diagnostics: which tests actually matter, and why", excerpt: "Hormone profiles, semen analysis, follicular monitoring — a plain-English breakdown of the diagnostics used in evidence-based care.", author: "Dr. Reviewed", date: "Mar 28, 2026", readTime: "6 min read", img: "https://images.unsplash.com/photo-1579154204601-01588f351e67?auto=format&fit=crop&w=1200&q=80", alt: "Reproductive diagnostic testing in laboratory" },
  { slug: "egg-freezing-in-your-30s", href: "blog/egg-freezing-in-your-30s.html", tag: "Egg Freezing", title: "Egg freezing in your 30s: timing, success rates and honest trade-offs", excerpt: "Vitrification has changed what's possible — but the decision is personal. Here's how to think about it clinically and realistically.", author: "Clinical Team", date: "Mar 14, 2026", readTime: "8 min read", img: "https://images.unsplash.com/photo-1584515933487-779824d29309?auto=format&fit=crop&w=1200&q=80", alt: "Cryogenic vitrification storage for egg freezing" }
];

// ---------- Components ----------
function Nav({ locale, localeHref }) {
  const B = window.BASE || "";
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const [svcOpen, setSvcOpen] = useState(false);     // desktop hover/focus dropdown
  const [mSvcOpen, setMSvcOpen] = useState(false);   // mobile accordion
  const svcRef = React.useRef(null);
  useEffect(() => {
    if (!svcOpen) return;
    const onDoc = (e) => { if (svcRef.current && !svcRef.current.contains(e.target)) setSvcOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setSvcOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDoc); document.removeEventListener("keydown", onKey); };
  }, [svcOpen]);
  // Reset mobile accordion when sheet closes
  useEffect(() => { if (!open) setMSvcOpen(false); }, [open]);

  const primary = [
    { h: "index.html", l: "Home" },
    { l: "Services", children: SERVICES.map(s => ({ h: s.href, l: s.title })) },
    { h: "index.html#locations", l: "Centers" },
    { h: "About Us.html", l: "About" },
    { h: "index.html#blog", l: "Blog" },
    { h: "index.html#consult", l: "Contact" }
  ];
  return (
    <header className={cls("nav", scrolled && "scrolled")} data-screen-label="Nav">
      <div className="wrap nav-inner">
        <a href={B + "index.html"} className="logo-wrap" aria-label="Bloom IVF home">
          <img src={B + "assets/bloom-ivf-logo.png"} alt="Bloom IVF — Registered Fertility & IVF Clinic" className="logo-img" />
          {locale && <span className="logo-locale"><b>{locale}</b></span>}
        </a>
        <nav className="nav-links" aria-label="Primary">
          {primary.map((x, i) => {
            if (x.children) {
              return (
                <div
                  key={i}
                  className={cls("nav-dropdown", svcOpen && "is-open")}
                  ref={svcRef}
                  onMouseEnter={() => setSvcOpen(true)}
                  onMouseLeave={() => setSvcOpen(false)}
                >
                  <button
                    type="button"
                    className="nav-dropdown-btn"
                    aria-haspopup="true"
                    aria-expanded={svcOpen}
                    onClick={() => setSvcOpen(v => !v)}
                  >
                    {x.l}
                    <svg className="nav-caret" width="10" height="10" viewBox="0 0 10 10" aria-hidden="true">
                      <path d="M2 3.5l3 3 3-3" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                    </svg>
                  </button>
                  <div className="nav-dropdown-panel" role="menu">
                    <a className="nav-dropdown-all" href={B + "index.html#services"} role="menuitem" onClick={() => setSvcOpen(false)}>
                      All Services <IconArrowRight size={12} />
                    </a>
                    <div className="nav-dropdown-grid">
                      {x.children.map(c => (
                        <a key={c.h} href={B + c.h} role="menuitem" className="nav-dropdown-item" onClick={() => setSvcOpen(false)}>
                          {c.l}
                        </a>
                      ))}
                    </div>
                  </div>
                </div>
              );
            }
            return <a key={x.h} href={B + x.h}>{x.l}</a>;
          })}
        </nav>
        <div className="nav-cta">
          <a href="tel:+917259597048" className="btn btn-ghost btn-sm nav-call"><IconPhone size={16} /> <span>Call</span></a>
          <a href="#consult" className="btn btn-primary btn-sm nav-book">Book Consultation</a>
          <button
            type="button"
            className={cls("nav-burger", open && "is-open")}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            aria-controls="mobile-menu"
            onClick={() => setOpen(v => !v)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>
      {ReactDOM.createPortal(
        <React.Fragment>
          <div
            className={cls("mobile-menu-backdrop", open && "open")}
            onClick={() => setOpen(false)}
            aria-hidden="true"
          />
          <div
            id="mobile-menu"
            className={cls("mobile-menu", open && "open")}
            role="dialog"
            aria-modal="true"
            aria-label="Menu"
            aria-hidden={!open}
          >
            <div className="mobile-menu-inner">
              <nav className="mobile-links">
                {primary.map((x, i) => {
                  if (x.children) {
                    return (
                      <div key={i} className={cls("mobile-link-group", mSvcOpen && "is-open")}>
                        <button
                          type="button"
                          className="mobile-link-toggle"
                          aria-expanded={mSvcOpen}
                          onClick={() => setMSvcOpen(v => !v)}
                        >
                          <span>{x.l}</span>
                          <svg className="mobile-caret" width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
                            <path d="M3 5.5l4 4 4-4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                          </svg>
                        </button>
                        <div className="mobile-sublinks" hidden={!mSvcOpen}>
                          <a href={B + "index.html#services"} onClick={() => setOpen(false)} className="mobile-sublink mobile-sublink-all">
                            <span>All Services</span>
                          </a>
                          {x.children.map(c => (
                            <a key={c.h} href={B + c.h} onClick={() => setOpen(false)} className="mobile-sublink">
                              <span>{c.l}</span>
                            </a>
                          ))}
                        </div>
                      </div>
                    );
                  }
                  return <a key={x.h} href={B + x.h} onClick={() => setOpen(false)}>{x.l}</a>;
                })}
              </nav>
              <div className="mobile-cta">
                <a href="tel:+917259597048" className="btn btn-secondary" onClick={() => setOpen(false)}><IconPhone size={16} /> Call clinic</a>
                <a href="#consult" className="btn btn-primary" onClick={() => setOpen(false)}>Book Consultation</a>
              </div>
            </div>
          </div>
        </React.Fragment>,
        document.body
      )}
    </header>
  );
}

function Founders() {
  return (
    <section className="section founders" id="founders" data-screen-label="Founders">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Founders & Medical Directors</span>
          <h2>Led by two of India's most respected <em>fertility specialists</em>.</h2>
          <p>Bloom IVF was founded in 1991 by Dr. Hrishikesh Pai and Dr. Nandita Palshetkar. Their clinical standard sets the protocol every Bloom IVF centre runs on.</p>
        </div>
        <div className="founders-grid">
          {FOUNDERS.map(f => {
            const B = window.BASE || "";
            return (
              <article key={f.id} className="founder-card">
                <div className="founder-photo">
                  <img src={B + f.img} alt={`Portrait of ${f.name}`} loading="lazy" />
                </div>
                <div className="founder-body">
                  <div className="founder-role">{f.role}</div>
                  <h3 className="serif founder-name">{f.name}</h3>
                  <div className="founder-creds">{f.creds}</div>
                  <p className="founder-bio">{f.shortBio}</p>
                  <a href={B + f.href} className="founder-link">
                    Know more about {f.name.split(" ").slice(0, 2).join(" ")} <IconArrowRight size={14} />
                  </a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function HeroVisual({ img = "https://images.unsplash.com/photo-1584982751601-97dcc096659c?auto=format&fit=crop&w=900&q=80", alt = "Bloom IVF reproductive medicine specialist with patient at fertility consultation" }) {
  return (
    <div className="hero-visual">
      <img src={img} alt={alt} className="hv-img" loading="eager" />
      <div className="hv-overlay">
        <div className="stat-num">35+ yrs</div>
        <div className="stat-lab">Of clinical experience in reproductive medicine</div>
      </div>
      <div className="hv-bottom">
        <div className="hv-ico"><IconShield size={18} /></div>
        <div>
          <b>ART (Regulation) Act, 2021</b><br />
          <span>Registered & compliant clinic</span>
        </div>
      </div>
    </div>
  );
}

function LeadForm({ compact = false, city = "" }) {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [cityVal, setCity] = useState(city);
  const [age, setAge] = useState("");
  const [consent, setConsent] = useState(true);
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  function submit(e) {
    e.preventDefault();
    const errs = {};
    if (!name.trim() || name.trim().length < 2) errs.name = "Please enter your name";
    const digits = phone.replace(/\D/g, "");
    if (digits.length < 10) errs.phone = "Enter a valid 10-digit phone number";
    if (!consent) errs.consent = "Please agree to be contacted";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSent(true);
  }

  if (sent) {
    return (
      <div className="lead-card" role="status" aria-live="polite">
        <div className="lead-success">
          <div className="ok-ring"><IconCheck size={28} strokeWidth={2.5} /></div>
          <h3 className="serif" style={{ fontSize: 24, marginTop: 0 }}>Thank you, {name.split(" ")[0]}.</h3>
          <p style={{ color: "var(--muted)", fontSize: 14, marginTop: 10, lineHeight: 1.55 }}>
            A clinical counsellor will call you on <b style={{ color: "var(--ink)" }}>+91 {phone.replace(/\D/g,"").slice(-10)}</b> during clinic hours.
          </p>
          <div style={{ marginTop: 20, display: "flex", gap: 8, justifyContent: "center" }}>
            <a href="tel:+917259597048" className="btn btn-secondary btn-sm"><IconPhone size={16} /> Call us</a>
            <button className="btn btn-ghost btn-sm" onClick={() => { setSent(false); setName(""); setPhone(""); setCity(city); setAge(""); }}>Submit another</button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <form className="lead-card" onSubmit={submit} noValidate>
      <span className="lead-tag"><IconSparkle size={12} strokeWidth={2} /> Free · Private · No obligation</span>
      <h3>Request a clinical consultation</h3>
      <p className="lead-help">A clinical counsellor will review your enquiry and call you back. Your details remain confidential.</p>

      <div className={cls("field", errors.name && "has-error")}>
        <label htmlFor="lf-name">Full name</label>
        <input id="lf-name" type="text" placeholder="e.g. Priya Sharma" value={name} onChange={e => setName(e.target.value)} autoComplete="name" />
        <div className="error">{errors.name}</div>
      </div>

      <div className={cls("field", errors.phone && "has-error")}>
        <label htmlFor="lf-phone">Phone number</label>
        <div className="phone-wrap">
          <input className="cc" value="+91" readOnly tabIndex={-1} aria-label="Country code" />
          <input id="lf-phone" type="tel" placeholder="10-digit mobile number" value={phone} onChange={e => setPhone(e.target.value)} autoComplete="tel-national" inputMode="numeric" />
        </div>
        <div className="error">{errors.phone}</div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <div className="field">
          <label htmlFor="lf-city">Preferred center</label>
          <select id="lf-city" value={cityVal} onChange={e => setCity(e.target.value)}>
            <option value="">Select</option>
            <option value="gurgaon">Gurgaon</option>
            <option value="delhi">Delhi NCR</option>
            <option value="mohali">Mohali</option>
            <option value="telehealth">Telehealth</option>
          </select>
        </div>
        <div className="field">
          <label htmlFor="lf-age">Age (optional)</label>
          <input id="lf-age" type="text" inputMode="numeric" placeholder="e.g. 32" value={age} onChange={e => setAge(e.target.value)} />
        </div>
      </div>

      <label className="consent">
        <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)} />
        <span>I consent to be contacted by Bloom IVF regarding my enquiry. My details will not be shared with third parties.</span>
      </label>

      <button type="submit" className="btn btn-primary">
        Request a callback <IconArrowRight size={16} />
      </button>

      <div className="lead-foot">
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><IconLock size={12} /> Confidential</span>
        <span className="dot-sep" />
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}><IconShield size={12} /> ART-compliant clinic</span>
      </div>
    </form>
  );
}

function LeadSection({ city = "", heading, sub }) {
  return (
    <section className="lead-section" id="consult" data-screen-label="Lead Form">
      <div className="wrap">
        <div className="lead-grid">
          <div className="lead-side">
            <span className="eyebrow"><span className="dot" /> Accepting new patients</span>
            <h2 style={{ marginTop: 14 }}>{heading || <>Speak with a <em>fertility specialist</em>.</>}</h2>
            <p>{sub || "Share a few details. A clinical counsellor will call you back with a clear next step — no pressure, no obligation."}</p>
            <ul>
              <li><span className="chk"><IconCheck size={12} strokeWidth={2.5} /></span> Private, confidential callback</li>
              <li><span className="chk"><IconCheck size={12} strokeWidth={2.5} /></span> Evidence-based diagnostic review</li>
              <li><span className="chk"><IconCheck size={12} strokeWidth={2.5} /></span> Transparent, ethical clinical guidance</li>
              <li><span className="chk"><IconCheck size={12} strokeWidth={2.5} /></span> Compliant with ART (Regulation) Act, 2021</li>
            </ul>
          </div>
          <div>
            <LeadForm city={city} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Locations() {
  return (
    <section className="section" id="locations" data-screen-label="Locations">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Our Centers</span>
          <h2>7 IVF centres. Many affiliates. <em>One clinical standard</em>.</h2>
          <p>Bloom IVF runs <b>seven full-fledged IVF centres</b> across India and many affiliate centres. Three of these are in North India — Delhi, Gurgaon and Mohali. Walk into any Bloom IVF clinic and you'll find the same specialists, laboratory standards and patient-first protocols.</p>
        </div>
        <div className="loc-grid">
          {LOCATIONS.map(loc => {
            const hasPage = loc.url && !loc.url.startsWith("#");
            return (
              <a key={loc.id} href={loc.url} className={cls("loc-card", !hasPage && "loc-card-affiliate")} aria-label={`${loc.title}, ${loc.city}`}>
                <div className="loc-photo">
                  <img src={loc.img} alt={`${loc.title} — representative clinic image`} className="loc-img" loading="lazy" />
                  <span className="city-pill"><IconPin size={12} /> {loc.city}</span>
                  {loc.region === "North" && <span className="region-pill">North India</span>}
                </div>
                <div className="loc-body">
                  <h3>{loc.title}</h3>
                  <p className="loc-addr">{loc.addrLine1}<br />{loc.addrLine2}</p>
                  <div className="loc-meta"><span><IconClock size={14} /> {loc.hours}</span></div>
                  <div className="loc-meta" style={{ marginTop: 6 }}><span><IconPhone size={14} /> {loc.phone}</span></div>
                  <div className="loc-cta">
                    <span className="btn btn-primary btn-sm">{hasPage ? "View Center" : "Contact Clinic"}</span>
                    <span className="btn btn-secondary btn-sm" aria-label="Get directions"><IconPin size={14} /></span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function WhyUs() {
  return (
    <section className="section why-wrap" id="why" data-screen-label="Why Us">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Why Bloom IVF</span>
          <h2>Standardized care. <em>Ethical transparency.</em></h2>
          <p>Four principles that shape every consultation, every treatment plan, every laboratory workflow.</p>
        </div>
        <div className="why-grid">
          {WHY.map(w => (
            <div key={w.title} className="why-card">
              <div className="why-icon">{w.icon}</div>
              <h4>{w.title}</h4>
              <p>{w.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Our Services</span>
          <h2>Fertility treatment pathways, end to end.</h2>
          <p>From first consultation to embryo transfer and beyond — under one clinical roof.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map(s => (
            <div key={s.id} className={cls("svc-card", s.featured && "featured")}>
              <div className="svc-icon">{s.icon}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
              <a href={(window.BASE||"") + s.href} className="svc-link">Learn more <IconArrowRight size={14} /></a>
            </div>
          ))}
        </div>
        <div className="cta-band">
          <p><b>Not sure where to start?</b> A clinical counsellor will help you pick the right next step — no obligation.</p>
          <div style={{ display: "flex", gap: 8 }}>
            <a href="#consult" className="btn btn-primary btn-sm">Request Consultation</a>
            <a href="tel:+917259597048" className="btn btn-secondary btn-sm"><IconPhone size={14} /> Call</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section test-wrap" id="stories" data-screen-label="Testimonials">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">Patient Stories</span>
          <h2>Real words, from the families we've walked with.</h2>
          <p>First names only — privacy matters, especially here.</p>
        </div>
        <div className="test-grid">
          {TESTIMONIALS.map(t => (
            <div className="test-card" key={t.name}>
              <span className="stars" aria-label={`${t.rating} out of 5`}>{Array.from({ length: t.rating }).map((_, i) => <IconStar key={i} size={14} />)}</span>
              <p className="test-quote">"{t.quote}"</p>
              <div className="test-meta">
                <div className="test-avatar">{t.name[0]}</div>
                <div>
                  <div className="test-name">{t.name}</div>
                  <div className="test-loc">Patient · {t.loc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="logos-row" aria-label="Associations">
          <span className="logo-chip"><span className="sq"><IconShield size={13} /></span> Registered ART Clinic</span>
          <span className="logo-chip"><span className="sq"><IconUsers size={13} /></span> Indian Fertility Society</span>
          <span className="logo-chip"><span className="sq"><IconHeart size={13} /></span> ESHRE-Affiliated Specialists</span>
          <span className="logo-chip"><span className="sq"><IconMicroscope size={13} /></span> NABH Standards</span>
        </div>
      </div>
    </section>
  );
}

function Blog({ posts = BLOG_POSTS }) {
  return (
    <section className="section" id="blog" data-screen-label="Blog">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">From the Clinic</span>
          <h2>Fertility, explained — <em>without the jargon</em>.</h2>
          <p>Evidence-based articles written and reviewed by our clinical team. Educational content, not medical advice.</p>
        </div>
        <div className="blog-grid">
          {posts.map((b, i) => (
            <a href={(window.BASE||"") + b.href} className="blog-card" key={i}>
              <div className="blog-img">
                <img src={b.img} alt={b.alt || b.title} className="blog-pic" loading="lazy" />
                <span className="tag">{b.tag}</span>
              </div>
              <div className="blog-body">
                <h4>{b.title}</h4>
                <p>{b.excerpt}</p>
                <span className="blog-more">Read article <IconArrowRight size={14} /></span>
                <div className="blog-meta">
                  <span className="author">{b.author}</span>
                  <span>·</span>
                  <span>{b.readTime}</span>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 36 }}>
          <a href="#" className="btn btn-secondary">View all articles <IconArrowRight size={14} /></a>
        </div>
      </div>
    </section>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="wrap">
        <div className="section-head">
          <span className="kicker">FAQ</span>
          <h2>Questions, answered clearly.</h2>
          <p>More questions? A counsellor will happily walk you through your situation.</p>
        </div>
        <div className="faq-list">
          {items.map((f, i) => (
            <div key={i} className={cls("faq-item", open === i && "open")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{f.q}</span>
                <span className="chev"><IconArrowRight size={18} style={{ transform: "rotate(90deg)" }} /></span>
              </button>
              <div className="faq-a"><p style={{ paddingTop: 4 }}>{f.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ heading, sub, buttonLabel = "Request a Clinical Consultation" }) {
  return (
    <section className="final-cta" data-screen-label="Final CTA">
      <div className="wrap final-inner">
        <h2>{heading || <>Take the first step toward <em>parenthood</em>.</>}</h2>
        <p>{sub || "Request your consultation today — speak with a specialist, review your diagnostics, and decide in your own time."}</p>
        <div className="final-ctas">
          <a href="#consult" className="btn btn-primary btn-lg">{buttonLabel} <IconArrowRight size={16} /></a>
          <a href="tel:+917259597048" className="btn btn-secondary btn-lg"><IconPhone size={16} /> Call · +91 7259 597 048</a>
        </div>
      </div>
    </section>
  );
}

function Statutory() {
  return (
    <div className="statutory">
      <div className="wrap">
        <IconShield size={14} />
        <span><b>Statutory:</b> Bloom IVF strictly adheres to the PCPNDT Act, 1994. We do not perform, support or promote sex selection or pre-natal sex determination. All clinics registered under ART (Regulation) Act, 2021.</span>
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer id="contact" data-screen-label="Footer">
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <span className="foot-logo"><img src={(window.BASE||"") + "assets/bloom-ivf-logo.png"} alt="Bloom IVF logo" /></span>
            <p>Evidence-based fertility care across Gurgaon, Delhi NCR and Mohali. Registered ART clinic operating in compliance with Indian regulations.</p>
            <div style={{ marginTop: 18, display: "flex", gap: 10, flexWrap: "wrap" }}>
              <a href="tel:+917259597048" className="btn btn-secondary btn-sm" style={{ background: "rgba(255,255,255,0.06)", color: "#fff", borderColor: "rgba(255,255,255,0.1)" }}><IconPhone size={14} /> +91 7259 597 048</a>
              <a href="mailto:info@bloomivfnorth.com" className="btn btn-secondary btn-sm" style={{ background: "rgba(255,255,255,0.06)", color: "#fff", borderColor: "rgba(255,255,255,0.1)" }}><IconMail size={14} /> info@bloomivfnorth.com</a>
            </div>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <ul>
              <li><a href={(window.BASE||"") + "About Us.html"}>About Us</a></li>
              <li><a href={(window.BASE||"") + "index.html#contact"}>Contact</a></li>
              <li><a href={(window.BASE||"") + "index.html#blog"}>Blog</a></li>
              <li><a href="#">Careers</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Terms &amp; Conditions</a></li>
              <li><a href="#">Medical Disclaimer</a></li>
              <li><a href="#">PCPNDT Compliance</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h5>Our Centers</h5>
            <div className="foot-addr">
              <b><a href={(window.BASE||"") + "Gurgaon.html"}>Gurgaon</a></b>Sector 54, Gurgaon 122002
              <b><a href={(window.BASE||"") + "Delhi NCR.html"}>Delhi NCR</a></b>Fortis Bloom IVF, New Delhi
              <b><a href={(window.BASE||"") + "Mohali.html"}>Mohali</a></b>Fortis Hospital, Sector 62, Mohali
            </div>
          </div>
        </div>

        <div className="disclaimer">
          <b style={{ color: "#fff" }}>Medical disclaimer.</b> IVF and fertility treatment outcomes vary based on individual medical history, age, and many other clinical factors. Bloom IVF does not guarantee pregnancy or live-birth outcomes. Information on this page is educational and does not constitute medical advice. All diagnostics and treatments follow standardized clinical protocols under the ART (Regulation) Act, 2021, and the PCPNDT Act, 1994.
        </div>

        <div className="foot-bottom">
          <span>© {new Date().getFullYear()} Bloom IVF. All rights reserved.</span>
          <span>Registered ART clinic · Reg. No. [INSERT]</span>
        </div>
      </div>
    </footer>
  );
}

function StickyCTA({ visible, label = "Free Consultation" }) {
  return (
    <div className={cls("sticky-cta", visible && "visible")} role="region" aria-label="Quick consultation">
      <div className="sc-text">
        <b>Start your fertility journey</b>
        Private consultation · clinical counsellor
      </div>
      <div className="sc-actions">
        <a href="tel:+917259597048" className="btn btn-secondary btn-sm"><IconPhone size={14} /> Call</a>
        <a href="#consult" className="btn btn-primary btn-sm">{label} <IconArrowRight size={14} /></a>
      </div>
    </div>
  );
}

function WhatsApp() {
  return (
    <a className="wa-fab" href="https://wa.me/917259597048?text=Hi%20Bloom%20IVF%2C%20I'd%20like%20to%20book%20a%20consultation." target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
      <span className="pulse" aria-hidden="true" />
      <IconWhatsapp size={26} />
    </a>
  );
}

function useStickyCTA() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    function on() {
      const y = window.scrollY;
      const h = window.innerHeight;
      const doc = document.documentElement.scrollHeight;
      setVisible(y > h * 0.5 && y + h < doc - 400);
    }
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return visible;
}

Object.assign(window, {
  Nav, HeroVisual, LeadForm, LeadSection, Locations, WhyUs, Services, Testimonials,
  Blog, FAQ, FinalCTA, Statutory, Footer, StickyCTA, WhatsApp, useStickyCTA,
  LOCATIONS, SERVICES, WHY, TESTIMONIALS, BLOG_POSTS, cls
});
