/* Blossom Nursery — interactive homepage */
const { useState, useEffect, useMemo, useRef } = React;
const D = window.BLOSSOM_DATA;

/* ---------- tiny icons (SVG) ---------- */
const I = {
  arrow: (p) => <svg className="arrow" viewBox="0 0 16 16" fill="none" {...p}><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  phone: (p) => <svg viewBox="0 0 16 16" fill="none" width="14" height="14" {...p}><path d="M3 3.5C3 3.22 3.22 3 3.5 3h2c.25 0 .46.18.5.42l.5 2.5a.5.5 0 0 1-.14.46l-1 1c.7 1.5 1.92 2.7 3.42 3.42l1-1a.5.5 0 0 1 .46-.14l2.5.5c.24.04.42.25.42.5v2c0 .28-.22.5-.5.5C7.04 13.16 2.84 8.96 3 3.5z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/></svg>,
  whatsapp: (p) => <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16" {...p}><path d="M12 2C6.48 2 2 6.48 2 12c0 1.77.46 3.43 1.27 4.87L2 22l5.25-1.38A9.93 9.93 0 0 0 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm5.4 13.74c-.23.65-1.13 1.2-1.85 1.35-.49.1-1.13.18-3.28-.7-2.74-1.13-4.5-3.9-4.64-4.08-.13-.18-1.1-1.47-1.1-2.8 0-1.33.7-1.99 1-2.27.24-.23.5-.33.67-.33.17 0 .34 0 .49.01.15.01.36-.06.56.43.21.5.7 1.74.76 1.87.06.13.1.28.02.45-.09.18-.13.29-.26.44-.13.15-.27.34-.39.46-.13.13-.27.27-.12.53.15.27.67 1.1 1.43 1.78.98.87 1.81 1.14 2.07 1.27.27.13.42.11.57-.07.16-.18.66-.77.84-1.03.18-.27.36-.22.6-.13.25.09 1.58.74 1.85.88.27.13.45.2.51.31.07.13.07.7-.17 1.36z"/></svg>,
  check: (p) => <svg viewBox="0 0 24 24" fill="none" width="28" height="28" {...p}><path d="M5 12l5 5 9-10" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  close: (p) => <svg viewBox="0 0 16 16" fill="none" width="16" height="16" {...p}><path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>,
  pin: (p) => <svg viewBox="0 0 16 16" fill="none" width="14" height="14" {...p}><path d="M8 14s5-4.5 5-8a5 5 0 0 0-10 0c0 3.5 5 8 5 8z" stroke="currentColor" strokeWidth="1.3"/><circle cx="8" cy="6" r="1.6" fill="currentColor"/></svg>,
  globe: (p) => <svg viewBox="0 0 16 16" fill="none" width="14" height="14" {...p}><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.3"/><path d="M2 8h12M8 2c2 2.5 2 11 0 12M8 2c-2 2.5-2 11 0 12" stroke="currentColor" strokeWidth="1.3"/></svg>,
  shield: (p) => <svg viewBox="0 0 16 16" fill="none" width="16" height="16" {...p}><path d="M8 1.5L2.5 4v4.5C2.5 11.5 8 14.5 8 14.5s5.5-3 5.5-6V4L8 1.5z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/><path d="M6 8l1.5 1.5L10.5 6.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  leaf: (p) => <svg viewBox="0 0 16 16" fill="none" width="14" height="14" {...p}><path d="M3 13c0-5 3-9 10-10-.5 6-3 10-8 10a1 1 0 0 1-2 0z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/><path d="M3 13c2-3 5-5 8-6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/></svg>,
};

/* ---------- Brand flowers (decorative, from logo motif) ---------- */
function Flower({ size = 24, color = "#1A3680", style = {} }) {
  const r = size / 2;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style}>
      <g fill={color}>
        {[0, 60, 120, 180, 240, 300].map(a => (
          <ellipse key={a} cx="50" cy="22" rx="14" ry="22" transform={`rotate(${a} 50 50)`} />
        ))}
      </g>
    </svg>
  );
}

