/* 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 }) => ( ); const Logo = ({ go }) => (
go("home")}>
Maison Lutétia
Dubai · Since 2018
); 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 ( ); }; const Footer = ({ go, openBooking }) => ( ); // 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 (
e.stopPropagation()}>
Book a Consultation
{step < 4 ? steps[step] : "Reservation requested"}
{[0, 1, 2, 3].map(i => (
i ? "done" : step === i ? "current" : "")} /> ))}
{step === 0 && ( <>
1 · Choose a pillar
{window.PILLARS.map(p => (
{ update("pillar", p.id); update("treatment", null); }}>
{p.title}
{p.short.split(" — ")[0]}
{data.pillar === p.id ? "✓" : ""}
))}
{pillarObj && ( <>
2 · Treatment of interest
)} )} {step === 1 && ( <>
Preferred doctor (optional)
update("doctor", "any")}>
No preference
Match me with the most suitable physician
{data.doctor === "any" ? "✓" : ""}
{window.DOCTORS.filter(d => !data.pillar || d.pillar === data.pillar).slice(0, 5).map(d => (
update("doctor", d.slug)}>
{d.name}
{d.role}
{data.doctor === d.slug ? "✓" : ""}
))} )} {step === 2 && ( <>
Select a day
{days.map((d, i) => ( ))}
Select a time
{times.map(t => ( ))}
)} {step === 3 && ( <>
update("name", e.target.value)} placeholder="Mme / M." />
update("phone", e.target.value)} placeholder="+971" />
update("email", e.target.value)} placeholder="you@example.com" />