// ============ Screens: Home, Specialties, Treatment, Doctors, DoctorProfile, About, Contact ============
const { useState } = React;

/* ----------------- HOME ----------------- */
function HomeScreen({ setRoute, onBook }) {
  const D = window.EUROMED_DATA;
  return (
    <div className="page-enter" data-screen-label="01 Home">
      {/* Hero */}
      <section className="hero" data-screen-label="Home hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">Multi-specialty clinic · Jumeirah</span>
              <h1 className="display" style={{ marginTop: 22 }}>
                A <em>family</em> medical
                <br />
                &amp; cosmetic clinic,
                <br />
                under one roof.
              </h1>
              <p className="lede" style={{ marginTop: 26 }}>
                Dermatology, plastic surgery, hair transplant, dental, OB/GYN, family medicine and wellness — provided by named, DHA-licensed practitioners on Jumeirah Beach Road since February 2010.
              </p>
              <div className="hero-cta-row">
                <button className="btn btn-primary" onClick={onBook}>
                  Book a free consultation <Icon.Arrow size={14} />
                </button>
                <button className="btn btn-ghost" onClick={() => setRoute({ name: "specialties" })}>
                  Browse specialties
                </button>
              </div>
              <div className="hero-stat-row">
                {D.TRUST_ITEMS.map((t, i) => (
                  <div className="hero-stat" key={i}>
                    <div className="hero-stat-n">{t.v}</div>
                    <div className="hero-stat-l">{t.l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="hero-art">
              <img src="media/clinic-interior-2.webp" alt="Euromed Clinic consultant" style={{ objectPosition: "center right" }} />
              <div className="hero-art-tag">
                <div className="hero-art-tag-dot"></div>
                <div className="hero-art-tag-text">
                  <b>Open today, by appointment</b>
                  <span>{D.CONTACT.hoursNote}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Concerns by chip */}
      <section className="section tight" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap", marginBottom: 18 }}>
            <span className="eyebrow no-rule" style={{ color: "var(--ink-3)" }}>Treat by concern</span>
            <button className="btn-link" onClick={() => setRoute({ name: "specialties" })}>
              See all treatments <Icon.Arrow size={12} />
            </button>
          </div>
          <div className="concerns">
            {D.CONCERNS.map((c) => (
              <button key={c} className="concern-chip" onClick={() => setRoute({ name: "specialties" })}>
                {c}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Specialty grid */}
      <section className="section" data-screen-label="Home — Specialties">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Departments</span>
              <h2 className="h2" style={{ marginTop: 18 }}>
                Six <em>specialties.</em><br/> One trusted team.
              </h2>
            </div>
            <div className="section-head-r">
              A multi-specialty roster lets us coordinate across departments — your dermatologist, dentist and family physician share notes on the same record so care joins up.
            </div>
          </div>

          <div className="spec-grid">
            {D.SPECIALTIES.map((s) => (
              <div className="spec-card" key={s.id} onClick={() => setRoute({ name: "specialties", focus: s.id })}>
                <div className="spec-card-no">{s.no} / 06</div>
                <div className="spec-card-arrow"><Icon.ArrowDiag size={18} /></div>
                <div className="spec-card-title">{s.name}</div>
                <ul className="spec-card-list">
                  {s.treatments.slice(0, 4).map((t) => <li key={t}>{t}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Doctor teaser */}
      <section className="section bg-mist" data-screen-label="Home — Doctors">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Named practitioners</span>
              <h2 className="h2" style={{ marginTop: 18 }}>
                Doctors with <em>verifiable</em><br/> credentials.
              </h2>
            </div>
            <div className="section-head-r">
              Every practitioner on this page carries a DHA licence we publish openly. Visiting consultants are flagged so you always know whether your specialist is in-house or on rotation.
              <div style={{ marginTop: 14 }}>
                <button className="btn-link" onClick={() => setRoute({ name: "doctors" })}>
                  Full team & credentials <Icon.Arrow size={12} />
                </button>
              </div>
            </div>
          </div>
          <div className="doc-grid">
            {D.DOCTORS.slice(0, 4).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>
      </section>

      {/* Treatment journey teaser */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">A treatment journey</span>
              <h2 className="h2" style={{ marginTop: 18 }}>
                What it actually <em>looks like.</em>
              </h2>
            </div>
            <div className="section-head-r">
              No guaranteed-results language, no surprise pricing. Each treatment page lays out candidacy, the procedure itself, recovery timelines, and the questions patients actually ask.
              <div style={{ marginTop: 14 }}>
                <button className="btn-link" onClick={() => setRoute({ name: "treatment", id: "fue-hair-transplant" })}>
                  See: FUE hair transplant <Icon.Arrow size={12} />
                </button>
              </div>
            </div>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 32, alignItems: "stretch",
          }} className="treat-teaser">
            <div style={{
              background: "var(--ink)", color: "white", borderRadius: 14, padding: 40, display: "flex", flexDirection: "column", justifyContent: "space-between", minHeight: 360,
            }}>
              <div>
                <span className="eyebrow" style={{ color: "var(--sage)" }}>Hair Transplant · FUE</span>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 34, lineHeight: 1.1, margin: "16px 0 14px", fontWeight: 400, letterSpacing: "-0.01em" }}>
                  A doctor-supervised, minimally invasive technique for restoring natural hair density.
                </h3>
                <p style={{ color: "rgba(255,255,255,0.7)", maxWidth: "40ch", fontSize: 15 }}>
                  Five-step journey from consultation to twelve-month review. Local anaesthesia, single-day procedure.
                </p>
              </div>
              <button className="btn btn-primary" style={{ background: "white", color: "var(--ink)", alignSelf: "flex-start", marginTop: 28 }} onClick={() => setRoute({ name: "treatment", id: "fue-hair-transplant" })}>
                Read the full journey <Icon.Arrow size={14} />
              </button>
            </div>
            <div style={{ display: "grid", gridTemplateRows: "repeat(4, 1fr)", gap: 12 }}>
              {EUROMED_DATA.TREATMENT_FUE.steps.slice(0, 4).map((s) => (
                <div key={s.no} style={{ background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 10, padding: "16px 20px", display: "flex", gap: 18, alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--teal-deep)", minWidth: 28 }}>{s.no}</span>
                  <div>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 17, lineHeight: 1.15 }}>{s.title}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Before/after locked */}
      <section className="section bg-mist">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center" }} className="ba-grid">
            <div>
              <span className="eyebrow">Before &amp; after</span>
              <h2 className="h2" style={{ marginTop: 18 }}>
                Shown only with patient<br/> <em>consent.</em>
              </h2>
              <p className="lede" style={{ marginTop: 18 }}>
                We don't publish before-and-after imagery without each patient's signed consent and compliance with DHA/MOH advertising guidance. When you book, your consultant will share consented examples in person.
              </p>
            </div>
            <div className="before-after-locked">
              <div className="lock"><Icon.Lock /></div>
              <strong style={{ fontFamily: "var(--serif)", fontSize: 22 }}>Gallery is consent-gated</strong>
              <p>
                Patient outcome photography is only displayed during in-person consultation, with the patient's written consent and in line with UAE medical advertising rules.
              </p>
              <button className="btn-link" onClick={onBook} style={{ marginTop: 8 }}>
                Request a consult to see results <Icon.Arrow size={12} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="section" style={{ background: "var(--ink)", color: "white", padding: "72px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--sage)" }}>Visit Euromed</span>
            <h2 className="h2" style={{ marginTop: 18, color: "white" }}>
              Free initial consultation —<br/> in person, by phone or WhatsApp.
            </h2>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "flex-end" }}>
            <button className="btn btn-primary" style={{ background: "white", color: "var(--ink)" }} onClick={onBook}>
              Book a consultation <Icon.Arrow size={14} />
            </button>
            <a className="btn btn-ghost" style={{ borderColor: "rgba(255,255,255,0.3)", color: "white" }} href="https://api.whatsapp.com/send?phone=97148945000" target="_blank" rel="noreferrer">
              <Icon.WhatsApp size={14} /> Message us
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ----------------- SPECIALTIES HUB ----------------- */
function SpecialtiesScreen({ setRoute, onBook }) {
  const D = window.EUROMED_DATA;
  return (
    <div className="page-enter" data-screen-label="02 Specialties">
      <section className="section" style={{ paddingBottom: 40 }}>
        <div className="container">
          <span className="eyebrow">Departments</span>
          <h1 className="display" style={{ marginTop: 18 }}>
            Six specialties.<br/>
            <em>One coordinated record.</em>
          </h1>
          <p className="lede" style={{ marginTop: 22 }}>
            Browse our departments below, or jump to a treatment journey. Every treatment page covers candidacy, the procedure itself, expected recovery and the most-asked questions.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 88 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }} className="spec-list">
            {D.SPECIALTIES.map((s) => (
              <div key={s.id} style={{
                display: "grid",
                gridTemplateColumns: "180px 1fr",
                background: "var(--paper)",
                border: "1px solid var(--line)",
                borderRadius: 14,
                overflow: "hidden",
                minHeight: 220,
              }}>
                <div style={{ background: "var(--mist)", overflow: "hidden" }}>
                  <img src={s.image} alt={s.name} style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
                </div>
                <div style={{ padding: "26px 28px", display: "flex", flexDirection: "column", gap: 12 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>{s.no} / 06</span>
                    <span style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>{s.treatments.length} treatments</span>
                  </div>
                  <h3 className="h3">{s.name}</h3>
                  <p style={{ color: "var(--ink-2)", fontSize: 14, margin: 0 }}>{s.intro}</p>
                  <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      {s.treatments.slice(0, 3).map((t) => (
                        <span key={t} style={{ fontSize: 12, color: "var(--ink-3)", border: "1px solid var(--line)", padding: "4px 9px", borderRadius: 999 }}>{t}</span>
                      ))}
                    </div>
                    <button className="btn-link" onClick={() => s.id === "hair-transplant" ? setRoute({ name: "treatment", id: "fue-hair-transplant" }) : setRoute({ name: "specialties" })}>
                      Explore <Icon.Arrow size={12} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="compliance-note" style={{ marginTop: 36 }}>
            <strong>A note on copy:</strong> per DHA/MOH advertising guidance we don't use guaranteed-result language or "best in city" superlatives, and we don't run the "1 Dirham hair transplant" promotional hook. Pricing is by consultation — your consultant will give a transparent, written quote.
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomeScreen = HomeScreen;
window.SpecialtiesScreen = SpecialtiesScreen;