/* ============================================================
   AACSH — Shared components: logo, nav, footer, appointment modal
   ============================================================ */

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

/* ============================================================
   FlameMark — original SVG (NOT the raster logo). Refined for hospital tone.
   ============================================================ */
function FlameMark({ size = 28, mono = false }) {
  const id = `g-${Math.random().toString(36).slice(2, 7)}`;
  return (
    <svg width={size} height={size * (60/40)} viewBox="0 0 40 60" fill="none" aria-hidden="true" className="flame-mark">
      <defs>
        <linearGradient id={id} x1="6" y1="2" x2="34" y2="58" gradientUnits="userSpaceOnUse">
          <stop offset="0%"  stopColor={mono ? "currentColor" : "#6E2C8E"} />
          <stop offset="55%" stopColor={mono ? "currentColor" : "#A03A8A"} />
          <stop offset="100%" stopColor={mono ? "currentColor" : "#C44B86"} />
        </linearGradient>
      </defs>
      {/* Left flame petal */}
      <path
        d="M19 3 C 14 14, 6 22, 6 34 C 6 44, 11 52, 18 57 C 14 49, 14 41, 17 33 C 19 27, 21 19, 19 3 Z"
        fill={`url(#${id})`}
      />
      {/* Right flame petal */}
      <path
        d="M21 3 C 26 14, 34 22, 34 34 C 34 44, 29 52, 22 57 C 26 49, 26 41, 23 33 C 21 27, 19 19, 21 3 Z"
        fill={`url(#${id})`}
        opacity="0.85"
      />
    </svg>
  );
}

/* ============================================================
   Logo lockup
   ============================================================ */
function Logo({ size = 30, stacked = false, mono = false }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "center", gap: 12, whiteSpace: "nowrap" }}>
      <FlameMark size={size} mono={mono} />
      <div style={{
        display: "flex",
        flexDirection: "column",
        lineHeight: 1.15,
        whiteSpace: "nowrap",
      }}>
        <div style={{
          fontFamily: "var(--font-serif)",
          fontSize: 14,
          fontWeight: 400,
          letterSpacing: "0.02em",
          color: mono ? "currentColor" : "var(--ink)",
        }}>
          American Academy of
        </div>
        <div style={{
          fontFamily: "var(--font-serif)",
          fontSize: 14,
          fontWeight: 400,
          letterSpacing: "0.02em",
          color: mono ? "currentColor" : "var(--ink)",
        }}>
          Cosmetic Surgery Hospital
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   Top nav with mega-menu
   ============================================================ */
