/* global React */
// Shared components — Maison Lutétia Dubai

const { useState, useEffect } = React;

// Infinity-knot monogram — the brand mark. Vector inline so it inherits color.
const LogoMark = ({ size = 34, color }) => (
  <svg viewBox="0 0 34 31" width={size} height={size * 31 / 34} style={{ color: color || "currentColor", display: "block" }}>
    <path fill="currentColor" d="M14.6 18.2v-.3h.1l.5-.1V12.5a3 3 0 0 0-.4-.2v-.2c.5 0 .9-.2 1.2-.5h.3V17.6l.5.2h.1c.7 0 1.2-.4 1.5-1v-.1h.2v1.5h-4z"/>
    <path fill="currentColor" d="M20.5 19.3c-.6.8-2 2-3.7 2-.7 0-1.3-.2-1.8-.5-.6-.3-1.1-.7-1.5-1.3a6 6 0 0 1-.8-1.2 7.3 7.3 0 0 1 0-6l-3-4.2h1a7 7 0 0 0 3-1c1.6-1 2.5-2.5 2.3-4C15.9 2 15 .8 13.8.3c-.5-.2-1-.3-1.6-.3-1 0-2 .3-3 .8v1.3c.5-.4 1-.7 1.5-.8.8-.3 2.2-.6 3.6 0 1 .5 1.3 1.3 1.2 2-.1 1.1-1.2 2.3-2.4 3a6 6 0 0 1-3.4.7c-.6 0-1.4 0-3.2-.5-1.1-.4-1.8-.8-2-1.2-.1-.6.7-1.1 1-1.3h.1v.1l1.4 2 1.6.3-2.2-3a1 1 0 0 0-.7-.4h-.2a1 1 0 0 0-.6.2c-.6.5-1 1.3-.8 2C4 6 4.5 6.7 5.4 7c1 .5 2.1.8 3 1l3.2 4.6a8 8 0 0 0 0 5.5l.1.3L7 16.5c-1-.4-2-.5-2.7-.5a4 4 0 0 0-2.7 1 4 4 0 0 0-1.3 3c0 2.3 1.5 3.2 2.6 3.3v-1c-.5-.2-2.2-.9-2.2-2.6 0-1 .9-2.8 3.6-2.8.6 0 1.7.4 2.2.6l6.1 2.3.4.5c1 1.1 2.3 1.8 3.7 1.8s3-.7 4.2-2.4l-.3-.4z"/>
    <path fill="currentColor" d="M12.8 11.4c.6-.8 2-2 3.7-2a4.6 4.6 0 0 1 3.3 1.8 7.3 7.3 0 0 1 .7 7.1l3 4.3h-1a7 7 0 0 0-3 1c-1.6 1-2.4 2.5-2.2 4 0 1.2 1 2.3 2.2 2.8l1.5.3c1 0 2-.3 3-.8v-1.3c-.4.4-1 .6-1.4.8-.9.3-2.2.6-3.6 0-1-.5-1.4-1.3-1.3-2 .2-1.1 1.2-2.3 2.5-3a6 6 0 0 1 3.3-.8c.6 0 1.5 0 3.3.6 1 .4 1.8.8 2 1.2.1.6-.7 1.1-1 1.2h-.2l-1.4-2-1.5-.3 2.1 3c.2.2.5.4.8.4h.2l.6-.2c.6-.6.9-1.3.8-2-.1-.8-.5-1.4-1.3-1.8-1-.5-2.2-.8-3-1l-3.2-4.6a8 8 0 0 0 0-5.5l-.2-.3 4.9 1.9c1 .4 2 .5 2.6.5a4 4 0 0 0 2.8-1 4 4 0 0 0 1.2-3c0-2.3-1.5-3.2-2.6-3.3v1c.6.1 2.2.9 2.2 2.5 0 1.1-.8 2.8-3.5 2.8-.6 0-1.8-.3-2.3-.5l-6-2.4a6 6 0 0 0-.5-.5 5 5 0 0 0-3.7-1.7c-1.4 0-3 .7-4.1 2.3 0 .2.2.3.3.5zM4.2 14.7c.8 0 1.6-.1 2.7-.5l4-1.6-.6-.9-3.9 1.5c-.5.2-1.6.5-2.2.5C1.5 13.7.7 12 .7 11c0-1.6 1.6-2.4 2.1-2.5v-1c-1 0-2.6 1-2.6 3.4a4 4 0 0 0 1.3 3 4 4 0 0 0 2.7 1zM13.7 23.6a7 7 0 0 0-4-1l1.8-2.5-1-.4-2.1 3c-.9.2-2 .5-3 1-.9.4-1.2 1-1.3 1.7-.1.8.2 1.5.8 2a1 1 0 0 0 .8.3c.3 0 .5-.2.7-.4l2.2-3-1.6.4-1.3 1.9h-.2c-.3 0-1.1-.6-1-1.2.2-.4.9-.8 2-1.2a10 10 0 0 1 3.2-.6 6 6 0 0 1 3.4.9c1.2.6 2.3 1.8 2.4 2.8.1.8-.3 1.6-1.2 2-1.4.7-2.8.4-3.6.1-.5-.2-1-.4-1.5-.8V30c1 .5 2 .8 3 .8l1.5-.3a3.5 3.5 0 0 0 2.3-2.9c.2-1.4-.7-2.8-2.3-3.9z"/>
    <path fill="currentColor" d="M19.5 7a7 7 0 0 0 4 1l-1.8 2.6 1 .4L25 8c.9-.2 2-.5 3-1 .8-.4 1.2-1 1.3-1.7.1-.8-.2-1.6-.8-2a1 1 0 0 0-.8-.3 1 1 0 0 0-.8.4l-2.1 3c.4 0 .9-.2 1.5-.4l1.4-1.9h.1c.4 0 1.2.6 1 1.2-.1.4-.8.8-2 1.2a10 10 0 0 1-3.2.5 6 6 0 0 1-3.3-.8c-1.3-.6-2.3-1.8-2.5-2.8 0-.8.3-1.6 1.3-2 1.4-.7 2.7-.4 3.6-.1.5.2 1 .4 1.5.8V.8c-1-.5-2-.8-3-.8-.6 0-1.1.1-1.6.3a3.5 3.5 0 0 0-2.2 2.8c-.2 1.5.6 3 2.2 4zM29 16c-.7 0-1.6.1-2.6.5l-4 1.6.6.9 3.8-1.5c.5-.2 1.7-.6 2.3-.6 2.7 0 3.5 1.7 3.5 2.8 0 1.7-1.6 2.4-2.2 2.6v1c1.1 0 2.6-1 2.6-3.4a4 4 0 0 0-1.2-3 4 4 0 0 0-2.8-1z"/>
  </svg>
);

