function AboutPage({ openTour }) {
  return (
    <main className="page-enter" data-screen-label="06 About">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/about-group-banner.webp" alt="The IDEA ELC community" />
          <div className="pb-content">
            <div className="idea-rule" style={{ marginBottom: 16 }}><span/><span/><span/><span/></div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.75)' }}>About</div>
            <h1 style={{ marginTop: 12 }}>An idea that became a community.</h1>
          </div>
        </div>
      </section>

      {/* Origin */}
      <section className="section">
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <h2>A Dubai early-years centre with a US-rooted curriculum and a family-partnership philosophy.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 18 }}>
              IDEA Early Learning Center opened in <strong>2016</strong> in Dubai Sports City, part of the <strong>IDEA Education Group</strong>. We believe every child — and every family — should receive excellence in education. That belief shapes the way we hire, the way we plan a day, and the way we partner with parents.
            </p>
            <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 14 }}>
              Our vision: <em>to be the leading provider of cutting-edge, holistic and inclusive education in the UAE.</em>
            </p>
          </div>
          <div style={{ background: 'var(--cream-2)', borderRadius: 32, padding: '40px 32px' }}>
            <div className="eyebrow">Our values</div>
            <div style={{ display: 'grid', gap: 18, marginTop: 24 }}>
              {[
                ['Respect', 'For each child, family, culture and colleague.', 'var(--c-magenta)'],
                ['Responsibility', 'For the trust families place in us — every day.', 'var(--c-teal)'],
                ['Innovation', 'For how we teach, observe and partner with parents.', 'var(--c-red)'],
              ].map(([v, s, c]) => (
                <div key={v} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                  <span style={{ width: 48, height: 48, borderRadius: 14, background: c, color: 'white', display: 'grid', placeItems: 'center', fontFamily: 'Fredoka', fontWeight: 600, fontSize: 22, flex: 'none' }}>{v[0]}</span>
                  <div>
                    <h4 style={{ fontFamily: 'Fredoka', fontSize: 19 }}>{v}</h4>
                    <p style={{ color: 'var(--ink-2)', fontSize: 14, marginTop: 4 }}>{s}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container">
          <SectionHeader eyebrow="Our story" title="A short journey, so far." align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {[
              ['2015', 'KHDA licence', 'IDEA Early Learning Center is registered with the KHDA Early Childhood Centre directory.'],
              ['2016', 'Doors open', 'The centre opens in Victory Heights, Dubai Sports City, with the US Creative Curriculum.'],
              ['2024', 'A bigger garden', 'Outdoor classroom expanded with mud-play, growing patch and rabbit enclosure.'],
              ['2026', 'Baby unit grows', 'Plans to expand the baby unit and add a dedicated sensory break-out space *.'],
            ].map(([y, t, s], i) => (
              <div key={i} style={{ position: 'relative', padding: '24px 0 0' }}>
                <div style={{ width: 14, height: 14, borderRadius: '50%', background: ['var(--c-magenta)','var(--c-teal)','var(--c-green)','var(--c-red)'][i] }} />
                <div style={{ position: 'absolute', top: 7, left: 14, right: 0, height: 2, background: 'var(--line)' }} />
                <div style={{ fontFamily: 'Fredoka', fontWeight: 600, fontSize: 28, marginTop: 14 }}>{y}</div>
                <div style={{ fontWeight: 700, marginTop: 4 }}>{t}</div>
                <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 6 }}>{s}</p>
              </div>
            ))}
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--muted)' }}>* Per WhichSchoolAdvisor reporting — to be confirmed with the centre. KHDA listing shows 2015; opening year reported as 2016 by WSA/SchoolsCompared.</p>
        </div>
      </section>

      {/* Leadership */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Leadership" title="People you'll meet on day one." sub="Permission-pending portraits — to be published only with each individual's consent." align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {[
              { name: 'Claire Walker', role: 'Principal', src: 'media/staff-claire-walker.webp', accent: 'var(--c-magenta)' },
              { name: 'Andrea',         role: 'Early Years Lead *', src: 'media/staff-andrea.webp', accent: 'var(--c-teal)' },
              { name: 'Nat',            role: 'Family Liaison *', src: 'media/staff-nat.webp', accent: 'var(--c-red)' },
            ].map((p) => (
              <article key={p.name} style={{ background: 'white', borderRadius: 24, overflow: 'hidden', border: '1px solid var(--line)' }}>
                <div style={{ aspectRatio: '4/4', position: 'relative', background: p.accent }}>
                  <img src={p.src} alt={`${p.name} portrait — permission pending`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ padding: 20 }}>
                  <h4 style={{ fontFamily: 'Fredoka', fontSize: 20 }}>{p.name}</h4>
                  <div style={{ color: 'var(--ink-2)', fontWeight: 600, fontSize: 14 }}>{p.role}</div>
                  <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 10 }}>Bio published with the team member's permission.</p>
                </div>
              </article>
            ))}
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--muted)' }}>* Roles to be confirmed. Names taken from supplied staff media files.</p>
        </div>
      </section>

      {/* Group context */}
      <section className="section" style={{ background: 'var(--paper)' }}>
        <div className="container" style={{ background: 'var(--ink)', color: 'white', borderRadius: 32, padding: 56, position: 'relative', overflow: 'hidden' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="idea-rule" style={{ marginBottom: 18 }}><span/><span/><span/><span/></div>
            <div className="eyebrow" style={{ color: 'rgba(255,255,255,.7)' }}>IDEA Education Group</div>
            <h2 style={{ color: 'white', marginTop: 12 }}>One small, focused early-years centre — backed by a group with a bigger educational ambition.</h2>
            <p style={{ color: 'rgba(255,255,255,.75)', marginTop: 16, fontSize: 17 }}>
              IDEA ELC is part of the IDEA Education Group, whose stated mission is to be the leading provider of cutting-edge, holistic and inclusive education in the UAE.
            </p>
          </div>
          <svg style={{ position: 'absolute', right: -40, bottom: -40, opacity: .25 }} width="320" height="320" viewBox="0 0 320 320">
            <circle cx="240" cy="80" r="60" fill="var(--c-magenta)" />
            <circle cx="80" cy="240" r="80" fill="var(--c-teal)" />
            <circle cx="240" cy="240" r="40" fill="var(--c-sun)" />
          </svg>
        </div>
      </section>

      <CtaBand openTour={openTour} />
      <div style={{ height: 80 }} />
    </main>
  );
}
window.AboutPage = AboutPage;