/* ============================================================
   AACSH — Home page sections
   ============================================================ */

function HomePage({ onNavigate, onBook }) {
  return (
    <div className="page">
      <Hero onNavigate={onNavigate} onBook={onBook} />
      <TrustStrip />
      <DepartmentGrid onNavigate={onNavigate} />
      <DoctorsRow onNavigate={onNavigate} />
      <SafetyBand />
      <MedicalTourismTeaser onNavigate={onNavigate} />
      <BeforeAfterPlaceholderTeaser onNavigate={onNavigate} />
      <ProcessRow />
      <ContactBand onBook={onBook} />
    </div>
  );
}

/* ------------------------------------------------------------ */
function Hero({ onNavigate, onBook }) {
  return (
    <section style={{ position: "relative", padding: "72px 0 96px", overflow: "hidden" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 22 }}>
            <span className="chip chip-gold chip-dot">JCI-accredited · DHCC</span>
            <span className="tiny">Building 73, Dubai Healthcare City</span>
          </div>

          <h1 className="h-display">
            Hospital-grade<br/>
            cosmetic surgery,<br/>
            <span style={{ fontStyle: "italic", color: "var(--plum)" }}>delivered carefully.</span>
          </h1>

          <p className="lede" style={{ marginTop: 26, maxWidth: 540 }}>
            A multi-specialty hospital in Dubai Healthcare City, anchored on cosmetic and plastic surgery and surrounded by ten medical, aesthetic and wellness departments — so every patient is cared for in one accredited environment.
          </p>

          <div style={{ display: "flex", gap: 10, marginTop: 30 }}>
            <button className="btn btn-primary btn-lg" onClick={onBook}>
              Make an appointment
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => onNavigate("/departments")}>
              Explore departments
            </button>
          </div>

          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(3, auto)", gap: 48, justifyContent: "start" }}>
            <div className="metric">
              <div className="n">10</div>
              <div className="l">Specialities</div>
            </div>
            <div className="metric">
              <div className="n">29+</div>
              <div className="l">Doctors · DHA-licensed</div>
            </div>
            <div className="metric">
              <div className="n">7<span style={{ fontSize: 22, color: "var(--muted)" }}>/wk</span></div>
              <div className="l">09:00 — 21:00</div>
            </div>
          </div>
        </div>

        {/* Image stack */}
        <div style={{ position: "relative", height: 620 }}>
          <div style={{
            position: "absolute", top: 0, right: 0, width: "82%", height: "78%",
            borderRadius: 18, overflow: "hidden",
            boxShadow: "var(--shadow-lg)",
          }} className="img-tinted">
            <img src="media/facility-interior-2.webp" alt="AACSH consultation room" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{
              position: "absolute", left: 22, bottom: 22, right: 22,
              color: "white",
            }}>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)" }}>Building 73 · DHCC</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>The hospital floor</div>
            </div>
          </div>

          <div style={{
            position: "absolute", bottom: 0, left: 0, width: "60%", height: "44%",
            borderRadius: 18, overflow: "hidden",
            border: "8px solid var(--porcelain)",
            boxShadow: "var(--shadow-lg)",
          }}>
            <img src="media/hospital-hero-2.webp" alt="Surgical team at work" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>

          {/* JCI badge floater */}
          <div style={{
            position: "absolute", top: 40, left: -16,
            background: "white",
            border: "1px solid var(--line)",
            borderRadius: 14,
            padding: 16,
            display: "flex", gap: 12, alignItems: "center",
            boxShadow: "var(--shadow)",
            width: 240,
          }}>
            <AccreditationMark code="JCI" />
            <div>
              <div style={{ fontSize: 12.5, fontWeight: 500 }}>Joint Commission International</div>
              <div className="tiny" style={{ marginTop: 2 }}>First in DHCC to attain JCI · 2009</div>
            </div>
          </div>
        </div>
      </div>

      {/* Compliance microcopy */}
      <div className="wrap" style={{ marginTop: 56 }}>
        <div className="tiny" style={{ display: "flex", gap: 16, justifyContent: "center", color: "var(--muted)", textAlign: "center" }}>
          <span>This site does not offer guaranteed results.</span>
          <span>·</span>
          <span>All surgical pages disclose risks.</span>
          <span>·</span>
          <span>Before & after only with verified patient consent.</span>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------ */
