/* global React */

// ============================================================
// ABOUT / TEAM
// ============================================================
const AboutPage = () => (
  <div className="page-enter">
    <PageHeader
      eyebrow="About"
      title={<>A small, <em>doctor-led</em> clinic in Business Bay.</>}
      lede="Covent Clinic is a registered specialty clinic offering doctor-led aesthetic and cosmetic-dermatology care. We're a small team — you'll meet the same clinicians each visit."
    />

    <section style={{ padding: "16px 0 64px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }} className="about-grid">
          <div style={{ borderRadius: 18, overflow: "hidden", aspectRatio: "4/5" }}>
            <HeroImage src="images/reception-logo-roses.webp" alt="Reception with roses" label="reception · waiting area"/>
          </div>
          <div>
            <h2 className="display-2" style={{ marginBottom: 24 }}>Why we exist.</h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--espresso)", marginBottom: 18 }}>
              Business Bay has no shortage of beauty rooms. What it didn't have was a small, registered clinic where every injectable, every laser pass, every prescription is in the hands of an actual doctor — not a technician with a weekend certificate.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--espresso-soft)", marginBottom: 24 }}>
              We opened Covent Clinic to do aesthetics the way the doctors among us would want it done themselves: conservative, consultation-first, and honest about what is and isn't realistic.
            </p>
            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16,
              padding: "20px 24px",
              background: "var(--cream-card)", border: "1px solid var(--line)", borderRadius: 12,
            }}>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--espresso-soft)" }}>License</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 18, color: "var(--espresso)" }}>DHA · Specialty Clinic</div>
                <div style={{ fontSize: 11, color: "var(--espresso-soft)", marginTop: 2, fontStyle: "italic" }}>numbers to confirm with client</div>
              </div>
              <div>
                <div style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--espresso-soft)" }}>Category</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 18, color: "var(--espresso)" }}>Cosmetic dermatology</div>
                <div style={{ fontSize: 11, color: "var(--espresso-soft)", marginTop: 2 }}>Specialty Clinic · Dermatology</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Practitioners full */}
    <section style={{ background: "var(--cream-card)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>The team</div>
          <h2 className="display-2">Named clinicians, real ratings.</h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="team-full-grid">
          {window.PRACTITIONERS.map((p, i) => (
            <div key={i} style={{
              display: "grid",
              gridTemplateColumns: "180px 1fr",
              gap: 28,
              background: "var(--ivory)",
              border: "1px solid var(--line)",
              borderRadius: 16,
              padding: 24,
            }}>
              <div className="placeholder" style={{ aspectRatio: "4/5", borderRadius: 12 }}>
                headshot
              </div>
              <div>
                <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 8 }}>
                  <div>
                    <div style={{ fontFamily: "var(--f-display)", fontSize: 28, color: "var(--espresso)" }}>{p.name}</div>
                    <div style={{ fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--gold-deep)" }}>{p.role}</div>
                  </div>
                  <div style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--gold-deep)" }}>
                    <Stars value={p.rating} size={11}/>
                    <span style={{ fontSize: 13, fontWeight: 500 }}>{p.rating}</span>
                  </div>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "var(--espresso-soft)", margin: "10px 0 16px" }}>{p.bio}</p>
                <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
                  {p.specialties.map((s, k) => (
                    <span key={k} style={{ fontSize: 11, padding: "5px 10px", background: "rgba(201,162,75,0.12)", color: "var(--gold-deep)", borderRadius: 999, letterSpacing: "0.04em" }}>{s}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 32, padding: "16px 20px", borderRadius: 12, background: "rgba(201,162,75,0.08)", border: "1px solid rgba(201,162,75,0.25)", fontSize: 13, color: "var(--espresso)", lineHeight: 1.6 }}>
          <strong>A note on credentials.</strong> Full DHA license numbers and individual specialties are being verified for publication. Patients can ask to see credentials at any consultation.
        </div>
      </div>
    </section>

    {/* CTA strip */}
    <section style={{ padding: "72px 0" }}>
      <div className="container center">
        <h2 className="display-2" style={{ marginBottom: 18 }}>Ready to meet the team?</h2>
        <p className="lede" style={{ margin: "0 auto 28px" }}>A consultation is the start of every treatment plan, and it's always free.</p>
        <a href="#/book" className="btn btn--primary btn--lg">Book your consultation <ChevronRight size={12}/></a>
      </div>
    </section>
  </div>
);

// ============================================================
// REVIEWS
// ============================================================
const ReviewsPage = () => {
  const moreQuotes = [
    { quote: "She listened first, suggested less, and the result is exactly what I hoped for.", author: "Anonymous", date: "Apr 2026", source: "Fresha", treatment: "Lip filler" },
    { quote: "The clinic itself is calm and clean — feels more like a doctor's office than a salon, which is what I wanted.", author: "Anonymous", date: "Apr 2026", source: "Fresha", treatment: "Profhilo" },
    { quote: "Walked in nervous, walked out wishing I'd come sooner.", author: "Anonymous", date: "Mar 2026", source: "BookBeauty", treatment: "Botox" },
  ];
  const all = [...window.REVIEWS, ...moreQuotes];

  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Reviews"
        title={<>What our <em>patients</em> say.</>}
        lede="Verified reviews on Fresha and BookBeauty. We publish what's said about us — verbatim, with the patient's first name and the source platform."
      />

      <section style={{ padding: "16px 0 56px" }}>
        <div className="container" style={{ maxWidth: 880 }}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 18,
            marginBottom: 56,
          }}>
            <div className="card" style={{ padding: "28px 32px", textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 64, color: "var(--gold-deep)", lineHeight: 1 }}>4.5</div>
              <div style={{ margin: "10px 0 6px" }}><Stars value={4.5} size={16}/></div>
              <div style={{ fontSize: 13, color: "var(--espresso-soft)" }}>129 reviews · Fresha</div>
              <a className="btn btn--ghost btn--sm" style={{ marginTop: 18 }}
                href="https://www.fresha.com/a/covent-clinic-dubai-westburry-business-tower-burj-khalifa-blvd-burj-khalifa-boulevard-gfhyh4ea"
                target="_blank" rel="noopener">
                View on Fresha <ChevronRight size={12}/>
              </a>
            </div>
            <div className="card" style={{ padding: "28px 32px", textAlign: "center" }}>
              <div style={{ fontFamily: "var(--f-display)", fontSize: 64, color: "var(--gold-deep)", lineHeight: 1 }}>4.5</div>
              <div style={{ margin: "10px 0 6px" }}><Stars value={4.5} size={16}/></div>
              <div style={{ fontSize: 13, color: "var(--espresso-soft)" }}>619 reviews · BookBeauty</div>
              <a className="btn btn--ghost btn--sm" style={{ marginTop: 18 }} href="https://bookbeauty.ae/listing/covent-clinic/" target="_blank" rel="noopener">
                View on BookBeauty <ChevronRight size={12}/>
              </a>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
            {all.map((r, i) => (
              <div key={i} style={{
                background: "var(--cream-card)",
                border: "1px solid var(--line)",
                borderRadius: 14,
                padding: "26px 28px",
              }}>
                <Stars value={5} size={13}/>
                <p style={{ fontFamily: "var(--f-display)", fontSize: 22, lineHeight: 1.4, color: "var(--espresso)", margin: "14px 0 18px" }}>
                  “{r.quote}”
                </p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div style={{ fontSize: 13, 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.14em", textTransform: "uppercase", color: "var(--gold-deep)" }}>{r.source}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================================
// PRICING
// ============================================================
const PricingPage = () => {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Pricing"
        title={<>Transparent, <em>“from”</em> pricing.</>}
        lede="Every treatment we publish a price for is the “from” price — the minimum starting point. Final cost is confirmed at your free consultation."
      />

      <section style={{ padding: "16px 0 64px" }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <div className="card" style={{ overflow: "hidden", background: "var(--cream-card)" }}>
            <div style={{
              display: "grid",
              gridTemplateColumns: "1fr 180px 1fr",
              gap: 24,
              padding: "16px 28px",
              background: "var(--espresso)", color: "var(--gold-soft)",
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
            }}>
              <span>Treatment</span><span>From</span><span>Notes</span>
            </div>
            {window.PRICE_TABLE.map((row, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "1fr 180px 1fr",
                gap: 24,
                padding: "22px 28px",
                borderTop: i > 0 ? "1px solid var(--line)" : "none",
                alignItems: "center",
              }}>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 20, color: "var(--espresso)" }}>{row.name}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 22, color: row.price === "Free" ? "#1B8A5B" : "var(--gold-deep)" }}>{row.price}</div>
                <div style={{ fontSize: 13, color: "var(--espresso-soft)" }}>{row.notes || "—"}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 24, padding: "20px 24px", borderRadius: 12, border: "1px dashed var(--line-strong)", fontSize: 13, color: "var(--espresso-soft)", lineHeight: 1.6 }}>
            <strong style={{ color: "var(--espresso)" }}>How pricing works.</strong> Prices are denominated in AED and include VAT. Where multiple sessions are recommended (e.g. fat dissolving, laser hair removal), package pricing is offered after your consultation. Membership and special offers are surfaced live on our Fresha page.
          </div>
        </div>
      </section>
    </div>
  );
};

