function FacilitiesPage({ openTour }) {
  const facilities = [
    { t: 'Light-filled classrooms', s: 'Each with attached bathrooms and an age-appropriate library — calm, well-organised, never overcrowded.', img: 'media/gallery-09.webp', color: 'var(--c-magenta)' },
    { t: 'Expanded baby unit', s: 'A dedicated, quiet baby room for our youngest — with a separate sleep area and feeding zone.', img: 'media/curriculum-01.webp', color: 'var(--c-teal)' },
    { t: 'Sensory break-out space', s: 'For regulation, calm-down and 1:1 work — gentle lighting, textures, and a focus on the whole child.', img: 'media/gallery-04.webp', color: 'var(--c-green)' },
    { t: 'Outdoor garden', s: 'Climbing area, tricycle track, gardening/vegetable-planting patch, mud-play kitchen, and a rabbit enclosure.', img: 'media/gallery-05.webp', color: 'var(--c-red)' },
    { t: 'Reading nooks & library', s: 'Cosy reading dens with curated books that reflect every child in the room.', img: 'media/gallery-10.webp', color: 'var(--c-sun)' },
    { t: 'Art & creative studio', s: 'A dedicated studio for painting, clay, collage and the long messy projects that great early-years art needs.', img: 'media/curriculum-02.webp', color: 'var(--c-sky)' },
  ];

  return (
    <main className="page-enter" data-screen-label="04 Facilities">
      <section className="container" style={{ paddingTop: 24 }}>
        <div className="page-banner">
          <img src="media/about-banner-legacy.webp" alt="Children playing at IDEA" />
          <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)' }}>Facilities</div>
            <h1 style={{ marginTop: 12 }}>Spaces that invite curiosity — indoors and out.</h1>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="What you'll find here" title="A purpose-built early-years centre in Victory Heights." sub="Premises designed around the way young children actually use a building: easy sightlines, attached bathrooms, calm transitions, and lots of outdoor light." align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {facilities.map((f, i) => (
              <article key={i} style={{ background: 'white', borderRadius: 24, overflow: 'hidden', border: '1px solid var(--line)' }}>
                <div style={{ aspectRatio: '4/3', position: 'relative' }}>
                  <img src={f.img} alt={f.t} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  <span style={{ position: 'absolute', left: 14, top: 14, width: 32, height: 32, borderRadius: 10, background: f.color }} />
                </div>
                <div style={{ padding: 20 }}>
                  <h3 style={{ fontSize: 19 }}>{f.t}</h3>
                  <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 8 }}>{f.s}</p>
                </div>
              </article>
            ))}
          </div>
          <p style={{ marginTop: 22, fontSize: 13, color: 'var(--muted)' }}>Facility details reported by third-party reviewers (WhichSchoolAdvisor, SchoolsCompared) — to be confirmed with the centre before publishing.</p>
        </div>
      </section>

      {/* Safeguarding strip */}
      <section className="section-sm" style={{ background: 'var(--paper)' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 36, alignItems: 'center' }}>
          <div style={{ width: 64, height: 64, borderRadius: 18, background: 'var(--c-green)', color: 'white', display: 'grid', placeItems: 'center' }}>
            <Icon.Shield size={32} />
          </div>
          <div>
            <h3>Safeguarding first.</h3>
            <p style={{ color: 'var(--ink-2)', marginTop: 8, maxWidth: 720 }}>
              We publish photography of our environment and group activities. Identifiable photos of individual children only appear with explicit written consent from families — and can be withdrawn at any time. Our team is briefed termly on child-safeguarding standards.
            </p>
          </div>
        </div>
      </section>

      {/* Gallery scroller */}
      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Inside the centre" title="A peek inside the day." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {['gallery-01.webp','gallery-02.webp','gallery-03.webp','gallery-04.webp','gallery-05.webp','gallery-06.webp','gallery-07.webp','gallery-08.webp'].map(g => (
              <div key={g} style={{ aspectRatio: '1/1', borderRadius: 18, overflow: 'hidden', background: 'var(--cream-2)' }}>
                <img src={`media/${g}`} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand openTour={openTour} title="The best way to see the space is to walk it." sub="Pick a 45-minute slot — we'll show you every room." />
      <div style={{ height: 80 }} />
    </main>
  );
}
window.FacilitiesPage = FacilitiesPage;