// Biolite — Home screen

function HomeScreen({ setRoute, openBooking }) {
  return (
    <div>
      {/* HERO */}
      <section className="hero">
        <div className="hero-text">
          <div>
            <div className="eyebrow">Dubai since 2007 · UK since 2002 · Founder-led</div>
            <h1 className="h-display" style={{ marginTop: 28 }}>
              Considered<br/>
              <em>aesthetic medicine,</em><br/>
              quietly delivered.
            </h1>
            <p className="lede" style={{ marginTop: 36, maxWidth: 540 }}>
              A founder-led clinic on Al Thanya Road. Surgical and non-surgical aesthetics, cosmetic gynaecology and supervised longevity care — by appointment, by referral, and by reputation.
            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
              <button className="btn btn-lg" onClick={openBooking}>Book a consultation</button>
              <button className="btn btn-ghost btn-lg" onClick={() => setRoute({ page: "treatments" })}>Explore treatments</button>
            </div>
          </div>

          <div style={{ marginTop: 64 }}>
            <hr className="hr-gold" />
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, padding: "20px 0 0" }}>
              <div>
                <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.01em" }}>2007</div>
                <div className="micro" style={{ marginTop: 8 }}>Founded · Dubai Healthcare City</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.01em" }}>6 <span style={{ color: "var(--gold-deep)" }}>·</span> areas</div>
                <div className="micro" style={{ marginTop: 8 }}>Surgical · Face · Body · Hair · Gynae · Longevity</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 36, lineHeight: 1, letterSpacing: "-0.01em" }}>EN <span style={{ color: "var(--gold-deep)" }}>·</span> AR <span style={{ color: "var(--gold-deep)" }}>·</span> RU <span style={{ color: "var(--gold-deep)" }}>·</span> ZH</div>
                <div className="micro" style={{ marginTop: 8 }}>Consultations in four languages</div>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-image">
          <img src="media/hero-video-poster.webp" alt="Biolite clinic" />
          <div className="hero-overlay-card">
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-2)" }}>Currently accepting</div>
              <div className="serif" style={{ fontSize: 22, lineHeight: 1.2, marginTop: 6 }}>Surgical & longevity programmes — 2026 spring intake</div>
            </div>
            <button className="btn btn-sm btn-light" onClick={openBooking}>Reserve →</button>
          </div>
        </div>
      </section>

      {/* TREATMENT AREAS */}
      <section className="section">
        <div className="wide">
          <SecHead
            roman="I."
            title="The clinic, by <em>area of care</em>"
            meta="Treatments · 70+"
          >
            Six pathways, one team. Every treatment ends in a consultation — never a checkout.
          </SecHead>

          <div className="row row-3" style={{ gap: 24 }}>
            {TREATMENT_AREAS.map(a => (
              <div key={a.id} className="tarea" onClick={() => setRoute({ page: "treatments", area: a.id })}>
                <div className="tarea-img">
                  <img src={a.image} alt={a.name} />
                  <div className="tarea-num">— {a.num}</div>
                  <div className="tarea-name">{a.name}</div>
                </div>
                <div className="tarea-body">
                  <p className="small" style={{ margin: 0, color: "var(--ink-2)" }}>{a.blurb}</p>
                  <div className="flex between" style={{ marginTop: 6 }}>
                    <span className="micro">{a.count} treatments</span>
                    <span className="micro" style={{ color: "var(--gold-deep)" }}>Explore →</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDER */}
      <section className="founder">
        <div className="founder-grid">
          <div className="founder-image">
            <img src="media/team-mona-mirza-founder.webp" alt="Mona Mirza, Founder of Biolite" />
          </div>
          <div className="founder-text">
            <div className="eyebrow">— II · The founder</div>
            <h2 className="h1">
              <em>Mona Mirza</em><br/>
              founded Biolite in&nbsp;2007.
            </h2>
            <p className="lede">
              Press has described Mona as among <em>"the first licensed laser and IPL supervisors"</em> in the UK in the 1990s; she opened Biolite in Dubai Healthcare City as a doctor-led, founder-stewarded clinic, after launching the UK practice in 2002.
            </p>
            <p className="small" style={{ color: "rgba(250,247,241,0.7)", maxWidth: 560 }}>
              Recognised in the MBRE Dubai Top 100 SMEs (#17, attributed) and featured in Mojeh, What's On and Near+Far. Brand and press claims presented as attributed, not as assertion.
            </p>
            <div style={{ display: "flex", gap: 14, marginTop: 16, flexWrap: "wrap" }}>
              <button className="btn btn-light" onClick={() => setRoute({ page: "doctors" })}>Meet the team →</button>
              <button className="btn-gold" style={{ color: "var(--gold-2)" }} onClick={() => setRoute({ page: "about" })}>The Biolite story</button>
            </div>
          </div>
        </div>
      </section>

      {/* WELLNESS / LONGEVITY teaser */}
      <section className="section well">
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "end" }}>
            <div className="col-span-5">
              <div className="eyebrow">— III · Wellness & longevity</div>
              <h2 className="h1" style={{ marginTop: 14 }}>
                A separate, <em>science-careful</em> pathway.
              </h2>
              <p className="lede" style={{ marginTop: 20, maxWidth: 520 }}>
                Healthness, IV optimisation, supervised ozone and recovery modalities — presented factually, supervised by licensed practitioners. We don't promise reversal; we offer programme care.
              </p>
              <div className="note" style={{ marginTop: 24, maxWidth: 540 }}>
                <span className="mono">DHA/MOH compliant claims</span>
                Regenerative and longevity modalities are offered as supportive, qualified care. Outcomes vary; we make no disease-cure or guaranteed-results claims.
              </div>
              <div style={{ marginTop: 28 }}>
                <button className="btn" onClick={() => setRoute({ page: "wellness" })}>Wellness programmes →</button>
              </div>
            </div>
            <div className="col-span-7">
              <div className="row row-2" style={{ gap: 20 }}>
                {WELLNESS.slice(0, 4).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: 22, lineHeight: 1.15 }}>{w.name}</div>
                      <div className="small" style={{ marginTop: 6 }}>{w.desc}</div>
                      <div className="qualified">{w.qualifier}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PROOF / TRUST STRIP — NO fabricated ratings; show factual structure */}
      <section className="proof-strip section-sm">
        <div className="wide">
          <div className="row row-4" style={{ gap: 32 }}>
            <div>
              <div className="num">19<em>+</em></div>
              <div className="label">Years in Dubai · since 2007</div>
            </div>
            <div>
              <div className="num">24<em>+</em></div>
              <div className="label">Years of Mirza practice · UK since 2002</div>
            </div>
            <div>
              <div className="num">— · —</div>
              <div className="label">Live Google rating · awaiting verification</div>
            </div>
            <div>
              <div className="num">#17</div>
              <div className="label">MBRE Top 100 SMEs · attributed</div>
            </div>
          </div>
          <div className="micro" style={{ marginTop: 32, color: "var(--sage-soft)", maxWidth: 720 }}>
            Note · Per DHA/MOH advertising guidance we publish numbers only when confirmed. Multiple aggregators report conflicting Google ratings (4.8 vs 4.9), so we display none until the live figure is verified.
          </div>
        </div>
      </section>

      {/* TREATMENT LIST EDITORIAL */}
      <section className="section">
        <div className="wide">
          <SecHead
            roman="IV."
            title="A short reading of the <em>treatment menu</em>"
            meta="Sample · 12 of 70+"
          >
            Every treatment includes a journey page — what it is, who it's for, how it goes, recovery and FAQ — and ends in a consult booking.
          </SecHead>

          <div>
            {TREATMENTS.slice(0, 10).map((t, i) => (
              <div key={t.id} className="t-row" onClick={() => setRoute({ page: "treatment", id: t.id })}>
                <div className="num">{String(i + 1).padStart(2, "0")}</div>
                <div className="name">{t.name}</div>
                <div className="tags">{t.tags}</div>
                <div className="meta">Recovery · {t.recovery}</div>
                <div className="arrow">→</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40, textAlign: "center" }}>
            <button className="btn btn-ghost btn-lg" onClick={() => setRoute({ page: "treatments" })}>See all treatments →</button>
          </div>
        </div>
      </section>

      {/* CTA / VISIT */}
      <section className="section" style={{ background: "var(--paper-2)" }}>
        <div className="wide">
          <div className="row row-12" style={{ gap: 48, alignItems: "center" }}>
            <div className="col-span-6">
              <div className="eyebrow">— V · Visit</div>
              <h2 className="h1" style={{ marginTop: 14 }}>
                Villa 57,<br/>
                <em>Al Thanya Road.</em>
              </h2>
              <p className="lede" style={{ marginTop: 18, maxWidth: 500 }}>
                Tucked into Umm Suqeim 2, a quiet residential stretch of Jumeirah — short drives from Marina, Downtown and DXB.
              </p>
              <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 480 }}>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Reception</div>
                  <a href="tel:+97143466641" className="serif" style={{ fontSize: 20 }}>+971 4 346 6641</a>
                </div>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Direct line</div>
                  <a href="tel:+971502920086" className="serif" style={{ fontSize: 20 }}>+971 50 292 0086</a>
                </div>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Email</div>
                  <a href="mailto:info@biolitedubai.com" className="serif" style={{ fontSize: 20 }}>info@biolitedubai.com</a>
                </div>
                <div>
                  <div className="micro" style={{ marginBottom: 6 }}>Hours · confirm</div>
                  <div className="serif" style={{ fontSize: 20 }}>Sat – Thu, by appointment</div>
                </div>
              </div>
              <div style={{ marginTop: 36, display: "flex", gap: 14 }}>
                <button className="btn" onClick={openBooking}>Book a consultation</button>
                <button className="btn btn-ghost" onClick={() => setRoute({ page: "contact" })}>Contact & visit →</button>
              </div>
            </div>
            <div className="col-span-6">
              <div className="map-wrap">
                <img src="media/location-map-squared.webp" alt="Map of Villa 57 Al Thanya Road" />
                <div className="map-pin" />
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeScreen });