// Biolite — Doctors, Wellness, About, Before/After, Contact screens

function DoctorsScreen({ setRoute, openBooking }) {
  return (
    <div>
      <section className="section-sm" style={{ paddingTop: 80 }}>
        <div className="wide">
          <div className="eyebrow">— Our team · founder + verified practitioners</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1100 }}>
            <em>Doctor-led,</em><br/>
            founder-stewarded.
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: 720 }}>
            We publish a practitioner only when their credentials, DHA licensing and permission to be listed are confirmed. Names below reflect the current verification queue — the live site will show licence numbers per DHA display rules.
          </p>
          <div className="note" style={{ marginTop: 32, maxWidth: 720 }}>
            <span className="mono">Verification policy</span>
            "Verified" = name, role, credentials and DHA licence confirmed by the practitioner and clinic. "Awaiting verification" = listed in research but not yet confirmed; we will not publish unverified portraits or credentials in production.
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <SecHead roman="I." title="The <em>founder</em>" meta="Since 2007" />
          <div className="row row-12" style={{ gap: 48, alignItems: "stretch" }}>
            <div className="col-span-5">
              <div style={{ aspectRatio: "3/4", overflow: "hidden", border: "1px solid var(--line)" }}>
                <img src="media/team-mona-mirza-founder.webp" alt="Mona Mirza" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            </div>
            <div className="col-span-7" style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <span className="verified-pill verified">● Verified · Founder</span>
              <h2 className="h1" style={{ marginTop: 16 }}>
                Mona Mirza
              </h2>
              <div className="serif" style={{ fontSize: 22, color: "var(--moss)", marginTop: 6, fontStyle: "italic" }}>Founder & CEO</div>
              <p className="lede" style={{ marginTop: 20, maxWidth: 560 }}>
                Trained cosmetologist with three decades in the beauty industry, including a UK laser & IPL supervisor background dating to the 1990s. Founded Biolite in Dubai Healthcare City in 2007 — described in press as among the earliest licensed medical aesthetics practices in the area (attributed).
              </p>
              <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 500 }}>
                <div>
                  <div className="micro">UK practice</div>
                  <div className="serif" style={{ fontSize: 22 }}>2002 →</div>
                </div>
                <div>
                  <div className="micro">Dubai · Biolite</div>
                  <div className="serif" style={{ fontSize: 22 }}>2007 →</div>
                </div>
                <div>
                  <div className="micro">Recognition · attributed</div>
                  <div className="serif" style={{ fontSize: 18, lineHeight: 1.2 }}>MBRE Top 100 SMEs · #17</div>
                </div>
                <div>
                  <div className="micro">Press</div>
                  <div className="serif" style={{ fontSize: 18, lineHeight: 1.2 }}>Mojeh · What's On · Near+Far</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide">
          <SecHead roman="II." title="The <em>practice</em>" meta={`Verification: ${DOCTORS.filter(d => !d.founder && d.verified === "verified").length}/${DOCTORS.filter(d => !d.founder).length}`} />
          <div className="row row-3" style={{ gap: 24 }}>
            {DOCTORS.filter(d => !d.founder).map(d => (
              <div key={d.id} className="doctor">
                <div className="doctor-img">
                  {d.verified === "pending" ? (
                    <div style={{ position: "relative", width: "100%", height: "100%" }}>
                      <img src={d.image} alt={d.name} style={{ width: "100%", height: "100%", objectFit: "cover", filter: "grayscale(0.85) opacity(0.6)" }} />
                      <div style={{
                        position: "absolute", inset: 0,
                        background: "linear-gradient(180deg, transparent 50%, rgba(46,59,54,0.65) 100%)",
                        display: "flex", alignItems: "flex-end", padding: 20,
                      }}>
                        <div className="micro" style={{ color: "var(--paper)", letterSpacing: "0.16em" }}>— Awaiting verification</div>
                      </div>
                    </div>
                  ) : (
                    <img src={d.image} alt={d.name} />
                  )}
                </div>
                <div className="doctor-body">
                  <span className={"verified-pill " + d.verified}>
                    ● {d.verified === "verified" ? "Verified · DHA listed" : "Awaiting verification"}
                  </span>
                  <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.1, margin: "10px 0 2px" }}>{d.name}</h3>
                  <div className="serif" style={{ fontSize: 18, color: "var(--moss)", fontStyle: "italic" }}>{d.role}</div>
                  <div className="micro" style={{ marginTop: 6 }}>{d.title}</div>
                  <p className="small" style={{ marginTop: 10, color: "var(--ink-2)" }}>{d.bio}</p>
                  <div className="micro" style={{ marginTop: 12, color: "var(--gold-deep)", borderTop: "1px solid var(--line)", paddingTop: 12 }}>
                    Licence · {d.license}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="wide" style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <BrandMark size={48} />
          <h2 className="h1" style={{ color: "var(--paper)", marginTop: 24 }}>
            We list only <em style={{ color: "var(--gold-2)" }}>verified</em> practitioners.
          </h2>
          <p className="lede" style={{ color: "rgba(250,247,241,0.78)", marginTop: 18 }}>
            Aggregators have published conflicting rosters in the past. This page is the single, authoritative roll — updated as licences are confirmed and consent to be listed is on file.
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-light" onClick={openBooking}>Book a consultation</button>
            <button className="btn-gold" onClick={() => setRoute({ page: "contact" })}>Ask about a practitioner →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function WellnessScreen({ setRoute, openBooking }) {
  return (
    <div>
      <section style={{ position: "relative", background: "var(--moss-deep)", color: "var(--paper)", padding: "120px 0 100px", overflow: "hidden" }}>
        <div style={{ position: "absolute", right: -100, top: 40, opacity: 0.08 }}>
          <BrandMark size={520} />
        </div>
        <div className="wide" style={{ position: "relative", zIndex: 2 }}>
          <div className="eyebrow" style={{ color: "var(--gold-2)" }}>— Wellness & longevity</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1100, color: "var(--paper)" }}>
            A separate,<br/>
            <em style={{ color: "var(--gold-2)" }}>science-careful</em><br/>
            pathway.
          </h1>
          <p className="lede" style={{ color: "rgba(250,247,241,0.85)", marginTop: 32, maxWidth: 620 }}>
            Healthness brings diagnostic, recovery and lifestyle medicine together as a supervised programme. We don't promise reversal. We offer a careful, qualified pathway — and we say so clearly.
          </p>

          <div className="note" style={{ marginTop: 36, maxWidth: 720, background: "rgba(250,247,241,0.08)", borderColor: "var(--gold-2)", color: "rgba(250,247,241,0.85)" }}>
            <span className="mono" style={{ color: "var(--gold-2)" }}>What we don't say</span>
            We avoid "reverse ageing", "intelligent longevity as a cure", and any disease-cure or guaranteed-results phrasing. UAE DHA/MOH advertising rules require it; honesty is good practice anyway.
          </div>
        </div>
      </section>

      <section className="section well">
        <div className="wide">
          <SecHead roman="I." title="Programmes & <em>modalities</em>" meta="Supervised · qualified" />
          <div className="row row-3" style={{ gap: 24 }}>
            {WELLNESS.map(w => (
              <div key={w.name} className="well-card">
                <div className="img"><img src={w.img} alt={w.name} /></div>
                <div className="body">
                  <div className="serif" style={{ fontSize: 24, lineHeight: 1.15 }}>{w.name}</div>
                  <div className="small" style={{ marginTop: 10 }}>{w.desc}</div>
                  <div className="qualified">{w.qualifier}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <SecHead roman="II." title="How a longevity <em>programme</em> reads" meta="Five movements" />
          <div className="row row-12" style={{ gap: 48 }}>
            <div className="col-span-5">
              <p className="lede" style={{ maxWidth: 460 }}>
                A typical Healthness programme runs across days or weeks. The shape is consistent; the content is individualised under physician supervision.
              </p>
              <p className="small" style={{ marginTop: 18, color: "var(--ink-2)", maxWidth: 460 }}>
                Programme structure shown for illustration. Specific clinical pathways are designed in consultation and depend on baseline diagnostics and goals.
              </p>
              <div style={{ marginTop: 28 }}>
                <button className="btn" onClick={openBooking}>Programme consultation →</button>
              </div>
            </div>
            <div className="col-span-7">
              {[
                { n: "01", k: "Baseline", d: "Bloodwork, physiology, lifestyle audit. Physician-led intake." },
                { n: "02", k: "Plan", d: "A written programme — modalities, frequency, what we expect, what we don't." },
                { n: "03", k: "Modalities", d: "IV optimisation, supervised ozone, recovery domes, sleep work — applied where indicated." },
                { n: "04", k: "Review", d: "Mid-programme diagnostic review. Adjust modalities; adjust expectations." },
                { n: "05", k: "Onward care", d: "A maintenance schedule; we don't keep you in unless it serves a goal." },
              ].map(s => (
                <div key={s.n} style={{ display: "grid", gridTemplateColumns: "60px 200px 1fr", gap: 20, alignItems: "baseline", padding: "22px 0", borderTop: "1px solid var(--line)" }}>
                  <div className="micro" style={{ color: "var(--gold-deep)" }}>{s.n}</div>
                  <div className="serif" style={{ fontSize: 26 }}>{s.k}</div>
                  <div className="small">{s.d}</div>
                </div>
              ))}
              <div style={{ borderBottom: "1px solid var(--line)" }} />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function AboutScreen({ setRoute, openBooking }) {
  return (
    <div>
      <section className="section-sm" style={{ paddingTop: 80 }}>
        <div className="wide">
          <div className="eyebrow">— About · since 2007</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1180 }}>
            Nineteen years on a <em>quiet</em><br/>
            Jumeirah street.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "start" }}>
            <div className="col-span-5">
              <p className="lede">
                Mona Mirza opened Biolite in Dubai Healthcare City in 2007, after five years of UK practice. The clinic has stayed founder-led ever since — a deliberate choice to keep the work close to the person whose name it carries.
              </p>
              <p className="body" style={{ marginTop: 20 }}>
                The remit has widened — surgical, non-surgical, cosmetic gynaecology, and a supervised longevity programme — but the posture hasn't changed. Doctor-led. Consultation-first. Quietly delivered. We have always preferred to be recommended rather than discovered.
              </p>
              <p className="body">
                In a city of new clinics, established-since-2007 is unusual enough to be worth saying once, in normal type, without superlatives.
              </p>
            </div>
            <div className="col-span-7">
              <div style={{ aspectRatio: "16/10", overflow: "hidden", border: "1px solid var(--line)" }}>
                <img src="media/dubai-skyline.webp" alt="Dubai skyline" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div className="micro" style={{ marginTop: 12 }}>— Dubai · Jumeirah / Umm Suqeim 2</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide">
          <SecHead roman="III." title="A <em>quiet timeline</em>" meta="Established · attributed" />
          <div style={{ position: "relative" }}>
            {[
              { y: "2002", e: "Mirza practice opens in the UK." },
              { y: "2007", e: "Biolite Dubai opens in Dubai Healthcare City — described in press as among the earliest licensed medical aesthetics practices in the area (attributed)." },
              { y: "2015", e: "Practice broadens into cosmetic gynaecology and energy-based modalities." },
              { y: "2019", e: "Recognition in the MBRE Dubai Top 100 SMEs (ranked #17, attributed)." },
              { y: "2022", e: "Healthness — supervised longevity programme — formalised as a standing pathway." },
              { y: "2026", e: "Two web properties consolidated into a single, doctor-led, compliant home." },
            ].map((p, i) => (
              <div key={p.y} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, padding: "28px 0", borderTop: i === 0 ? "1px solid var(--line)" : "0", borderBottom: "1px solid var(--line)" }}>
                <div className="serif" style={{ fontSize: 36, color: "var(--gold-deep)", letterSpacing: "-0.01em" }}>{p.y}</div>
                <div className="lede" style={{ maxWidth: 800, fontSize: 22 }}>{p.e}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <div className="row row-3" style={{ gap: 32 }}>
            <div>
              <div className="eyebrow">Philosophy · I</div>
              <h3 className="h2" style={{ marginTop: 14 }}><em>Lightest</em> useful intervention.</h3>
              <p className="small" style={{ marginTop: 12 }}>We are happy to say "wait", "less", or "no" if that's the right answer. Patients return because of it.</p>
            </div>
            <div>
              <div className="eyebrow">Philosophy · II</div>
              <h3 className="h2" style={{ marginTop: 14 }}><em>Verified</em> over performative.</h3>
              <p className="small" style={{ marginTop: 12 }}>Practitioner licensing and consent come before publication. We don't pad rosters or run unverified before-and-afters.</p>
            </div>
            <div>
              <div className="eyebrow">Philosophy · III</div>
              <h3 className="h2" style={{ marginTop: 14 }}><em>Programme</em>, not procedure.</h3>
              <p className="small" style={{ marginTop: 12 }}>Aesthetic and longevity care work over time. We plan, review and exit — not subscribe.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function BeforeAfterScreen({ setRoute, openBooking }) {
  return (
    <div>
      <section className="section-sm" style={{ paddingTop: 80 }}>
        <div className="wide">
          <div className="eyebrow">— Before & after · consent-gated</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1100 }}>
            We don't publish<br/>
            <em>without permission.</em>
          </h1>
          <p className="lede" style={{ marginTop: 28, maxWidth: 720 }}>
            DHA advertising rules require patient consent and specific compliance before any before-and-after image goes online. We follow the rule strictly. A full gallery is available in consultation, where context, expectation and candidacy are read together.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "start" }}>
            <div className="col-span-4">
              <h3 className="h2"><em>How</em> the gallery works.</h3>
              <div style={{ marginTop: 24 }}>
                {[
                  { n: "01", t: "Consent on file", d: "We hold a signed, time-limited consent for every published image." },
                  { n: "02", t: "DHA-compliant copy", d: "Captions follow medical-advertising rules — no superlatives, no guaranteed results." },
                  { n: "03", t: "Context preserved", d: "Lighting, posture and timing standardised; cases shown across treatment, never single best-frames." },
                  { n: "04", t: "In-clinic viewing", d: "Full case library is shown during consultation with case context and candidacy." },
                ].map(s => (
                  <div key={s.n} style={{ padding: "16px 0", borderTop: "1px solid var(--line)" }}>
                    <div className="micro" style={{ color: "var(--gold-deep)" }}>{s.n}</div>
                    <div className="serif" style={{ fontSize: 22, marginTop: 4 }}>{s.t}</div>
                    <div className="small" style={{ marginTop: 6 }}>{s.d}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32 }}>
                <button className="btn" onClick={openBooking}>Request in-clinic viewing →</button>
              </div>
            </div>
            <div className="col-span-8">
              <div className="row row-3" style={{ gap: 16 }}>
                {[
                  "Rhinoplasty",
                  "Morpheus8 RF",
                  "Sofwave",
                  "Ultherapy",
                  "FaceTite",
                  "Silk Peel",
                  "Liposuction",
                  "Lip filler",
                  "Body shaping",
                ].map((label, i) => (
                  <div key={label} className="ba-locked">
                    <div className="lock-icon">●</div>
                    <div className="micro">— Case study · {String(i + 1).padStart(3, "0")}</div>
                    <div className="serif" style={{ fontSize: 22, lineHeight: 1.15 }}>{label}</div>
                    <div className="small" style={{ marginTop: 4 }}>Consent-gated · view in clinic</div>
                  </div>
                ))}
              </div>
              <div className="micro" style={{ marginTop: 16, color: "var(--sage)" }}>
                Scaffold shown for system clarity. No patient imagery is published without explicit consent and DHA advertising compliance.
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function ContactScreen({ openBooking }) {
  return (
    <div>
      <section className="section-sm" style={{ paddingTop: 80 }}>
        <div className="wide">
          <div className="eyebrow">— Contact & visit</div>
          <h1 className="h-display" style={{ marginTop: 24, maxWidth: 1080 }}>
            Speak to us, or<br/>
            <em>drop in</em> to Villa 57.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "start" }}>
            <div className="col-span-5">
              <div style={{ borderTop: "1px solid var(--line)" }}>
                {[
                  { l: "Reception", v: "+971 4 346 6641", href: "tel:+97143466641" },
                  { l: "Direct line", v: "+971 50 292 0086", sub: "WhatsApp pending confirmation", href: "tel:+971502920086" },
                  { l: "Email", v: "info@biolitedubai.com", href: "mailto:info@biolitedubai.com" },
                  { l: "Address", v: "Villa 57, Al Thanya Road, Umm Suqeim 2, Jumeirah, Dubai", sub: "Exact zone (UMS 2 vs 3) pending re-verification" },
                  { l: "Hours", v: "Sat – Thu, by appointment", sub: "Friday by request. Hours pending public confirmation." },
                ].map(item => (
                  <div key={item.l} style={{ padding: "24px 0", borderBottom: "1px solid var(--line)" }}>
                    <div className="micro">{item.l}</div>
                    {item.href ? (
                      <a href={item.href} className="serif" style={{ fontSize: 28, color: "var(--ink)", letterSpacing: "-0.01em" }}>{item.v}</a>
                    ) : (
                      <div className="serif" style={{ fontSize: 22, lineHeight: 1.2 }}>{item.v}</div>
                    )}
                    {item.sub && <div className="micro" style={{ color: "var(--gold-deep)", marginTop: 6 }}>{item.sub}</div>}
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 32, display: "flex", gap: 14, flexWrap: "wrap" }}>
                <button className="btn" onClick={openBooking}>Book a consultation</button>
                <a className="btn btn-ghost" href="https://wa.me/971502920086" target="_blank">WhatsApp →</a>
              </div>
            </div>
            <div className="col-span-7">
              <div className="map-wrap" style={{ aspectRatio: "1/1" }}>
                <img src="media/location-map-squared.webp" alt="Map of Villa 57 Al Thanya Road" />
                <div className="map-pin" />
              </div>
              <div className="row row-2" style={{ gap: 16, marginTop: 16 }}>
                <div className="note">
                  <span className="mono">By car</span>
                  Sheikh Zayed Road · Exit 32 · Al Thanya Road. Visitor parking on site.
                </div>
                <div className="note">
                  <span className="mono">From the airport</span>
                  DXB → Villa 57 — approximately 25 minutes outside peak. We arrange transfer for visiting patients.
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide">
          <SecHead roman="II." title="Questions <em>we hear most</em>" meta="FAQ" />
          {FAQ.map(f => <FAQItem key={f.q} q={f.q} a={f.a} />)}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { DoctorsScreen, WellnessScreen, AboutScreen, BeforeAfterScreen, ContactScreen });