// --------------------------------------------------------------------------- // Shared components — Logo, Nav, Footer, WhatsApp FAB, Booking modal, etc. // --------------------------------------------------------------------------- const { useState, useEffect, useRef, useMemo } = React; // ===== Logo ================================================================ function LogoMark({ size = 30, color = 'currentColor' }) { // Custom L-mark inspired by the clinic's italic-L symbol — abstract, original. return ( ); } function Wordmark({ color = 'currentColor', compact = false }) { return (
LUCIA CLINIC
Aesthetic · Since 2012
); } // ===== Arrow icon ========================================================== function ArrowRight({ size = 12 }) { return ( ); } // ===== Nav ================================================================= function Nav({ current, onNavigate, onBook, locale, onLocale }) { const [scrolled, setScrolled] = useState(false); const [megaOpen, setMegaOpen] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); const closeTimerRef = useRef(null); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const openMega = () => { clearTimeout(closeTimerRef.current); setMegaOpen(true); }; const closeMegaSoon = () => { closeTimerRef.current = setTimeout(() => setMegaOpen(false), 200); }; const navItems = [ { id: 'home', label: 'Home' }, { id: 'treatments', label: 'Treatments', hasMega: true }, { id: 'doctors', label: 'Our doctors' }, { id: 'about', label: 'About' }, { id: 'contact', label: 'Contact' }, ]; return ( <>
{/* Top utility bar */}
Open today · 9 am – 8 pm Villa 323, Jumeirah Beach Road
{CLINIC.phone} |
{ e.preventDefault(); onNavigate('home'); }} style={{ color: scrolled || current !== 'home' ? 'var(--ink)' : 'white', textShadow: scrolled || current !== 'home' ? 'none' : '0 1px 12px rgba(0,0,0,0.25)' }} >
{/* Mega menu — Treatments */} {megaOpen && (
{TREATMENT_AREAS.map(area => (
))}
Treat by concern
{CONCERNS.slice(0, 9).map(c => ( ))}
)}
{mobileOpen && ( setMobileOpen(false)} onNavigate={(p, params) => { onNavigate(p, params); setMobileOpen(false); }} onBook={() => { onBook(); setMobileOpen(false); }} locale={locale} onLocale={onLocale} /> )} ); } function MobileMenu({ current, onClose, onNavigate, onBook, locale, onLocale }) { useEffect(() => { document.body.classList.add('scroll-lock'); return () => document.body.classList.remove('scroll-lock'); }, []); return (
{[ { id: 'home', label: 'Home' }, { id: 'treatments', label: 'Treatments' }, { id: 'doctors', label: 'Our doctors' }, { id: 'about', label: 'About' }, { id: 'contact', label: 'Contact' }, ].map(i => ( ))}
{CLINIC.phone} WhatsApp
); } // ===== Locale switcher ===================================================== function LocaleSwitcher({ value, onChange, dim }) { const locales = ['EN', 'AR', 'RU', 'ZH']; return (
{locales.map((l, i) => ( {i > 0 && ·} ))}
); } // ===== Footer ============================================================== function Footer({ onNavigate, onBook }) { const cols = [ { title: 'Treatments', links: TREATMENT_AREAS.map(a => ({ label: a.label, onClick: () => onNavigate('treatments', { area: a.id }) })) }, { title: 'Clinic', links: [ { label: 'About', onClick: () => onNavigate('about') }, { label: 'Our doctors', onClick: () => onNavigate('doctors') }, { label: 'Before & after',onClick: () => onNavigate('about', { section: 'compliance' }) }, { label: 'Contact', onClick: () => onNavigate('contact') }, ] }, { title: 'Visit', links: [ { label: CLINIC.phone, href: CLINIC.phoneTel }, { label: 'WhatsApp +971 56 115 9194', href: CLINIC.whatsappLink }, { label: CLINIC.email, href: 'mailto:' + CLINIC.email }, ] } ]; return ( ); } // ===== WhatsApp FAB ======================================================== function WhatsAppFab() { return ( e.currentTarget.style.transform = 'translateY(-2px)'} onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'} aria-label="WhatsApp" > WhatsApp ); } // ===== Booking modal ======================================================= function BookingModal({ open, onClose, prefill }) { const [stage, setStage] = useState('form'); const [form, setForm] = useState({ name: '', email: '', phone: '', area: prefill?.area || 'face', treatment: prefill?.treatment || '', doctor: prefill?.doctor || 'any', date: '', time: '', notes: '', consent: false, }); useEffect(() => { if (open) { setStage('form'); setForm(f => ({ ...f, area: prefill?.area || f.area, treatment: prefill?.treatment || '', doctor: prefill?.doctor || 'any', })); document.body.classList.add('scroll-lock'); } else { document.body.classList.remove('scroll-lock'); } return () => document.body.classList.remove('scroll-lock'); }, [open, prefill]); if (!open) return null; const currentArea = TREATMENT_AREAS.find(a => a.id === form.area) || TREATMENT_AREAS[0]; const submit = (e) => { e.preventDefault(); if (!form.consent) return; setStage('done'); }; return (
e.stopPropagation()}> {stage === 'form' && (
By appointment

Book a consultation

We'll respond within one working day to confirm. Our consultations are private and unhurried — your treatment plan is built around your goals, not a menu.

setForm({ ...form, name: e.target.value })} />
setForm({ ...form, phone: e.target.value })} placeholder="+971 …" />
setForm({ ...form, email: e.target.value })} />
setForm({ ...form, date: e.target.value })} />