function HomePage({ openTour, navigate }) {
  return (
    <main className="page-enter" data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero">
        <div className="container hero-grid">
          <div>
            <span className="hero-eyebrow">
              <span style={{ width: 8, height: 8, background: 'var(--c-green)', borderRadius: '50%' }} />
              Tours open for Sept 2026 intake
            </span>
            <h1 style={{ marginTop: 18 }}>
              A joyful, <strong>research-rooted</strong> start to learning — in the heart of Dubai Sports City.
            </h1>
            <p className="hero-sub">
              IDEA Early Learning Center is a KHDA-registered nursery & kindergarten for ages 9 months to 6, built around the US Creative Curriculum and 38 child-development objectives.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => openTour()}><Icon.Calendar size={14} /> Book a Tour</button>
              <button className="btn btn-ghost" onClick={() => navigate('approach')}>Our approach <Icon.Arrow /></button>
            </div>
            <div style={{ marginTop: 36, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
              <Stat n="9 m – 6 y" label="Age range we welcome" />
              <Stat n="38" label="Creative-Curriculum objectives" />
              <Stat n="75 yrs" label="Of child-development research" />
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <div className="hero-media">
              <img src="media/home-hero-main-banner.webp" alt="Children exploring at IDEA Early Learning Center" />
            </div>
            <div className="hero-pill">
              <span style={{ marginRight: 8 }}>✦</span> KHDA-registered
            </div>
            <div className="hero-badges">
              <div className="idea-rule" style={{ flexDirection: 'column', gap: 4, alignItems: 'flex-start' }}>
                <div style={{ display: 'flex', gap: 4 }}>
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: 'var(--c-magenta)' }} />
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: 'var(--c-teal)' }} />
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: 'var(--c-green)' }} />
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: 'var(--c-red)' }} />
                </div>
              </div>
              <div style={{ fontSize: 13 }}>
                <div style={{ fontWeight: 700 }}>The Creative Curriculum</div>
                <div style={{ color: 'var(--ink-2)' }}>US-developed · research-led</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <TrustStrip />

      {/* APPROACH TEASER */}
      <section className="section">
        <div className="container curr-grid">
          <div>
            <div className="eyebrow">Our approach</div>
            <h2 style={{ marginTop: 14 }}>Learning, the way young children actually learn — through play, language and warm relationships.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 16 }}>
              We follow <strong>The Creative Curriculum</strong>, a US framework rooted in 75 years of child-development research. It's hands-on, inquiry-based and aligned to US Federal Head Start and Common Core Standards.
            </p>
            <ul className="feature-list" style={{ marginTop: 24 }}>
              <li><span className="bullet" style={{ background: 'var(--c-magenta)' }}>1</span><div><strong>Responsive relationships first.</strong> Teachers tune in to each child's interests and rhythms.</div></li>
              <li><span className="bullet" style={{ background: 'var(--c-teal)' }}>2</span><div><strong>Hands-on, inquiry-based learning.</strong> Children investigate real materials in long, uninterrupted play.</div></li>
              <li><span className="bullet" style={{ background: 'var(--c-green)' }}>3</span><div><strong>Languages woven in.</strong> Arabic twice weekly, French once weekly. <span style={{ fontSize: 13, color: 'var(--muted)' }}>*to be confirmed</span></div></li>
              <li><span className="bullet" style={{ background: 'var(--c-red)' }}>4</span><div><strong>38 measurable objectives.</strong> So we can show you exactly how your child is growing.</div></li>
            </ul>
            <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => navigate('approach')}>Read about the curriculum <Icon.Arrow /></button>
          </div>
          <div style={{ textAlign: 'center', background: 'var(--cream-2)', borderRadius: 36, padding: '56px 32px' }}>
            <div className="objective-counter">38<small>objectives across social-emotional, physical, language, cognitive, literacy, maths, science, social studies, the arts and English-language acquisition</small></div>
            <div style={{ marginTop: 28, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, textAlign: 'left' }}>
              {['Social-emotional','Physical','Language','Cognitive','Literacy','Mathematics','Science & Tech','The Arts'].map(t => (
                <div key={t} style={{ padding: '10px 14px', background: 'white', borderRadius: 12, fontSize: 14, fontWeight: 600 }}>{t}</div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PROGRAMMES */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container">
          <SectionHeader eyebrow="Programmes & ages" title="A room for every stage from baby steps to big school." sub="Four programme bands, each designed for who your child is right now — and where they're heading next." />
          <ProgrammeCards openTour={openTour} />
        </div>
      </section>

      {/* FACILITIES TEASER */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Facilities" title="Calm, well-equipped spaces designed for curiosity." sub="Bright classrooms with attached bathrooms and libraries, a baby unit, a sensory break-out space, and an outdoor garden with mud-play, tricycle track and a rabbit enclosure." />
          <div className="fac-grid">
            <div className="fac-tile span-7">
              <img src="media/gallery-09.webp" alt="A learning classroom at IDEA" />
              <div className="fac-cap">Light-filled classrooms</div>
            </div>
            <div className="fac-tile span-5">
              <img src="media/curriculum-02.webp" alt="An art and creative learning area" />
              <div className="fac-cap">Art & creative studio</div>
            </div>
            <div className="fac-tile span-4">
              <img src="media/gallery-05.webp" alt="Outdoor garden and exploration area" />
              <div className="fac-cap">Garden & growing patch</div>
            </div>
            <div className="fac-tile span-4">
              <img src="media/gallery-10.webp" alt="Reading nook with books and beanbags" />
              <div className="fac-cap">Reading nooks</div>
            </div>
            <div className="fac-tile span-4">
              <img src="media/curriculum-01.webp" alt="Sensory and water play" />
              <div className="fac-cap">Sensory exploration</div>
            </div>
          </div>
          <div style={{ textAlign: 'center', marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => navigate('facilities')}>Tour the facilities <Icon.Arrow /></button>
          </div>
        </div>
      </section>

      {/* LEADERSHIP TEASER */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'center' }}>
          <div style={{ background: 'var(--ink)', borderRadius: 32, padding: 24, color: 'white', position: 'relative', overflow: 'hidden', aspectRatio: '4/5' }}>
            <img src="media/staff-claire-walker.webp" alt="Principal portrait — published with permission only" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', opacity: .92 }} />
            <div style={{ position: 'absolute', left: 24, bottom: 24, background: 'rgba(0,0,0,.55)', padding: '10px 14px', borderRadius: 12, backdropFilter: 'blur(6px)' }}>
              <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 20 }}>Claire Walker</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,.75)' }}>Principal · publish with permission</div>
            </div>
          </div>
          <div>
            <div className="eyebrow">Meet the team</div>
            <h2 style={{ marginTop: 14 }}>Led by educators who know your child by name.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 14 }}>
              Our team blends KHDA-experienced early-years specialists with Creative-Curriculum-trained teachers. Small adult-to-child ratios, daily handovers, and an open-door policy mean families always know what's happening in the classroom.
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 28, flexWrap: 'wrap' }}>
              <Stat n="4.2/5" label={<>WSA parent rating <span style={{ fontSize: 11, opacity: .7 }}>(29 reviews via WhichSchoolAdvisor)</span></>} />
              <Stat n="2016" label="Opened in Dubai Sports City" />
            </div>
            <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => navigate('about')}>About IDEA ELC <Icon.Arrow /></button>
          </div>
        </div>
      </section>

      <CtaBand openTour={() => openTour()} />

      <div style={{ height: 80 }} />
    </main>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'Fredoka, sans-serif', fontWeight: 600, fontSize: 32, color: 'var(--ink)', letterSpacing: '-0.02em' }}>{n}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)', maxWidth: 180 }}>{label}</div>
    </div>
  );
}
window.HomePage = HomePage;
window.Stat = Stat;