/* global React */
const { useState: useState_h, useEffect: useEffect_h } = React;

// ============================================================
// HOME
// ============================================================
const HomePage = () => {
  return (
    <div className="page-enter">
      {/* HERO */}
      <section style={{ padding: "56px 0 80px", position: "relative", overflow: "hidden" }}>
        <div className="container">
          <div className="hero-grid" style={{
            display: "grid",
            gridTemplateColumns: "1.05fr 0.95fr",
            gap: 72,
            alignItems: "center",
          }}>
            <div>
              <div className="row" style={{ marginBottom: 28 }}>
                <span className="chip chip--gold">
                  <CheckIcon size={12}/> Doctor-led · Business Bay
                </span>
                <span className="chip">Free consultation</span>
              </div>

              <h1 className="display-1" style={{ marginBottom: 24 }}>
                Doctor-led <em>aesthetics</em>, in the heart of Business&nbsp;Bay.
              </h1>
              <p className="lede" style={{ marginBottom: 36, fontSize: 19 }}>
                Botox, fillers, skin boosters and advanced skin treatments — natural results, medically delivered. Free 15-minute consultation before any procedure.
              </p>

              <div className="row" style={{ gap: 14, marginBottom: 36 }}>
                <a href="#/book" className="btn btn--primary btn--lg">
                  Book a Consultation <ChevronRight size={14}/>
                </a>
                <a
                  href="https://wa.me/971581955350?text=Hi%20Covent%20Clinic%2C%20I%27d%20like%20to%20book%20a%20consultation"
                  target="_blank" rel="noopener"
                  className="btn btn--ghost btn--lg"
                >
                  <WhatsAppIcon size={16} color="#25D366"/> WhatsApp
                </a>
              </div>

              <div className="row" style={{ gap: 24 }}>
                <FreshaBadge />
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.2 }}>
                  <span style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--charcoal)" }}>
                    Botox from <em style={{ color: "var(--gold-deep)" }}>AED 350</em>
                  </span>
                  <span style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--espresso-soft)" }}>
                    per area · doctor-administered
                  </span>
                </div>
              </div>
            </div>

            {/* Hero visual */}
            <div style={{ position: "relative" }}>
              <div className="hero-visual" style={{ position: "relative", borderRadius: 20, overflow: "hidden", aspectRatio: "4/5", background: "var(--ivory-deep)" }}>
                <HeroImage
                  src="images/reception-monogram-chairs.webp"
                  alt="The reception of Covent Clinic, with the gold CC monogram on the wall"
                  label="reception · CC monogram wall"
                />
                {/* Floating monogram badge */}
                <div style={{
                  position: "absolute",
                  top: 20, right: 20,
                  background: "rgba(248,244,236,0.94)",
                  backdropFilter: "blur(10px)",
                  WebkitBackdropFilter: "blur(10px)",
                  borderRadius: 999,
                  padding: "10px 16px 10px 12px",
                  display: "flex", alignItems: "center", gap: 10,
                  boxShadow: "var(--shadow-card)",
                }}>
                  <span className="live-dot"></span>
                  <span style={{ fontSize: 12, letterSpacing: "0.1em", color: "var(--espresso)", fontWeight: 500 }}>
                    Open today · 10:00–22:00
                  </span>
                </div>
              </div>

              {/* Stacked card — recent review */}
              <div className="card" style={{
                position: "absolute",
                bottom: -28,
                left: -36,
                padding: "18px 22px",
                maxWidth: 280,
                background: "var(--cream-card)",
              }}>
                <Stars value={5} size={13}/>
                <p style={{ fontFamily: "var(--f-display)", fontSize: 18, lineHeight: 1.35, margin: "10px 0 12px", color: "var(--espresso)" }}>
                  “The result looks natural and balanced.”
                </p>
                <div style={{ fontSize: 12, color: "var(--espresso-soft)", letterSpacing: "0.04em" }}>
                  Toujani Rou · May 2026
                </div>
              </div>

              {/* Neon face mark - soft watermark */}
              <div style={{ position: "absolute", top: -34, left: -52, opacity: 0.35, pointerEvents: "none" }}>
                <NeonFace width={140} glow={false}/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <section className="tight" style={{ background: "var(--cream-card)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            gap: 48,
            alignItems: "center",
          }} className="trust-grid">
            {[
              { num: "129+", label: "Verified reviews on Fresha" },
              { num: "22K",  label: "Followers @coventclinic" },
              { num: "3",    label: "Doctors on the roster" },
              { num: "FREE", label: "Consultation before booking" },
            ].map((it, i) => (
              <div key={i} style={{ textAlign: "center", borderLeft: i > 0 ? "1px solid var(--line)" : "none", padding: "0 8px" }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 44, color: "var(--gold-deep)", lineHeight: 1, fontWeight: 500 }}>
                  {it.num}
                </div>
                <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--espresso-soft)", marginTop: 10 }}>
                  {it.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TREATMENT CATEGORIES */}
      <section>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Treatments</div>
              <h2 className="display-2" style={{ maxWidth: 720 }}>
                A focused menu — every procedure <em>doctor-led</em>.
              </h2>
            </div>
            <a href="#/treatments" className="btn btn--ghost">View all treatments <ChevronRight size={12}/></a>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 20,
          }} className="cat-grid">
            {window.TREATMENTS.map((t, i) => (
              <a key={t.slug} href={`#/treatments/${t.slug}`}
                className="cat-card"
                style={{
                  display: "flex",
                  flexDirection: "column",
                  background: "var(--cream-card)",
                  border: "1px solid var(--line)",
                  borderRadius: 16,
                  overflow: "hidden",
                  transition: "all 240ms ease",
                  gridColumn: i === 0 ? "span 2" : "span 1",
                }}
                onMouseEnter={e => {
                  e.currentTarget.style.transform = "translateY(-4px)";
                  e.currentTarget.style.boxShadow = "var(--shadow-lift)";
                  e.currentTarget.style.borderColor = "var(--gold-soft)";
                }}
                onMouseLeave={e => {
                  e.currentTarget.style.transform = "translateY(0)";
                  e.currentTarget.style.boxShadow = "var(--shadow-card)";
                  e.currentTarget.style.borderColor = "var(--line)";
                }}
              >
                <div style={{ position: "relative", aspectRatio: i === 0 ? "16/9" : "4/3", overflow: "hidden" }}>
                  <HeroImage src={t.image} alt={t.title} label={t.title} fit="cover"/>
                  <div style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(180deg, transparent 40%, rgba(33,28,25,0.55) 100%)",
                  }}/>
                  <div style={{ position: "absolute", bottom: 16, left: 18, right: 18, color: "var(--ivory)" }}>
                    <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.85 }}>
                      {t.tag}
                    </div>
                  </div>
                </div>
                <div style={{ padding: "22px 24px 26px" }}>
                  <h3 className="display-3" style={{ marginBottom: 8 }}>{t.title}</h3>
                  <p style={{ fontSize: 14, color: "var(--espresso-soft)", lineHeight: 1.55, margin: "0 0 18px" }}>
                    {t.blurb}
                  </p>
                  <span style={{
                    fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
                    color: "var(--gold-deep)", display: "inline-flex", alignItems: "center", gap: 6,
                  }}>
                    Explore <ChevronRight size={12}/>
                  </span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* WHY COVENT */}
      <section style={{ background: "var(--espresso)", color: "var(--ivory)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }} className="why-grid">
            <div style={{ position: "relative", aspectRatio: "4/5", borderRadius: 20, overflow: "hidden" }}>
              <HeroImage src="images/waiting-lounge-neon.webp" alt="Waiting lounge with neon face profile" label="waiting lounge · neon face"/>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "var(--gold-soft)", marginBottom: 14 }}>Why Covent</div>
              <h2 className="display-2" style={{ color: "var(--ivory)", marginBottom: 28 }}>
                A boutique clinic with the discipline of <em>medical care</em>.
              </h2>
              <p style={{ color: "rgba(248,244,236,0.78)", fontSize: 17, lineHeight: 1.65, marginBottom: 32, maxWidth: 480 }}>
                We started Covent Clinic because Business Bay deserved aesthetics done properly — by doctors, with a consultation-first approach and a clinical environment, not a salon experience.
              </p>

              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                {[
                  { num: "01", t: "Registered physicians only", b: "Every injectable and energy-based procedure is performed by a doctor on our roster." },
                  { num: "02", t: "Consultation-first",         b: "Free 15-minute consult before any treatment. We say no when no is the right answer." },
                  { num: "03", t: "Transparent “from” pricing", b: "Botox AED 350, fillers AED 750, Endolift AED 2,500 — no surprises at checkout." },
                  { num: "04", t: "Discreet, doctor-led care",  b: "A small clinic with named clinicians. You see the same doctor each time." },
                ].map((it, i) => (
                  <div key={i} style={{ display: "grid", gridTemplateColumns: "48px 1fr", gap: 20, padding: "20px 0", borderTop: "1px solid rgba(228, 206, 154, 0.18)" }}>
                    <span style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--gold-soft)", fontStyle: "italic" }}>{it.num}</span>
                    <div>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--ivory)", marginBottom: 4 }}>{it.t}</div>
                      <div style={{ color: "rgba(248,244,236,0.65)", fontSize: 14, lineHeight: 1.55 }}>{it.b}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRACTITIONERS PREVIEW */}
      <section>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>The team</div>
              <h2 className="display-2">Named doctors, real <em>credentials</em>.</h2>
            </div>
            <a href="#/about" className="btn btn--ghost">Meet the clinic <ChevronRight size={12}/></a>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }} className="team-grid">
            {window.PRACTITIONERS.map((p, i) => (
              <div key={i} style={{
                background: "var(--cream-card)",
                border: "1px solid var(--line)",
                borderRadius: 16,
                padding: 20,
                display: "flex",
                flexDirection: "column",
              }}>
                <div className="placeholder" style={{ aspectRatio: "1/1", borderRadius: 12, marginBottom: 16 }}>
                  headshot · client to supply
                </div>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ fontFamily: "var(--f-display)", fontSize: 22, color: "var(--espresso)" }}>{p.name}</span>
                  <span style={{ fontSize: 12, color: "var(--gold-deep)", display: "inline-flex", alignItems: "center", gap: 4 }}>
                    <Stars value={p.rating} size={10}/> {p.rating}
                  </span>
                </div>
                <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--espresso-soft)" }}>{p.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section style={{ background: "var(--cream-card)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="center" style={{ marginBottom: 56 }}>
            <div className="serif-divider" style={{ marginBottom: 18 }}>recent reviews</div>
            <h2 className="display-2" style={{ maxWidth: 720, margin: "0 auto" }}>
              4.5 stars, 129 reviews — <em>and counting</em>.
            </h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }} className="reviews-grid">
            {window.REVIEWS.map((r, i) => (
              <div key={i} style={{
                background: "var(--ivory)",
                border: "1px solid var(--line)",
                borderRadius: 14,
                padding: "26px 24px",
                display: "flex",
                flexDirection: "column",
              }}>
                <Stars value={5} size={13}/>
                <p style={{ fontFamily: "var(--f-display)", fontSize: 20, lineHeight: 1.35, color: "var(--espresso)", margin: "14px 0 18px", flexGrow: 1 }}>
                  “{r.quote}”
                </p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 8 }}>
                  <div style={{ fontSize: 12, color: "var(--espresso-soft)" }}>
                    <div style={{ color: "var(--charcoal)", fontWeight: 500, marginBottom: 2 }}>{r.author}</div>
                    {r.date} · {r.treatment}
                  </div>
                  <span style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--gold-deep)" }}>{r.source}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="center" style={{ marginTop: 36 }}>
            <a href="#/reviews" className="btn btn--ghost">All reviews <ChevronRight size={12}/></a>
          </div>
        </div>
      </section>

      {/* LOCATION TEASER */}
      <section>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="loc-grid">
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Find us</div>
              <h2 className="display-2" style={{ marginBottom: 24 }}>
                Westbury Tower 1, <em>Business Bay</em>.
              </h2>
              <p className="lede" style={{ marginBottom: 28 }}>
                A short drive from Downtown and DIFC. Office 307, 3rd floor — discreet entrance, easy parking in the tower.
              </p>
              <div className="stack" style={{ gap: 14, marginBottom: 32 }}>
                <div className="row" style={{ gap: 12 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: "rgba(201,162,75,0.15)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--gold-deep)" }}>
                    <PinIcon size={14}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 15, color: "var(--charcoal)", fontWeight: 500 }}>Westbury Tower 1, Office 307</div>
                    <div style={{ fontSize: 13, color: "var(--espresso-soft)" }}>Business Bay, Dubai</div>
                  </div>
                </div>
                <div className="row" style={{ gap: 12 }}>
                  <span style={{ width: 36, height: 36, borderRadius: 999, background: "rgba(201,162,75,0.15)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--gold-deep)" }}>
                    <PhoneIcon size={14}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 15, color: "var(--charcoal)", fontWeight: 500 }}>+971 58 195 5350</div>
                    <div style={{ fontSize: 13, color: "var(--espresso-soft)" }}>Tap to call or WhatsApp</div>
                  </div>
                </div>
              </div>
              <div className="row" style={{ gap: 12 }}>
                <a href="#/contact" className="btn btn--primary">Get directions</a>
                <a href="#/book" className="btn btn--ghost">Book a visit</a>
              </div>
            </div>

            <MapBlock />
          </div>
        </div>
      </section>
    </div>
  );
};

// Live Google Maps embed for the Business Bay clinic.
const MapBlock = () => (
  <div className="card" style={{ aspectRatio: "1/1", overflow: "hidden", borderRadius: 18, position: "relative" }}>
    <iframe
      title="Google Maps for Covent Clinic in Business Bay"
      src="https://www.google.com/maps?q=25.185823,55.274807&z=16&output=embed"
      loading="lazy"
      referrerPolicy="no-referrer-when-downgrade"
      style={{ width: "100%", height: "100%", border: 0, display: "block", filter: "saturate(.9) contrast(1.04)" }}
    />
    <div style={{ position: "absolute", left: 18, bottom: 18, right: 18, background: "rgba(252,250,244,0.94)", backdropFilter: "blur(8px)", borderRadius: 12, padding: "14px 16px", border: "1px solid var(--line)" }}>
      <div style={{ fontFamily: "var(--f-display)", fontSize: 18, color: "var(--espresso)", marginBottom: 2 }}>Covent Clinic</div>
      <div style={{ fontSize: 12, color: "var(--espresso-soft)" }}>25.185823 °N, 55.274807 °E · Business Bay</div>
    </div>
  </div>
);

Object.assign(window, { HomePage, MapBlock });