// ============================================================
// CONTACT
// ============================================================
const ContactPage = () => {
  return (
    <div className="page-enter">
      <PageHeader
        eyebrow="Visit"
        title={<>Westbury Tower 1, <em>Business Bay</em>.</>}
        lede="A short drive from Downtown and DIFC. Discreet entrance, tower parking, 3rd-floor clinic."
      />

      <section style={{ padding: "16px 0 80px" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48 }} className="contact-grid">
            <div className="stack" style={{ gap: 24 }}>
              <div className="card" style={{ padding: "26px 28px" }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Address</div>
                <p style={{ fontFamily: "var(--f-display)", fontSize: 24, color: "var(--espresso)", lineHeight: 1.4, margin: 0 }}>
                  Westbury Tower 1, Office 307<br/>
                  3rd floor · Business Bay<br/>
                  Dubai, UAE
                </p>
                <a href="https://maps.google.com/?q=25.185823,55.274807" target="_blank" rel="noopener" className="btn btn--ghost btn--sm" style={{ marginTop: 16 }}>
                  Open in Maps <ChevronRight size={12}/>
                </a>
              </div>

              <div className="card" style={{ padding: "26px 28px" }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Contact</div>
                <div className="stack" style={{ gap: 14 }}>
                  <a href="tel:+971581955350" style={{ display: "flex", gap: 14, alignItems: "center" }}>
                    <span style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(201,162,75,0.15)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--gold-deep)" }}>
                      <PhoneIcon size={16}/>
                    </span>
                    <span>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 20, color: "var(--charcoal)" }}>+971 58 195 5350</div>
                      <div style={{ fontSize: 12, color: "var(--espresso-soft)" }}>Mon–Sat · 10:00–22:00</div>
                    </span>
                  </a>
                  <a href="https://wa.me/971581955350" target="_blank" rel="noopener" style={{ display: "flex", gap: 14, alignItems: "center" }}>
                    <span style={{ width: 40, height: 40, borderRadius: 999, background: "rgba(37,211,102,0.14)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#1DB855" }}>
                      <WhatsAppIcon size={16}/>
                    </span>
                    <span>
                      <div style={{ fontFamily: "var(--f-display)", fontSize: 20, color: "var(--charcoal)" }}>WhatsApp</div>
                      <div style={{ fontSize: 12, color: "var(--espresso-soft)" }}>Typically replies in minutes</div>
                    </span>
                  </a>
                </div>
              </div>

              <div className="card" style={{ padding: "26px 28px" }}>
                <div className="eyebrow" style={{ marginBottom: 12 }}>Hours</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px 24px", fontSize: 14, color: "var(--espresso)" }}>
                  {[
                    ["Monday", "10:00 – 22:00"],
                    ["Tuesday", "10:00 – 22:00"],
                    ["Wednesday", "10:00 – 22:00"],
                    ["Thursday", "10:00 – 22:00"],
                    ["Friday", "10:00 – 22:00"],
                    ["Saturday", "10:00 – 22:00"],
                    ["Sunday", "Closed"],
                  ].map(([d, h], i) => (
                    <React.Fragment key={i}>
                      <span style={{ color: "var(--espresso-soft)" }}>{d}</span>
                      <span style={{ textAlign: "right", color: h === "Closed" ? "var(--blush-deep)" : "var(--espresso)" }}>{h}</span>
                    </React.Fragment>
                  ))}
                </div>
                <div style={{ marginTop: 14, fontSize: 11, fontStyle: "italic", color: "var(--espresso-soft)" }}>
                  Sunday hours: confirm before visiting.
                </div>
              </div>
            </div>

            <div>
              <MapBlock/>
              <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <a href="#/book" className="btn btn--primary">Book a consultation</a>
                <a href="https://www.fresha.com/a/covent-clinic-dubai-westburry-business-tower-burj-khalifa-blvd-burj-khalifa-boulevard-gfhyh4ea" target="_blank" rel="noopener" className="btn btn--ghost">Book on Fresha</a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { AboutPage, ReviewsPage, PricingPage, ContactPage });