function DepartmentGrid({ onNavigate }) {
  const depts = window.AACSH_DATA.departments;
  return (
    <section className="section" style={{ background: "var(--mist)" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, marginBottom: 56, alignItems: "end" }}>
          <div>
            <div className="eyebrow">Care under one roof</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>
              Ten specialities,<br/>
              one accredited hospital.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 520, justifySelf: "end" }}>
            Cosmetic & plastic surgery is our anchor. Around it sit nine supporting specialities — so a patient under one roof can be reviewed by dermatology, endocrinology and nutrition without leaving Building 73.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {depts.map((d, i) => (
            <DepartmentCard key={d.slug} dept={d} large={i === 0} onClick={() => onNavigate(`/departments/${d.slug}`)} />
          ))}
        </div>
      </div>
    </section>
  );
}

function DepartmentCard({ dept, large, onClick }) {
  return (
    <button onClick={onClick} style={{
      gridColumn: large ? "span 2" : "span 1",
      gridRow: large ? "span 2" : "span 1",
      background: "white",
      borderRadius: 18,
      overflow: "hidden",
      border: "1px solid var(--line)",
      textAlign: "left",
      display: "flex", flexDirection: "column",
      transition: "all 240ms",
      minHeight: large ? 480 : 232,
    }}
    onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "var(--shadow-lg)"; }}
    onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "none"; }}
    >
      <div style={{ position: "relative", flex: 1, minHeight: large ? 280 : 130 }} className="img-tinted">
        <img src={dept.img} alt={dept.name} style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
        <div style={{
          position: "absolute", top: 14, left: 14,
          display: "flex", gap: 6,
        }}>
          {dept.kind === "surgical" && <span className="chip" style={{ background: "rgba(255,255,255,0.95)", color: "var(--plum)" }}>Surgical</span>}
          {dept.kind === "wellness" && <span className="chip" style={{ background: "rgba(255,255,255,0.95)", color: "var(--clinical)" }}>Wellness</span>}
          {dept.kind === "medical" && <span className="chip" style={{ background: "rgba(255,255,255,0.95)", color: "var(--ink)" }}>Medical</span>}
        </div>
      </div>
      <div style={{ padding: large ? "22px 24px 24px" : "16px 18px 18px" }}>
        <div className="serif" style={{ fontSize: large ? 26 : 18, lineHeight: 1.15, marginBottom: large ? 10 : 4 }}>{dept.name}</div>
        {large && <p className="body" style={{ fontSize: 14, marginBottom: 14, color: "var(--muted)" }}>{dept.lead}</p>}
        <div className="tiny" style={{ color: "var(--plum)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span>{dept.procedures.length} procedures</span>
          <span>→</span>
        </div>
      </div>
    </button>
  );
}

/* ------------------------------------------------------------ */
function DoctorsRow({ onNavigate }) {
  const doctors = window.AACSH_DATA.doctors;
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 40 }}>
          <div>
            <div className="eyebrow">A roster you can verify</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>
              Consultants with credentials we publish openly.
            </h2>
          </div>
          <button className="btn btn-ghost" onClick={() => onNavigate("/doctors")}>
            See all doctors →
          </button>
        </div>

        <p className="lede" style={{ maxWidth: 720, marginBottom: 40 }}>
          Twenty-nine clinicians across ten specialities. Each profile lists training, years of experience and the DHA Sheryan licence under which they practise — the same registry the Health Authority publishes.
        </p>

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