function FlowerCluster() {
  return (
    <div className="hero__flowers" aria-hidden="true">
      <Flower size={22} color="#84B440" style={{transform: "translateY(-18px)"}} />
      <Flower size={28} color="#2BB8C4" />
      <Flower size={34} color="#9ED9EE" style={{transform: "translateY(6px)"}} />
    </div>
  );
}

/* ---------- 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 (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="wrap nav__inner">
        <a href="#" className="nav__logo" aria-label="Blossom Nursery">
          <img src="media/blossom-logo-blue.webp" alt="Blossom Nursery & Preschool" />
        </a>
        <div className="nav__links">
          <a href="#approach" className="nav__link">{t.nav.approach}</a>
          <a href="#programmes" className="nav__link">{t.nav.programmes}</a>
          <a href="#facilities" className="nav__link">{t.nav.facilities}</a>
          <a href="#branches" className="nav__link">{t.nav.branches}</a>
          <a href="#about" className="nav__link">{t.nav.about}</a>
        </div>
        <div className="nav__cta">
          <div className="nav__locale" role="tablist" aria-label="Language">
            <button className={locale === 'en' ? 'active' : ''} onClick={() => setLocale('en')}>EN</button>
            <button className={locale === 'ar' ? 'active' : ''} onClick={() => setLocale('ar')}>ع</button>
          </div>
          <a href={`tel:${D.contact.tollFreeDigits}`} className="btn btn--ghost btn--sm" style={{display: 'inline-flex'}}>
            <I.phone /> 800 NURSERY
          </a>
          <button className="btn btn--primary btn--sm" onClick={openTour}>
            {t.bookATour} <I.arrow />
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ---------- Safeguarding banner (project notice, not a feature) ---------- */
function SafeguardBanner() {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <div className="safeguard-banner">
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'center', gap:14, flexWrap:'wrap'}}>
        <span><strong>Prototype notice:</strong> placeholder content shown where client sign-off is pending — heritage year, hours, email, WhatsApp, KHDA/ADEK status, fees, leader titles, child imagery consent.</span>
        <button onClick={() => setOpen(false)} style={{background:'none', border:0, color:'#7A5A0E', cursor:'pointer', fontWeight:700}}>Hide</button>
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ locale, openTour }) {
  const t = D.i18n[locale];
  return (
    <section className="hero">
      <div className="wrap hero__grid">
        <div>
          <span className="eyebrow">{t.heroEyebrow}</span>
          <h1 className="display hero__title">
            {locale === 'en' ? (
              <>A world-class British nursery,<br/><em>with heart.</em></>
            ) : (
              <>{t.heroTitle}</>
            )}
          </h1>
          <p className="hero__body">{t.heroBody}</p>
          <div className="hero__ctas">
            <button className="btn btn--primary" onClick={openTour}>
              {t.bookATour} <I.arrow />
            </button>
            <a href="#branches" className="btn btn--ghost">
              <I.pin /> {t.findBranch}
            </a>
            <span className="hero__phone">
              <I.phone /> <strong>{D.contact.tollFreeDisplay}</strong>
            </span>
          </div>
        </div>
        <div className="hero__visual" style={{position:'relative'}}>
          <FlowerCluster />
          <img src="media/home-overlay-banner.webp" alt="A Blossom Nursery learning environment" />
          <div className="hero__badge">
            <I.shield />
            <div className="hero__badge-text">
              <strong>{locale === 'en' ? 'Child-safeguarding first' : 'سلامة الطفل أولاً'}</strong>
              {locale === 'en' ? 'KHDA-registered · ADEK-licensed¹' : 'مرخّصة من KHDA و ADEK¹'}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust strip ---------- */
function TrustStrip({ locale }) {
  // English chips only — the registered marks and "Babilou Family" are brand language.
  return (
    <div className="trust">
      <div className="wrap trust__inner">
        {D.trustChips.map((c, i) => (
          <React.Fragment key={c}>
            <span><I.leaf style={{opacity:.7}} /> {c}</span>
            {i < D.trustChips.length - 1 && <span className="trust__dot" aria-hidden="true" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ---------- Approach: 4 pillars ---------- */
function Approach({ locale }) {
  return (
    <section id="approach" className="block">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{locale === 'en' ? 'Our approach' : 'منهجنا'}</span>
            <h2 className="display" style={{marginTop:14}}>
              {locale === 'en' ? (
                <>The British EYFS,<br/><em>delivered with warmth.</em></>
              ) : (
                <>منهج <em>EYFS البريطاني</em>،<br/>بدفء وحب.</>
              )}
            </h2>
          </div>
          <p>{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.'
            : 'يجمع نهج التعليم المستدام® بين أفضل ما في منتسوري ورجيو إميليا وإيمي بيكلر مع أحدث علوم نمو الطفل.'}
          </p>
        </div>
        <div className="pillars">
          {D.pillars.map(p => (
            <article className="pillar" key={p.title}>
              <div className="pillar__img"><img src={p.img} alt="" /></div>
              <div className="pillar__body">
                <div className="pillar__tag">{p.tag}</div>
                <h3 className="pillar__title">{p.title}</h3>
                <p>{p.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Big idea (SEA®) ---------- */
function BigIdea({ locale }) {
  return (
    <section id="facilities" className="block" style={{paddingTop: 0}}>
      <div className="wrap">
        <div className="big-idea">
          <div className="big-idea__bg-flower" aria-hidden="true">✺</div>
          <div className="big-idea__inner">
            <div>
              <span className="eyebrow">{locale === 'en' ? 'The big idea' : 'الفكرة الكبرى'}</span>
              <h2>
                {locale === 'en'
                  ? <>Every child has their <em>own rhythm.</em><br/>We follow it.</>
                  : <>لكل طفل <em>إيقاعه الخاص</em>.<br/>ونحن نتبعه.</>}
              </h2>
              <p>
                {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 في كل لحظة من اليوم. مواد مفتوحة، فضاءات هادئة، تعرّض بثلاث لغات، ومربّون يلاحظون قبل أن يتدخّلوا.'}
              </p>
              <div className="method-chips">
                <span className="method-chip">Montessori-informed</span>
                <span className="method-chip">Reggio Emilia</span>
                <span className="method-chip">Emmi Pikler</span>
                <span className="method-chip">Neuroscience-led</span>
              </div>
              <div className="big-idea__attribution">
                {locale === 'en' ? '¹ Sustainable Education Approach® is a registered mark of Blossom / Babilou. Science & expert references attributed to the group.' : '¹ نهج التعليم المستدام® علامة مسجلة لبلوسوم/بابيلو.'}
              </div>
            </div>
            <div className="big-idea__visual">
              <img src="media/home-big-idea-1.webp" alt="A thoughtfully arranged Blossom learning space" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Programmes + per-emirate ages ---------- */
function Programmes({ locale, openTour }) {
  return (
    <section id="programmes" className="block" style={{background: 'var(--paper)'}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{locale === 'en' ? 'Programmes & ages' : 'البرامج والأعمار'}</span>
            <h2 className="display" style={{marginTop:14}}>
              {locale === 'en' ? <>Built around <em>your week.</em></> : <>مصمَّم حول <em>أسبوعك</em>.</>}
            </h2>
          </div>
          <p>{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.'
            : 'دوام كامل، جزئي، وساعات ممتدة — مصمَّمة للآباء العاملين. تختلف الفئات العمرية بين الإمارات والفروع.'}
          </p>
        </div>

        <div className="prog-grid">
          <div className="prog-cards">
            {D.programmes.map((p, i) => (
              <div className="prog-card" key={p.title}>
                <div className="prog-card__num">{String(i+1).padStart(2,'0')}</div>
                <div>
                  <h3 className="prog-card__title">{p.title}</h3>
                  <p className="prog-card__blurb">{p.blurb}</p>
                </div>
                <button className="btn btn--ghost btn--sm" onClick={openTour}>
                  {locale === 'en' ? 'Enquire' : 'استفسار'}
                </button>
              </div>
            ))}
          </div>
          <div className="ages-panel">
            <h3>{locale === 'en' ? 'Age caps by emirate' : 'الفئات العمرية حسب الإمارة'}</h3>
            <p className="note">
              {locale === 'en'
                ? 'From the client\'s about-us page — verify on each branch page.'
                : 'مأخوذ من صفحة "من نحن" — يُؤكَّد لكل فرع على حدة.'}
            </p>
            {D.ages.map(a => (
              <div className="age-row" key={a.emirate}>
                <span className="age-emirate">{a.emirate}</span>
                <span className="age-range">{a.from} → {a.to}</span>
                {a.note && <span className="age-tbc">TBC</span>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- 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 (
    <section id="branches" className="block branches">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{locale === 'en' ? 'Find your nursery' : 'ابحث عن حضانتك'}</span>
            <h2 className="display" style={{marginTop:14}}>
              {locale === 'en' ? <>32 branches.<br/><em>Four emirates.</em></> : <>٣٢ فرعاً.<br/><em>أربع إمارات.</em></>}
            </h2>
          </div>
          <p>{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 ووسط المدينة وأرجاء أخرى.'}
          </p>
        </div>

        <div className="filter-row">
          <span className="label">{locale === 'en' ? 'Emirate' : 'الإمارة'}</span>
          {emirates.map(e => (
            <button
              key={e}
              className={"chip" + (emirate === e ? " active" : "")}
              onClick={() => { setEmirate(e); setShowAll(false); }}
            >
              {e === 'All' ? (locale === 'en' ? 'All' : 'الكل') : e}
              <span className="chip__count">{counts[e]}</span>
            </button>
          ))}
        </div>

        <div className="branch-grid">
          {visible.map(b => (
            <article className="branch-card" key={b.slug}>
              <div className="branch-card__img">
                {b.img ? (
                  <img src={b.img} alt={`Blossom ${b.name}`} loading="lazy" />
                ) : (
                  <div className="branch-card__placeholder">{locale === 'en' ? 'Photo coming' : 'الصورة قريباً'}</div>
                )}
                <span className="branch-card__emirate">{b.emirate}</span>
                {b.coords && <span className="branch-card__map-dot" title="Map coords verified" />}
              </div>
              <div className="branch-card__body">
                <h3 className="branch-card__name">{b.name}</h3>
                <p className="branch-card__area">{b.area}</p>
                <span className="branch-card__cta">
                  {locale === 'en' ? 'View branch' : 'عرض الفرع'} <I.arrow />
                </span>
              </div>
            </article>
          ))}
        </div>

        {filtered.length > 9 && !showAll && (
          <div className="show-more">
            <button className="btn btn--ghost" onClick={() => setShowAll(true)}>
              {locale === 'en'
                ? `Show all ${filtered.length} branches`
                : `عرض كل الفروع (${filtered.length})`}
              <I.arrow />
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------- Babilou strip ---------- */
function Babilou({ locale }) {
  return (
    <section className="babilou">
      <div className="wrap babilou__inner">
        <div className="babilou__logo">
          <img src="media/babilou-footer-logo.webp" alt="Babilou Family" />
        </div>
        <div className="babilou__text">
          <h3>{locale === 'en' ? 'Part of the Babilou Family' : 'جزء من عائلة بابيلو'}</h3>
          <p>{locale === 'en'
            ? 'Founded in France in 2003, Babilou is one of the world\'s largest early-education networks. Blossom joined the family in 2017.'
            : 'تأسست عائلة بابيلو في فرنسا عام ٢٠٠٣، وانضمت بلوسوم إليها عام ٢٠١٧.'}
            <sup style={{color:'var(--muted)', fontSize:10, marginLeft:4}}>self-reported</sup>
          </p>
        </div>
        <div className="babilou__stats">
          <div className="babilou__stat">
            <span className="n">1,000<sup>†</sup></span>
            <span className="l">{locale === 'en' ? 'nurseries' : 'حضانة'}</span>
          </div>
          <div className="babilou__stat">
            <span className="n">50,000<sup>†</sup></span>
            <span className="l">{locale === 'en' ? 'children daily' : 'طفل يومياً'}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- About / leaders ---------- */
function About({ locale }) {
  return (
    <section id="about" className="block">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{locale === 'en' ? 'Who we are' : 'من نحن'}</span>
            <h2 className="display" style={{marginTop:14}}>
              {locale === 'en' ? <>Caring for UAE families <em>for over a decade.</em></> : <>نعتني بعائلات الإمارات منذ أكثر من عقد.</>}
            </h2>
          </div>
          <p>{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.'
            : 'نمت بلوسوم جنباً إلى جنب مع العائلات العاملة في الإمارات. التزامنا الأساسي: التعلّم بالّلعب، والإرث البيئي.'}
          </p>
        </div>
        <div className="leaders">
          {D.leaders.map(L => (
            <div className="leader-card" key={L.name}>
              <div className="leader-card__img"><img src={L.img} alt={L.name} /></div>
              <div className="leader-card__body">
                <h3 className="leader-card__name">{L.name}</h3>
                <p className="leader-card__role">{L.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA band ---------- */
function CTABand({ locale, openTour }) {
  return (
    <section className="cta-band">
      <div className="cta-band__flowers" aria-hidden="true">
        <Flower size={28} color="#84B440" />
        <Flower size={36} color="#9ED9EE" />
        <Flower size={32} color="#2BB8C4" style={{transform:"translateY(8px)"}} />
        <Flower size={30} color="#F4B6C2" style={{transform:"translateY(-4px)"}} />
      </div>
      <div className="wrap cta-band__inner">
        <h2>
          {locale === 'en' ? <>Come and see us at work.</> : <>تعالوا لتروا كيف نعمل.</>}
        </h2>
        <p>{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.'
          : 'جولة من ٤٥ دقيقة هي أفضل طريقة لتشعروا بأجواء بلوسوم. سنطلعكم على الفضاءات والمنهج، ونجيب عن كل سؤال.'}
        </p>
        <div className="actions">
          <button className="btn btn--leaf" onClick={openTour}>
            {locale === 'en' ? 'Book a tour' : 'احجز جولة'} <I.arrow />
          </button>
          <a href={`tel:${D.contact.tollFreeDigits}`} className="btn btn--white">
            <I.phone /> {locale === 'en' ? `Call ${D.contact.tollFreeDisplay}` : `اتصل ${D.contact.tollFreeDisplay}`}
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer({ locale }) {
  const byEmirate = useMemo(() => {
    const out = {};
    D.branches.forEach(b => { (out[b.emirate] = out[b.emirate] || []).push(b); });
    return out;
  }, []);
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div className="footer__brand">
            <img src="media/blossom-logo-white.webp" alt="Blossom Nursery" />
            <p>{locale === 'en'
              ? 'A world-class British nursery, delivered with heart — 32 branches across Dubai, Abu Dhabi, Sharjah and Al Ain. Part of the Babilou Family.'
              : 'حضانة بريطانية عالمية بأسلوب دافئ — ٣٢ فرعاً في الإمارات.'}
            </p>
            <div className="footer__socials">
              {['IG','FB','X','YT','in'].map(s => (
                <a href="#" key={s} aria-label={s}><span style={{fontSize:11, fontWeight:700}}>{s}</span></a>
              ))}
            </div>
          </div>
          <div>
            <h4>{locale === 'en' ? 'Explore' : 'استكشف'}</h4>
            <ul>
              <li><a href="#approach">{D.i18n[locale].nav.approach}</a></li>
              <li><a href="#programmes">{D.i18n[locale].nav.programmes}</a></li>
              <li><a href="#facilities">{D.i18n[locale].nav.facilities}</a></li>
              <li><a href="#branches">{D.i18n[locale].nav.branches}</a></li>
              <li><a href="#about">{D.i18n[locale].nav.about}</a></li>
            </ul>
          </div>
          <div>
            <h4>{locale === 'en' ? 'Branches' : 'الفروع'}</h4>
            <ul>
              <li><a href="#branches">Dubai · {byEmirate.Dubai.length}</a></li>
              <li><a href="#branches">Abu Dhabi · {byEmirate['Abu Dhabi'].length}</a></li>
              <li><a href="#branches">Sharjah · 1</a></li>
              <li><a href="#branches">Al Ain · 1</a></li>
            </ul>
          </div>
          <div>
            <h4>{locale === 'en' ? 'Get in touch' : 'تواصل معنا'}</h4>
            <ul>
              <li><a href={`tel:${D.contact.tollFreeDigits}`}>800 NURSERY · 1-800-6877-379</a></li>
              <li><span style={{color:'rgba(255,255,255,0.4)'}}>Email · client to supply</span></li>
              <li><span style={{color:'rgba(255,255,255,0.4)'}}>WhatsApp · pending</span></li>
              <li><span style={{color:'rgba(255,255,255,0.4)'}}>Hours · per branch</span></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <div>© {new Date().getFullYear()} Blossom Nursery & Preschool. Part of the Babilou Family.</div>
          <div style={{display:'flex', gap:16}}>
            <a href="#">Privacy</a>
            <a href="#">Safeguarding policy</a>
            <a href="#">Careers</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Mobile sticky bar ---------- */
function MobileBar({ locale, openTour }) {
  return (
    <div className="mobile-bar">
      <a href="#" onClick={(e) => { e.preventDefault(); openTour(); }}>
        {locale === 'en' ? 'Book a tour' : 'احجز جولة'}
      </a>
      <a href={`tel:${D.contact.tollFreeDigits}`} className="leaf">
        <I.phone /> 800 NURSERY
      </a>
    </div>
  );
}

/* ---------- 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 (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal__head">
          <h2>{step === 'form'
            ? (locale === 'en' ? 'Book your tour' : 'احجز جولتك')
            : (locale === 'en' ? 'You\'re in.' : 'تم.')}</h2>
          <button className="modal__close" onClick={onClose} aria-label="Close"><I.close /></button>
        </div>
        <div className="modal__body">
          {step === 'form' ? (
            <form onSubmit={submit}>
              <p className="lede">{locale === 'en'
                ? 'Pop in your details and a preferred branch. We\'ll confirm a time within one working day.'
                : 'املأ بياناتك واختر الفرع. سنؤكد الموعد خلال يوم عمل.'}
              </p>
              <div className="field">
                <label>{locale === 'en' ? 'Parent name' : 'اسم ولي الأمر'}</label>
                <input value={form.parent} onChange={e => setForm({...form, parent: e.target.value})} placeholder={locale === 'en' ? 'Your full name' : 'الاسم الكامل'} />
                {errors.parent && <div className="field-error">{errors.parent}</div>}
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{locale === 'en' ? 'Phone' : 'الهاتف'}</label>
                  <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+971 ..." />
                  {errors.phone && <div className="field-error">{errors.phone}</div>}
                </div>
                <div className="field">
                  <label>{locale === 'en' ? 'Email (optional)' : 'البريد الإلكتروني'}</label>
                  <input value={form.email} onChange={e => setForm({...form, email: e.target.value})} type="email" placeholder="you@example.com" />
                </div>
              </div>
              <div className="field-row">
                <div className="field">
                  <label>{locale === 'en' ? 'Child age' : 'عمر الطفل'}</label>
                  <select value={form.childAge} onChange={e => setForm({...form, childAge: e.target.value})}>
                    <option value="">{locale === 'en' ? 'Choose…' : 'اختر…'}</option>
                    <option>{locale === 'en' ? 'Under 1 year' : 'أقل من سنة'}</option>
                    <option>1–2 years</option>
                    <option>2–3 years</option>
                    <option>3–4 years</option>
                    <option>4–5 years</option>
                  </select>
                </div>
                <div className="field">
                  <label>{locale === 'en' ? 'Preferred branch' : 'الفرع المفضل'}</label>
                  <select value={form.branch} onChange={e => setForm({...form, branch: e.target.value})}>
                    <option value="">{locale === 'en' ? 'Choose a branch' : 'اختر فرعاً'}</option>
                    {['Dubai','Abu Dhabi','Sharjah','Al Ain'].map(em => (
                      <optgroup key={em} label={em}>
                        {D.branches.filter(b => b.emirate === em).map(b => (
                          <option key={b.slug} value={b.slug}>{em} · {b.name}</option>
                        ))}
                      </optgroup>
                    ))}
                  </select>
                  {errors.branch && <div className="field-error">{errors.branch}</div>}
                </div>
              </div>
              <div className="field">
                <label>{locale === 'en' ? 'Preferred date (optional)' : 'التاريخ المفضل'}</label>
                <input value={form.date} onChange={e => setForm({...form, date: e.target.value})} type="date" />
              </div>
              <div className="field">
                <label>{locale === 'en' ? 'Anything we should know?' : 'هل من شيء نودّ معرفته؟'}</label>
                <textarea value={form.message} onChange={e => setForm({...form, message: e.target.value})} rows="3" placeholder={locale === 'en' ? 'Languages spoken at home, allergies, sibling at Blossom, etc.' : 'اللغات في المنزل، حساسيات، إخوة في بلوسوم…'} />
              </div>
              <button type="submit" className="btn btn--primary" style={{width:'100%', justifyContent:'center', padding:'16px'}}>
                {locale === 'en' ? 'Request my tour' : 'احجز الجولة'} <I.arrow />
              </button>
              <p style={{fontSize:12, color:'var(--muted)', marginTop:14, textAlign:'center'}}>
                {locale === 'en'
                  ? 'We keep child data minimal. No sensitive information requested.'
                  : 'نطلب الحد الأدنى من البيانات.'}
              </p>
            </form>
          ) : (
            <div className="modal__success">
              <div className="check"><I.check /></div>
              <h3>{locale === 'en' ? 'Thank you — we\'ll be in touch.' : 'شكراً لكم — سنتواصل قريباً.'}</h3>
              <p>{locale === 'en'
                ? 'A member of the Blossom team will confirm your tour time within one working day.'
                : 'سيؤكد فريق بلوسوم موعد الجولة خلال يوم عمل.'}
              </p>
              <button className="btn btn--ghost" onClick={onClose}>{locale === 'en' ? 'Close' : 'إغلاق'}</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------- App ---------- */
function App() {
  const [locale, setLocale] = useState('en');
  const [tourOpen, setTourOpen] = useState(false);

  useEffect(() => {
    document.documentElement.dir = locale === 'ar' ? 'rtl' : 'ltr';
    document.documentElement.lang = locale;
  }, [locale]);

  const openTour = () => setTourOpen(true);

  return (
    <>
      <SafeguardBanner />
      <Nav locale={locale} setLocale={setLocale} openTour={openTour} />
      <Hero locale={locale} openTour={openTour} />
      <TrustStrip locale={locale} />
      <Approach locale={locale} />
      <BigIdea locale={locale} />
      <Programmes locale={locale} openTour={openTour} />
      <Branches locale={locale} openTour={openTour} />
      <Babilou locale={locale} />
      <About locale={locale} />
      <CTABand locale={locale} openTour={openTour} />
      <Footer locale={locale} />
      <MobileBar locale={locale} openTour={openTour} />
      <TourModal open={tourOpen} onClose={() => setTourOpen(false)} locale={locale} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
