/* Hortman Clinics — primary components */
const { useState, useEffect, useRef, useMemo } = React;

/* ---------- Icons (drawn inline; simple geometric shapes only) ---------- */
const Icon = ({ name, size = 18, stroke = 1.4 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round"
  };
  const icons = {
    arrow:   <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
    arrowDown: <svg {...common}><path d="M12 5v14M6 13l6 6 6-6"/></svg>,
    close:   <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>,
    check:   <svg {...common}><path d="M5 12l5 5L20 7"/></svg>,
    phone:   <svg {...common}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.96.32 1.9.6 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.28 1.85.48 2.81.6A2 2 0 0 1 22 16.92z"/></svg>,
    whatsapp:<svg {...common}><path d="M20.5 3.5A11 11 0 0 0 4.4 18.7L3 21l2.4-1.3a11 11 0 0 0 15.1-16.2z"/><path d="M9 9c.5-1 1-1.5 2-1.5h.5c.3 0 .5.2.6.5l.6 1.4c.1.3 0 .6-.2.8l-.6.6c.4.8 1.1 1.5 1.9 1.9l.6-.6c.2-.2.5-.3.8-.2l1.4.6c.3.1.5.4.5.6V13c0 1-.5 1.5-1.5 2-2.5 1-6-2.5-7-5z"/></svg>,
    pin:     <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
    clock:   <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>,
    mail:    <svg {...common}><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 6 9-6"/></svg>,
    lock:    <svg {...common}><rect x="4" y="11" width="16" height="10" rx="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>,
    spark:   <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>,
    shield:  <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/></svg>,
    cal:     <svg {...common}><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>,
    info:    <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></svg>,
    /* Specialty icons — abstract, not literal/medical */
    sp_aesthetics: <svg {...common}><circle cx="12" cy="12" r="3.5"/><circle cx="12" cy="12" r="8.5"/></svg>,
    sp_lasers:     <svg {...common}><path d="M12 3v4M12 17v4M3 12h4M17 12h4"/><circle cx="12" cy="12" r="3"/></svg>,
    sp_derm:       <svg {...common}><path d="M4 16c2-4 6-4 8 0s6 4 8 0"/><path d="M4 8c2 4 6 4 8 0s6-4 8 0"/></svg>,
    sp_plastic:    <svg {...common}><path d="M12 3c4 4 4 14 0 18M12 3c-4 4-4 14 0 18"/></svg>,
    sp_dent:       <svg {...common}><path d="M7 4c2 0 2.5 1 5 1s3-1 5-1 2 2 1 5l-1 8c-.5 2-2 5-3.5 5-1 0-1.5-3-2.5-3s-1.5 3-2.5 3C7 22 5.5 19 5 17l-1-8c-1-3 0-5 3-5z"/></svg>,
    sp_hair:       <svg {...common}><path d="M4 20c0-6 4-12 8-12s8 6 8 12"/><path d="M8 14c1-2 2.5-3 4-3s3 1 4 3"/></svg>,
    sp_gynae:      <svg {...common}><circle cx="12" cy="9" r="6"/><path d="M12 15v6M9 19h6"/></svg>,
    sp_wellness:   <svg {...common}><path d="M4 12h4l2-5 4 10 2-5h4"/></svg>
  };
  return icons[name] || null;
};

const specialtyIcon = (id) => {
  const m = {
    aesthetics: "sp_aesthetics", lasers: "sp_lasers", dermatology: "sp_derm",
    plastic: "sp_plastic", dentistry: "sp_dent", hair: "sp_hair",
    gynae: "sp_gynae", wellness: "sp_wellness"
  };
  return m[id] || "spark";
};

/* ---------- Brand wordmark (original treatment, not raster logo) ---------- */
const BrandWordmark = ({ small = false }) => (
  <div className="brand-mark">
    <div>
      <div className="brand-wordmark" style={{ fontSize: small ? 18 : 22 }}>HORTMAN</div>
      <div className="brand-sub">CLINICS</div>
    </div>
  </div>
);