const Logo = ({ go }) => (
  <div className="logo" onClick={() => go("home")}>
    <LogoMark size={36} />
    <div className="logo-stack">
      <div className="logo-text">Maison Lutétia</div>
      <div className="logo-sub">Dubai · Since 2018</div>
    </div>
  </div>
);

const Navbar = ({ route, go, lang, setLang, openBooking }) => {
  const links = [
    { id: "treatments", label: "Treatments" },
    { id: "doctors", label: "Our Doctors" },
    { id: "about", label: "About" },
    { id: "location", label: "Dubai Location" },
    { id: "before-after", label: "Before & After" },
    { id: "contact", label: "Contact" }
  ];
  const isActive = (id) => route.page === id || (id === "treatments" && route.page === "pillar");
  return (
    <nav className="nav">
      <div className="nav-inner">
        <Logo go={go} />
        <div className="nav-links">
          {links.map(l => (
            <div key={l.id} className={"nav-link " + (isActive(l.id) ? "active" : "")} onClick={() => go(l.id)}>{l.label}</div>
          ))}
        </div>
        <div className="nav-right">
          <div className="lang-switcher" aria-label="Language">
            {["EN", "AR", "FR"].map((c, i) => (
              <React.Fragment key={c}>
                {i > 0 && <span className="sep">·</span>}
                <button className={lang === c.toLowerCase() ? "active" : ""} onClick={() => setLang(c.toLowerCase())}>{c}</button>
              </React.Fragment>
            ))}
          </div>
          <button className="btn btn-primary" onClick={openBooking}>Book a Consultation</button>
        </div>
      </div>
    </nav>
  );
};

const Footer = ({ go, openBooking }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 24 }}>
            <LogoMark size={42} color="#C9A24B" />
            <div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 20, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--porcelain)" }}>Maison Lutétia</div>
              <div style={{ fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase", color: "var(--champagne)", marginTop: 4 }}>Dubai · Since 2018</div>
            </div>
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.65, color: "rgba(250,248,244,0.65)", maxWidth: 320 }}>
            The Dubai flagship of the Maison Lutétia Paris aesthetic-medicine clinic — doctor-led care in the French tradition. Operated by Al-Futtaim. DHA-regulated.
          </p>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, color: "var(--champagne)", marginTop: 24 }}>« Sublimer, jamais changer »</p>
        </div>
        <div>
          <h4>Treatments</h4>
          <ul>
            <li><a onClick={() => go("pillar", "aesthetic-medicine")}>Aesthetic Medicine</a></li>
            <li><a onClick={() => go("pillar", "dermatology")}>Dermatology</a></li>
            <li><a onClick={() => go("pillar", "plastic-surgery")}>Plastic Surgery</a></li>
            <li><a onClick={() => go("pillar", "hair-transplant")}>Hair Transplant — DHI</a></li>
            <li><a onClick={() => go("pillar", "longevity")}>Longevity Medicine</a></li>
            <li><a onClick={() => go("pillar", "le-salon")}>Le Salon</a></li>
          </ul>
        </div>
        <div>
          <h4>Maison</h4>
          <ul>
            <li><a onClick={() => go("about")}>About</a></li>
            <li><a onClick={() => go("doctors")}>Our Doctors</a></li>
            <li><a onClick={() => go("location")}>Dubai Location</a></li>
            <li><a onClick={() => go("before-after")}>Before & After</a></li>
            <li><a onClick={() => go("contact")}>Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Visit</h4>
          <ul>
            <li>Dubai Festival City Mall</li>
            <li>Ground floor, Crescent Dr.</li>
            <li>Ras Al Khor, Dubai</li>
            <li style={{ marginTop: 12 }}>Mon–Thu · 10:00–20:00</li>
            <li>Fri · 12:00–20:00</li>
            <li>Sat–Sun · 10:00–20:00</li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li style={{ color: "var(--porcelain)" }}>Clinic · +971 4 706 4000</li>
            <li>Le Salon · +971 4 706 4060</li>
            <li style={{ marginTop: 8, fontSize: 12 }}>lutetia.clinic@alfuttaim.com</li>
            <li style={{ marginTop: 16 }}><button className="btn btn-outline" style={{ borderColor: "var(--champagne)", color: "var(--champagne)" }} onClick={openBooking}>Book a Consultation</button></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Maison Lutétia Dubai · Operated by Lutetia Br Of Al Futtaim Aesthetics Clinics · DHA establishment licence on request</div>
        <div style={{ display: "flex", gap: 24 }}>
          <a>Privacy</a><a>Terms</a><a>Compliance & Consent</a>
        </div>
      </div>
    </div>
  </footer>
);

// Booking flow — 4-step modal
const BookingFlow = ({ open, onClose }) => {
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ pillar: null, treatment: null, doctor: "any", date: null, time: null, name: "", phone: "", email: "", notes: "", consent: false });

  useEffect(() => { if (!open) { setStep(0); } }, [open]);
  if (!open) return null;

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const steps = ["Service", "Doctor", "Time", "Details", "Confirmed"];
  const canNext = () => {
    if (step === 0) return data.pillar && data.treatment;
    if (step === 1) return true;
    if (step === 2) return data.date && data.time;
    if (step === 3) return data.name && data.phone && data.consent;
    return false;
  };

  const today = new Date();
  const days = Array.from({ length: 7 }, (_, i) => {
    const d = new Date(today); d.setDate(today.getDate() + i + 1);
    return { date: d, lbl: d.toLocaleDateString("en-GB", { weekday: "short" }), num: d.getDate(), mo: d.toLocaleDateString("en-GB", { month: "short" }) };
  });
  const times = ["10:00", "11:30", "13:00", "14:30", "16:00", "17:30", "19:00"];

  const pillarObj = window.PILLARS.find(p => p.id === data.pillar);

  return (
    <div className="booking-overlay" onClick={onClose}>
      <div className="booking-panel" onClick={e => e.stopPropagation()}>
        <div className="booking-header">
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>Book a Consultation</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 22 }}>{step < 4 ? steps[step] : "Reservation requested"}</div>
          </div>
          <button onClick={onClose} style={{ fontSize: 22, color: "var(--ink-soft)" }} aria-label="Close">×</button>
        </div>
        <div className="booking-body">
          <div className="booking-step-row">
            {[0, 1, 2, 3].map(i => (
              <div key={i} className={"booking-step-dot " + (step > i ? "done" : step === i ? "current" : "")} />
            ))}
          </div>

          {step === 0 && (
            <>
              <div className="form-label" style={{ marginBottom: 14 }}>1 · Choose a pillar</div>
              <div style={{ marginBottom: 28 }}>
                {window.PILLARS.map(p => (
                  <div key={p.id} className={"choice-card " + (data.pillar === p.id ? "selected" : "")} onClick={() => { update("pillar", p.id); update("treatment", null); }}>
                    <div>
                      <div className="choice-card-title">{p.title}</div>
                      <div className="choice-card-meta">{p.short.split(" — ")[0]}</div>
                    </div>
                    <div className="choice-card-check">{data.pillar === p.id ? "✓" : ""}</div>
                  </div>
                ))}
              </div>
              {pillarObj && (
                <>
                  <div className="form-label" style={{ marginBottom: 14 }}>2 · Treatment of interest</div>
                  <select className="form-input" value={data.treatment || ""} onChange={e => update("treatment", e.target.value)} style={{ borderBottomColor: "var(--line)" }}>
                    <option value="">Select a treatment…</option>
                    {pillarObj.treatments.map(t => <option key={t.name} value={t.name}>{t.name}</option>)}
                    <option value="not-sure">Not sure yet — advise me</option>
                  </select>
                </>
              )}
            </>
          )}

          {step === 1 && (
            <>
              <div className="form-label" style={{ marginBottom: 14 }}>Preferred doctor (optional)</div>
              <div className={"choice-card " + (data.doctor === "any" ? "selected" : "")} onClick={() => update("doctor", "any")}>
                <div>
                  <div className="choice-card-title">No preference</div>
                  <div className="choice-card-meta">Match me with the most suitable physician</div>
                </div>
                <div className="choice-card-check">{data.doctor === "any" ? "✓" : ""}</div>
              </div>
              {window.DOCTORS.filter(d => !data.pillar || d.pillar === data.pillar).slice(0, 5).map(d => (
                <div key={d.slug} className={"choice-card " + (data.doctor === d.slug ? "selected" : "")} onClick={() => update("doctor", d.slug)}>
                  <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
                    <img src={d.photo} alt="" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", filter: "grayscale(30%)" }} />
                    <div>
                      <div className="choice-card-title" style={{ fontSize: 16 }}>{d.name}</div>
                      <div className="choice-card-meta">{d.role}</div>
                    </div>
                  </div>
                  <div className="choice-card-check">{data.doctor === d.slug ? "✓" : ""}</div>
                </div>
              ))}
            </>
          )}

          {step === 2 && (
            <>
              <div className="form-label" style={{ marginBottom: 14 }}>Select a day</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 6, marginBottom: 28 }}>
                {days.map((d, i) => (
                  <button key={i} onClick={() => update("date", d)} style={{
                    padding: "14px 4px", border: "1px solid " + (data.date && data.date.num === d.num ? "var(--ink)" : "var(--line)"),
                    background: data.date && data.date.num === d.num ? "var(--ink)" : "transparent",
                    color: data.date && data.date.num === d.num ? "var(--porcelain)" : "var(--ink)", textAlign: "center"
                  }}>
                    <div style={{ fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase", opacity: 0.7 }}>{d.lbl}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 22, marginTop: 4 }}>{d.num}</div>
                    <div style={{ fontSize: 10, opacity: 0.7, marginTop: 2 }}>{d.mo}</div>
                  </button>
                ))}
              </div>
              <div className="form-label" style={{ marginBottom: 14 }}>Select a time</div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6 }}>
                {times.map(t => (
                  <button key={t} onClick={() => update("time", t)} style={{
                    padding: "12px 4px", border: "1px solid " + (data.time === t ? "var(--ink)" : "var(--line)"),
                    background: data.time === t ? "var(--ink)" : "transparent",
                    color: data.time === t ? "var(--porcelain)" : "var(--ink)", fontSize: 13, letterSpacing: "0.04em"
                  }}>{t}</button>
                ))}
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <div className="form-field">
                <label className="form-label">Full name</label>
                <input className="form-input" value={data.name} onChange={e => update("name", e.target.value)} placeholder="Mme / M." />
              </div>
              <div className="form-grid">
                <div className="form-field">
                  <label className="form-label">Phone (UAE)</label>
                  <input className="form-input" value={data.phone} onChange={e => update("phone", e.target.value)} placeholder="+971" />
                </div>
                <div className="form-field">
                  <label className="form-label">Email</label>
                  <input className="form-input" value={data.email} onChange={e => update("email", e.target.value)} placeholder="you@example.com" />
                </div>
              </div>
              <div className="form-field">
                <label className="form-label">Anything else?</label>
                <textarea className="form-input" rows={3} value={data.notes} onChange={e => update("notes", e.target.value)} placeholder="(Optional) please do not include medical history." style={{ resize: "vertical", borderBottom: "1px solid var(--line)" }} />
              </div>
              <label style={{ display: "flex", gap: 12, alignItems: "flex-start", fontSize: 12, color: "var(--ink-soft)", lineHeight: 1.55, cursor: "pointer" }}>
                <input type="checkbox" checked={data.consent} onChange={e => update("consent", e.target.checked)} style={{ marginTop: 3, accentColor: "var(--ink)" }} />
                <span>I consent to be contacted by Maison Lutétia Dubai regarding this consultation request. I understand no medical care is provided through this form. DHA compliance applies.</span>
              </label>
            </>
          )}

          {step === 4 && (
            <div style={{ textAlign: "center", padding: "32px 0 8px" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", border: "1px solid var(--champagne)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--champagne)", fontSize: 22, marginBottom: 20 }}>✓</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 26, marginBottom: 12 }}>Merci, {data.name.split(" ")[0] || "Madame"}.</div>
              <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 1.6, maxWidth: 360, margin: "0 auto" }}>
                We have noted your request{data.pillar ? <> for <em>{data.treatment}</em></> : ""} on <strong>{data.date && data.date.lbl} {data.date && data.date.num} {data.date && data.date.mo}</strong>{data.time && <> at <strong>{data.time}</strong></>}.<br />
                A patient coordinator will call you on <strong>{data.phone}</strong> within one business day to confirm.
              </p>
              <div style={{ marginTop: 28, padding: 18, background: "var(--mist)", border: "1px solid var(--line)", fontSize: 12, color: "var(--ink-soft)", lineHeight: 1.55, textAlign: "left" }}>
                <strong style={{ color: "var(--ink)" }}>Note · </strong>This is a demonstration booking flow. No data has been transmitted. Real booking will route through the verified Dubai endpoint once confirmed by the client.
              </div>
              <button className="btn btn-outline" style={{ marginTop: 28 }} onClick={onClose}>Close</button>
            </div>
          )}

          {step < 4 && (
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 36, gap: 12 }}>
              <button className="btn btn-ghost" onClick={() => step === 0 ? onClose() : setStep(s => s - 1)}>
                {step === 0 ? "Cancel" : "← Back"}
              </button>
              <button className="btn btn-primary" disabled={!canNext()} onClick={() => setStep(s => s + 1)} style={{ opacity: canNext() ? 1 : 0.35 }}>
                {step === 3 ? "Request consultation" : "Continue →"}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

const ComplianceBadge = ({ children = "DHA-compliant" }) => (
  <span className="compl-badge"><span className="compl-dot"></span>{children}</span>
);

const SectionHead = ({ num, eyebrow, title, lead }) => (
  <div className="section-head">
    {num && <div className="num">{num}</div>}
    <div className="title">{title}</div>
    {lead && <div className="lead">{lead}</div>}
  </div>
);

Object.assign(window, { LogoMark, Logo, Navbar, Footer, BookingFlow, ComplianceBadge, SectionHead });
