// Home page \u2014 hero, trust strip, find your branch, seven characters, Nordic approach, programmes, tour CTA.

function Home({ navigate, openTour, tweaks }) {
  return (
    <div data-screen-label="01 Home">
      <Hero navigate={navigate} openTour={openTour} variant={tweaks.heroStyle} />
      <TrustStrip />
      <FindBranch navigate={navigate} openTour={openTour} variant={tweaks.branchCardStyle} />
      <SevenCharactersTeaser navigate={navigate} variant={tweaks.characterStyle} />
      <ApproachPillars navigate={navigate} />
      <DibberMealBlock />
      <ProgrammesTeaser navigate={navigate} />
      <ParentsBlock />
      <CtaBand openTour={openTour} />
    </div>
  );
}

// ---------------- Hero ----------------
function Hero({ navigate, openTour, variant }) {
  // variants: 'classic' (split with empty-classroom photo), 'clover' (heart-masked photo), 'editorial' (full-bleed sand)
  return (
    <section style={{ paddingTop: 56, paddingBottom: 72, position: 'relative', overflow: 'hidden' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: variant === 'editorial' ? '1fr' : '1fr 1.05fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="chip sprout"><DibberMark size={14} color="#13452A" /> Nordic early-learning, in the UAE since 2014</div>
            <h1 className="serif" style={{ marginTop: 20 }}>
              Nurturing <em style={{ fontStyle: 'italic', color: 'var(--dibber-green-2)' }}>confidence</em>, independence,<br/>
              and an &ldquo;I can&rdquo; mindset &mdash; the Scandinavian way.
            </h1>
            <p className="lead" style={{ marginTop: 24, maxWidth: 540 }}>
              An authentic Norwegian curriculum, taught through play, in five Dubai branches and one in Abu Dhabi.
              We&rsquo;ve got space, time, and a big heart.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={openTour}>
                <DibberMark size={16} color="#FBF8F0" /> Book a tour
              </button>
              <button className="btn btn-ghost" onClick={() => navigate({ name: 'branches' })}>Find your nearest branch</button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginTop: 36, flexWrap: 'wrap' }}>
              <Tile label="Ages" value="45 days \u2013 6 yrs" />
              <Tile label="Branches" value="5 Dubai \u00b7 1 Abu Dhabi" />
              <Tile label="Open" value="Mon\u2013Fri, 7:30\u20136:00" />
            </div>
          </div>

          {variant !== 'editorial' && (
            <div style={{ position: 'relative' }}>
              {variant === 'clover' ? (
                <HeroClover />
              ) : (
                <HeroClassic />
              )}
            </div>
          )}
        </div>

        {variant === 'editorial' && (
          <div style={{ marginTop: 56, borderRadius: 28, overflow: 'hidden', position: 'relative' }}>
            <img src="media/photo-branch-01.webp" alt="A Dibber Nordic classroom with low wooden tables, soft cushions and large windows" style={{ width: '100%', height: 520, objectFit: 'cover' }} />
            <div style={{ position: 'absolute', bottom: 18, left: 18, padding: '10px 14px', background: 'rgba(19,69,42,0.85)', color: 'var(--cream)', borderRadius: 999, fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
              Empty classroom \u2014 The Sustainable City
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function HeroClassic() {
  return (
    <div style={{ position: 'relative' }}>
      <div style={{ borderRadius: 28, overflow: 'hidden', boxShadow: '0 30px 60px -20px rgba(19,69,42,0.18)' }}>
        <img src="media/photo-branch-01.webp" alt="Empty Dibber classroom: low wooden tables, soft cushions and large windows letting in natural light"
             style={{ width: '100%', height: 540, objectFit: 'cover', display: 'block' }} />
      </div>
      {/* Floating quote card */}
      <div style={{ position: 'absolute', left: -24, bottom: -28, background: 'var(--cream)', borderRadius: 18, padding: '18px 22px', boxShadow: '0 16px 36px -10px rgba(19,69,42,0.2)', maxWidth: 280, border: '1px solid var(--line)' }}>
        <div className="serif" style={{ fontSize: 18, fontStyle: 'italic', color: 'var(--dibber-green)', lineHeight: 1.35 }}>
          &ldquo;When we play, we learn.&rdquo;
        </div>
        <div style={{ marginTop: 8, fontSize: 12, color: 'var(--muted)' }}>One of three Dibber learning principles.</div>
      </div>
      {/* Heart motif bubble */}
      <div style={{ position: 'absolute', right: -18, top: -18, width: 88, height: 88, borderRadius: 44, background: 'var(--sprout)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <DibberMark size={42} color="#13452A" />
      </div>
    </div>
  );
}

function HeroClover() {
  // Use SVG clip-path to mask the empty-classroom hero into a soft clover/heart silhouette
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1', maxWidth: 540, margin: '0 auto' }}>
      <svg viewBox="0 0 200 200" width="100%" height="100%" style={{ display: 'block' }}>
        <defs>
          <clipPath id="hero-clover" clipPathUnits="objectBoundingBox">
            <path d="M0.5,0.04 C0.62,0.04 0.74,0.12 0.78,0.22 C0.86,0.18 0.94,0.22 0.96,0.32 C0.99,0.44 0.92,0.52 0.84,0.54 C0.92,0.62 0.96,0.74 0.86,0.84 C0.76,0.94 0.62,0.92 0.54,0.84 C0.5,0.94 0.38,0.98 0.28,0.92 C0.16,0.84 0.14,0.7 0.22,0.6 C0.1,0.58 0.04,0.46 0.1,0.36 C0.16,0.24 0.3,0.22 0.36,0.3 C0.4,0.16 0.5,0.04 0.5,0.04 Z" />
          </clipPath>
        </defs>
        <image href="media/photo-branch-01.webp" x="0" y="0" width="200" height="200" preserveAspectRatio="xMidYMid slice" clipPath="url(#hero-clover)" />
      </svg>
      <div style={{ position: 'absolute', right: 0, bottom: 0, width: 110, height: 110, borderRadius: 55, background: 'var(--sun)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 12px 30px -10px rgba(232,155,60,0.4)' }}>
        <div className="serif" style={{ fontSize: 14, color: 'var(--dibber-green)', fontWeight: 600, textAlign: 'center', padding: 8, lineHeight: 1.15 }}>
          Tours<br/>open
        </div>
      </div>
    </div>
  );
}

function Tile({ label, value }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{label}</div>
      <div className="serif" style={{ fontSize: 19, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{value}</div>
    </div>
  );
}

// ---------------- Trust strip ----------------
function TrustStrip() {
  const items = [
    { k: 'Curriculum', v: 'Authentic Norwegian Rammeplan' },
    { k: 'Regulator',  v: 'KHDA-licensed ECCs in Dubai' },
    { k: 'In the UAE', v: 'Since 2014 (formerly CreaKids)' },
    { k: 'Ages',       v: '45 days to 6 years' },
    { k: 'Branches',   v: '5 Dubai \u00b7 1 Abu Dhabi' },
  ];
  return (
    <section className="section-sand" style={{ padding: '28px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 24 }}>
          {items.map(({ k, v }) => (
            <div key={k} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{k}</div>
              <div style={{ fontSize: 14, color: 'var(--dibber-green)', fontWeight: 600, fontFamily: 'var(--serif)' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width: 900px){.section-sand .wrap > div{grid-template-columns:repeat(2,1fr) !important;gap:18px !important;}}`}</style>
    </section>
  );
}

// ---------------- Find your branch (interactive map-style picker) ----------------
function FindBranch({ navigate, openTour, variant }) {
  const [hover, setHover] = useState(BRANCHES[0].id);
  const active = BRANCHES.find(b => b.id === hover) || BRANCHES[0];

  return (
    <section>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <SectionHead eyebrow="Find a branch" title={<span>Six UAE nurseries.<br/>Find the one nearest you.</span>}
                       lead="Each branch has its own personality, its own outdoor spaces, and its own team \u2014 but the same Nordic curriculum, the same Heart Culture, and the same toll-free line."/>
          <button className="btn btn-ghost" onClick={() => navigate({ name: 'branches' })}>See all branches</button>
        </div>

        {variant === 'list' ? (
          <BranchListView navigate={navigate} />
        ) : (
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 32, alignItems: 'stretch' }}>
            {/* Branch list */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {BRANCHES.map((b, i) => (
                <button key={b.id}
                        onMouseEnter={() => setHover(b.id)}
                        onClick={() => navigate({ name: 'branch', id: b.id })}
                        style={{
                          textAlign: 'left',
                          padding: '20px 22px',
                          background: hover === b.id ? 'var(--cream)' : 'transparent',
                          border: '1.5px solid ' + (hover === b.id ? 'var(--dibber-green)' : 'var(--line)'),
                          borderRadius: 16,
                          transition: 'all .15s ease',
                          display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 18,
                        }}>
                  <div style={{ width: 44, height: 44, borderRadius: 22, background: b.accent + '33', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: 'var(--dibber-green)', fontWeight: 700, fontFamily: 'var(--serif)' }}>
                    {String(i + 1).padStart(2, '0')}
                  </div>
                  <div>
                    <div className="serif" style={{ fontSize: 21, fontWeight: 600, color: 'var(--dibber-green)' }}>{b.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>{b.area} \u00b7 {b.city}</div>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--dibber-green-2)', fontWeight: 600 }}>{hover === b.id ? 'Visit \u2192' : ''}</div>
                </button>
              ))}
              <div style={{ marginTop: 8, padding: '14px 18px', background: 'var(--sprout-soft)', border: '1px solid var(--sprout)', borderRadius: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div className="serif" style={{ fontSize: 17, color: 'var(--dibber-green)', fontWeight: 600 }}>Khalifa City A \u2014 Abu Dhabi</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>Our largest UAE campus \u2014 ADEK-regulated.</div>
                </div>
                <button className="btn-link" onClick={() => navigate({ name: 'branches' })}>See group</button>
              </div>
            </div>

            {/* Preview card */}
            <div style={{ position: 'sticky', top: 100, alignSelf: 'flex-start' }}>
              <BranchPreview branch={active} openTour={openTour} navigate={navigate} />
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function BranchListView({ navigate }) {
  return (
    <div className="grid grid-3">
      {BRANCHES.map(b => (
        <button key={b.id} onClick={() => navigate({ name: 'branch', id: b.id })}
                style={{ textAlign: 'left', borderRadius: 18, overflow: 'hidden', background: 'var(--cream)', border: '1px solid var(--line)', cursor: 'pointer', transition: 'transform .15s' }}
                onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-3px)'}
                onMouseLeave={e => e.currentTarget.style.transform = 'none'}>
          <div style={{ height: 200, overflow: 'hidden', background: b.accent + '33' }}>
            <SafeImg src={b.photos?.[0]} alt={b.name + ' branch interior'} label={b.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ padding: '20px 22px' }}>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{b.city}</div>
            <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{b.name}</div>
            <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 6 }}>{b.area}</div>
            <div style={{ marginTop: 14, display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {b.features.slice(0, 2).map(f => <span key={f} className="chip">{f}</span>)}
            </div>
          </div>
        </button>
      ))}
    </div>
  );
}

function BranchPreview({ branch: b, openTour, navigate }) {
  return (
    <div style={{ background: 'var(--cream)', border: '1px solid var(--line)', borderRadius: 22, overflow: 'hidden' }}>
      <div style={{ height: 280, overflow: 'hidden', position: 'relative' }}>
        <SafeImg src={b.photos?.[0]} alt={b.name + ' branch'} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', top: 14, left: 14, padding: '6px 12px', borderRadius: 999, background: 'rgba(19,69,42,0.85)', color: 'var(--cream)', fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          {b.city}
        </div>
      </div>
      <div style={{ padding: '24px 26px' }}>
        <h3 className="serif" style={{ fontSize: 28 }}>{b.name}</h3>
        <p style={{ marginTop: 8, color: 'var(--muted)', fontSize: 15 }}>{b.blurb}</p>
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {b.features.slice(0, 4).map(f => (
            <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: b.accent }}></span>
              {f}
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 24 }}>
          <button className="btn btn-primary" onClick={() => { openTour({ branch: b.id }); }}>Book a tour here</button>
          <button className="btn btn-ghost" onClick={() => navigate({ name: 'branch', id: b.id })}>Visit page</button>
        </div>
      </div>
    </div>
  );
}

// ---------------- Seven characters teaser ----------------
function SevenCharactersTeaser({ navigate, variant }) {
  return (
    <section className="section-sprout">
      <div className="wrap">
        <SectionHead eyebrow="The seven learning characters"
                     title="A curriculum told through seven friends."
                     lead="Norway's Rammeplan organises early learning into seven domains. At Dibber, each one has a character who shows up across the day \u2014 in stories, songs, snack time and play." />
        <div className="mt-12">
          {variant === 'grid' ? <CharacterGrid /> : variant === 'tiles' ? <CharacterTiles /> : <CharacterPills />}
        </div>
        <div className="center mt-10">
          <button className="btn btn-ghost" onClick={() => navigate({ name: 'approach' })}>Meet all seven characters</button>
        </div>
      </div>
    </section>
  );
}

function CharacterGrid() {
  return (
    <div className="grid grid-4">
      {CHARACTERS.map((c, i) => (
        <div key={c.name} style={{ padding: '28px 24px', background: 'var(--cream)', borderRadius: 18, border: '1px solid var(--line)', position: 'relative', overflow: 'hidden' }}>
          <div style={{ width: 64, height: 64, borderRadius: 32, background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <DibberMark size={32} color="#FBF8F0" />
          </div>
          <div className="mono" style={{ fontSize: 10, color: c.color, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 18, fontWeight: 600 }}>{c.domain}</div>
          <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{c.name}</div>
          <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 8 }}>{c.focus}</div>
          <div style={{ position: 'absolute', right: -20, bottom: -20, opacity: 0.06 }}>
            <DibberMark size={140} color={c.color} />
          </div>
        </div>
      ))}
      {/* Eighth tile: an info card matching the 7-grid */}
      <div style={{ padding: '28px 24px', background: 'var(--dibber-green)', color: 'var(--cream)', borderRadius: 18, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--sprout)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Underpinning all seven</div>
          <div className="serif" style={{ fontSize: 22, marginTop: 6 }}>Four child-development domains</div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 18 }}>
          {['Social','Emotional','Cognitive','Physical'].map(t => (
            <span key={t} style={{ padding: '6px 12px', borderRadius: 999, fontSize: 12, background: 'rgba(251,248,240,0.12)', color: 'var(--cream)' }}>{t}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

function CharacterTiles() {
  return (
    <div className="grid grid-4">
      {CHARACTERS.map((c, i) => (
        <div key={c.name} style={{ background: c.color, color: 'var(--cream)', padding: '28px 22px', borderRadius: 22, position: 'relative', overflow: 'hidden', minHeight: 220 }}>
          <DibberMark size={36} color="#FBF8F0" />
          <div className="serif" style={{ fontSize: 22, marginTop: 16, fontWeight: 600 }}>{c.name}</div>
          <div className="mono" style={{ fontSize: 10, marginTop: 4, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.85 }}>{c.domain}</div>
          <div style={{ fontSize: 13, marginTop: 12, opacity: 0.9 }}>{c.focus}</div>
        </div>
      ))}
    </div>
  );
}

function CharacterPills() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'center' }}>
      {CHARACTERS.map(c => (
        <div key={c.name} style={{ display: 'flex', alignItems: 'center', gap: 12, background: 'var(--cream)', padding: '14px 22px 14px 14px', borderRadius: 999, border: '1px solid var(--line)' }}>
          <div style={{ width: 44, height: 44, borderRadius: 22, background: c.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <DibberMark size={22} color="#FBF8F0" />
          </div>
          <div>
            <div className="serif" style={{ fontSize: 16, color: 'var(--dibber-green)', fontWeight: 600 }}>{c.name}</div>
            <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{c.domain}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---------------- Approach pillars ----------------
function ApproachPillars({ navigate }) {
  return (
    <section>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <SectionHead eyebrow="The Nordic approach"
                         title={<span>Three principles.<br/>One curriculum.</span>}
                         lead="Dibber's curriculum follows Norway's Rammeplan \u2014 the national early-years framework \u2014 organised around three plain-language ideas." />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 32 }}>
              {PILLARS.map((p, i) => (
                <div key={p.title} style={{ padding: '20px 22px', borderRadius: 14, border: '1px solid var(--line)', background: 'var(--cream)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--dibber-green-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{p.kicker}</div>
                    <div className="mono" style={{ fontSize: 11, color: 'var(--muted)' }}>0{i+1}</div>
                  </div>
                  <div className="serif" style={{ fontSize: 22, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 8 }}>{p.title}</div>
                  <div style={{ marginTop: 8, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>{p.body}</div>
                </div>
              ))}
            </div>
            <div className="mt-6">
              <button className="btn-link" onClick={() => navigate({ name: 'approach' })}>Read the full approach</button>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{ borderRadius: 28, overflow: 'hidden' }}>
              <img src="media/photo-activity-04.webp" alt="A bright Dibber classroom with low wooden furniture and natural materials"
                   style={{ width: '100%', height: 600, objectFit: 'cover' }} />
            </div>
            <div style={{ position: 'absolute', left: -28, bottom: -28, background: 'var(--sun)', color: 'var(--dibber-green)', borderRadius: 22, padding: '22px 26px', maxWidth: 280, boxShadow: '0 18px 40px -12px rgba(232,155,60,0.4)' }}>
              <div className="mono" style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Heart culture</div>
              <div className="serif" style={{ fontSize: 22, marginTop: 6, fontWeight: 600, lineHeight: 1.2 }}>
                &ldquo;Space, time, and a big heart.&rdquo;
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Dibber Meal block ----------------
function DibberMealBlock() {
  return (
    <section className="section-dark">
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow on-dark">The Dibber Meal</div>
            <h2 className="serif" style={{ marginTop: 14 }}>Mealtimes, as curriculum.</h2>
            <p className="lead" style={{ marginTop: 20, color: 'rgba(251,248,240,0.82)', maxWidth: 520 }}>
              The Dibber Meal is taught \u2014 not just eaten. Children learn to wait, to share, to pour, to name what's on the plate,
              to thank the cook. It's where Heart Culture shows up most clearly, three times a day.
            </p>
            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
              {[
                ['Wait', 'patience and turn-taking'],
                ['Share', 'serving, passing, asking'],
                ['Name', 'language built on the plate'],
              ].map(([k, v]) => (
                <div key={k}>
                  <div className="serif" style={{ fontSize: 26, color: 'var(--sprout)', fontWeight: 600 }}>{k}</div>
                  <div style={{ fontSize: 13, color: 'rgba(251,248,240,0.7)', marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="img-frame" style={{ borderRadius: 28, aspectRatio: '4/5' }}>
              <SafeImg src="media/photo-environment-01.webp" alt="A soft, abstract still life \u2014 the calm of a Dibber classroom" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------------- Programmes teaser ----------------
function ProgrammesTeaser({ navigate }) {
  return (
    <section className="section-sand">
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <SectionHead eyebrow="Programmes &amp; ages" title={<span>From 45 days to school-ready.</span>}
                       lead="Four age bands, three attendance patterns, three seasonal camps. Each room is led by qualified educators meeting KHDA requirements."/>
          <button className="btn btn-ghost" onClick={() => navigate({ name: 'programmes' })}>See programmes</button>
        </div>
        <div className="grid grid-4">
          {AGE_BANDS.map(a => (
            <div key={a.id} style={{ padding: '24px 22px', background: 'var(--cream)', borderRadius: 16, border: '1px solid var(--line)' }}>
              <div className="mono" style={{ fontSize: 11, color: 'var(--dibber-green-2)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>{a.label}</div>
              <div className="serif" style={{ fontSize: 26, color: 'var(--dibber-green)', fontWeight: 600, marginTop: 4 }}>{a.range}</div>
              <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 12, lineHeight: 1.55 }}>{a.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------------- Parents / testimonials placeholder ----------------
function ParentsBlock() {
  return (
    <section>
      <div className="wrap">
        <SectionHead eyebrow="From our families" title="Parents say it best." align="center" />
        <div className="grid grid-3 mt-12">
          {[1,2,3].map(i => (
            <div key={i} style={{ padding: '32px 28px', borderRadius: 18, border: '1px dashed var(--line-2)', background: 'var(--cream)' }}>
              <div className="flag">Awaiting parental consent</div>
              <p className="serif" style={{ fontStyle: 'italic', fontSize: 19, color: 'var(--dibber-green)', marginTop: 16, lineHeight: 1.5 }}>
                &ldquo;Permissioned testimonial will appear here.&rdquo;
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>
                <div style={{ width: 40, height: 40, borderRadius: 20, background: 'var(--sand-2)' }}></div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--dibber-green)' }}>Parent name</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>Branch \u2014 child age</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <p className="center muted mt-6" style={{ fontSize: 13, maxWidth: 600, margin: '24px auto 0' }}>
          We only publish named testimonials with documented parental consent. The client will supply these before launch.
        </p>
      </div>
    </section>
  );
}

// ---------------- CTA band ----------------
function CtaBand({ openTour }) {
  return (
    <section style={{ paddingTop: 40, paddingBottom: 96 }}>
      <div className="wrap">
        <div style={{ background: 'var(--dibber-green)', color: 'var(--cream)', borderRadius: 28, padding: '64px 56px', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', right: -60, top: -60, opacity: 0.1 }}><DibberMark size={320} color="#FBF8F0" /></div>
          <div style={{ position: 'relative', maxWidth: 720 }}>
            <div className="eyebrow on-dark">Book a tour</div>
            <h2 className="serif" style={{ marginTop: 14, color: 'var(--cream)' }}>Come and meet us.</h2>
            <p className="lead" style={{ marginTop: 16, color: 'rgba(251,248,240,0.85)' }}>
              The best way to know if Dibber is right for your family is to walk through one of our nurseries.
              Tours take 45 minutes \u2014 bring your child if you can.
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-sun" onClick={openTour}>Book a tour</button>
              <a className="btn btn-ghost-light" href="https://wa.link/95m057" target="_blank" rel="noopener">WhatsApp us</a>
              <a className="btn btn-ghost-light" href="tel:800342237">800-DIBBER</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });
