// Shared blocks reused across pages
function TrustStrip() {
  return (
    <section className="trust">
      <div className="container trust-row">
        <div className="trust-item"><Icon.Shield /> KHDA-registered Early Childhood Centre</div>
        <div className="trust-divider" />
        <div className="trust-item"><Icon.Star /> US Creative Curriculum · 38 Objectives</div>
        <div className="trust-divider" />
        <div className="trust-item"><Icon.Heart /> Ages 9 months – 6 years</div>
        <div className="trust-divider" />
        <div className="trust-item"><Icon.Pin /> Victory Heights, Dubai Sports City</div>
      </div>
    </section>
  );
}
window.TrustStrip = TrustStrip;

function SectionHeader({ eyebrow, title, sub, align = 'left' }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === 'center' ? 720 : 640, margin: align === 'center' ? '0 auto 48px' : '0 0 48px' }}>
      <div className="eyebrow">{eyebrow}</div>
      <h2 style={{ marginTop: 14 }}>{title}</h2>
      {sub && <p style={{ color: 'var(--ink-2)', fontSize: 18, marginTop: 14 }}>{sub}</p>}
    </div>
  );
}
window.SectionHeader = SectionHeader;

function ProgrammeCards({ openTour, compact = false }) {
  const bands = [
    { id: 'infants',  label: 'Infants & Toddlers', age: '9 m – 3 yrs', color: 'var(--c-magenta)',
      points: ['Responsive, attachment-led care', 'Sensory & motor play', 'Sleep & meal routines respected', 'Daily photo updates to families'] },
    { id: 'preKG',    label: 'Pre-KG', age: '3 – 4 yrs', color: 'var(--c-teal)',
      points: ['Hands-on inquiry projects', 'Early phonics & numeracy play', 'Arabic ×2 / French ×1 weekly *', 'Outdoor + indoor balance'] },
    { id: 'kg1',      label: 'KG1', age: '4 – 5 yrs', color: 'var(--c-green)',
      points: ['Reading, writing & maths foundations', 'Project-based learning', 'Friendship & social-emotional focus', 'Community partnerships'] },
    { id: 'kg2',      label: 'KG2', age: '5 – 6 yrs', color: 'var(--c-red)',
      points: ['Common-Core aligned readiness', 'Confident literacy & numeracy', 'Transition coaching for primary', 'Portfolio of learning'] },
  ];
  return (
    <div className="prog-grid">
      {bands.map((b, i) => (
        <div key={b.id} className="prog-card">
          <div className="prog-badge" style={{ background: b.color }}>{['I','D','E','A'][i]}</div>
          <div>
            <h3>{b.label}</h3>
            <div className="prog-age">{b.age}</div>
          </div>
          {!compact && (
            <ul className="prog-list">
              {b.points.map(p => <li key={p}>{p}</li>)}
            </ul>
          )}
          <button className="btn btn-light btn-sm" style={{ alignSelf: 'flex-start', marginTop: 'auto' }} onClick={() => openTour(b.id)}>
            Tour this room <Icon.Arrow />
          </button>
        </div>
      ))}
    </div>
  );
}
window.ProgrammeCards = ProgrammeCards;

function CtaBand({ openTour, title, sub, dark = true }) {
  return (
    <section className="container" style={{ padding: '40px 28px 0' }}>
      <div className="cta-band" style={{ background: dark ? 'var(--ink)' : 'var(--c-red)' }}>
        <div className="idea-rule" style={{ marginBottom: 18 }}><span/><span/><span/><span/></div>
        <h2>{title || "Come see it for yourself — book a tour."}</h2>
        <p>{sub || "Forty-five minutes inside our classrooms is worth more than any brochure. Pick a slot that suits you."}</p>
        <div style={{ marginTop: 26, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => openTour()}><Icon.Calendar size={14} /> Book a Tour</button>
          <a className="btn btn-light" href="tel:8004332352" style={{ background: 'transparent', color: 'white', borderColor: 'rgba(255,255,255,.35)' }}><Icon.Phone /> 800 4332 352</a>
        </div>
        <svg className="cta-shapes" width="320" height="320" viewBox="0 0 320 320" fill="none">
          <circle cx="200" cy="200" r="120" fill="var(--c-sun)" />
          <circle cx="80" cy="240" r="60" fill="var(--c-teal)" />
          <circle cx="260" cy="80" r="40" fill="var(--c-magenta)" />
        </svg>
      </div>
    </section>
  );
}
window.CtaBand = CtaBand;