/* global React, PILLARS, CONCERNS, DOCTORS, FACT_STRIP, CONTACT, LogoMark, SectionHead, ComplianceBadge */
// Page components — Maison Lutétia Dubai

const { useState } = React;

// =====================
// HOME
// =====================
const HomePage = ({ go, openBooking }) => {
  return (
    <div className="page">
      {/* HERO */}
      <section className="hero">
        <div className="hero-content">
          <div>
            <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 40 }}>
              <div className="hairline" style={{ width: 56 }}></div>
              <span className="eyebrow">French aesthetic medicine · Dubai Festival City · Since 2018</span>
            </div>
            <h1 className="display-xl">
              The French art<br />
              of <em style={{ fontStyle: "italic", fontWeight: 300 }}>sublimer</em>,<br />
              in Dubai.
            </h1>
            <p className="body-lg" style={{ marginTop: 32, maxWidth: 480 }}>
              The Dubai flagship of Maison Lutétia — a doctor-led aesthetic-medicine
              clinic in the Parisian tradition. Five medical pillars under one roof in
              Dubai Festival City. <em className="serif" style={{ color: "var(--ink)" }}>Sublimer, jamais changer</em> — enhance, never change.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
              <button className="btn btn-primary" onClick={openBooking}>Book a Consultation</button>
              <button className="btn btn-outline" onClick={() => go("treatments")}>Explore Treatments</button>
            </div>
          </div>
          <div style={{ marginTop: 64 }}>
            <div className="hairline" style={{ marginBottom: 28 }}></div>
            <div className="hero-meta">
              {FACT_STRIP.map((f, i) => (
                <div key={i} className="hero-meta-item">
                  <div className="hero-meta-num">{f.num}<span style={{ fontSize: 14, color: "var(--champagne)", marginLeft: 4 }}>{f.unit}</span></div>
                  <div className="hero-meta-lbl">{f.lbl}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="hero-image">
          <img src="media/interior-reception-dpa.webp" alt="Maison Lutétia Dubai reception — printed-sky dome and Parisian-luxe interior" />
          <div className="hero-image-caption">Reception · Dubai Festival City flagship</div>
        </div>
      </section>

      {/* Marquee */}
      <div className="marquee">
        <div className="marquee-track">
          <span>
            <em>Sublimer, jamais changer</em>
            <span className="marquee-dot">◆</span>
            <em>Doctor-led</em>
            <span className="marquee-dot">◆</span>
            <em>European-trained</em>
            <span className="marquee-dot">◆</span>
            <em>DHA-regulated</em>
            <span className="marquee-dot">◆</span>
            <em>Dubai Festival City</em>
            <span className="marquee-dot">◆</span>
            <em>14 treatment rooms · 1 VIP suite</em>
            <span className="marquee-dot">◆</span>
            <em>Sublimer, jamais changer</em>
            <span className="marquee-dot">◆</span>
            <em>Doctor-led</em>
            <span className="marquee-dot">◆</span>
            <em>European-trained</em>
            <span className="marquee-dot">◆</span>
            <em>DHA-regulated</em>
            <span className="marquee-dot">◆</span>
            <em>Dubai Festival City</em>
            <span className="marquee-dot">◆</span>
            <em>14 treatment rooms · 1 VIP suite</em>
            <span className="marquee-dot">◆</span>
          </span>
        </div>
      </div>

      {/* Five pillars */}
      <section className="section">
        <div className="container">
          <SectionHead
            num="01"
            title={<>Five medical pillars,<br />one Parisian Maison.</>}
            lead="A complete, doctor-led aesthetic care under one roof. Browse by pillar or by concern."
          />
          <div className="pillar-grid">
            {PILLARS.map(p => (
              <div key={p.id} className="pillar-card" onClick={() => go("pillar", p.id)}>
                <div>
                  <div className="pillar-num">{p.num}</div>
                  <div className="pillar-title">{p.title}</div>
                  <div className="pillar-desc">{p.short}</div>
                </div>
                <div className="pillar-arrow">→</div>
              </div>
            ))}
          </div>

          {/* By concern */}
          <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "300px 1fr", gap: 48, alignItems: "start" }}>
            <div>
              <div className="eyebrow">Or — browse by concern</div>
              <div className="display-md" style={{ marginTop: 16 }}>What brings you here today?</div>
            </div>
            <div className="chips">
              {CONCERNS.map(c => (
                <div key={c.id} className="chip" onClick={() => go("pillar", c.pillars[0])}>{c.label}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Editorial split — flagship */}
      <section className="section" style={{ background: "var(--mist)" }}>
        <div className="container">
          <div className="editorial">
            <div className="bleed-image"><img src="media/clinic-entrance.webp" alt="Maison Lutétia Dubai entrance — gold signage" /></div>
            <div>
              <div className="eyebrow">02 · The Dubai Flagship</div>
              <h2 className="display-lg" style={{ margin: "20px 0 28px" }}>A two-thousand-square-metre French clinic in Dubai Festival City.</h2>
              <p className="body-lg" style={{ marginBottom: 20 }}>
                Opened in 2018 and operated by Al-Futtaim, the Dubai Maison sits on the ground floor of Dubai Festival City Mall. Fourteen treatment rooms, an attached Le Salon, a majlis-style lounge, ladies-only spaces and a VIP suite with a private entrance.
              </p>
              <p className="body-md">
                The interior — a printed-sky dome, marble desks, a chandelier-lit reception — is the work of a Dubai fit-out studio drawing on Parisian Haussmann references. The clinic is DHA-regulated; doctors are European-trained.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24, marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
                {FACT_STRIP.map((f, i) => (
                  <div key={i}>
                    <div className="display-sm" style={{ color: "var(--champagne-deep)" }}>{f.num}{f.unit && <span style={{ fontSize: 14, marginLeft: 4 }}>{f.unit}</span>}</div>
                    <div style={{ fontSize: 12, color: "var(--ink-soft)", marginTop: 4 }}>{f.lbl}</div>
                  </div>
                ))}
              </div>
              <button className="btn btn-ghost" style={{ marginTop: 32 }} onClick={() => go("location")}>Visit the flagship →</button>
            </div>
          </div>
        </div>
      </section>

      {/* Doctors teaser */}
      <section className="section">
        <div className="container">
          <SectionHead
            num="03"
            title={<>Doctors who speak<br />your language — in every sense.</>}
            lead="European-trained, DHA-licensed, with a candidacy-led approach. We publish only verified team members."
          />
          <div className="doctor-grid">
            {DOCTORS.slice(0, 4).map(d => (
              <div key={d.slug} className="doctor-card" onClick={() => go("doctor", d.slug)}>
                <div className="doctor-photo"><img src={d.photo} alt={d.name} /></div>
                <div>
                  <div className="doctor-name">{d.name}</div>
                  <div className="doctor-role">{d.role}</div>
                  <div className="doctor-lic">{d.licence}</div>
                </div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 56 }}>
            <p className="body-sm" style={{ maxWidth: 460 }}>
              <ComplianceBadge>DHA · pending verification</ComplianceBadge>{" "}
              Each doctor's licence number, board certification and resident-vs-guest status is being verified before publication.
            </p>
            <button className="btn btn-outline" onClick={() => go("doctors")}>All our doctors →</button>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section style={{ background: "var(--ink)", color: "var(--porcelain)", padding: "96px 0", position: "relative", overflow: "hidden" }}>
        <div className="container" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end" }}>
            <div>
              <div style={{ color: "var(--champagne)" }} className="eyebrow">04 · Book a consultation</div>
              <h2 className="display-lg" style={{ marginTop: 20, color: "var(--porcelain)" }}>
                Begin with a conversation,<br />not a procedure.
              </h2>
              <p className="body-lg" style={{ color: "rgba(250,248,244,0.65)", marginTop: 24, maxWidth: 540 }}>
                Every Maison Lutétia pathway begins with a candidacy-led consultation. No price lists, no menus — your physician maps the protocol that suits your skin, your face, your goals.
              </p>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <button className="btn btn-light" onClick={openBooking}>Book a Consultation</button>
              <a href={"tel:" + CONTACT.phoneClinic.replace(/\s/g, "")} className="btn btn-outline" style={{ borderColor: "rgba(250,248,244,0.4)", color: "var(--porcelain)", justifyContent: "center" }}>
                Call · {CONTACT.phoneClinic}
              </a>
              <div style={{ fontSize: 11, color: "rgba(250,248,244,0.5)", marginTop: 8, letterSpacing: "0.08em" }}>
                WhatsApp · Dubai number pending verification
              </div>
            </div>
          </div>
        </div>
        <div style={{ position: "absolute", bottom: -120, right: -120, color: "rgba(184,153,90,0.08)" }}>
          <LogoMark size={420} />
        </div>
      </section>
    </div>
  );
};

// =====================
// TREATMENTS HUB
// =====================
const TreatmentsPage = ({ go }) => {
  const [activeConcern, setActiveConcern] = useState(null);
  const filteredPillars = activeConcern
    ? PILLARS.filter(p => CONCERNS.find(c => c.id === activeConcern).pillars.includes(p.id))
    : PILLARS;

  return (
    <div className="page">
      <section className="section" style={{ paddingTop: 80, paddingBottom: 40 }}>
        <div className="container">
          <div style={{ maxWidth: 820 }}>
            <div className="eyebrow">Treatments · Five pillars + Le Salon</div>
            <h1 className="display-xl" style={{ marginTop: 20 }}>A complete French clinic.</h1>
            <p className="body-lg" style={{ marginTop: 28, maxWidth: 640 }}>
              Aesthetic Medicine, Dermatology, Plastic Surgery, Hair Transplant — DHI, and Longevity Medicine — five doctor-led pillars practised under one roof in Dubai Festival City. Plus Le Salon for beauty work.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "32px 0 8px" }}>
        <div className="container">
          <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", paddingBottom: 24, borderBottom: "1px solid var(--line)" }}>
            <span className="eyebrow eyebrow-ink">Filter by concern</span>
            <div className="chips">
              <div className={"chip " + (!activeConcern ? "active" : "")} onClick={() => setActiveConcern(null)}>All</div>
              {CONCERNS.map(c => (
                <div key={c.id} className={"chip " + (activeConcern === c.id ? "active" : "")} onClick={() => setActiveConcern(c.id)}>{c.label}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 56 }}>
        <div className="container">
          {filteredPillars.map((p, idx) => (
            <div key={p.id} style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, padding: "56px 0", borderTop: idx > 0 ? "1px solid var(--line)" : "none", alignItems: "center" }}>
              <div style={{ order: idx % 2 === 0 ? 0 : 2 }}>
                <div className="bleed-image" style={{ aspectRatio: "5/4" }}>
                  <img src={p.image} alt={p.title} />
                </div>
              </div>
              <div>
                <div style={{ display: "flex", gap: 16, alignItems: "baseline" }}>
                  <div className="pillar-num">{p.num}</div>
                  <div className="eyebrow">Pillar · {p.title.split(" ")[0]}</div>
                </div>
                <h2 className="display-lg" style={{ marginTop: 16 }}>{p.title}</h2>
                <p className="body-lg" style={{ marginTop: 20 }}>{p.short}</p>
                <ul style={{ listStyle: "none", marginTop: 28, columnCount: 2, columnGap: 28, fontSize: 13, color: "var(--ink-soft)" }}>
                  {p.treatments.slice(0, 6).map(t => (
                    <li key={t.name} style={{ padding: "6px 0", breakInside: "avoid" }}>· {t.name}</li>
                  ))}
                </ul>
                <button className="btn btn-outline" style={{ marginTop: 32 }} onClick={() => go("pillar", p.id)}>Explore {p.title} →</button>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

// =====================
// PILLAR DETAIL
// =====================
const PillarPage = ({ slug, go, openBooking }) => {
  const p = PILLARS.find(x => x.id === slug);
  if (!p) return <div className="page" style={{ padding: 80 }}>Not found.</div>;
  const relatedDoctors = DOCTORS.filter(d => d.pillar === p.id);

  return (
    <div className="page">
      {/* Pillar hero */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", minHeight: 540 }}>
        <div style={{ padding: "80px 64px", display: "flex", flexDirection: "column", justifyContent: "center", borderRight: "1px solid var(--line)" }}>
          <button onClick={() => go("treatments")} style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 24, textAlign: "left" }}>← All Treatments</button>
          <div style={{ display: "flex", gap: 14, alignItems: "baseline" }}>
            <div className="pillar-num" style={{ fontSize: 20 }}>Pillar {p.num}</div>
            <ComplianceBadge>DHA-compliant copy</ComplianceBadge>
          </div>
          <h1 className="display-xl" style={{ marginTop: 24 }}>{p.title}</h1>
          <p className="body-lg" style={{ marginTop: 24, maxWidth: 480 }}>{p.short}</p>
          <p className="body-md" style={{ marginTop: 16, fontStyle: "italic", color: "var(--champagne-deep)" }}>{p.titleFr}</p>
          <div style={{ marginTop: 36, display: "flex", gap: 12 }}>
            <button className="btn btn-primary" onClick={openBooking}>Book a Consultation</button>
          </div>
        </div>
        <div style={{ background: "var(--mist)", position: "relative", overflow: "hidden" }}>
          <img src={p.image} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", inset: 0 }} />
        </div>
      </section>

      {/* Treatments list */}
      <section className="section">
        <div className="container">
          <SectionHead num="01" title="Treatments offered" lead="What it is · who it's for · how it works · downtime — discussed at your consultation. No prices: by consultation." />
          <div>
            {p.treatments.map((t, i) => (
              <div key={t.name} className="tx-row" onClick={openBooking}>
                <div className="tx-num">{String(i + 1).padStart(2, "0")}</div>
                <div>
                  <div className="tx-name">{t.name}</div>
                </div>
                <div className="tx-desc">{t.desc}</div>
                <div className="tx-meta">{t.duration} · By consultation</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process — 4-step */}
      <section className="section" style={{ background: "var(--mist)" }}>
        <div className="container">
          <SectionHead num="02" title="The Maison pathway" lead="Every treatment follows the same calm, candidacy-led process." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
              { num: "i", title: "Consultation", body: "A 30–60 minute conversation with a physician. History, goals, candidacy, options. No procedure that day unless agreed." },
              { num: "ii", title: "Bespoke protocol", body: "Your physician designs a pathway — single session, or a series spaced over weeks/months. No menus, no upselling." },
              { num: "iii", title: "Treatment", body: "Performed by your physician (or, where appropriate, a senior nurse practitioner) in our treatment rooms or VIP suite." },
              { num: "iv", title: "Follow-up & care", body: "Aftercare guidance, complimentary follow-up consultations, and a long-term plan. We measure results, not promises." }
            ].map((s, i) => (
              <div key={i} style={{ padding: "32px 0", borderTop: "1px solid var(--line)" }}>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", color: "var(--champagne)", fontSize: 14 }}>Step {s.num}</div>
                <div className="display-sm" style={{ marginTop: 12 }}>{s.title}</div>
                <p className="body-sm" style={{ marginTop: 12 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section">
        <div className="container">
          <SectionHead num="03" title="Frequently asked" />
          {[
            { q: "Are prices listed online?", a: "No. Every Maison Lutétia pathway is candidacy-led, with the protocol and cost discussed transparently at consultation. Avoid clinics that quote medical procedures by SMS." },
            { q: "Are results guaranteed?", a: "Aesthetic medicine cannot guarantee outcomes — DHA advertising rules forbid it, and so does our medical conscience. Your physician will discuss realistic expectations." },
            { q: "Who performs the treatment?", a: "Your physician — in some cases, a senior nurse practitioner working under physician supervision. Surgery is performed by board-certified plastic surgeons only." },
            { q: "Is the clinic licensed?", a: "Maison Lutétia Dubai is operated by Lutetia Br Of Al Futtaim Aesthetics Clinics, regulated by the Dubai Health Authority. DHA establishment licence available on request." }
          ].map((f, i) => (
            <div key={i} style={{ padding: "28px 0", borderBottom: "1px solid var(--line)" }}>
              <div className="display-sm" style={{ marginBottom: 8 }}>{f.q}</div>
              <p className="body-md">{f.a}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Related doctors */}
      {relatedDoctors.length > 0 && (
        <section className="section" style={{ background: "var(--mist)" }}>
          <div className="container">
            <SectionHead num="04" title={"Physicians in " + p.title} />
            <div className="doctor-grid">
              {relatedDoctors.map(d => (
                <div key={d.slug} className="doctor-card" onClick={() => go("doctor", d.slug)}>
                  <div className="doctor-photo"><img src={d.photo} alt={d.name} /></div>
                  <div>
                    <div className="doctor-name">{d.name}</div>
                    <div className="doctor-role">{d.role}</div>
                    <div className="doctor-lic">{d.licence}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}
    </div>
  );
};

Object.assign(window, { HomePage, TreatmentsPage, PillarPage });