/* Blossom Nursery — interactive homepage */ const { useState, useEffect, useMemo, useRef } = React; const D = window.BLOSSOM_DATA; /* ---------- tiny icons (SVG) ---------- */ const I = { arrow: (p) => , phone: (p) => , whatsapp: (p) => , check: (p) => , close: (p) => , pin: (p) => , globe: (p) => , shield: (p) => , leaf: (p) => , }; /* ---------- Brand flowers (decorative, from logo motif) ---------- */ function Flower({ size = 24, color = "#1A3680", style = {} }) { const r = size / 2; return ( {[0, 60, 120, 180, 240, 300].map(a => ( ))} ); } function FlowerCluster() { return ( ); } /* ---------- Nav ---------- */ function Nav({ locale, setLocale, openTour }) { const [scrolled, setScrolled] = useState(false); const t = D.i18n[locale]; useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( ); } /* ---------- Safeguarding banner (project notice, not a feature) ---------- */ function SafeguardBanner() { const [open, setOpen] = useState(true); if (!open) return null; return (
Prototype notice: placeholder content shown where client sign-off is pending — heritage year, hours, email, WhatsApp, KHDA/ADEK status, fees, leader titles, child imagery consent.
); } /* ---------- Hero ---------- */ function Hero({ locale, openTour }) { const t = D.i18n[locale]; return (
{t.heroEyebrow}

{locale === 'en' ? ( <>A world-class British nursery,
with heart. ) : ( <>{t.heroTitle} )}

{t.heroBody}

{t.findBranch} {D.contact.tollFreeDisplay}
A Blossom Nursery learning environment
{locale === 'en' ? 'Child-safeguarding first' : 'سلامة الطفل أولاً'} {locale === 'en' ? 'KHDA-registered · ADEK-licensed¹' : 'مرخّصة من KHDA و ADEK¹'}
); } /* ---------- Trust strip ---------- */ function TrustStrip({ locale }) { // English chips only — the registered marks and "Babilou Family" are brand language. return (
{D.trustChips.map((c, i) => ( {c} {i < D.trustChips.length - 1 && ))}
); } /* ---------- Approach: 4 pillars ---------- */ function Approach({ locale }) { return (
{locale === 'en' ? 'Our approach' : 'منهجنا'}

{locale === 'en' ? ( <>The British EYFS,
delivered with warmth. ) : ( <>منهج EYFS البريطاني،
بدفء وحب. )}

{locale === 'en' ? 'Our Sustainable Education Approach® weaves the best of Montessori, Reggio Emilia and Emmi Pikler with modern child-development science — guided by Babilou\'s global pedagogy team.' : 'يجمع نهج التعليم المستدام® بين أفضل ما في منتسوري ورجيو إميليا وإيمي بيكلر مع أحدث علوم نمو الطفل.'}

{D.pillars.map(p => (
{p.tag}

{p.title}

{p.body}

))}
); } /* ---------- Big idea (SEA®) ---------- */ function BigIdea({ locale }) { return (
{locale === 'en' ? 'The big idea' : 'الفكرة الكبرى'}

{locale === 'en' ? <>Every child has their own rhythm.
We follow it. : <>لكل طفل إيقاعه الخاص.
ونحن نتبعه.}

{locale === 'en' ? 'The Sustainable Education Approach® is the way we put EYFS into practice. Open-ended materials, calm spaces, multilingual exposure (EN · AR · FR), and educators trained to observe before they intervene — so children lead their own learning.' : 'يجسّد نهج التعليم المستدام® منهج EYFS في كل لحظة من اليوم. مواد مفتوحة، فضاءات هادئة، تعرّض بثلاث لغات، ومربّون يلاحظون قبل أن يتدخّلوا.'}

Montessori-informed Reggio Emilia Emmi Pikler Neuroscience-led
{locale === 'en' ? '¹ Sustainable Education Approach® is a registered mark of Blossom / Babilou. Science & expert references attributed to the group.' : '¹ نهج التعليم المستدام® علامة مسجلة لبلوسوم/بابيلو.'}
A thoughtfully arranged Blossom learning space
); } /* ---------- Programmes + per-emirate ages ---------- */ function Programmes({ locale, openTour }) { return (
{locale === 'en' ? 'Programmes & ages' : 'البرامج والأعمار'}

{locale === 'en' ? <>Built around your week. : <>مصمَّم حول أسبوعك.}

{locale === 'en' ? 'Full-time, part-time and extended hours — designed for working parents in Dubai and Abu Dhabi. Age ranges vary by emirate and by branch; we\'ll match you to the right room on your tour.' : 'دوام كامل، جزئي، وساعات ممتدة — مصمَّمة للآباء العاملين. تختلف الفئات العمرية بين الإمارات والفروع.'}

{D.programmes.map((p, i) => (
{String(i+1).padStart(2,'0')}

{p.title}

{p.blurb}

))}

{locale === 'en' ? 'Age caps by emirate' : 'الفئات العمرية حسب الإمارة'}

{locale === 'en' ? 'From the client\'s about-us page — verify on each branch page.' : 'مأخوذ من صفحة "من نحن" — يُؤكَّد لكل فرع على حدة.'}

{D.ages.map(a => (
{a.emirate} {a.from} → {a.to} {a.note && TBC}
))}
); } /* ---------- Branch finder ---------- */ function Branches({ locale, openTour }) { const [emirate, setEmirate] = useState('All'); const [showAll, setShowAll] = useState(false); const emirates = ['All', 'Dubai', 'Abu Dhabi', 'Sharjah', 'Al Ain']; const counts = useMemo(() => { const c = { All: D.branches.length }; emirates.slice(1).forEach(e => { c[e] = D.branches.filter(b => b.emirate === e).length; }); return c; }, []); const filtered = useMemo(() => { if (emirate === 'All') return D.branches; return D.branches.filter(b => b.emirate === emirate); }, [emirate]); const visible = showAll ? filtered : filtered.slice(0, 9); return (
{locale === 'en' ? 'Find your nursery' : 'ابحث عن حضانتك'}

{locale === 'en' ? <>32 branches.
Four emirates. : <>٣٢ فرعاً.
أربع إمارات.}

{locale === 'en' ? 'Dubai is our largest cluster, with 19 branches across Marina, DIFC, Downtown, Dubai Hills, Arabian Ranches, Business Bay, Palm, Mudon, Creek Harbour, D3 and more. Tap any branch for tour-booking, address and live map.' : 'دبي هي أكبر تجمع لدينا، بـ ١٩ فرعاً في المرينا و DIFC ووسط المدينة وأرجاء أخرى.'}

{locale === 'en' ? 'Emirate' : 'الإمارة'} {emirates.map(e => ( ))}
{visible.map(b => (
{b.img ? ( {`Blossom ) : (
{locale === 'en' ? 'Photo coming' : 'الصورة قريباً'}
)} {b.emirate} {b.coords && }

{b.name}

{b.area}

{locale === 'en' ? 'View branch' : 'عرض الفرع'}
))}
{filtered.length > 9 && !showAll && (
)}
); } /* ---------- Babilou strip ---------- */ function Babilou({ locale }) { return (
Babilou Family

{locale === 'en' ? 'Part of the Babilou Family' : 'جزء من عائلة بابيلو'}

{locale === 'en' ? 'Founded in France in 2003, Babilou is one of the world\'s largest early-education networks. Blossom joined the family in 2017.' : 'تأسست عائلة بابيلو في فرنسا عام ٢٠٠٣، وانضمت بلوسوم إليها عام ٢٠١٧.'} self-reported

1,000† {locale === 'en' ? 'nurseries' : 'حضانة'}
50,000† {locale === 'en' ? 'children daily' : 'طفل يومياً'}
); } /* ---------- About / leaders ---------- */ function About({ locale }) { return (
{locale === 'en' ? 'Who we are' : 'من نحن'}

{locale === 'en' ? <>Caring for UAE families for over a decade. : <>نعتني بعائلات الإمارات منذ أكثر من عقد.}

{locale === 'en' ? 'Blossom has grown alongside the UAE\'s working families. The exact founding year is being confirmed with the client — what hasn\'t changed is our eco-friendly pedigree (Blossom joined Babilou in 2017 as a pioneer of eco-friendly nurseries) and our commitment to play-led learning.' : 'نمت بلوسوم جنباً إلى جنب مع العائلات العاملة في الإمارات. التزامنا الأساسي: التعلّم بالّلعب، والإرث البيئي.'}

{D.leaders.map(L => (
{L.name}

{L.name}

{L.role}

))}
); } /* ---------- CTA band ---------- */ function CTABand({ locale, openTour }) { return (

{locale === 'en' ? <>Come and see us at work. : <>تعالوا لتروا كيف نعمل.}

{locale === 'en' ? 'A 45-minute tour is the best way to feel the warmth of a Blossom room. We\'ll show you the spaces, talk through the curriculum, and answer every question.' : 'جولة من ٤٥ دقيقة هي أفضل طريقة لتشعروا بأجواء بلوسوم. سنطلعكم على الفضاءات والمنهج، ونجيب عن كل سؤال.'}

{locale === 'en' ? `Call ${D.contact.tollFreeDisplay}` : `اتصل ${D.contact.tollFreeDisplay}`}
); } /* ---------- Footer ---------- */ function Footer({ locale }) { const byEmirate = useMemo(() => { const out = {}; D.branches.forEach(b => { (out[b.emirate] = out[b.emirate] || []).push(b); }); return out; }, []); return ( ); } /* ---------- Mobile sticky bar ---------- */ function MobileBar({ locale, openTour }) { return (
{ e.preventDefault(); openTour(); }}> {locale === 'en' ? 'Book a tour' : 'احجز جولة'} 800 NURSERY
); } /* ---------- Book-a-Tour Modal ---------- */ function TourModal({ open, onClose, locale }) { const [step, setStep] = useState('form'); const [form, setForm] = useState({ parent: '', phone: '', email: '', childAge: '', branch: '', date: '', message: '' }); const [errors, setErrors] = useState({}); useEffect(() => { if (open) { setStep('form'); setErrors({}); } }, [open]); useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (open) document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [open, onClose]); if (!open) return null; const submit = (e) => { e.preventDefault(); const errs = {}; if (!form.parent.trim()) errs.parent = locale === 'en' ? 'Please tell us your name' : 'يرجى إدخال الاسم'; if (!form.phone.trim()) errs.phone = locale === 'en' ? 'A phone number helps us reach you' : 'رقم الهاتف مطلوب'; if (!form.branch) errs.branch = locale === 'en' ? 'Which branch would you like to visit?' : 'يرجى اختيار فرع'; setErrors(errs); if (Object.keys(errs).length === 0) { setStep('success'); } }; return (
e.stopPropagation()}>

{step === 'form' ? (locale === 'en' ? 'Book your tour' : 'احجز جولتك') : (locale === 'en' ? 'You\'re in.' : 'تم.')}

{step === 'form' ? (

{locale === 'en' ? 'Pop in your details and a preferred branch. We\'ll confirm a time within one working day.' : 'املأ بياناتك واختر الفرع. سنؤكد الموعد خلال يوم عمل.'}

setForm({...form, parent: e.target.value})} placeholder={locale === 'en' ? 'Your full name' : 'الاسم الكامل'} /> {errors.parent &&
{errors.parent}
}
setForm({...form, phone: e.target.value})} placeholder="+971 ..." /> {errors.phone &&
{errors.phone}
}
setForm({...form, email: e.target.value})} type="email" placeholder="you@example.com" />
{errors.branch &&
{errors.branch}
}
setForm({...form, date: e.target.value})} type="date" />