function DoctorCard({ doc, onClick }) {
  const deptName = window.AACSH_DATA.departments.find(d => d.slug === doc.depts[0])?.name;
  return (
    <button onClick={onClick} style={{
      textAlign: "left",
      display: "flex", flexDirection: "column", gap: 14,
    }}>
      <div className="portrait">
        <img src={doc.portrait} alt={doc.name} />
        <div style={{
          position: "absolute", left: 12, top: 12,
          display: "flex", gap: 4,
        }}>
          <span className="chip" style={{ background: "rgba(255,255,255,0.95)", fontSize: 10 }}>DHA · verify</span>
        </div>
      </div>
      <div>
        <div className="serif" style={{ fontSize: 20, lineHeight: 1.15 }}>{doc.name}</div>
        <div className="small" style={{ marginTop: 4 }}>{doc.role}</div>
        <div className="tiny" style={{ marginTop: 8, color: "var(--plum)" }}>{deptName}</div>
        <div style={{ display: "flex", gap: 4, flexWrap: "wrap", marginTop: 10 }}>
          {doc.langs.map(l => <span key={l} className="chip chip-line" style={{ fontSize: 10, height: 22 }}>{l}</span>)}
        </div>
      </div>
    </button>
  );
}

/* ------------------------------------------------------------ */
function SafetyBand() {
  return (
    <section style={{ background: "var(--ink)", color: "white", padding: "96px 0" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="eyebrow" style={{ color: "var(--gold-soft)" }}>Safety, plainly</div>
            <h2 className="h-1" style={{ marginTop: 14, color: "white" }}>
              We talk about<br/>risk before result.
            </h2>
          </div>
          <div style={{ display: "grid", gap: 24 }}>
            <SafetyPoint
              n="01"
              h="Risks disclosed on every surgical page"
              p="Recovery timelines and known risks live next to the candidacy and process information — not buried behind a consent form."
            />
            <SafetyPoint
              n="02"
              h="No guaranteed outcomes, ever"
              p="Cosmetic surgery is a clinical intervention. Our consultations are honest about what can and cannot be predicted."
            />
            <SafetyPoint
              n="03"
              h="Each procedure matched to a licensed surgeon"
              p="Surgical procedures are only offered by clinicians whose current DHA Sheryan licence covers them."
            />
            <SafetyPoint
              n="04"
              h="Consent-gated before-and-after"
              p="Patient imagery is only displayed where written consent and MOH-compliant context exist."
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function SafetyPoint({ n, h, p }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "60px 1fr", gap: 22, paddingBottom: 24, borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
      <div className="serif" style={{ fontSize: 28, color: "var(--gold-soft)", letterSpacing: "0.05em" }}>{n}</div>
      <div>
        <div className="h-4" style={{ color: "white", marginBottom: 6 }}>{h}</div>
        <p className="body" style={{ color: "rgba(255,255,255,0.6)", margin: 0, fontSize: 14 }}>{p}</p>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------ */
function MedicalTourismTeaser({ onNavigate }) {
  return (
    <section className="section">
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center" }}>
          <div style={{ position: "relative", borderRadius: 22, overflow: "hidden", height: 540 }} className="img-tinted">
            <img src="media/facility-interior-3.webp" alt="Recovery suite" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{
              position: "absolute", left: 0, right: 0, bottom: 0,
              padding: "120px 28px 28px",
              background: "linear-gradient(to top, rgba(22,18,28,0.82) 0%, rgba(22,18,28,0.55) 45%, rgba(22,18,28,0) 100%)",
              color: "white",
            }}>
              <div className="eyebrow" style={{ color: "rgba(255,255,255,0.78)" }}>Patient suites</div>
              <div className="serif" style={{ fontSize: 28, marginTop: 6, textShadow: "0 1px 18px rgba(0,0,0,0.35)" }}>Single-room recovery with full nursing cover</div>
            </div>
          </div>

          <div>
            <div className="eyebrow">For international patients</div>
            <h2 className="h-1" style={{ marginTop: 14 }}>
              Travel for treatment,<br/>cared for end-to-end.
            </h2>
            <p className="lede" style={{ marginTop: 22 }}>
              Visa support, airport transfer, accommodation coordination, multilingual liaison and structured pre- and post-operative care — handled by a dedicated medical-tourism team.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 30 }}>
              <TourismFeature icon="globe" label="Multilingual coordinators" sub="EN · AR · RU · ZH · FA · FR" />
              <TourismFeature icon="passport" label="Pre-travel screening" sub="Video consult before booking flights" />
              <TourismFeature icon="suite" label="Hotel & transfer support" sub="Curated partner network" />
              <TourismFeature icon="follow" label="Structured follow-up" sub="Care continues after return" />
            </div>

            <div style={{ display: "flex", gap: 10, marginTop: 30 }}>
              <button className="btn btn-primary" onClick={() => onNavigate("/medical-tourism")}>
                International patient enquiry
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TourismFeature({ label, sub, icon }) {
  return (
    <div style={{ background: "var(--mist)", borderRadius: 12, padding: "16px 18px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
        <FeatureIcon icon={icon} />
        <span style={{ fontSize: 13.5, fontWeight: 500 }}>{label}</span>
      </div>
      <div className="tiny">{sub}</div>
    </div>
  );
}

function FeatureIcon({ icon }) {
  const s = { width: 18, height: 18, color: "var(--plum)" };
  if (icon === "globe") return (
    <svg style={s} 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>
  );
  if (icon === "passport") return (
    <svg style={s} viewBox="0 0 24 24" fill="none"><rect x="5" y="3" width="14" height="18" rx="2" stroke="currentColor" strokeWidth="1.6"/><circle cx="12" cy="11" r="3" stroke="currentColor" strokeWidth="1.6"/><path d="M9 17h6" stroke="currentColor" strokeWidth="1.6"/></svg>
  );
  if (icon === "suite") return (
    <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M3 12V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5M3 12h18M3 12v6m18-6v6M7 12V9h4v3" stroke="currentColor" strokeWidth="1.6"/></svg>
  );
  return (
    <svg style={s} viewBox="0 0 24 24" fill="none"><path d="M3 12h12m0 0l-4-4m4 4l-4 4M21 6v12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  );
}

/* ------------------------------------------------------------ */
function BeforeAfterPlaceholderTeaser({ onNavigate }) {
  return (
    <section style={{ background: "var(--cream)", padding: "96px 0" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "center" }}>
        <div>
          <div className="eyebrow">Before & after</div>
          <h2 className="h-2" style={{ marginTop: 14 }}>
            Real outcomes, shown responsibly.
          </h2>
          <p className="body" style={{ marginTop: 18 }}>
            We publish patient imagery only where written consent has been recorded and the surrounding context complies with UAE Ministry of Health advertising rules. The gallery is intentionally narrow — a small number of fully-permissioned cases, never marketing thumbnails.
          </p>
          <div className="note-consent" style={{ marginTop: 22 }}>
            <strong>Consent-gated.</strong> Each case is approved by the patient and reviewed for MOH advertising compliance before publication. No before-and-after appears here without both.
          </div>
          <button className="btn btn-ghost" style={{ marginTop: 22 }} onClick={() => onNavigate("/before-after")}>
            See the consent-cleared gallery →
          </button>
        </div>

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <ConsentLockedTile label="Rhinoplasty · 6 mo follow-up" />
          <ConsentLockedTile label="FUE hair transplant · 9 mo" />
          <ConsentLockedTile label="Abdominoplasty · 12 mo" />
          <ConsentLockedTile label="Eyelid surgery · 3 mo" />
        </div>
      </div>
    </section>
  );
}

function ConsentLockedTile({ label }) {
  return (
    <div style={{
      aspectRatio: "1",
      background: "white",
      border: "1px solid var(--line)",
      borderRadius: 14,
      padding: 22,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      position: "relative",
    }}>
      <div style={{
        flex: 1, borderRadius: 8, marginBottom: 14,
        background: "repeating-linear-gradient(135deg, var(--cream) 0 14px, #F0E8D9 14px 15px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        color: "var(--plum-soft)",
      }}>
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M8 10V7a4 4 0 1 1 8 0v3" stroke="currentColor" strokeWidth="1.6"/></svg>
      </div>
      <div>
        <div className="tiny" style={{ color: "var(--plum)", textTransform: "uppercase", letterSpacing: "0.15em" }}>Consent locked</div>
        <div style={{ fontSize: 13, marginTop: 4, fontWeight: 500 }}>{label}</div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------ */
function ProcessRow() {
  const steps = [
    { n: "01", t: "Make an appointment", d: "Pick a department, date and time. Minimal details — never medical history." },
    { n: "02", t: "Consultation", d: "Face-to-face or video. Candidacy, options, recovery and risks discussed honestly." },
    { n: "03", t: "Treatment plan", d: "A written plan with the surgeon or clinician responsible for your care." },
    { n: "04", t: "Procedure", d: "In a JCI-accredited operating environment, surrounded by hospital nursing." },
    { n: "05", t: "Follow-up", d: "Recovery monitored at scheduled intervals; international patients via secure video." },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="eyebrow" style={{ textAlign: "center" }}>The pathway</div>
        <h2 className="h-2" style={{ marginTop: 14, textAlign: "center" }}>From enquiry to follow-up.</h2>

        <div style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 0,
          borderTop: "1px solid var(--line)",
        }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: "30px 24px",
              borderRight: i < steps.length - 1 ? "1px solid var(--line)" : "none",
              position: "relative",
            }}>
              <div style={{
                position: "absolute", top: -10, left: 24,
                width: 32, height: 20,
                background: "var(--porcelain)",
                display: "flex", alignItems: "center",
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)",
                letterSpacing: "0.1em",
              }}>{s.n}</div>
              <div className="h-4" style={{ marginBottom: 8 }}>{s.t}</div>
              <p className="small" style={{ margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------------------ */
function ContactBand({ onBook }) {
  const c = window.AACSH_DATA.contact;
  return (
    <section style={{ background: "var(--plum)", color: "white", padding: "80px 0" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center" }}>
        <div>
          <h2 className="h-1" style={{ color: "white" }}>
            Ready when you are.
          </h2>
          <p className="lede" style={{ color: "rgba(255,255,255,0.75)", marginTop: 18, maxWidth: 480 }}>
            A coordinator answers every appointment request within one business hour. Or speak to us directly — we're open seven days a week.
          </p>
          <div style={{ display: "flex", gap: 10, marginTop: 28 }}>
            <button className="btn btn-lg" style={{ background: "white", color: "var(--plum)" }} onClick={onBook}>
              Make an appointment
            </button>
            <a href={c.phoneHref} className="btn btn-lg" style={{ background: "transparent", color: "white", border: "1px solid rgba(255,255,255,0.3)" }}>
              {c.phone}
            </a>
          </div>
        </div>

        <div style={{
          background: "rgba(255,255,255,0.05)",
          border: "1px solid rgba(255,255,255,0.12)",
          borderRadius: 16, padding: 28,
        }}>
          <div className="eyebrow" style={{ color: "var(--gold-soft)" }}>Visit the hospital</div>
          <div className="serif" style={{ fontSize: 20, marginTop: 8, lineHeight: 1.3, color: "white" }}>
            {c.address}<br/>{c.addressLine2}
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginTop: 20 }}>
            <div>
              <div className="tiny" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>HOURS</div>
              <div style={{ fontSize: 14 }}>{c.hours}</div>
            </div>
            <div>
              <div className="tiny" style={{ color: "rgba(255,255,255,0.5)", marginBottom: 4 }}>EMAIL</div>
              <div style={{ fontSize: 14 }}>{c.email}</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage });