// ============ Screens: Treatment journey + Doctors + Doctor Profile + About + Contact ============

/* ----------------- TREATMENT JOURNEY ----------------- */
function TreatmentScreen({ setRoute, onBook }) {
  const T = window.EUROMED_DATA.TREATMENT_FUE;
  const [active, setActive] = React.useState(0);

  return (
    <div className="page-enter" data-screen-label="03 Treatment — FUE">
      {/* Treatment hero */}
      <section style={{ padding: "56px 0 44px", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "flex", gap: 8, alignItems: "center", color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.06em", marginBottom: 18 }}>
            <a onClick={() => setRoute({ name: "specialties" })} style={{ cursor: "pointer" }}>SPECIALTIES</a>
            <span>›</span>
            <span>{T.specialty.toUpperCase()}</span>
            <span>›</span>
            <span style={{ color: "var(--ink)" }}>{T.name.toUpperCase()}</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "end" }} className="treatment-hero-grid">
            <div>
              <span className="eyebrow">Treatment journey</span>
              <h1 className="display" style={{ marginTop: 14, fontSize: "clamp(36px, 4.4vw, 56px)" }}>
                {T.name}
              </h1>
              <p className="lede" style={{ marginTop: 18, maxWidth: "52ch" }}>{T.tagline}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                <button className="btn btn-primary" onClick={onBook}>Book a free consultation <Icon.Arrow size={14}/></button>
                <a className="btn btn-ghost" href="https://api.whatsapp.com/send?phone=97148945000" target="_blank" rel="noreferrer">
                  <Icon.WhatsApp size={14}/> Ask on WhatsApp
                </a>
              </div>
            </div>
            <div className="journey-meta" style={{ marginTop: 0 }}>
              <div className="journey-meta-cell">
                <label>Duration</label>
                <value>{T.meta.duration}</value>
              </div>
              <div className="journey-meta-cell">
                <label>Anaesthesia</label>
                <value>{T.meta.anesthesia}</value>
              </div>
              <div className="journey-meta-cell">
                <label>Recovery</label>
                <value>{T.meta.recovery}</value>
              </div>
              <div className="journey-meta-cell" style={{ gridColumn: "1 / -1" }}>
                <label>Sessions</label>
                <value>{T.meta.sessions} · pricing by consultation (transparent written quote)</value>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Steps */}
      <section className="section">
        <div className="container">
          <div className="journey">
            <div className="journey-steps">
              <span className="eyebrow no-rule" style={{ marginBottom: 14, display: "block", color: "var(--ink-3)" }}>
                5 steps
              </span>
              {T.steps.map((s, i) => (
                <div key={s.no} className={"journey-step " + (active === i ? "active" : "")} onClick={() => setActive(i)}>
                  <span className="journey-step-no">STEP {s.no}</span>
                  <span className="journey-step-label">{s.title}</span>
                </div>
              ))}
            </div>
            <div className="journey-panel">
              <div className="journey-panel-no">STEP {T.steps[active].no} / 05</div>
              <h3>{T.steps[active].title}</h3>
              <div className="journey-panel-body">
                {T.steps[active].body && <p>{T.steps[active].body}</p>}
                {T.steps[active].bullets && (
                  <ul>{T.steps[active].bullets.map((b) => <li key={b}>{b}</li>)}</ul>
                )}
                {T.steps[active].faqs && (
                  <div style={{ marginTop: 8 }}>
                    {T.steps[active].faqs.map((f, i) => (
                      <details key={i} style={{ borderTop: "1px solid var(--line)", padding: "16px 0" }} open={i === 0}>
                        <summary style={{ cursor: "pointer", fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink)", listStyle: "none", display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                          {f.q}
                          <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink-3)" }}>0{i+1}</span>
                        </summary>
                        <p style={{ color: "var(--ink-2)", margin: 0, fontSize: 14 }}>{f.a}</p>
                      </details>
                    ))}
                  </div>
                )}
              </div>

              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                <button className="btn-link" disabled={active === 0} onClick={() => setActive(Math.max(0, active - 1))} style={{ opacity: active === 0 ? 0.3 : 1 }}>
                  ← Previous step
                </button>
                <button className="btn-link" disabled={active === T.steps.length - 1} onClick={() => setActive(Math.min(T.steps.length - 1, active + 1))} style={{ opacity: active === T.steps.length - 1 ? 0.3 : 1 }}>
                  Next step →
                </button>
              </div>
            </div>
          </div>

          <div className="compliance-note" style={{ marginTop: 36 }}>
            <strong>Compliance note:</strong> Outcomes vary per individual. We follow DHA/MOH guidance — no guaranteed-results language and no "1 Dirham" promotional pricing. Your consultant will discuss realistic expectations and provide a transparent written quote during your consultation.
          </div>
        </div>
      </section>

      {/* Doctor anchor */}
      <section className="section bg-mist" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }} className="doc-anchor">
            <div>
              <span className="eyebrow">Lead consultant</span>
              <h3 className="h2" style={{ marginTop: 18, fontSize: 32 }}>
                You'll meet a named<br/> consultant, not a sales desk.
              </h3>
              <p style={{ color: "var(--ink-2)", marginTop: 14, maxWidth: "48ch" }}>
                FUE consultations are handled by a doctor — not a coordinator — who reviews your donor area and explains, honestly, whether the procedure is right for you.
              </p>
              <button className="btn-link" onClick={() => setRoute({ name: "doctors" })} style={{ marginTop: 18 }}>
                Meet the full team <Icon.Arrow size={12}/>
              </button>
            </div>
            <div style={{ background: "var(--paper)", borderRadius: 14, padding: 32, border: "1px solid var(--line)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
                <img src="media/doctor-fazeela-abbasi-hires.webp" alt="" style={{ width: 88, height: 88, borderRadius: "50%", objectFit: "cover", objectPosition: "top center", background: "var(--sage-soft)" }}/>
                <div>
                  <h4 style={{ fontFamily: "var(--serif)", fontSize: 22, margin: 0 }}>Doctor-led consultation</h4>
                  <p style={{ color: "var(--ink-3)", fontSize: 13, margin: "4px 0 0" }}>Free initial 30-minute session</p>
                </div>
              </div>
              <ul style={{ marginTop: 22, paddingLeft: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {["Donor area & recipient mapping", "Honest candidacy discussion", "Transparent written quote", "No pressure follow-up"].map((x) => (
                  <li key={x} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14 }}>
                    <span style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--teal-soft)", color: "var(--teal-deep)", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                      <Icon.Check size={11}/>
                    </span>
                    {x}
                  </li>
                ))}
              </ul>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 24 }} onClick={onBook}>
                Book your consultation <Icon.Arrow size={14}/>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ----------------- DOCTORS LIST ----------------- */
function DoctorsScreen({ setRoute }) {
  const D = window.EUROMED_DATA.DOCTORS;
  const [filter, setFilter] = React.useState("All");
  const specs = ["All", ...Array.from(new Set(D.map(d => d.specialty)))];
  const filtered = filter === "All" ? D : D.filter(d => d.specialty === filter);
  return (
    <div className="page-enter" data-screen-label="04 Doctors">
      <section className="section" style={{ paddingBottom: 40 }}>
        <div className="container">
          <span className="eyebrow">Our team</span>
          <h1 className="display" style={{ marginTop: 18 }}>
            Verified doctors,<br/>
            <em>publicly</em> credentialed.
          </h1>
          <p className="lede" style={{ marginTop: 22, maxWidth: "58ch" }}>
            Every practitioner below carries a DHA licence we publish. Visiting consultants are flagged so you always know whether your specialist is in-house or on rotation. Profiles include current focus, years of experience and languages spoken.
          </p>

          <div style={{ display: "flex", gap: 8, marginTop: 36, flexWrap: "wrap", borderTop: "1px solid var(--line)", paddingTop: 24 }}>
            {specs.map((s) => (
              <button key={s} className="concern-chip" style={{
                background: filter === s ? "var(--ink)" : "var(--paper)",
                color: filter === s ? "white" : "var(--ink-2)",
                borderColor: filter === s ? "var(--ink)" : "var(--line)",
              }} onClick={() => setFilter(s)}>
                {s} {filter === s && <span style={{ marginLeft: 6, opacity: 0.6, fontSize: 11 }}>({filtered.length})</span>}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 88 }}>
        <div className="container">
          <div className="doc-grid">
            {filtered.map((d) => (
              <div className="doc-card" key={d.id} onClick={() => setRoute({ name: "doctor", id: d.id })}>
                <div className="doc-portrait">
                  <img src={d.image} alt={d.name} />
                  <div className={"doc-portrait-tag " + (d.visiting ? "visiting" : "")}>
                    {d.visiting ? "Visiting" : "In-house"}
                  </div>
                </div>
                <div>
                  <h4 className="doc-card-name">{d.name}</h4>
                  <p className="doc-card-spec">{d.credentials}</p>
                </div>
                <div className="doc-card-meta">
                  <span>{d.specialty}</span>
                  <span className="lic">{d.licenceStatus === "verified" ? "DHA ✓" : "DHA pending"}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="compliance-note" style={{ marginTop: 40 }}>
            <strong>Verification note:</strong> Doctor credentials are shown here as captured from research — the live site publishes only entries with verified DHA licence numbers and signed permission to use the practitioner's portrait. "DHA pending" entries appear placeholder until verification is complete.
          </div>
        </div>
      </section>
    </div>
  );
}

/* ----------------- DOCTOR PROFILE ----------------- */
function DoctorProfileScreen({ setRoute, onBook, id }) {
  const D = window.EUROMED_DATA.DOCTORS.find(d => d.id === id) || window.EUROMED_DATA.DOCTORS[0];

  return (
    <div className="page-enter" data-screen-label={"05 Doctor — " + D.name}>
      <section className="section" style={{ paddingBottom: 40 }}>
        <div className="container">
          <div style={{ display: "flex", gap: 8, alignItems: "center", color: "var(--ink-3)", fontSize: 12, letterSpacing: "0.06em", marginBottom: 24 }}>
            <a onClick={() => setRoute({ name: "doctors" })} style={{ cursor: "pointer" }}>DOCTORS</a>
            <span>›</span>
            <span style={{ color: "var(--ink)" }}>{D.name.toUpperCase()}</span>
          </div>
          <div className="dp-grid">
            <div className="dp-portrait-frame">
              <img src={D.image} alt={D.name} />
              <div className="dp-portrait-tag">
                <span className={"dp-pill " + (D.visiting ? "visiting" : "")}>
                  {D.visiting ? "Visiting consultant" : "In-house"}
                </span>
                <span className="dp-pill" style={{ background: "var(--ink)", color: "white" }}>
                  {D.licenceStatus === "verified" ? "DHA ✓ Verified" : "DHA pending verification"}
                </span>
              </div>
            </div>
            <div className="dp-info">
              <div>
                <span className="eyebrow">{D.specialty}</span>
                <h1 className="display" style={{ marginTop: 14, fontSize: "clamp(34px, 3.6vw, 48px)" }}>
                  {D.name}
                </h1>
                <p style={{ color: "var(--ink-2)", fontSize: 17, marginTop: 12 }}>{D.credentials}</p>
              </div>
              <p className="dp-bio">{D.bio}</p>
              <div className="dp-creds">
                <div className="dp-creds-cell">
                  <label>DHA Licence</label>
                  <value>{D.licence} {D.licenceStatus !== "verified" && <em style={{ fontStyle: "normal", color: "var(--ink-3)", fontSize: 12, fontWeight: 400 }}> · verifying</em>}</value>
                </div>
                <div className="dp-creds-cell">
                  <label>Experience</label>
                  <value>{D.experience}</value>
                </div>
                <div className="dp-creds-cell">
                  <label>Languages</label>
                  <value>{D.languages.join(" · ")}</value>
                </div>
                <div className="dp-creds-cell">
                  <label>Status</label>
                  <value>{D.visiting ? "Visiting (by rotation)" : "Resident, in-house"}</value>
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
                <button className="btn btn-primary" onClick={onBook}>
                  Book with {D.name.split(" ")[1] || D.name} <Icon.Arrow size={14}/>
                </button>
                <a className="btn btn-ghost" href="https://api.whatsapp.com/send?phone=97148945000" target="_blank" rel="noreferrer">
                  <Icon.WhatsApp size={14}/> Ask a question
                </a>
              </div>
              {D.visiting && (
                <div className="compliance-note" style={{ marginTop: 6 }}>
                  <strong>Visiting consultant.</strong> {D.name.split(" ").slice(0, 2).join(" ")} attends Euromed on rotation. Please book ahead — we'll confirm next-available dates by WhatsApp.
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-mist" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div className="container">
          <span className="eyebrow">Specialisations</span>
          <h3 className="h2" style={{ marginTop: 18, fontSize: 28, marginBottom: 28 }}>
            What {D.name.split(" ")[1] || "they"} treats
          </h3>
          <div className="concerns">
            {window.EUROMED_DATA.SPECIALTIES.find(s => s.name.toLowerCase().includes(D.specialty.toLowerCase().split(" ")[0]))?.treatments.map(t => (
              <span key={t} className="concern-chip">{t}</span>
            )) || <span className="concern-chip">Consultation</span>}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ----------------- ABOUT ----------------- */
function AboutScreen({ setRoute, onBook }) {
  return (
    <div className="page-enter" data-screen-label="06 About">
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "end" }} className="about-hero">
            <div>
              <span className="eyebrow">Since February 2010</span>
              <h1 className="display" style={{ marginTop: 18 }}>
                Sixteen years on<br/>
                <em>Jumeirah Beach Road.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Euromed Clinic Center opened in February 2010 with a simple premise: a family medical and cosmetic clinic where dermatology, surgery, dental, OB/GYN, family medicine and wellness sit under one roof — and share a record.
              </p>
            </div>
            <div>
              <img src="media/clinic-environment.webp" alt="Clinic environment" style={{ width: "100%", borderRadius: 14, aspectRatio: "4/3", objectFit: "cover" }} />
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-mist">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }} className="about-cols">
            {[
              { t: "Multi-specialty by design", d: "Most clinics specialise in one thing. We treat the whole patient — coordinated dermatology, dental, family medicine and surgical care from one team, one record." },
              { t: "Doctor-led, never sales-led", d: "Consultations are doctor-led. Pricing is by consultation with a written quote. We don't run guaranteed-results offers or aggressive promotional hooks." },
              { t: "Licensed and accountable", d: "DHA-licensed facility (ID 0047513) with publicly verified practitioner credentials. Visiting consultants are flagged so you always know who you're seeing." },
            ].map((b, i) => (
              <div key={i}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--teal-deep)", letterSpacing: "0.06em" }}>0{i+1} / 03</span>
                <h3 className="h3" style={{ marginTop: 10, marginBottom: 10 }}>{b.t}</h3>
                <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.65 }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 16 }} className="gallery">
            {["gallery-clinic-1", "gallery-clinic-2", "gallery-clinic-3", "gallery-clinic-4", "gallery-clinic-5", "gallery-clinic-6"].map((g, i) => (
              <div key={g} style={{ aspectRatio: i % 3 === 0 ? "4/5" : "4/3", overflow: "hidden", borderRadius: 10, background: "var(--mist)" }}>
                <img src={"media/" + g + ".webp"} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ----------------- CONTACT ----------------- */
function ContactScreen({ onBook }) {
  const C = window.EUROMED_DATA.CONTACT;
  return (
    <div className="page-enter" data-screen-label="07 Contact">
      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60 }} className="contact-grid">
            <div>
              <span className="eyebrow">Visit Euromed</span>
              <h1 className="display" style={{ marginTop: 18 }}>
                Find us on<br/>
                <em>Jumeirah Beach Road.</em>
              </h1>
              <p className="lede" style={{ marginTop: 22 }}>
                Walk-ins welcome by appointment. For the fastest reply, message us on WhatsApp — most enquiries are answered within the hour during clinic hours.
              </p>

              <div className="visit-card" style={{ marginTop: 32 }}>
                <div>
                  <h5>Address</h5>
                  <p>{C.address}<br/>{C.city}</p>
                </div>
                <div>
                  <h5>Hours</h5>
                  <p>{C.hoursNote}</p>
                </div>
                <div>
                  <h5>Call</h5>
                  <p><a href={"tel:" + C.phoneRaw}>{C.phone}</a></p>
                </div>
                <div>
                  <h5>WhatsApp</h5>
                  <p><a href={"https://api.whatsapp.com/send?phone=" + C.whatsappRaw} target="_blank" rel="noreferrer">{C.whatsapp}</a></p>
                </div>
                <div style={{ gridColumn: "1 / -1" }}>
                  <h5>Email</h5>
                  <p><a href={"mailto:" + C.email}>{C.email}</a></p>
                </div>
              </div>

              <div className="compliance-note" style={{ marginTop: 22 }}>
                <strong>Hours pending confirmation.</strong> Source data showed conflicting hours (10:00–19:00 Mon–Sat vs 9:00–19:00 Mon–Sun). The clinic will confirm the live schedule before publishing.
              </div>
            </div>

            <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
              <div style={{ aspectRatio: "4/5", background: "var(--mist)", borderRadius: 14, overflow: "hidden", position: "relative" }}>
                <img src="media/clinic-interior-bg.webp" alt="Map placeholder" style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.2) brightness(0.95)" }}/>
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(135deg, rgba(0,139,140,0.18) 0%, rgba(15,34,38,0.45) 100%)" }}></div>
                <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)", display: "flex", flexDirection: "column", alignItems: "center", gap: 12, color: "white" }}>
                  <div style={{ width: 48, height: 48, borderRadius: "50%", background: "var(--teal)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon.Pin size={22}/>
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22 }}>Villa 611</div>
                  <div style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.85 }}>map embed · coords pending</div>
                </div>
              </div>
              <button className="btn btn-primary" style={{ width: "100%", justifyContent: "center", marginTop: 16 }} onClick={onBook}>
                Book a consultation <Icon.Arrow size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.TreatmentScreen = TreatmentScreen;
window.DoctorsScreen = DoctorsScreen;
window.DoctorProfileScreen = DoctorProfileScreen;
window.AboutScreen = AboutScreen;
window.ContactScreen = ContactScreen;