function TopNav({ onNavigate, currentPath, onBook }) {
  const [open, setOpen] = useState(null); // "departments" | "doctors" | null
  const [scrolled, setScrolled] = useState(false);
  const [lang, setLang] = useState("EN");

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);

  const depts = window.AACSH_DATA.departments;

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(251,250,252,0.92)" : "rgba(251,250,252,0.6)",
      backdropFilter: "saturate(180%) blur(14px)",
      WebkitBackdropFilter: "saturate(180%) blur(14px)",
      borderBottom: scrolled ? "1px solid var(--line)" : "1px solid transparent",
      transition: "all 220ms ease",
    }} onMouseLeave={() => setOpen(null)}>
      {/* Top utility row */}
      <div style={{ borderBottom: "1px solid var(--line-soft)", fontSize: 12, color: "var(--muted)" }}>
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", height: 36 }}>
          <div style={{ display: "flex", gap: 22, alignItems: "center" }}>
            <span className="chip-dot" style={{ color: "var(--good)", display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, background: "currentColor", borderRadius: 99 }} />
              Open today · 09:00 — 21:00
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <svg width="13" height="13" 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.6"/><circle cx="12" cy="9" r="2.4" stroke="currentColor" strokeWidth="1.6"/></svg>
              Building 73, Dubai Healthcare City
            </span>
          </div>
          <div style={{ display: "flex", gap: 16, alignItems: "center" }}>
            <a href={window.AACSH_DATA.contact.phoneHref} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <svg width="13" height="13" 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.6"/></svg>
              {window.AACSH_DATA.contact.phone}
            </a>
            <a href={"mailto:" + window.AACSH_DATA.contact.email}>{window.AACSH_DATA.contact.email}</a>
            <LangSwitch lang={lang} setLang={setLang} />
          </div>
        </div>
      </div>

      {/* Main nav row */}
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 76 }}>
        <button onClick={() => { onNavigate("/"); setOpen(null); }} style={{ display: "flex" }}>
          <Logo />
        </button>

        <nav style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <NavItem label="Departments" active={open === "departments" || currentPath.startsWith("/departments")} onMouseEnter={() => setOpen("departments")} caret />
          <NavItem label="Doctors" active={currentPath.startsWith("/doctors")} onClick={() => { onNavigate("/doctors"); setOpen(null); }} />
          <NavItem label="Accreditation" active={currentPath === "/accreditation"} onClick={() => { onNavigate("/accreditation"); setOpen(null); }} />
          <NavItem label="Before & After" active={currentPath === "/before-after"} onClick={() => { onNavigate("/before-after"); setOpen(null); }} />
          <NavItem label="Medical Tourism" active={currentPath === "/medical-tourism"} onClick={() => { onNavigate("/medical-tourism"); setOpen(null); }} />
          <NavItem label="About" active={currentPath === "/about"} onClick={() => { onNavigate("/about"); setOpen(null); }} />
          <NavItem label="Contact" active={currentPath === "/contact"} onClick={() => { onNavigate("/contact"); setOpen(null); }} />
        </nav>

        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn btn-primary" onClick={onBook}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8"/></svg>
            Make an Appointment
          </button>
        </div>
      </div>

      {/* Mega menu — departments */}
      {open === "departments" && (
        <div style={{
          position: "absolute", left: 0, right: 0,
          background: "white",
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)",
          boxShadow: "var(--shadow-lg)",
        }}>
          <div className="wrap" style={{ padding: "32px 32px 36px" }}>
            <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Care under one roof</div>
                <div className="serif" style={{ fontSize: 28, lineHeight: 1.15, marginBottom: 16 }}>
                  Ten specialities. One JCI-accredited hospital.
                </div>
                <p className="small" style={{ marginBottom: 18 }}>
                  Cosmetic & plastic surgery is our anchor — surrounded by medical, aesthetic and wellness specialities so patients can receive coordinated care in a single environment.
                </p>
                <button className="btn-link" onClick={() => { onNavigate("/departments"); setOpen(null); }}>
                  All departments &nbsp;→
                </button>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 4 }}>
                {depts.map(d => (
                  <button
                    key={d.slug}
                    onClick={() => { onNavigate(`/departments/${d.slug}`); setOpen(null); }}
                    style={{
                      textAlign: "left", padding: "14px 16px",
                      borderRadius: 10, transition: "background 160ms",
                      display: "flex", flexDirection: "column", gap: 4,
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "var(--mist)"}
                    onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                  >
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontWeight: 500, fontSize: 14 }}>{d.name}</span>
                      {d.kind === "surgical" && (
                        <span className="chip chip-line" style={{ height: 18, fontSize: 9, padding: "0 6px" }}>Surgical</span>
                      )}
                    </div>
                    <div className="tiny" style={{ color: "var(--muted)" }}>
                      {d.procedures.length} procedures
                    </div>
                  </button>
                ))}
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

function NavItem({ label, active, onClick, onMouseEnter, caret }) {
  return (
    <button
      onClick={onClick}
      onMouseEnter={onMouseEnter}
      style={{
        height: 76, padding: "0 14px",
        fontSize: 13.5, fontWeight: 500,
        color: active ? "var(--plum)" : "var(--ink)",
        display: "inline-flex", alignItems: "center", gap: 6,
        position: "relative",
      }}
    >
      {label}
      {caret && <svg width="9" height="9" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>}
      {active && <span style={{ position: "absolute", left: 14, right: 14, bottom: 18, height: 2, background: "var(--plum)" }} />}
    </button>
  );
}

function LangSwitch({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  const langs = ["EN", "AR", "RU", "ZH"];
  return (
    <div style={{ position: "relative" }} onMouseLeave={() => setOpen(false)}>
      <button onClick={() => setOpen(!open)} onMouseEnter={() => setOpen(true)} style={{
        display: "inline-flex", gap: 4, alignItems: "center", padding: "4px 6px",
      }}>
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" stroke="currentColor" strokeWidth="1.6"/></svg>
        <span style={{ fontWeight: 500 }}>{lang}</span>
        <svg width="8" height="8" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"/></svg>
      </button>
      {open && (
        <div style={{
          position: "absolute", top: "100%", right: 0,
          background: "white", border: "1px solid var(--line)", borderRadius: 8,
          boxShadow: "var(--shadow)", padding: 4, minWidth: 110, zIndex: 20,
        }}>
          {langs.map(l => (
            <button key={l} onClick={() => { setLang(l); setOpen(false); }} style={{
              display: "block", width: "100%", textAlign: "left",
              padding: "8px 10px", borderRadius: 4, fontSize: 12,
              background: lang === l ? "var(--mist)" : "transparent",
              color: lang === l ? "var(--plum)" : "var(--ink)",
              fontWeight: lang === l ? 500 : 400,
            }}>
              {{EN: "English", AR: "العربية", RU: "Русский", ZH: "中文"}[l]}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

/* ============================================================
   Trust strip — JCI + DHCC + DHA marks
   ============================================================ */
function TrustStrip({ compact = false }) {
  const items = window.AACSH_DATA.accreditations;
  return (
    <div style={{
      background: compact ? "transparent" : "white",
      borderTop: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
      padding: compact ? "16px 0" : "28px 0",
    }}>
      <div className="wrap" style={{
        display: "grid",
        gridTemplateColumns: "repeat(4, 1fr)",
        gap: 28,
        alignItems: "center",
      }}>
        {items.map((a, i) => (
          <div key={a.code} style={{
            display: "flex", gap: 14, alignItems: "center",
            paddingRight: i < items.length - 1 ? 28 : 0,
            borderRight: i < items.length - 1 ? "1px solid var(--line)" : "none",
          }}>
            <AccreditationMark code={a.code} />
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500, color: "var(--ink)" }}>{a.name}</div>
              {!compact && (
                <div className="tiny" style={{ marginTop: 2 }}>{a.detail}</div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AccreditationMark({ code }) {
  const sx = {
    width: 44, height: 44,
    borderRadius: 999,
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "var(--font-serif)",
    fontSize: 13, fontWeight: 500,
    flexShrink: 0,
  };
  const styles = {
    JCI: { ...sx, background: "var(--plum)", color: "white", letterSpacing: 0.5 },
    DHCC: { ...sx, background: "white", border: "1.5px solid var(--plum)", color: "var(--plum)", fontSize: 11 },
    DHA: { ...sx, background: "var(--cream)", border: "1.5px solid var(--gold)", color: "var(--gold)" },
    MOH: { ...sx, background: "white", border: "1.5px solid var(--ink)", color: "var(--ink)" },
  };
  return <div style={styles[code]}>{code}</div>;
}

/* ============================================================
   Appointment modal — multi-step
   ============================================================ */
function AppointmentModal({ open, onClose, prefillDept, prefillProcedure }) {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({
    dept: "", procedure: "",
    date: "", time: "",
    firstName: "", lastName: "",
    phone: "", email: "",
    note: "",
    international: false,
  });

  useEffect(() => {
    if (open) {
      setStep(0);
      setData(d => ({
        ...d,
        dept: prefillDept || d.dept,
        procedure: prefillProcedure || d.procedure,
      }));
    }
  }, [open, prefillDept, prefillProcedure]);

  if (!open) return null;

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

  const dept = window.AACSH_DATA.departments.find(d => d.slug === data.dept);

  const next = () => setStep(s => Math.min(s + 1, 3));
  const back = () => setStep(s => Math.max(s - 1, 0));

  const canProceed = () => {
    if (step === 0) return !!data.dept;
    if (step === 1) return !!data.date && !!data.time;
    if (step === 2) return !!data.firstName && !!data.phone;
    return true;
  };

  return (
    <div style={{
      position: "fixed", inset: 0, zIndex: 100,
      background: "rgba(22, 18, 28, 0.55)",
      backdropFilter: "blur(8px)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 24,
      animation: "fade-in 200ms ease both",
    }} onClick={onClose}>
      <div onClick={e => e.stopPropagation()} style={{
        width: "100%", maxWidth: 720,
        background: "white",
        borderRadius: 20,
        overflow: "hidden",
        maxHeight: "92vh",
        display: "flex", flexDirection: "column",
        boxShadow: "0 50px 100px rgba(22,18,28,0.4)",
      }}>
        {/* Header */}
        <div style={{
          padding: "22px 28px",
          borderBottom: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <div>
            <div className="eyebrow">Step {step + 1} of 4</div>
            <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>
              {["Choose care", "Pick a date", "Your details", "Confirmed"][step]}
            </div>
          </div>
          <button onClick={onClose} aria-label="Close" style={{
            width: 36, height: 36, borderRadius: 99, border: "1px solid var(--line)",
            display: "flex", alignItems: "center", justifyContent: "center",
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/></svg>
          </button>
        </div>

        {/* Stepper */}
        <div style={{ padding: "0 28px", paddingTop: 18 }}>
          <div style={{ display: "flex", gap: 6 }}>
            {[0,1,2,3].map(i => (
              <div key={i} style={{
                flex: 1, height: 3, borderRadius: 99,
                background: i <= step ? "var(--plum)" : "var(--line)",
                transition: "background 200ms",
              }} />
            ))}
          </div>
        </div>

        {/* Body */}
        <div style={{ padding: "26px 28px 24px", overflowY: "auto", flex: 1 }}>
          {step === 0 && (
            <BookingStepCare data={data} update={update} />
          )}
          {step === 1 && (
            <BookingStepDate data={data} update={update} />
          )}
          {step === 2 && (
            <BookingStepDetails data={data} update={update} />
          )}
          {step === 3 && (
            <BookingStepConfirm data={data} dept={dept} />
          )}
        </div>

        {/* Footer */}
        <div style={{
          padding: "16px 28px",
          borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          background: "var(--porcelain)",
        }}>
          <div className="tiny">
            {step < 3 ? (
              <>
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" style={{ verticalAlign: -1, marginRight: 4 }}>
                  <rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.8"/>
                  <path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="currentColor" strokeWidth="1.8"/>
                </svg>
                Minimal details only · we never collect medical history in a form
              </>
            ) : (
              <span>A care coordinator will be in touch within one business hour.</span>
            )}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {step > 0 && step < 3 && (
              <button className="btn btn-ghost btn-sm" onClick={back}>← Back</button>
            )}
            {step < 3 ? (
              <button className="btn btn-primary btn-sm" disabled={!canProceed()}
                onClick={next}
                style={{ opacity: canProceed() ? 1 : 0.4, cursor: canProceed() ? "pointer" : "not-allowed" }}>
                {step === 2 ? "Confirm request" : "Continue"} →
              </button>
            ) : (
              <button className="btn btn-primary btn-sm" onClick={onClose}>Close</button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

function BookingStepCare({ data, update }) {
  const depts = window.AACSH_DATA.departments;
  const dept = depts.find(d => d.slug === data.dept);
  return (
    <div>
      <label className="eyebrow" style={{ display: "block", marginBottom: 10 }}>Department</label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 8, marginBottom: 22 }}>
        {depts.map(d => (
          <button key={d.slug} onClick={() => update("dept", d.slug)} style={{
            padding: "12px 14px",
            textAlign: "left",
            borderRadius: 10,
            border: "1px solid " + (data.dept === d.slug ? "var(--plum)" : "var(--line)"),
            background: data.dept === d.slug ? "var(--mist)" : "white",
            fontSize: 13.5,
            transition: "all 160ms",
          }}>
            <div style={{ fontWeight: 500 }}>{d.name}</div>
            <div className="tiny" style={{ marginTop: 2 }}>{d.kind === "surgical" ? "Surgical · risks disclosed" : d.kind === "wellness" ? "Wellness" : "Medical"}</div>
          </button>
        ))}
      </div>

      {dept && (
        <div>
          <label className="eyebrow" style={{ display: "block", marginBottom: 10 }}>Procedure / treatment (optional)</label>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {dept.procedures.map(p => (
              <button key={p.slug} onClick={() => update("procedure", p.slug)}
                className="chip"
                style={{
                  cursor: "pointer",
                  background: data.procedure === p.slug ? "var(--plum)" : "var(--mist)",
                  color: data.procedure === p.slug ? "white" : "var(--plum)",
                }}>
                {p.name}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function BookingStepDate({ data, update }) {
  const today = new Date();
  const days = [...Array(14)].map((_, i) => {
    const d = new Date(today);
    d.setDate(d.getDate() + i);
    return d;
  });
  const times = ["09:30", "10:30", "11:30", "13:00", "14:30", "16:00", "17:00", "18:30", "20:00"];
  const fmtDate = d => d.toISOString().slice(0, 10);

  return (
    <div>
      <label className="eyebrow" style={{ display: "block", marginBottom: 10 }}>Preferred date</label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6, marginBottom: 24 }}>
        {days.map(d => {
          const iso = fmtDate(d);
          const isSel = data.date === iso;
          return (
            <button key={iso} onClick={() => update("date", iso)} style={{
              padding: "10px 4px", textAlign: "center",
              borderRadius: 8,
              border: "1px solid " + (isSel ? "var(--plum)" : "var(--line)"),
              background: isSel ? "var(--plum)" : "white",
              color: isSel ? "white" : "var(--ink)",
              transition: "all 160ms",
            }}>
              <div className="tiny" style={{ color: isSel ? "rgba(255,255,255,0.7)" : "var(--muted)" }}>
                {d.toLocaleDateString("en-US", { weekday: "short" })}
              </div>
              <div style={{ fontSize: 17, fontWeight: 500, marginTop: 2, fontFamily: "var(--font-serif)" }}>
                {d.getDate()}
              </div>
              <div className="tiny" style={{ color: isSel ? "rgba(255,255,255,0.7)" : "var(--muted)" }}>
                {d.toLocaleDateString("en-US", { month: "short" })}
              </div>
            </button>
          );
        })}
      </div>

      <label className="eyebrow" style={{ display: "block", marginBottom: 10 }}>Time</label>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
        {times.map(t => (
          <button key={t} onClick={() => update("time", t)} style={{
            padding: "10px 4px", textAlign: "center",
            borderRadius: 8,
            border: "1px solid " + (data.time === t ? "var(--plum)" : "var(--line)"),
            background: data.time === t ? "var(--plum)" : "white",
            color: data.time === t ? "white" : "var(--ink)",
            fontSize: 14,
            transition: "all 160ms",
            fontFamily: "var(--font-mono)",
          }}>
            {t}
          </button>
        ))}
      </div>

      <div className="note-consent" style={{ marginTop: 22 }}>
        Hours are 09:00–21:00, seven days a week. Times shown are provisional; a coordinator confirms by phone or email before any visit is locked in.
      </div>
    </div>
  );
}

function BookingStepDetails({ data, update }) {
  return (
    <div style={{ display: "grid", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <Field label="First name *" value={data.firstName} onChange={v => update("firstName", v)} />
        <Field label="Last name" value={data.lastName} onChange={v => update("lastName", v)} />
      </div>
      <Field label="Phone (with country code) *" value={data.phone} onChange={v => update("phone", v)} placeholder="+971 ..." />
      <Field label="Email" value={data.email} onChange={v => update("email", v)} placeholder="you@example.com" type="email" />
      <Field label="Anything we should know? (optional)" value={data.note} onChange={v => update("note", v)} multiline rows={3}
        placeholder="Best time to call, preferred language, etc." />

      <label style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: 12, background: "var(--mist)", borderRadius: 10, cursor: "pointer" }}>
        <input type="checkbox" checked={data.international} onChange={e => update("international", e.target.checked)} style={{ marginTop: 3 }} />
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 500 }}>I'm travelling from abroad</div>
          <div className="tiny">A medical-tourism coordinator will reach out with visa, accommodation and transfer support.</div>
        </div>
      </label>

      <div className="note-risks" style={{ marginTop: 4 }}>
        <strong>Please do not share medical history through this form.</strong> Clinical details are taken securely during your consultation, not in an unencrypted web form.
      </div>
    </div>
  );
}

function BookingStepConfirm({ data, dept }) {
  const proc = dept?.procedures.find(p => p.slug === data.procedure);
  return (
    <div>
      <div style={{
        background: "var(--cream)", border: "1px solid var(--gold-soft)",
        borderRadius: 14, padding: 24,
        display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 14,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 99,
          background: "var(--plum)", color: "white",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4 10-10" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </div>
        <div className="serif" style={{ fontSize: 26, lineHeight: 1.2 }}>Request received</div>
        <p className="body" style={{ maxWidth: 420, margin: 0 }}>
          Thank you, {data.firstName || "patient"}. A coordinator will contact you within one business hour to confirm your appointment.
        </p>
      </div>

      <div style={{ marginTop: 20, display: "grid", gap: 8, fontSize: 13.5 }}>
        <Row k="Department" v={dept?.name} />
        {proc && <Row k="Procedure / interest" v={proc.name} />}
        <Row k="Preferred date" v={data.date ? new Date(data.date).toLocaleDateString("en-GB", { weekday: "long", day: "numeric", month: "long" }) : "—"} />
        <Row k="Preferred time" v={data.time || "—"} />
        <Row k="Contact" v={[data.phone, data.email].filter(Boolean).join(" · ")} />
        {data.international && <Row k="Medical tourism" v={<span className="chip chip-clinical">International patient</span>} />}
      </div>
    </div>
  );
}

function Row({ k, v }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px solid var(--line)" }}>
      <span style={{ color: "var(--muted)" }}>{k}</span>
      <span style={{ color: "var(--ink)", fontWeight: 500, textAlign: "right" }}>{v || "—"}</span>
    </div>
  );
}

function Field({ label, value, onChange, multiline, rows, placeholder, type }) {
  return (
    <label style={{ display: "block" }}>
      <span style={{ display: "block", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 6 }}>{label}</span>
      {multiline ? (
        <textarea value={value} onChange={e => onChange(e.target.value)} rows={rows || 3} placeholder={placeholder}
          style={{
            width: "100%", padding: "12px 14px",
            border: "1px solid var(--line)", borderRadius: 10,
            fontFamily: "inherit", fontSize: 14, resize: "vertical",
            background: "white",
          }} />
      ) : (
        <input type={type || "text"} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder}
          style={{
            width: "100%", padding: "12px 14px",
            border: "1px solid var(--line)", borderRadius: 10,
            fontFamily: "inherit", fontSize: 14,
            background: "white",
          }} />
      )}
    </label>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer({ onNavigate, onBook }) {
  const depts = window.AACSH_DATA.departments;
  const c = window.AACSH_DATA.contact;
  return (
    <footer style={{ background: "var(--ink)", color: "rgba(255,255,255,0.78)", padding: "80px 0 32px" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 56, marginBottom: 56 }}>
          <div>
            <Logo mono />
            <p className="body" style={{ color: "rgba(255,255,255,0.6)", marginTop: 22, fontSize: 14 }}>
              A JCI-accredited multi-specialty hospital in Dubai Healthcare City, with cosmetic and plastic surgery as its anchor speciality.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 22 }}>
              {["Instagram", "Facebook", "LinkedIn", "TikTok", "X"].map(s => (
                <a key={s} aria-label={s} style={{
                  width: 36, height: 36, borderRadius: 99,
                  border: "1px solid rgba(255,255,255,0.15)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: 11, color: "rgba(255,255,255,0.6)",
                }}>
                  {s[0]}
                </a>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Departments</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14 }}>
              {depts.slice(0, 6).map(d => (
                <button key={d.slug} onClick={() => onNavigate(`/departments/${d.slug}`)}
                  style={{ textAlign: "left", fontSize: 13.5, color: "rgba(255,255,255,0.78)" }}>
                  {d.name}
                </button>
              ))}
              <button onClick={() => onNavigate("/departments")} style={{ textAlign: "left", fontSize: 13.5, color: "var(--gold-soft)", marginTop: 4 }}>
                See all 10 →
              </button>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Visit</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14, fontSize: 13.5 }}>
              <button onClick={() => onNavigate("/doctors")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>Our doctors</button>
              <button onClick={() => onNavigate("/accreditation")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>Accreditation</button>
              <button onClick={() => onNavigate("/medical-tourism")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>Medical tourism</button>
              <button onClick={() => onNavigate("/before-after")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>Before & after</button>
              <button onClick={() => onNavigate("/about")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>About AACSH</button>
              <button onClick={() => onNavigate("/contact")} style={{ textAlign: "left", color: "rgba(255,255,255,0.78)" }}>Contact</button>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>Hospital</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.7, marginTop: 14, color: "rgba(255,255,255,0.78)" }}>
              {c.address}<br/>
              {c.addressLine2}
            </div>
            <div style={{ marginTop: 14, fontSize: 13.5 }}>
              <a href={c.phoneHref}>{c.phone}</a><br/>
              <a href={"mailto:" + c.email}>{c.email}</a>
            </div>
            <div style={{ marginTop: 14 }}>
              <button className="btn btn-sm" onClick={onBook} style={{
                background: "white", color: "var(--ink)",
              }}>
                Make an appointment
              </button>
            </div>
          </div>
        </div>

        <div style={{ borderTop: "1px solid rgba(255,255,255,0.1)", paddingTop: 26,
          display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div className="tiny" style={{ color: "rgba(255,255,255,0.5)" }}>
            © {new Date().getFullYear()} American Academy of Cosmetic Surgery Hospital (AACSH) FZ-LLC. All rights reserved.
          </div>
          <div className="tiny" style={{ color: "rgba(255,255,255,0.5)" }}>
            DHCC establishment licence · DHA-supervised clinicians · JCI-accredited · MOH-compliant communications
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  FlameMark, Logo, TopNav, TrustStrip, AppointmentModal, Footer,
});
