/* ============================================================
   AACSH — Sub-pages: Departments hub, Department detail,
   Procedure detail, Doctors hub, Doctor profile,
   Accreditation, Before & After, Medical tourism, About, Contact
   ============================================================ */

/* ============================================================
   Departments hub
   ============================================================ */
function DepartmentsHubPage({ onNavigate }) {
  const depts = window.AACSH_DATA.departments;
  return (
    <div className="page">
      <PageHeader
        eyebrow="Departments"
        title="Ten specialities, organised around the surgical anchor."
        lede="Cosmetic and plastic surgery sits at the centre. Around it, nine supporting specialities provide medical, aesthetic and wellness care so patients aren't shuttled between buildings."
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {depts.map(d => (
              <DepartmentCard key={d.slug} dept={d} onClick={() => onNavigate(`/departments/${d.slug}`)} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   Department detail
   ============================================================ */
function DepartmentPage({ slug, onNavigate, onBook }) {
  const dept = window.AACSH_DATA.departments.find(d => d.slug === slug);
  if (!dept) return <NotFound onNavigate={onNavigate} />;
  const drs = window.AACSH_DATA.doctors.filter(doc => doc.depts.includes(slug));

  return (
    <div className="page">
      {/* Header */}
      <section style={{ background: "var(--mist)", padding: "56px 0 72px" }}>
        <div className="wrap">
          <Breadcrumb items={[
            { label: "Departments", to: "/departments" },
            { label: dept.name },
          ]} onNavigate={onNavigate} />

          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, marginTop: 32, alignItems: "center" }}>
            <div>
              <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
                {dept.kind === "surgical" && <span className="chip">Surgical · risks disclosed</span>}
                {dept.kind === "medical" && <span className="chip">Medical</span>}
                {dept.kind === "wellness" && <span className="chip">Wellness</span>}
                <span className="chip chip-line">{dept.procedures.length} procedures</span>
              </div>
              <h1 className="h-display" style={{ fontSize: "clamp(40px, 4.6vw, 64px)" }}>{dept.name}</h1>
              <p className="lede" style={{ marginTop: 22, maxWidth: 540 }}>{dept.lead}</p>
              <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
                <button className="btn btn-primary" onClick={onBook}>Book a consultation</button>
                <a href={"#procedures"} className="btn btn-ghost">See procedures</a>
              </div>
            </div>
            <div style={{ borderRadius: 18, overflow: "hidden", height: 380, boxShadow: "var(--shadow-lg)" }} className="img-tinted">
              <img src={dept.img} alt={dept.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>
        </div>
      </section>

      {/* Surgical → risks notice */}
      {dept.kind === "surgical" && (
        <section style={{ padding: "32px 0", background: "white", borderBottom: "1px solid var(--line)" }}>
          <div className="wrap">
            <div className="note-risks">
              <strong>This department performs surgical procedures.</strong> Each procedure page below carries an explicit risks section in addition to candidacy, process and recovery. Outcomes are not guaranteed; risk is assessed individually with your surgeon.
            </div>
          </div>
        </section>
      )}

      {/* Procedures */}
      <section id="procedures" className="section">
        <div className="wrap">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32 }}>
            <div>
              <div className="eyebrow">Procedures</div>
              <h2 className="h-2" style={{ marginTop: 10 }}>{dept.procedures.length} procedures in this department</h2>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }}>
            {dept.procedures.map(p => (
              <button key={p.slug} onClick={() => onNavigate(`/procedures/${dept.slug}/${p.slug}`)} className="card"
                style={{
                  textAlign: "left",
                  padding: "22px 24px",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  gap: 16, transition: "all 200ms",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--plum)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "none"; }}
              >
                <div>
                  <div className="h-4" style={{ marginBottom: 4 }}>{p.name}</div>
                  <div className="tiny" style={{ display: "flex", gap: 8, alignItems: "center" }}>
                    {p.surgical && <><span style={{ color: "var(--warn)" }}>● Surgical</span><span>·</span></>}
                    <span>By consultation</span>
                  </div>
                </div>
                <span style={{ color: "var(--plum)", fontSize: 18 }}>→</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Doctors in dept */}
      {drs.length > 0 && (
        <section className="section" style={{ paddingTop: 0, background: "white" }}>
          <div className="wrap">
            <div className="eyebrow" style={{ marginBottom: 14 }}>Department clinicians</div>
            <h2 className="h-2" style={{ marginBottom: 32 }}>Consultants in {dept.short.toLowerCase()}</h2>
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${Math.min(drs.length, 4)}, 1fr)`, gap: 18 }}>
              {drs.map(d => <DoctorCardCompact key={d.slug} doc={d} onClick={() => onNavigate(`/doctors/${d.slug}`)} />)}
            </div>
          </div>
        </section>
      )}

      <CTAFooter onBook={onBook} />
    </div>
  );
}

function DoctorCardCompact({ doc, onClick }) {
  return (
    <button onClick={onClick} style={{ textAlign: "left", display: "flex", flexDirection: "column", gap: 12 }}>
      <div className="portrait"><img src={doc.portrait} alt={doc.name} /></div>
      <div>
        <div className="serif" style={{ fontSize: 18, lineHeight: 1.2 }}>{doc.name}</div>
        <div className="tiny" style={{ marginTop: 4 }}>{doc.role}</div>
      </div>
    </button>
  );
}

/* ============================================================
   Procedure detail — with risks, candidacy, process, recovery, FAQ
   ============================================================ */
function ProcedurePage({ deptSlug, procSlug, onNavigate, onBook }) {
  const dept = window.AACSH_DATA.departments.find(d => d.slug === deptSlug);
  if (!dept) return <NotFound onNavigate={onNavigate} />;
  const proc = dept.procedures.find(p => p.slug === procSlug);
  if (!proc) return <NotFound onNavigate={onNavigate} />;

  const [tab, setTab] = useState("what");
  const drs = window.AACSH_DATA.doctors.filter(doc => doc.depts.includes(deptSlug));

  const tabs = [
    { id: "what", label: "What it is" },
    { id: "candidacy", label: "Candidacy" },
    { id: "process", label: "Process" },
    { id: "recovery", label: "Recovery" },
    ...(proc.surgical ? [{ id: "risks", label: "Risks" }] : []),
    { id: "faq", label: "FAQ" },
  ];

  return (
    <div className="page">
      <section style={{ padding: "56px 0 56px" }}>
        <div className="wrap">
          <Breadcrumb items={[
            { label: "Departments", to: "/departments" },
            { label: dept.name, to: `/departments/${dept.slug}` },
            { label: proc.name },
          ]} onNavigate={onNavigate} />

          <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 64, marginTop: 32, alignItems: "start" }}>
            <div>
              <div style={{ display: "flex", gap: 8, marginBottom: 18 }}>
                {proc.surgical && <span className="chip" style={{ background: "rgba(176, 122, 31, 0.12)", color: "var(--warn)" }}>● Surgical</span>}
                <span className="chip chip-line">{dept.name}</span>
              </div>
              <h1 className="h-1">{proc.name}</h1>
              <p className="lede" style={{ marginTop: 22 }}>
                {procLede(proc)}
              </p>

              {proc.surgical && (
                <div className="note-risks" style={{ marginTop: 24 }}>
                  <strong>Risks are part of any surgery.</strong> Below you'll find candidacy, process, recovery and a full risks section. Your surgeon will assess your individual risk profile in consultation; outcomes are not guaranteed.
                </div>
              )}

              {/* Tabs */}
              <div style={{ borderBottom: "1px solid var(--line)", marginTop: 40, display: "flex", gap: 28 }}>
                {tabs.map(t => (
                  <div key={t.id} className={"tab" + (tab === t.id ? " active" : "")} onClick={() => setTab(t.id)}>
                    {t.label}
                  </div>
                ))}
              </div>

              <div style={{ paddingTop: 28, minHeight: 360 }}>
                <ProcedureTabContent tab={tab} proc={proc} dept={dept} />
              </div>
            </div>

            {/* Side */}
            <aside style={{ position: "sticky", top: 130 }}>
              <div className="card" style={{ padding: 24 }}>
                <div className="eyebrow">At a glance</div>
                <div style={{ marginTop: 16, display: "grid", gap: 16 }}>
                  <Glance k="Type" v={proc.surgical ? "Surgical procedure" : "Non-surgical treatment"} />
                  <Glance k="Anaesthesia" v={proc.surgical ? "General or local, surgeon-assessed" : "Topical or none"} />
                  <Glance k="Length" v={proc.surgical ? "1.5 — 4 hours, procedure-dependent" : "30 — 60 minutes"} />
                  <Glance k="Hospital stay" v={proc.surgical ? "Day case to one night" : "Outpatient"} />
                  <Glance k="Back to work" v={proc.surgical ? "1 — 3 weeks, typically" : "Same day"} />
                  <Glance k="Price" v="By consultation" sub="No prices published; honest assessment in clinic." />
                </div>

                <button className="btn btn-primary" style={{ width: "100%", marginTop: 22 }}
                  onClick={() => onBook(deptSlug, procSlug)}>
                  Book a consultation
                </button>
                <a href={window.AACSH_DATA.contact.phoneHref} className="btn btn-ghost" style={{ width: "100%", marginTop: 8 }}>
                  Call {window.AACSH_DATA.contact.phone}
                </a>
              </div>

              {drs.length > 0 && (
                <div style={{ marginTop: 18 }}>
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Surgeons performing this</div>
                  {drs.slice(0, 2).map(d => (
                    <button key={d.slug} onClick={() => onNavigate(`/doctors/${d.slug}`)}
                      style={{
                        width: "100%", padding: 12, marginBottom: 8,
                        background: "white", border: "1px solid var(--line)", borderRadius: 12,
                        display: "flex", gap: 12, alignItems: "center", textAlign: "left",
                      }}>
                      <img src={d.portrait} style={{ width: 48, height: 48, borderRadius: 99, objectFit: "cover", objectPosition: "top center" }} />
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 500 }}>{d.name}</div>
                        <div className="tiny">{d.role}</div>
                      </div>
                      <span style={{ color: "var(--plum)" }}>→</span>
                    </button>
                  ))}
                </div>
              )}
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
}

function procLede(proc) {
  const map = {
    rhinoplasty: "Reshaping the nose to improve facial balance and, where indicated, breathing function. A surgical procedure performed under general anaesthesia with structured recovery.",
    blepharoplasty: "Surgical refinement of the upper or lower eyelid for cosmetic or functional reasons. Considered minor surgery; recovery is typically rapid.",
    facelift: "A surgical lifting of facial soft tissue to address visible signs of ageing. Procedure length, technique and recovery vary by the lift indicated.",
    "breast-augmentation": "Surgical enlargement of the breasts using implants or fat grafting, chosen with the patient after honest discussion of options, candidacy and risk.",
    "breast-reduction": "Surgical reduction of breast tissue, often performed for functional reasons in addition to aesthetic ones.",
    abdominoplasty: "Tightening of the abdominal wall and removal of excess skin. A major surgical procedure with a structured recovery pathway.",
    liposuction: "Surgical removal of fat deposits in defined areas. Best paired with a stable weight and discussed against alternatives at consultation.",
    gynecomastia: "Surgical correction of enlarged male breast tissue. Investigated medically before any surgical recommendation.",
    bbl: "Augmentation of the buttocks using the patient's own fat. The BBL has internationally-recognised risks; we follow current safety guidance and screen candidacy carefully.",
    otoplasty: "Surgical correction of ear shape or projection. Often performed under local anaesthesia.",
    labiaplasty: "Aesthetic and functional refinement of labial tissue, performed in a hospital setting.",
    vaginoplasty: "Surgical tightening of the vaginal canal, performed after thorough discussion of indication and alternatives.",
    hymenoplasty: "Reconstruction performed in a private hospital setting with full clinical confidentiality.",
    "fue-transplant": "Follicular unit extraction. Hair grafts are taken individually from the donor area and placed by hand into the recipient site.",
    "beard-transplant": "FUE technique applied to the beard area, planned to respect natural growth patterns.",
    prp: "Platelet-rich plasma scalp injections used as an adjunct to hair-loss medical therapy. Non-surgical.",
    botox: "Botulinum toxin treatments for cosmetic or medical indications, performed by a clinician with proper assessment.",
    fillers: "Hyaluronic-acid dermal fillers used to restore volume or refine contours. Risk and reversibility discussed at consultation.",
    "laser-resurfacing": "Fractional or full laser resurfacing for skin quality. Downtime, suitability and skin-type considerations reviewed in clinic.",
    mesotherapy: "Microinjection of targeted nutrients into the dermis. Non-surgical; assessed against alternatives.",
    "acne-scars": "Combination protocols — laser, microneedling, peels — sequenced to the scar type and skin response.",
    "thread-lift": "Suspension threads placed under the skin for facial lifting. Non-surgical but invasive; risks discussed at consultation.",
  };
  return map[proc.slug] || "A clinical assessment determines whether this treatment is appropriate. Outcomes are discussed honestly, including non-treatment as a valid option.";
}

function ProcedureTabContent({ tab, proc, dept }) {
  if (tab === "what") return (
    <div>
      <p className="body">
        {procLede(proc)} This page summarises what to expect at consultation and during care. It is informational; nothing here is a guarantee of result or a substitute for an in-person clinical assessment.
      </p>
      <p className="body" style={{ marginTop: 18 }}>
        A consultation is the only place a candidate is properly assessed. Bring questions: about technique, about alternatives, about non-treatment, and about the specific clinician who will perform your procedure.
      </p>
    </div>
  );

  if (tab === "candidacy") return (
    <div>
      <p className="body">Suitability is decided by the consulting surgeon or clinician, not by an online form. The general considerations include:</p>
      <ul style={{ marginTop: 16, paddingLeft: 0, listStyle: "none" }}>
        {[
          "General medical fitness for the proposed procedure and any required anaesthesia",
          "Realistic expectations established through honest discussion",
          "Absence of active conditions that would meaningfully raise risk",
          "Skin, anatomical and lifestyle factors specific to the procedure",
          "Adequate time available for recovery as planned",
        ].map(t => (
          <li key={t} style={{ display: "flex", gap: 10, padding: "10px 0", borderBottom: "1px solid var(--line-soft)" }}>
            <span style={{ color: "var(--plum)" }}>·</span>
            <span style={{ fontSize: 14 }}>{t}</span>
          </li>
        ))}
      </ul>
    </div>
  );

  if (tab === "process") return (
    <div>
      <ol style={{ paddingLeft: 0, listStyle: "none", margin: 0 }}>
        {[
          { h: "Consultation", d: "Full clinical assessment, photography where appropriate, honest discussion of options including non-treatment." },
          { h: "Pre-operative workup", d: "Bloods, ECG and anaesthetic review for surgical cases. Specific tests are determined by your surgeon." },
          { h: "Day of procedure", d: "Admission, consent reconfirmation, anaesthetic, procedure and recovery — all within Building 73." },
          { h: "Discharge", d: "Day case or overnight stay depending on the procedure and your individual recovery." },
          { h: "Follow-up", d: "A structured schedule, typically at 1 week, 1 month and 3 months. International patients followed via secure video." },
        ].map((s, i) => (
          <li key={i} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 18, padding: "14px 0", borderBottom: "1px solid var(--line-soft)" }}>
            <div style={{ fontFamily: "var(--font-mono)", color: "var(--gold)", fontSize: 13 }}>0{i+1}</div>
            <div>
              <div className="h-4">{s.h}</div>
              <div className="body" style={{ fontSize: 14, marginTop: 4 }}>{s.d}</div>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );

  if (tab === "recovery") return (
    <div>
      <p className="body">Recovery is individual. The summary below is typical; your own pathway is set by the clinician responsible for your care.</p>
      <div style={{ marginTop: 22, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
        {[
          { t: "Day 0 — 3", d: "Swelling, bruising and managed discomfort. Rest in a recovery suite or at your accommodation, with phone access to nursing." },
          { t: "Day 3 — 14", d: "Sutures, dressings or follow-up reviews depending on the procedure. Light activity reintroduced." },
          { t: "Week 2 — 6", d: "Return to most daily activity. Exercise restrictions reviewed individually." },
          { t: "Month 1 — 3", d: "Continued resolution of swelling; initial outcomes visible." },
          { t: "Month 3 — 12", d: "Final outcome typically becomes apparent. Photography reviewed at structured follow-ups." },
          { t: "Long-term", d: "Care plan continues — ageing, weight change and skin quality affect long-term result." },
        ].map(s => (
          <div key={s.t} style={{ background: "var(--mist)", borderRadius: 10, padding: "16px 18px" }}>
            <div className="tiny" style={{ color: "var(--plum)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 6 }}>{s.t}</div>
            <div className="body" style={{ fontSize: 13.5, margin: 0 }}>{s.d}</div>
          </div>
        ))}
      </div>
    </div>
  );

  if (tab === "risks") return (
    <div>
      <div className="note-risks" style={{ marginBottom: 22 }}>
        Every surgical procedure carries risk. The list below is informational and is not exhaustive. Your individual risks are assessed and discussed in consultation, where alternatives — including not proceeding — are reviewed in detail.
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        <RiskGroup heading="General surgical risks" items={[
          "Anaesthetic-related risks, assessed by the anaesthetic team",
          "Bleeding or haematoma requiring intervention",
          "Wound healing issues, including infection",
          "Deep vein thrombosis and pulmonary embolism",
          "Scarring, which is variable between individuals",
        ]} />
        <RiskGroup heading="Procedure-specific considerations" items={[
          "Asymmetry, contour irregularities or unsatisfactory aesthetic outcome",
          "Sensory change (numbness or altered sensation) in operated areas",
          "Need for revision surgery in some patients",
          "Unpredictable individual healing response",
          "Result variation over time with ageing, weight change or skin quality",
        ]} />
      </div>
      <p className="tiny" style={{ marginTop: 22 }}>
        This information is not patient-specific and does not constitute medical advice. A formal risk discussion takes place at consultation.
      </p>
    </div>
  );

  if (tab === "faq") return (
    <div style={{ display: "grid", gap: 6 }}>
      {[
        { q: "How long is the consultation?", a: "Typically 45–60 minutes. Sufficient time is reserved to discuss options, alternatives and risks; we do not rush consultations." },
        { q: "Will I see the surgeon who will operate?", a: "Yes. Surgical consultations are with the operating surgeon, not a sales coordinator." },
        { q: "Do you publish prices?", a: "No. Prices follow an individual clinical assessment; we do not publish indicative prices because they're misleading without that assessment." },
        { q: "Are results guaranteed?", a: "No. UAE medical-advertising rules — and clinical honesty — prohibit guarantees. We discuss what's likely and what isn't." },
        { q: "Can I have a video consultation first?", a: "Yes, especially for international patients. An in-person assessment is required before any surgical procedure." },
      ].map((f, i) => (
        <FAQItem key={i} q={f.q} a={f.a} />
      ))}
    </div>
  );

  return null;
}

function RiskGroup({ heading, items }) {
  return (
    <div className="card" style={{ padding: 24 }}>
      <div className="h-4" style={{ marginBottom: 12 }}>{heading}</div>
      <ul style={{ paddingLeft: 0, listStyle: "none", margin: 0 }}>
        {items.map(t => (
          <li key={t} style={{ display: "flex", gap: 10, padding: "8px 0", borderBottom: "1px solid var(--line-soft)", fontSize: 13.5 }}>
            <span style={{ color: "var(--warn)", flexShrink: 0 }}>●</span>
            <span>{t}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function FAQItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div style={{ borderBottom: "1px solid var(--line)" }}>
      <button onClick={() => setOpen(!open)} style={{
        width: "100%", padding: "18px 0", textAlign: "left",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 14,
      }}>
        <span style={{ fontWeight: 500, fontSize: 15 }}>{q}</span>
        <span style={{
          fontSize: 18, color: "var(--plum)",
          transition: "transform 200ms",
          transform: open ? "rotate(45deg)" : "none",
        }}>+</span>
      </button>
      {open && (
        <div className="body" style={{ paddingBottom: 18, fontSize: 14, paddingRight: 40 }}>{a}</div>
      )}
    </div>
  );
}

function Glance({ k, v, sub }) {
  return (
    <div>
      <div className="tiny" style={{ color: "var(--muted)", letterSpacing: "0.12em", textTransform: "uppercase" }}>{k}</div>
      <div style={{ fontSize: 14, marginTop: 2, fontWeight: 500 }}>{v}</div>
      {sub && <div className="tiny" style={{ marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

/* ============================================================
   Doctors hub + filter + profile
   ============================================================ */
function DoctorsHubPage({ onNavigate }) {
  const [filter, setFilter] = useState("all");
  const doctors = window.AACSH_DATA.doctors;
  const depts = window.AACSH_DATA.departments;
  const filtered = filter === "all" ? doctors : doctors.filter(d => d.depts.includes(filter));

  return (
    <div className="page">
      <PageHeader
        eyebrow="Our clinicians"
        title="Doctors, with credentials we publish openly."
        lede="A roster of consultants across our ten specialities. Each profile carries the doctor's specialty, training summary and the DHA Sheryan licence — the same registry the Health Authority publishes."
      />

      <section style={{ padding: "0 0 32px" }}>
        <div className="wrap">
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 36 }}>
            <FilterChip active={filter === "all"} onClick={() => setFilter("all")}>All clinicians ({doctors.length})</FilterChip>
            {depts.map(d => {
              const count = doctors.filter(doc => doc.depts.includes(d.slug)).length;
              if (count === 0) return null;
              return (
                <FilterChip key={d.slug} active={filter === d.slug} onClick={() => setFilter(d.slug)}>
                  {d.short} ({count})
                </FilterChip>
              );
            })}
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 22 }}>
            {filtered.map(doc => (
              <DoctorCard key={doc.slug} doc={doc} onClick={() => onNavigate(`/doctors/${doc.slug}`)} />
            ))}
          </div>

          {/* Placeholder for unverified roster */}
          <div className="note-consent" style={{ marginTop: 40 }}>
            The hospital roster is larger than what's published here. Additional doctors appear as their DHA Sheryan licence numbers, current credentials and consent for publication are verified — that's a non-negotiable step.
          </div>
        </div>
      </section>
    </div>
  );
}

function FilterChip({ active, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      height: 34, padding: "0 14px",
      fontSize: 12.5, fontWeight: 500,
      border: "1px solid " + (active ? "var(--plum)" : "var(--line)"),
      borderRadius: 999,
      background: active ? "var(--plum)" : "white",
      color: active ? "white" : "var(--ink)",
      transition: "all 160ms",
    }}>
      {children}
    </button>
  );
}

function DoctorProfilePage({ slug, onNavigate, onBook }) {
  const doc = window.AACSH_DATA.doctors.find(d => d.slug === slug);
  if (!doc) return <NotFound onNavigate={onNavigate} />;
  const deptObjects = doc.depts.map(s => window.AACSH_DATA.departments.find(d => d.slug === s)).filter(Boolean);

  return (
    <div className="page">
      <section style={{ padding: "56px 0 72px", background: "var(--mist)" }}>
        <div className="wrap">
          <Breadcrumb items={[
            { label: "Doctors", to: "/doctors" },
            { label: doc.name },
          ]} onNavigate={onNavigate} />

          <div style={{ display: "grid", gridTemplateColumns: "440px 1fr", gap: 64, marginTop: 32, alignItems: "start" }}>
            <div className="portrait" style={{ borderRadius: 22 }}><img src={doc.portrait} alt={doc.name} /></div>

            <div>
              <div className="eyebrow">{doc.role}</div>
              <h1 className="h-1" style={{ marginTop: 10 }}>{doc.name}</h1>
              <p className="lede" style={{ marginTop: 18 }}>{doc.summary}</p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 30, maxWidth: 540 }}>
                <DocStat k="Experience" v={doc.experience} />
                <DocStat k="Languages" v={doc.langs.join(", ")} />
                <DocStat k="DHA Sheryan" v="To verify" sub="Live DHA registry lookup before publish" />
                <DocStat k="Departments" v={deptObjects.map(d => d.short).join(", ")} />
              </div>

              <div style={{ display: "flex", gap: 10, marginTop: 30 }}>
                <button className="btn btn-primary" onClick={() => onBook(doc.depts[0])}>Book with {doc.name.split(" ").slice(0, 2).join(" ")}</button>
                <a href={window.AACSH_DATA.contact.phoneHref} className="btn btn-ghost">{window.AACSH_DATA.contact.phone}</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Training & focus</div>
              <h2 className="h-2" style={{ marginBottom: 18 }}>About {doc.name.split(" ").slice(0, 2).join(" ")}</h2>
              <p className="body">
                A consultant in {deptObjects[0]?.short.toLowerCase()} practising at AACSH in Building 73, Dubai Healthcare City. {doc.summary} Each procedure is offered only where the consultant's current DHA Sheryan licence covers the technique, and patient suitability is assessed individually.
              </p>
              <p className="body" style={{ marginTop: 14 }}>
                In consultation, expect a structured discussion of options including non-treatment, honest assessment of likely outcome, and full disclosure of risk. Photography is taken where useful and stored to the hospital's data-protection standards.
              </p>

              <div className="note-consent" style={{ marginTop: 22 }}>
                Detailed credentials, board memberships and publications are published per-doctor once verified with the DHA Sheryan registry and the clinician's written consent. This profile is intentionally conservative until that step is complete.
              </div>
            </div>

            <aside>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Procedures performed</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                {deptObjects.flatMap(d => d.procedures.map(p => ({ p, d }))).map(({ p, d }) => (
                  <button key={d.slug + p.slug} onClick={() => onNavigate(`/procedures/${d.slug}/${p.slug}`)}
                    style={{
                      textAlign: "left",
                      padding: "12px 14px",
                      background: "white",
                      border: "1px solid var(--line)",
                      borderRadius: 10,
                      display: "flex", justifyContent: "space-between", alignItems: "center",
                      fontSize: 13.5,
                    }}>
                    <span>{p.name}</span>
                    {p.surgical && <span style={{ color: "var(--warn)", fontSize: 10 }}>● SURGICAL</span>}
                  </button>
                ))}
              </div>
            </aside>
          </div>
        </div>
      </section>

      <CTAFooter onBook={() => onBook(doc.depts[0])} />
    </div>
  );
}

function DocStat({ k, v, sub }) {
  return (
    <div style={{ background: "white", borderRadius: 10, padding: "14px 16px", border: "1px solid var(--line)" }}>
      <div className="tiny" style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{k}</div>
      <div style={{ fontSize: 14, fontWeight: 500, marginTop: 4 }}>{v}</div>
      {sub && <div className="tiny" style={{ marginTop: 4, color: "var(--plum)" }}>{sub}</div>}
    </div>
  );
}

/* ============================================================
   Accreditation page
   ============================================================ */
function AccreditationPage({ onNavigate, onBook }) {
  const items = window.AACSH_DATA.accreditations;
  return (
    <div className="page">
      <PageHeader
        eyebrow="Accreditation"
        title="Standards we agree to be measured against."
        lede="Hospital-grade care is meaningful only when it's verified by independent bodies. These are the accreditations and licensing frameworks AACSH operates under."
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap" style={{ display: "grid", gap: 18 }}>
          {items.map((a, i) => (
            <div key={a.code} style={{
              background: "white", border: "1px solid var(--line)", borderRadius: 16,
              padding: 32, display: "grid", gridTemplateColumns: "100px 1fr 280px", gap: 36, alignItems: "center",
            }}>
              <AccreditationMark code={a.code} />
              <div>
                <div className="serif" style={{ fontSize: 24, marginBottom: 6 }}>{a.name}</div>
                <p className="body" style={{ margin: 0, fontSize: 14 }}>{a.detail}</p>
              </div>
              <div className="tiny" style={{ color: "var(--plum)", lineHeight: 1.55 }}>
                <span style={{ display: "inline-block", padding: "3px 8px", background: "var(--mist)", borderRadius: 99, marginBottom: 6 }}>VERIFICATION</span><br/>
                {a.verify}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <div style={{ borderRadius: 18, overflow: "hidden", boxShadow: "var(--shadow)" }}>
              <img src="media/accreditation-jci.webp" alt="JCI accreditation mark" style={{ width: "100%", display: "block" }} />
            </div>
            <div>
              <div className="eyebrow">Joint Commission International</div>
              <h2 className="h-2" style={{ marginTop: 10 }}>The first DHCC hospital to attain JCI accreditation.</h2>
              <p className="body" style={{ marginTop: 18 }}>
                AACSH was, per public reporting, the first facility in the Dubai Healthcare City free zone to obtain JCI accreditation. JCI is a time-limited accreditation that must be re-earned, so we publish the mark only while the current cycle is verifiably in force.
              </p>
              <div className="note-consent" style={{ marginTop: 18 }}>
                Mark-usage rights and the current accreditation cycle dates are confirmed before this mark appears anywhere on the live site.
              </div>
            </div>
          </div>
        </div>
      </section>

      <CTAFooter onBook={onBook} />
    </div>
  );
}

/* ============================================================
   Before & After (consent-gated placeholder)
   ============================================================ */
function BeforeAfterPage({ onBook }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="Before & After"
        title="A small gallery, fully permissioned."
        lede="UAE Ministry of Health rules — and our own clinical principles — require written patient consent and compliant framing before any before-and-after image is shown. We publish a small number of cases, slowly, rather than a large gallery of unverified outcomes."
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="note-risks" style={{ marginBottom: 32 }}>
            <strong>Outcomes vary individually.</strong> Photographs shown elsewhere are not a prediction of what your result will look like. Candidacy, expectations and limits of surgery are reviewed in consultation.
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            {[
              "Rhinoplasty · 6 month follow-up",
              "Blepharoplasty · 3 month follow-up",
              "FUE hair transplant · 9 month",
              "Abdominoplasty · 12 month follow-up",
              "Liposuction · 6 month follow-up",
              "Otoplasty · 3 month follow-up",
            ].map(l => <ConsentLockedTile key={l} label={l} />)}
          </div>

          <div className="note-consent" style={{ marginTop: 32 }}>
            <strong>How a case becomes public.</strong> 1. The patient gives written consent specifically for marketing use. 2. The case is reviewed for MOH advertising compliance — including how it's captioned and the absence of any guaranteed-outcome language. 3. Only then is it published. This is why our gallery grows slowly.
          </div>
        </div>
      </section>
      <CTAFooter onBook={onBook} />
    </div>
  );
}

/* ============================================================
   Medical tourism
   ============================================================ */
function MedicalTourismPage({ onBook }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="For international patients"
        title="Care that starts before your flight lands."
        lede="A dedicated medical-tourism team coordinates the practical and the clinical side of travelling to Dubai for treatment — from the first video consult to follow-up after you return."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, marginBottom: 80 }}>
            <div style={{ borderRadius: 18, overflow: "hidden", height: 480 }} className="img-tinted">
              <img src="media/facility-interior-4.webp" alt="Dubai Healthcare City" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div>
              <h2 className="h-2">A coordinated pathway, in your language.</h2>
              <p className="body" style={{ marginTop: 18 }}>
                Most international patients begin with a confidential video consultation. From there, a coordinator builds a plan: clinical review, scheduling, hospital accommodation, hotel partners, ground transfers, and structured follow-up after you return home.
              </p>
              <div style={{ marginTop: 26, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
                {window.AACSH_DATA.languages.map(l => (
                  <div key={l} style={{ background: "var(--mist)", borderRadius: 8, padding: "10px 12px", fontSize: 13.5, fontWeight: 500 }}>{l}</div>
                ))}
              </div>
            </div>
          </div>

          <div className="eyebrow" style={{ marginBottom: 14 }}>The journey</div>
          <h2 className="h-2" style={{ marginBottom: 32 }}>What happens, week by week.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 14 }}>
            {[
              { t: "Initial enquiry", d: "A coordinator answers within one business hour. We gather basics — never medical history — and route you to the right speciality." },
              { t: "Video consultation", d: "A 30–45 minute clinical conversation. Photographs you share are stored securely; clinical advice is honest about candidacy." },
              { t: "Planning", d: "A written plan: dates, the surgeon you'll see, hospital accommodation, hotel and transfer options." },
              { t: "Visit", d: "Airport transfer, hospital admission, the procedure, in-room nursing, and structured discharge." },
              { t: "Follow-up", d: "Scheduled video reviews at one, three and twelve weeks. Local follow-up coordination where useful." },
            ].map((s, i) => (
              <div key={i} className="card" style={{ padding: 22 }}>
                <div className="serif" style={{ fontSize: 28, color: "var(--gold)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div className="h-4" style={{ marginTop: 8 }}>{s.t}</div>
                <p className="small" style={{ margin: 0, marginTop: 8 }}>{s.d}</p>
              </div>
            ))}
          </div>

          <div className="note-consent" style={{ marginTop: 40 }}>
            International patients receive the same risk discussion as local patients. Surgery requires an in-person clinical assessment before booking; we don't lock in operating dates from a video alone.
          </div>
        </div>
      </section>
      <CTAFooter onBook={() => onBook(null, null, true)} label="Start an international enquiry" />
    </div>
  );
}

/* ============================================================
   About
   ============================================================ */
function AboutPage({ onBook }) {
  return (
    <div className="page">
      <PageHeader
        eyebrow="About"
        title="A hospital, not a clinic."
        lede="AACSH is a multi-specialty hospital in Dubai Healthcare City, organised around cosmetic and plastic surgery. The distinction matters — we operate to hospital governance, with hospital nursing and full anaesthetic cover."
      />

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64 }}>
          <div>
            <div className="eyebrow">Where we are</div>
            <h2 className="h-2" style={{ marginTop: 10 }}>Building 73, Dubai Healthcare City.</h2>
            <p className="body" style={{ marginTop: 18 }}>
              Dubai Healthcare City was established as a regulated free zone for healthcare practice and research. AACSH operates from Building 73 in Umm Hurair 2, licensed by the DHCC authority and under DHA oversight.
            </p>
            <p className="body" style={{ marginTop: 14 }}>
              Per public reporting, AACSH was the first hospital in the DHCC free zone to receive Joint Commission International accreditation. JCI is renewable — we publish the mark only during a confirmed current cycle.
            </p>

            <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
              <Fact n="10" l="Specialities" />
              <Fact n="29+" l="Doctors" sub="To verify" />
              <Fact n="7/wk" l="09:00 — 21:00" />
            </div>
          </div>

          <div style={{ display: "grid", gap: 14 }}>
            <div style={{ borderRadius: 18, overflow: "hidden", height: 280 }}>
              <img src="media/facility-detail-1.webp" alt="Hospital interior" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div style={{ borderRadius: 14, overflow: "hidden", height: 180 }}>
                <img src="media/facility-detail-2.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ borderRadius: 14, overflow: "hidden", height: 180 }}>
                <img src="media/facility-detail-3.webp" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "0 0 96px" }}>
        <div className="wrap">
          <div className="eyebrow" style={{ marginBottom: 14 }}>How we operate</div>
          <h2 className="h-2" style={{ marginBottom: 32 }}>Principles, in practice.</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
            {[
              { t: "Honest before persuasive", d: "Consultation discusses options including non-treatment. No claim of \"best\", no error-free language, no guaranteed outcomes." },
              { t: "Hospital governance", d: "Clinical decisions follow hospital governance, not clinic-by-clinic conventions. JCI accreditation requires it." },
              { t: "Compliant in every channel", d: "DHA and MOH advertising rules apply to our website, our social channels and our consultations." },
              { t: "Patient privacy by default", d: "Medical detail never travels through forms. Images appear only with written, specific consent." },
              { t: "Single point of care", d: "Ten specialities under one roof — our patients aren't bounced between buildings." },
              { t: "Open about credentials", d: "Each clinician's specialty and DHA Sheryan licence are published on their profile." },
            ].map(p => (
              <div key={p.t} style={{ background: "var(--mist)", padding: 24, borderRadius: 14 }}>
                <div className="h-4">{p.t}</div>
                <p className="small" style={{ marginTop: 8 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTAFooter onBook={onBook} />
    </div>
  );
}

function Fact({ n, l, sub }) {
  return (
    <div style={{ background: "var(--mist)", padding: 20, borderRadius: 12 }}>
      <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.02em" }}>{n}</div>
      <div className="tiny" style={{ marginTop: 6, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.1em" }}>{l}</div>
      {sub && <div className="tiny" style={{ marginTop: 4, color: "var(--plum)" }}>{sub}</div>}
    </div>
  );
}

/* ============================================================
   Contact page
   ============================================================ */
function ContactPage({ onBook }) {
  const c = window.AACSH_DATA.contact;
  return (
    <div className="page">
      <PageHeader
        eyebrow="Contact"
        title="Speak to us, seven days a week."
        lede="Phone, email or appointment request — a coordinator responds within one business hour during operating hours. For clinical advice, please attend a consultation."
      />
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 56 }}>
          <div>
            <div className="card" style={{ padding: 32 }}>
              <div className="eyebrow">Reach us</div>
              <div style={{ marginTop: 22, display: "grid", gap: 18 }}>
                <ContactRow icon="phone" k="Phone" v={c.phone} href={c.phoneHref} />
                <ContactRow icon="mail" k="Email" v={c.email} href={"mailto:" + c.email} />
                <ContactRow icon="pin" k="Hospital address" v={<>{c.address}<br/>{c.addressLine2}</>} />
                <ContactRow icon="clock" k="Hours" v={c.hours} sub="Friday and Ramadan hours — confirm with reception" />
              </div>
              <div className="note-consent" style={{ marginTop: 22 }}>
                WhatsApp will appear here only after AACSH confirms a monitored booking number. The map pin will be embedded once the coordinates are verified. We don't publish either prematurely.
              </div>
            </div>
          </div>

          <div>
            <div style={{
              background: "var(--mist)",
              border: "1px solid var(--line)",
              borderRadius: 18,
              padding: 32, height: "100%",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
            }}>
              <div>
                <div className="eyebrow">Or request a callback</div>
                <h3 className="h-2" style={{ marginTop: 8, fontSize: 28 }}>Book an appointment online.</h3>
                <p className="body" style={{ marginTop: 16, fontSize: 14 }}>
                  Four steps: department, date, your details, confirmation. Minimal information collected — never medical history.
                </p>
              </div>
              <button className="btn btn-primary btn-lg" onClick={onBook} style={{ marginTop: 28, width: "100%" }}>
                Make an appointment
              </button>
            </div>
          </div>
        </div>

        {/* Map placeholder */}
        <div className="wrap" style={{ marginTop: 56 }}>
          <div style={{
            height: 380,
            background: "var(--mist)",
            backgroundImage: `
              linear-gradient(to right, rgba(61,27,77,0.06) 1px, transparent 1px),
              linear-gradient(to bottom, rgba(61,27,77,0.06) 1px, transparent 1px)
            `,
            backgroundSize: "32px 32px",
            borderRadius: 18,
            position: "relative",
            border: "1px solid var(--line)",
          }}>
            <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -100%)" }}>
              <div style={{
                background: "white", padding: 16, borderRadius: 12,
                boxShadow: "var(--shadow-lg)", textAlign: "center", minWidth: 240,
                border: "1px solid var(--line)",
              }}>
                <FlameMark size={20} />
                <div className="serif" style={{ fontSize: 16, marginTop: 6 }}>AACSH · Building 73</div>
                <div className="tiny" style={{ marginTop: 4 }}>Umm Hurair 2, Dubai Healthcare City</div>
              </div>
              <div style={{
                width: 0, height: 0,
                borderLeft: "10px solid transparent",
                borderRight: "10px solid transparent",
                borderTop: "12px solid var(--plum)",
                margin: "0 auto",
              }} />
            </div>
            <div style={{
              position: "absolute", bottom: 18, left: 18,
              background: "white", padding: "8px 14px", borderRadius: 99,
              fontSize: 12, color: "var(--muted)",
              border: "1px solid var(--line)",
            }}>
              Map pin embedded once coordinates verified
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactRow({ icon, k, v, sub, href }) {
  const inner = (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
      <div style={{
        width: 40, height: 40, borderRadius: 99,
        background: "var(--mist)", color: "var(--plum)",
        display: "flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        {icon === "phone" && <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" stroke="currentColor" strokeWidth="1.8"/></svg>}
        {icon === "mail" && <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="18" height="13" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 8l9 6 9-6" stroke="currentColor" strokeWidth="1.8"/></svg>}
        {icon === "pin" && <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 21s-7-6.2-7-12a7 7 0 1 1 14 0c0 5.8-7 12-7 12Z" stroke="currentColor" strokeWidth="1.8"/><circle cx="12" cy="9" r="2.4" stroke="currentColor" strokeWidth="1.8"/></svg>}
        {icon === "clock" && <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.8"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>}
      </div>
      <div>
        <div className="tiny" style={{ color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.12em" }}>{k}</div>
        <div style={{ fontSize: 16, marginTop: 4, fontWeight: 500, color: "var(--ink)" }}>{v}</div>
        {sub && <div className="tiny" style={{ marginTop: 4 }}>{sub}</div>}
      </div>
    </div>
  );
  return href ? <a href={href} style={{ display: "block" }}>{inner}</a> : inner;
}

/* ============================================================
   Helpers used across pages
   ============================================================ */
function PageHeader({ eyebrow, title, lede }) {
  return (
    <section style={{ padding: "72px 0 32px" }}>
      <div className="wrap-tight" style={{ textAlign: "left" }}>
        <div className="eyebrow">{eyebrow}</div>
        <h1 className="h-1" style={{ marginTop: 14 }}>{title}</h1>
        {lede && <p className="lede" style={{ marginTop: 22, maxWidth: 720 }}>{lede}</p>}
      </div>
    </section>
  );
}

function Breadcrumb({ items, onNavigate }) {
  return (
    <nav style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }} className="tiny">
      <button onClick={() => onNavigate("/")} style={{ color: "var(--muted)" }}>Home</button>
      {items.map((it, i) => (
        <React.Fragment key={i}>
          <span style={{ color: "var(--muted)" }}>/</span>
          {it.to ? (
            <button onClick={() => onNavigate(it.to)} style={{ color: "var(--muted)" }}>{it.label}</button>
          ) : (
            <span style={{ color: "var(--plum)" }}>{it.label}</span>
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}

function CTAFooter({ onBook, label }) {
  return (
    <section style={{ background: "var(--mist)", padding: "72px 0", borderTop: "1px solid var(--line)" }}>
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
        <div>
          <h2 className="h-2" style={{ marginBottom: 8 }}>{label || "Ready to talk to us?"}</h2>
          <p className="body" style={{ margin: 0 }}>Coordinators respond within one business hour during operating hours.</p>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <button className="btn btn-primary btn-lg" onClick={onBook}>{label || "Make an appointment"}</button>
          <a href={window.AACSH_DATA.contact.phoneHref} className="btn btn-ghost btn-lg">{window.AACSH_DATA.contact.phone}</a>
        </div>
      </div>
    </section>
  );
}

function NotFound({ onNavigate }) {
  return (
    <div className="page" style={{ padding: "120px 0", textAlign: "center" }}>
      <div className="wrap">
        <div className="eyebrow">404</div>
        <h1 className="h-1" style={{ marginTop: 14 }}>We couldn't find that page.</h1>
        <button className="btn btn-primary" style={{ marginTop: 28 }} onClick={() => onNavigate("/")}>Back to home</button>
      </div>
    </div>
  );
}

Object.assign(window, {
  DepartmentsHubPage, DepartmentPage, ProcedurePage,
  DoctorsHubPage, DoctorProfilePage,
  AccreditationPage, BeforeAfterPage, MedicalTourismPage,
  AboutPage, ContactPage, NotFound,
});