// pages-2.jsx — Programmes, Facilities, Branches hub, BranchDetail
const ProgrammesPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64 }}>
        <div className="container">
          <span className="eyebrow">Programmes & Ages</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>
            From first impressions to school-ready — a continuous story.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.55 }}>
            Five age groups, designed so each child's day matches their stage. Children stay with familiar
            key persons as they move through the rooms.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {D.ageGroups.map((a, i) => (
              <div key={a.id} style={{
                display: 'grid', gridTemplateColumns: '80px 1fr 1fr 220px',
                gap: 28, alignItems: 'center',
                padding: '32px 36px', background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-soft)',
                borderRadius: 'var(--r-lg)', border: '1px solid var(--line)'
              }}>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 52, color: 'var(--leaf)', lineHeight: 1 }}>
                  {String(i + 1).padStart(2, '0')}
                </div>
                <div>
                  <span className="chip leaf">{a.range}</span>
                  <h3 style={{ fontSize: 30, marginTop: 12, marginBottom: 8 }}>{a.title}</h3>
                  <p style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.5, fontStyle: 'italic' }}>{a.lead}</p>
                </div>
                <div>
                  <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.6 }}>{a.desc}</p>
                  {a.tag && <span className="chip sun" style={{ marginTop: 12 }}><Icon name="sun" size={12} /> {a.tag}</span>}
                </div>
                <div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 16 }}>
                    {a.focus.map((f, j) => (
                      <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12.5, color: 'var(--ink-soft)' }}>
                        <Icon name="check" size={12} /> {f}
                      </div>
                    ))}
                  </div>
                  <button className="btn btn-ghost btn-sm" onClick={onBookTour} style={{ width: '100%', justifyContent: 'center' }}>
                    Tour this age group
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Summer camp teaser */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 48, alignItems: 'center' }}>
            <div>
              <span className="eyebrow sun">Summer Programme</span>
              <h2 style={{ margin: '12px 0 18px' }}>The Living Planet Atelier</h2>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 16 }}>
                Our annual summer camp turns the campuses into a living lab — outdoor expeditions, nature
                workshops, art ateliers and water play, designed for ages 2–6.
              </p>
              <p style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 22 }}>
                Dates and pricing for the next intake will be shared once finalised — request the brochure below.
              </p>
              <button className="btn btn-primary" onClick={onBookTour}>
                Request the summer brochure <Icon name="arrow" size={14} />
              </button>
            </div>
            <div className="photo-placeholder" style={{ aspectRatio: '4/3' }}>
              <div className="label">summer-camp · imagery TBC</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- Facilities ----------
const FacilitiesPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64 }}>
        <div className="container">
          <span className="eyebrow">Environment · The Third Teacher</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>
            Natural environments designed for self-discovery and social play.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.55 }}>
            Reggio educators speak of the environment as the third teacher. Every Odyssey campus contains
            the eight environments below — each one designed to invite a particular kind of thinking.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
            {D.facilities.map((f, i) => (
              <div key={i} className="card" style={{ padding: 28 }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 18 }}>
                  <div style={{ width: 56, height: 56, borderRadius: 14, background: i % 2 ? 'var(--sun-soft)' : 'var(--leaf-soft)', color: i % 2 ? '#a67212' : 'var(--leaf)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <Icon name={f.icon} size={24} />
                  </div>
                  <div>
                    <h3 style={{ fontSize: 22, marginBottom: 6 }}>{f.title}</h3>
                    <p style={{ fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{f.note}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Consent-safe gallery */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div className="shead">
            <span className="eyebrow">Gallery</span>
            <h2>Inside an Odyssey campus.</h2>
            <p>A consent-safe glimpse of our ateliers, light tables, libraries and outdoor classrooms.</p>
          </div>
          <div className="gallery">
            <div className="tile wide tall">
              <img src="assets/gallery-3.webp" alt="Reggio atelier work in progress" />
              <span className="consent-badge"><Icon name="shield" size={12} /> Consent-cleared</span>
            </div>
            <div className="tile">
              <img src="assets/gallery-1.webp" alt="Light table sensory exploration" />
            </div>
            <div className="tile">
              <img src="assets/gallery-2.webp" alt="Outdoor garden play" />
            </div>
            <div className="tile">
              <img src="assets/gallery-4.webp" alt="Classroom corner" />
            </div>
            <div className="tile">
              <img src="assets/gallery-5.webp" alt="Block play" />
            </div>
            <div className="tile wide">
              <img src="assets/gallery-6.webp" alt="Outdoor playground" />
            </div>
            <div className="tile">
              <div className="photo-placeholder" style={{ width: '100%', height: '100%' }}>
                <div className="label">music-room · hi-res TBC</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, padding: 40, background: 'var(--paper-soft)', borderRadius: 'var(--r-xl)', border: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--leaf-soft)', color: 'var(--leaf)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="heart" size={20} />
              </div>
              <div>
                <h3 style={{ fontSize: 22 }}>Lead Nurse · available 24/7</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.55 }}>
                  A qualified lead nurse is available for emergency response. Detailed health, safeguarding
                  and supervision policies are walked through with families during the tour.
                </p>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: 'var(--sun-soft)', color: '#a67212', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="shield" size={20} />
              </div>
              <div>
                <h3 style={{ fontSize: 22 }}>Child safeguarding first</h3>
                <p style={{ fontSize: 14, color: 'var(--ink-soft)', marginTop: 8, lineHeight: 1.55 }}>
                  We do not publish photos of identifiable children without written parental consent. This
                  site previews only consent-cleared imagery — the rest sits behind the family portal.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- Branches hub ----------
const BranchesPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64, paddingBottom: 32 }}>
        <div className="container">
          <span className="eyebrow">Branches</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>
            Six Odyssey campuses across Dubai.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.55 }}>
            Each branch has its own admissions team, atelier, playground and outdoor spaces — but a single
            shared pedagogy and curriculum.
          </p>
        </div>
      </section>

      <BranchMapSection navigate={navigate} compact={false} />

      <section className="section-sm">
        <div className="container">
          <div className="branches">
            {D.branches.map(b => (
              <div className="branch-card" key={b.id} onClick={() => navigate("branch", b.id)}>
                <div className="pic">
                  <img src={b.photo} alt={b.name + " — Odyssey Nursery"} />
                  <span className="chip" style={{ position: 'absolute', top: 12, left: 12, background: 'rgba(255,251,245,0.95)' }}>{b.tag}</span>
                </div>
                <div className="body">
                  <span className="eyebrow brown" style={{ fontSize: 11 }}>{b.area}</span>
                  <h3 style={{ marginTop: 6 }}>{b.name}</h3>
                  <div className="addr">{b.address}</div>
                  <div className="row">
                    <div className="phone"><Icon name="phone" size={12} /> {b.phone}</div>
                    <span style={{ color: 'var(--brand-brown)', fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
                      Visit branch <Icon name="arrow" size={12} />
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- Single branch ----------
const BranchDetail = ({ branchId, navigate, onBookTour }) => {
  const D = window.OdysseyData;
  const b = D.branches.find(x => x.id === branchId) || D.branches[0];
  return (
    <div className="page-enter">
      <section style={{ padding: '40px 0 24px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <button onClick={() => navigate("branches")} className="btn btn-ghost btn-sm" style={{ marginBottom: 24 }}>
            <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><Icon name="chev" size={14} /></span>
            All branches
          </button>
          <div className="detail-hero">
            <div>
              <span className="chip"><span className="chip-dot" /> {b.area}</span>
              <h1 style={{ marginTop: 16, marginBottom: 18, fontSize: 'clamp(36px, 4.4vw, 64px)' }}>{b.name}</h1>
              <p style={{ fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.55, marginBottom: 24, maxWidth: 460 }}>{b.blurb}</p>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => onBookTour(b.id)}>
                  <Icon name="calendar" size={14} /> Book a tour at {b.name}
                </button>
                <a href={"tel:" + b.tel} className="btn btn-ghost">
                  <Icon name="phone" size={14} /> {b.phone}
                </a>
              </div>
            </div>
            <div className="photo">
              <img src={b.photo} alt={b.name} />
            </div>
          </div>

          <div className="detail-info-grid">
            <div className="detail-info">
              <div className="lab"><Icon name="pin" size={11} /> Address</div>
              <div className="val">{b.address}, Dubai</div>
            </div>
            <div className="detail-info">
              <div className="lab"><Icon name="phone" size={11} /> Telephone</div>
              <div className="val"><a href={"tel:" + b.tel}>{b.phone}</a> · <a href={"tel:" + window.OdysseyData.contact.mobile.replace(/\s/g,'')}>{window.OdysseyData.contact.mobileShort}</a></div>
            </div>
            <div className="detail-info">
              <div className="lab"><Icon name="mail" size={11} /> Branch email</div>
              <div className="val"><a href={"mailto:" + b.email}>{b.email}</a></div>
            </div>
          </div>
        </div>
      </section>

      {/* Ages offered */}
      <section className="section-sm">
        <div className="container">
          <div className="shead">
            <span className="eyebrow">Ages offered</span>
            <h2 style={{ fontSize: 32 }}>Programmes at {b.name}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
            {D.ageGroups.map((a, i) => {
              const offered = b.ages.includes(a.title);
              return (
                <div key={a.id} style={{
                  padding: 18, borderRadius: 'var(--r-md)',
                  background: offered ? 'var(--paper)' : 'transparent',
                  border: '1px solid ' + (offered ? 'var(--line)' : 'var(--line)'),
                  opacity: offered ? 1 : 0.45
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span className="eyebrow brown" style={{ fontSize: 10 }}>{String(i + 1).padStart(2, '0')}</span>
                    {offered && <Icon name="check" size={14} />}
                  </div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 19, color: 'var(--brand-brown)' }}>{a.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-soft)', marginTop: 4, fontWeight: 600 }}>{a.range}</div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Map preview */}
      <section className="section-sm" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div className="shead">
            <span className="eyebrow">Find us</span>
            <h2 style={{ fontSize: 32 }}>{b.area}, Dubai</h2>
          </div>
          <div className="map-placeholder" style={{ minHeight: 380 }}>
            <div className="pin active" style={{ left: '50%', top: '50%' }}>
              <div className="pin-marker" />
              <div className="pin-label">{b.name}</div>
            </div>
            <div style={{ position: 'absolute', bottom: 14, left: 14, fontSize: 10, color: 'var(--muted)', fontFamily: 'ui-monospace, monospace', letterSpacing: '0.06em' }}>
              MAP EMBED · COORDS TBC WITH CLIENT
            </div>
          </div>
        </div>
      </section>

      {/* Other branches */}
      <section className="section-sm">
        <div className="container">
          <div className="shead-row">
            <div className="shead">
              <span className="eyebrow">Nearby</span>
              <h2 style={{ fontSize: 32 }}>Other Odyssey campuses</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("branches")}>All branches <Icon name="arrow" size={14} /></button>
          </div>
          <div className="branches">
            {D.branches.filter(x => x.id !== b.id).slice(0, 3).map(o => (
              <div key={o.id} className="branch-card" onClick={() => navigate("branch", o.id)}>
                <div className="pic"><img src={o.photo} alt={o.name} /></div>
                <div className="body">
                  <h3>{o.name}</h3>
                  <div className="addr">{o.address}</div>
                  <div className="row">
                    <div className="phone"><Icon name="phone" size={12} /> {o.phone}</div>
                    <span style={{ color: 'var(--brand-brown)', fontSize: 13, fontWeight: 600 }}>Visit →</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { ProgrammesPage, FacilitiesPage, BranchesPage, BranchDetail });