/* ---------- Top bar ---------- */
const TopBar = ({ onBook, lang, setLang, onOpenSpecialty }) => {
  const [megaOpen, setMegaOpen] = useState(false);
  const navRef = useRef(null);

  useEffect(() => {
    const onClick = (e) => {
      if (navRef.current && !navRef.current.contains(e.target)) setMegaOpen(false);
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <header className="topbar" data-screen-label="Top bar">
      <div className="container topbar-utility">
        <div className="util-left">
          <span><Icon name="pin" size={12}/> &nbsp;Two locations · Dubai</span>
          <span className="pipe">·</span>
          <span><Icon name="clock" size={12}/> &nbsp;{window.HC_DATA.contact.hours}</span>
        </div>
        <div className="util-right">
          <a href={window.HC_DATA.contact.phoneHref}>{window.HC_DATA.contact.phone}</a>
          <span className="pipe">·</span>
          <a href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">WhatsApp</a>
        </div>
      </div>

      <div className="container topbar-main">
        <div ref={navRef} style={{ position: "relative", justifySelf: "start" }}>
          <ul className="nav-list" role="navigation">
            <li>
              <button onClick={() => setMegaOpen((v) => !v)}>
                Treatments <span className="caret">▾</span>
              </button>
              {megaOpen && (
                <div className="mega" onClick={(e) => e.stopPropagation()}>
                  <div>
                    <h4>Care, organised by specialty</h4>
                    <p>Eight specialty areas across two Dubai locations. Every treatment listed is assessed in consultation — no procedure is booked without specialist review.</p>
                    <button className="btn-link" onClick={() => { setMegaOpen(false); document.getElementById("specialties")?.scrollIntoView({behavior:"smooth", block:"start"}); }}>
                      Browse all specialties →
                    </button>
                  </div>
                  <div className="mega-grid">
                    {window.HC_DATA.specialties.map((s) => (
                      <a key={s.id} onClick={() => { setMegaOpen(false); onOpenSpecialty(s.id); }}>
                        <span>{s.name.replace(/\u00a0/g, " ")}</span>
                        <span className="count">{s.count}</span>
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </li>
            <li><button onClick={() => document.getElementById("doctors")?.scrollIntoView({behavior:"smooth"})}>Doctors</button></li>
            <li><button onClick={() => document.getElementById("before-after")?.scrollIntoView({behavior:"smooth"})}>Before &amp; After</button></li>
            <li><button onClick={() => document.getElementById("locations")?.scrollIntoView({behavior:"smooth"})}>Locations</button></li>
            <li><button>About</button></li>
          </ul>
        </div>

        <BrandWordmark />

        <div className="nav-actions">
          <div className="lang-toggle" aria-label="Language">
            <button className={lang === "EN" ? "active" : ""} onClick={() => setLang("EN")}>EN</button>
            <button className={lang === "AR" ? "active" : ""} onClick={() => setLang("AR")}>عربي</button>
          </div>
          <button className="btn btn-primary" onClick={onBook}>
            Book a Consultation
          </button>
        </div>
      </div>
    </header>
  );
};

/* ---------- Hero ---------- */
const Hero = ({ onBook }) => (
  <section className="hero" data-screen-label="01 Hero">
    <div className="container">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">Multi-specialty · Specialist-led · Dubai</div>
          <h1 className="display" style={{ marginTop: 18 }}>
            Considered care.<br/>
            <em>Quietly</em> luxurious<br/>
            clinical practice.
          </h1>
          <p className="lead" style={{ marginTop: 22, maxWidth: 480 }}>
            Hortman Clinics is a multi-specialty group across two Dubai
            locations — aesthetics, dermatology, plastic surgery, dentistry,
            hair transplant, gynaecology and wellness. Every plan begins
            with consultation, not a price list.
          </p>
          <div className="hero-meta">
            <button className="btn btn-primary" onClick={onBook}>
              Book a Consultation <Icon name="arrow" />
            </button>
            <a className="btn-link" href="#specialties" onClick={(e)=>{e.preventDefault(); document.getElementById("specialties")?.scrollIntoView({behavior:"smooth"});}}>
              Browse specialties
            </a>
          </div>
        </div>

        <div className="hero-media">
          <img src="media/hero-treatment.webp" alt="Treatment room interior, Hortman Clinics" />
          <div className="hero-card">
            <div className="who">
              <div className="hero-avatar">
                <img src="media/dr-sezgin.webp" alt="" />
              </div>
              <div>
                <div className="role">Independently verified</div>
                <div className="name">Dr. Sezgin Cagatay · Hair Transplant</div>
              </div>
            </div>
            <span className="verified-pill">DHA · DHCC</span>
          </div>
        </div>
      </div>

      <div className="hero-strip">
        <div>
          <span className="kpi-num">8</span>
          <div className="kpi-label">Specialty areas</div>
        </div>
        <div>
          <span className="kpi-num">2</span>
          <div className="kpi-label">Dubai locations</div>
        </div>
        <div>
          <span className="kpi-num">EN<span style={{opacity:.4}}> · </span>AR<span style={{opacity:.4}}> · </span>RU</span>
          <div className="kpi-label">Patient languages</div>
        </div>
        <div>
          <span className="kpi-num" style={{ fontSize: 22, lineHeight: 1.2 }}>Consultation-first</span>
          <div className="kpi-label">No procedures without assessment</div>
        </div>
      </div>
    </div>
  </section>
);

/* ---------- Specialties grid + slide-out detail ---------- */
const Specialties = ({ openId, setOpenId, onBook }) => {
  const data = window.HC_DATA.specialties;
  const active = data.find((s) => s.id === openId);

  return (
    <section className="section" id="specialties" data-screen-label="02 Specialties">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Specialties</div>
            <h2 className="display" style={{ marginTop: 14 }}>
              One group,<br/>eight <em>specialties</em>.
            </h2>
          </div>
          <p className="lead">
            Each specialty is led by named clinicians and supported by
            shared diagnostics, theatre and recovery facilities at our
            Sheikh Zayed Road flagship. Tap a card to see treatments
            within that area — every listed treatment is assessed in
            consultation before it is offered.
          </p>
        </div>

        <div className="specialties">
          {data.map((s) => (
            <button
              key={s.id}
              className={"specialty-card" + (openId === s.id ? " active" : "")}
              onClick={() => setOpenId(openId === s.id ? null : s.id)}
              aria-expanded={openId === s.id}
            >
              <div className="flex between" style={{ width: "100%" }}>
                <span className="specialty-num">{s.num}</span>
                <span className="specialty-icon">
                  <Icon name={specialtyIcon(s.id)} size={28} />
                </span>
              </div>
              <div className="specialty-name" dangerouslySetInnerHTML={{__html: s.name}} />
              <div className="specialty-count">{s.count}</div>
              <div className="specialty-desc">{s.desc}</div>
            </button>
          ))}
        </div>

        {active && (
          <div className="specialty-detail">
            <div>
              <div className="eyebrow on-dark">Specialty · {active.num}</div>
              <h3 dangerouslySetInnerHTML={{__html: active.name}} />
              <p className="lead">{active.desc}</p>
              <div className="treatment-list">
                {active.treatments.map((t) => (
                  <button key={t}>
                    <span>{t}</span>
                    <span className="plus">+</span>
                  </button>
                ))}
              </div>
              <div style={{ display: "flex", gap: 14, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-bronze" onClick={onBook}>
                  Consult on {active.name.replace(/\u00a0/g, " ").split(" ")[0]} <Icon name="arrow" />
                </button>
                <a className="btn-link" style={{ color: "var(--bronze-2)", borderColor: "var(--bronze-2)" }}
                   href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                  Ask on WhatsApp
                </a>
              </div>
            </div>
            <div className="specialty-media">
              <img src={active.img} alt="" />
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

/* ---------- Treatment journey ---------- */
const Journey = () => {
  const [open, setOpen] = useState(0);
  const steps = window.HC_DATA.journey;

  return (
    <section className="section" style={{ background: "var(--paper-2)" }} data-screen-label="03 Journey">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Treatment journey</div>
            <h2 className="display" style={{ marginTop: 14 }}>
              The same five steps,<br/><em>for every</em> patient.
            </h2>
          </div>
          <p className="lead">
            Whether the conversation starts in aesthetics, surgery,
            dentistry or wellness, the journey is the same shape — a
            consultation, an honest assessment, a written plan and a
            follow-up by the same specialist who saw you first.
          </p>
        </div>

        <div className="journey-wrap">
          <div className="journey-media">
            <img src="media/scene-01.webp" alt="Clinic lounge, Hortman Clinics" />
            <div className="caption">Patient lounge · Sheikh Zayed Road</div>
          </div>
          <div className="journey-steps">
            {steps.map((s, i) => (
              <div
                key={i}
                className={"journey-step" + (open === i ? " open" : "")}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="step-num">0{i+1}</div>
                <div>
                  <div className="step-title">{s.title}</div>
                  <div className="step-body">{s.body}</div>
                </div>
                <div className="step-toggle">{open === i ? "−" : "+"}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Doctors ---------- */
const Doctors = ({ onSelect }) => {
  const [filter, setFilter] = useState("all");
  const doctors = window.HC_DATA.doctors;
  const filtered = filter === "all" ? doctors : doctors.filter((d) => d.specialty.toLowerCase().includes(filter));
  const filters = [
    ["all", "All"],
    ["plastic", "Plastic Surgery"],
    ["dermatology", "Dermatology"],
    ["hair", "Hair"],
    ["dent", "Dentistry"],
    ["wellness", "Wellness"]
  ];

  return (
    <section className="section" id="doctors" data-screen-label="04 Doctors">
      <div className="container">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Specialists</div>
            <h2 className="display" style={{ marginTop: 14 }}>
              Named clinicians.<br/><em>Verified</em> credentials.
            </h2>
          </div>
          <p className="lead">
            We publish each clinician's specialty, DHA licence number and
            relevant memberships. Profiles marked <strong style={{color:"var(--jade)"}}>verified</strong> have been
            independently confirmed; others are pending verification before
            their full credentials are publicly listed.
          </p>
        </div>

        <div style={{ display: "flex", gap: 8, marginBottom: 32, flexWrap: "wrap", borderBottom: "1px solid var(--line)", paddingBottom: 16 }}>
          {filters.map(([k, label]) => (
            <button
              key={k}
              onClick={() => setFilter(k)}
              style={{
                padding: "8px 14px",
                fontSize: 12,
                letterSpacing: "0.08em",
                textTransform: "uppercase",
                borderRadius: 999,
                border: "1px solid " + (filter === k ? "var(--ink)" : "var(--line)"),
                background: filter === k ? "var(--ink)" : "transparent",
                color: filter === k ? "var(--paper)" : "var(--ink)"
              }}
            >
              {label}
            </button>
          ))}
        </div>

        <div className="doctors-wrap">
          {filtered.map((d) => (
            <button key={d.id} className="doctor-card" onClick={() => onSelect(d)}>
              <div className="doctor-photo">
                <img src={d.img} alt={d.name} />
              </div>
              <div className="doctor-info">
                <div className="doctor-name">{d.name}</div>
                <div className="doctor-spec">{d.role}</div>
                <div className="doctor-meta">
                  <span className={"verified-pill " + (d.verified ? "" : "pending-pill")}>
                    {d.verified ? "Verified" : "Pending"}
                  </span>
                  <span>{d.location}</span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ---------- Before & After (consent locked) ---------- */
const BeforeAfter = ({ onRequest }) => {
  return (
    <section className="section" id="before-after" data-screen-label="05 Before and After">
      <div className="container">
        <div className="ba-wrap">
          <div>
            <div className="eyebrow on-dark">Before &amp; After Gallery</div>
            <h2 className="display" style={{ marginTop: 14, fontSize: "clamp(36px, 4.5vw, 60px)" }}>
              Results, shown<br/><em>only with</em> consent.
            </h2>
            <p className="lead" style={{ color: "rgba(246,241,232,0.78)", marginTop: 18, maxWidth: 460 }}>
              Patient before-and-after imagery is held back from public
              display until two conditions are met — explicit written
              patient consent for the specific image, and review against
              DHA advertising standards.
            </p>
            <div className="ba-notice">
              <Icon name="shield" size={18} />
              <span>
                In compliance with UAE Dubai Health Authority advertising
                regulations, this gallery is gated. Verified prospective
                patients can request consented case examples relevant to
                their treatment area.
              </span>
            </div>
            <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <button className="btn btn-bronze" onClick={onRequest}>
                Request consented examples <Icon name="arrow" />
              </button>
              <a className="btn-link" style={{ color: "var(--bronze-2)", borderColor: "var(--bronze-2)" }}
                 href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">
                Discuss on WhatsApp
              </a>
            </div>
          </div>
          <div className="ba-grid">
            {["Hair Transplant", "Skin Boosters", "Rhinoplasty", "Veneers"].map((t) => (
              <div key={t} className="ba-tile">
                <div className="lock-mark">
                  <Icon name="lock" size={22} />
                  <span>Consent-gated</span>
                </div>
                <div className="tag">
                  <span>{t}</span>
                  <span>—</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Reviews ---------- */
const Reviews = () => {
  const r = window.HC_DATA.reviews;
  return (
    <section className="section" style={{ paddingTop: 0 }} data-screen-label="06 Reviews">
      <div className="container">
        <div className="reviews-strip">
          <div>
            {r.verified ? (
              <>
                <div className="reviews-num">{r.score}<small>/5</small></div>
                <div className="reviews-stars">★ ★ ★ ★ ★</div>
                <div className="reviews-source">
                  Across {r.count} Google reviews · {r.source}
                </div>
              </>
            ) : (
              <>
                <div className="reviews-num" style={{ fontSize: 56, color: "var(--muted)" }}>—</div>
                <div className="label-mono" style={{ marginTop: 4 }}>Rating pending live confirmation</div>
                <div className="reviews-source" style={{ marginTop: 4 }}>Aggregator suggests {r.score}/{r.count}</div>
              </>
            )}
          </div>
          <div className="reviews-quotes">
            {r.quotes.map((q, i) => (
              <div key={i} className="reviews-quote">
                "{q.text}"
                <cite>{q.cite}</cite>
              </div>
            ))}
          </div>
          <div style={{ alignSelf: "flex-start" }}>
            <div className="label-mono">Verified live · attributed</div>
            <button className="btn btn-ghost" style={{ marginTop: 12 }}>
              Read all reviews <Icon name="arrow" />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ---------- Locations ---------- */
const Locations = ({ onBook }) => (
  <section className="section" id="locations" style={{ background: "var(--paper-2)" }} data-screen-label="07 Locations">
    <div className="container">
      <div className="sec-head">
        <div>
          <div className="eyebrow">Locations</div>
          <h2 className="display" style={{ marginTop: 14 }}>
            Two clinics,<br/><em>both</em> in Dubai.
          </h2>
        </div>
        <p className="lead">
          Our Sheikh Zayed Road flagship houses the full multi-specialty
          offer including surgical suites. The Jumeirah boutique focuses
          on aesthetics, dermatology and wellness in a residential setting.
        </p>
      </div>
      <div className="locations">
        {window.HC_DATA.locations.map((l) => (
          <div key={l.id} className="location-card">
            <div className="location-media">
              <img src={l.img} alt={l.name + " interior"} />
              <div className="location-tag">{l.tag}</div>
            </div>
            <div className="location-body">
              <div className="location-name">{l.name}</div>
              <div className="location-sub">{l.sub}</div>
              <div className="location-rows">
                <div className="label">Address</div>
                <div>{l.address}</div>
                <div className="label">Hours</div>
                <div>{l.hours}</div>
                <div className="label">Reception</div>
                <div>{l.phone}</div>
                <div className="label">Services</div>
                <div>{l.services}</div>
              </div>
              <div className="location-actions">
                <button className="btn btn-primary" onClick={onBook}>
                  Book at {l.name.split(" ")[0]}
                </button>
                <a className="btn btn-ghost" href={"https://maps.google.com/?q=" + encodeURIComponent(l.address)} target="_blank" rel="noopener">
                  Map &amp; directions
                </a>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------- CTA band ---------- */
const CTABand = ({ onBook }) => (
  <section className="cta-band" data-screen-label="08 CTA band">
    <div className="eyebrow on-dark" style={{ marginBottom: 14 }}>Speak with a specialist</div>
    <h2 className="display">
      Your consultation is the<br/><em>start</em> of the treatment.
    </h2>
    <p>
      Bring your concern, your medical history and your questions.
      We will be honest about candidacy — including treatments not
      suitable for you.
    </p>
    <div style={{ display: "inline-flex", gap: 14, flexWrap: "wrap", justifyContent: "center" }}>
      <button className="btn btn-primary" onClick={onBook}>
        Book a Consultation <Icon name="arrow" />
      </button>
      <a className="btn btn-ghost" href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">
        WhatsApp the clinic
      </a>
    </div>
  </section>
);

/* ---------- Footer ---------- */
const Footer = () => (
  <footer className="footer" data-screen-label="09 Footer">
    <div className="container">
      <div className="footer-top">
        <div className="footer-brand">
          <div className="wordmark">HORTMAN</div>
          <p>Multi-specialty aesthetic &amp; wellness care in Dubai —
            Sheikh Zayed Road flagship and Jumeirah boutique.</p>
          <div style={{ marginTop: 18 }}>
            <a className="btn btn-ghost" style={{ color: "var(--paper)", borderColor: "rgba(246,241,232,0.2)" }}
               href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">
              WhatsApp consultation
            </a>
          </div>
        </div>

        <div>
          <h5>Care</h5>
          <ul>
            {window.HC_DATA.specialties.slice(0, 6).map((s) => (
              <li key={s.id}><a>{s.name.replace(/\u00a0/g, " ")}</a></li>
            ))}
          </ul>
        </div>

        <div>
          <h5>Clinic</h5>
          <ul>
            <li><a>About</a></li>
            <li><a>Doctors</a></li>
            <li><a>Locations</a></li>
            <li><a>Before &amp; After</a></li>
            <li><a>Memberships</a></li>
            <li><a>Careers</a></li>
          </ul>
        </div>

        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href={window.HC_DATA.contact.phoneHref}>{window.HC_DATA.contact.phone}</a></li>
            <li><a href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener">{window.HC_DATA.contact.whatsapp}</a></li>
            <li><a href={"mailto:" + window.HC_DATA.contact.email}>{window.HC_DATA.contact.email}</a></li>
            <li style={{ marginTop: 8, opacity: 0.6 }}>{window.HC_DATA.contact.hours}</li>
          </ul>
        </div>
      </div>

      <div className="footer-meta">
        <div>© Hortman Clinics · All rights reserved · A multi-specialty group in Dubai.</div>
        <div className="licence">{window.HC_DATA.contact.licence}</div>
      </div>
    </div>
  </footer>
);

/* ---------- WhatsApp FAB ---------- */
const Fab = ({ onBook }) => (
  <div className="fab">
    <a className="fab-btn" href={window.HC_DATA.contact.whatsappHref} target="_blank" rel="noopener" aria-label="WhatsApp">
      <Icon name="whatsapp" size={22} />
    </a>
    <button className="fab-btn bronze" onClick={onBook} aria-label="Book a Consultation">
      <Icon name="cal" size={20} />
    </button>
  </div>
);

/* Expose to other Babel scripts */
Object.assign(window, {
  HC: { Icon, BrandWordmark, TopBar, Hero, Specialties, Journey,
        Doctors, BeforeAfter, Reviews, Locations, CTABand, Footer, Fab,
        specialtyIcon }
});