/* global React */ const { useState, useEffect, useRef, useMemo } = React; /* ---------- icons (24px) ---------- */ const Icon = { Arrow: ({size=14}) => ( ), ArrowUR: ({size=14}) => ( ), X: ({size=14}) => ( ), Whatsapp: ({size=22}) => ( ), Phone: ({size=18}) => ( ), Pin: ({size=18}) => ( ), Clock: ({size=18}) => ( ), Instagram: ({size=18}) => ( ), Sparkle: ({size=16}) => ( ), Star: ({size=14}) => ( ), }; /* ---------- BURO. logo ---------- */ function Logo({ tone = "dark" }) { const color = tone === "light" ? "#F7F2EA" : "#2A241F"; return ( BURO Beauty ); } /* ---------- Nav ---------- */ function Nav({ page, setPage, lang, setLang, openBooking }) { const NAV = [ ['home', 'Home', 'الرئيسية'], ['treatments', 'Treatments', 'العلاجات'], ['signature', 'Signature', 'التميز'], ['memberships','Memberships', 'العضويات'], ['cafe', 'Café', 'المقهى'], ['gallery', 'Gallery', 'المعرض'], ['about', 'About', 'من نحن'], ['contact', 'Contact', 'اتصل'], ]; return ( ); } /* ---------- Sticky mobile book bar ---------- */ function BookBar({ openBooking, lang }) { return (
{lang === 'ar' ? 'مفتوح حتى ٩م' : 'Open until 9pm'}
{lang === 'ar' ? '+٩٧١ ٥٦ ٦١٥ ٧١٣٥' : '+971 56 615 7135'}
); } /* ---------- WhatsApp FAB ---------- */ function Fab() { return ( ); } /* ---------- Footer ---------- */ function Footer({ setPage, lang }) { return ( ); } /* ---------- Booking modal ---------- */ const BOOKING_SERVICES = [ { key: 'signature-6h', name: 'Signature 6-Hand Massage', meta: '90 min · 3 therapists · from AED 1,500*' }, { key: 'signature-4h', name: 'Signature 4-Hand Massage', meta: '60 min · 2 therapists · from AED 950*' }, { key: 'facial', name: 'Skin & Signature Facial', meta: '60 min · from AED 450*' }, { key: 'injectable', name: 'Aesthetic Consultation', meta: '30 min · complimentary' }, { key: 'hair', name: 'Hair Cut & Style', meta: '60 min · from AED 250*' }, { key: 'nails', name: 'Mani / Pedi', meta: '45 min · from AED 120*' }, ]; const BOOKING_DATES = (() => { const days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']; const out = []; const today = new Date(); for (let i = 0; i < 10; i++) { const d = new Date(today.getTime() + i*86400000); out.push({ dow: days[d.getDay()], d: d.getDate(), key: d.toISOString().slice(0,10) }); } return out; })(); const BOOKING_TIMES = ['10:00','10:30','11:00','11:30','12:00','13:00','14:00','14:30','15:30','16:00','17:00','18:00','18:30','19:30']; const DISABLED_TIMES = new Set(['11:00','13:00','15:30','19:30']); function BookingModal({ open, onClose }) { const [step, setStep] = useState(1); const [service, setService] = useState(null); const [date, setDate] = useState(null); const [time, setTime] = useState(null); const [name, setName] = useState(''); const [phone, setPhone] = useState(''); const [notes, setNotes] = useState(''); const [confirmed, setConfirmed] = useState(false); useEffect(() => { if (open) { setStep(1); setService(null); setDate(null); setTime(null); setName(''); setPhone(''); setNotes(''); setConfirmed(false); document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = ''; } }, [open]); if (!open) return null; const next = () => setStep(s => s + 1); const prev = () => setStep(s => s - 1); return (
e.target.classList.contains('modal-backdrop') && onClose()}>
Reserve
your moment
{!confirmed && ( <>
= 1 ? (step > 1 ? 'done' : 'on') : ''}/> = 2 ? (step > 2 ? 'done' : 'on') : ''}/> = 3 ? (step > 3 ? 'done' : 'on') : ''}/> = 4 ? 'on' : ''}/>
Step {step} of 4
{step === 1 && (

Choose a treatment

{BOOKING_SERVICES.map(s => ( ))}

*Indicative pricing — final price confirmed at consultation.

)} {step === 2 && (

Select a date

{BOOKING_DATES.map(d => ( ))}
Available times
{BOOKING_TIMES.map(t => { const disabled = DISABLED_TIMES.has(t); return ( ); })}
)} {step === 3 && (

Your details

setName(e.target.value)} placeholder="Aïcha Karim" />
setPhone(e.target.value)} placeholder="+971 ..." />