// Page components — Home, Curriculum, Programmes, Facilities, Branches, BranchDetail, Admissions, About, Contact
const { useState: useStatePg } = React;

// ---------- Home ----------
const HomePage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  const [activeAge, setActiveAge] = React.useState("preschool");
  const active = D.ageGroups.find(a => a.id === activeAge) || D.ageGroups[0];

  return (
    <div className="page-enter">
      {/* Hero */}
      <section className="hero">
        <div className="hero-deco" />
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="hero-pre">
                <span className="eyebrow">Dubai · 6 Branches · 3 mo – 6 yr</span>
              </div>
              <h1>
                Allowing children to thrive through
                {" "}<em>exploration</em>{" "}
                & discovery.
              </h1>
              <p className="hero-sub">
                A premium, Reggio Emilia–inspired nursery group, blending the world-renowned Reggio approach
                with the Washington-State Early-Learning Benchmarks across six warm, child-led Dubai campuses.
              </p>
              <div className="hero-ctas">
                <button className="btn btn-primary btn-lg" onClick={onBookTour}>
                  Book a Tour <Icon name="arrow" size={16} />
                </button>
                <a href={D.contact.waLink} target="_blank" rel="noopener" className="btn btn-ghost btn-lg">
                  <Icon name="wa" size={16} /> WhatsApp 052 347 2059
                </a>
              </div>
              <div className="hero-stats">
                <div className="hero-stat"><div className="n">6</div><div className="l">Dubai branches</div></div>
                <div className="hero-stat"><div className="n">3mo–6yr</div><div className="l">Age range</div></div>
                <div className="hero-stat"><div className="n">EN · FR · AR</div><div className="l">Trilingual</div></div>
              </div>
            </div>
            <div className="hero-visual">
              <img src="assets/stimulate.webp" alt="Atelier light-table exploration at Odyssey" />
              <span className="consent-badge">
                <Icon name="shield" size={12} /> Consent-cleared
              </span>
              <div className="hero-tag">
                <div className="icon"><Icon name="leaf" size={20} /></div>
                <div className="text">
                  <strong>Environment as the third teacher</strong>
                  Atelier · Music Room · Library · Playgrounds
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust strip */}
      <section className="trust">
        <div className="container">
          <div className="trust-inner">
            {D.trust.map((t, i) => (
              <div className="trust-item" key={i}>
                <div className="ic"><Icon name={["shield","heart","star","globe"][i]} size={16} /></div>
                <div><strong>{t.label}</strong><div style={{ fontSize: 11, color: 'var(--muted)' }}>{t.note}</div></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Approach pillars */}
      <section className="section">
        <div className="container">
          <div className="shead-row">
            <div className="shead">
              <span className="eyebrow">Our Approach</span>
              <h2>Reggio at the core, with Washington-State structure.</h2>
              <p>We treat children as curious citizens. The classroom listens to them, the environment invites them, and a Washington-State framework keeps progress visible to families.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("curriculum")}>
              Read the full approach <Icon name="arrow" size={14} />
            </button>
          </div>
          <div className="pillars">
            {D.pillars.map((p, i) => (
              <div className="pillar" key={i}>
                <span className="num">{p.n}</span>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Age groups — interactive */}
      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div className="shead-row">
            <div className="shead">
              <span className="eyebrow">Programmes & Ages</span>
              <h2>Five age groups, one continuous story.</h2>
              <p>Tap a group to see how the day looks for that child.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("programmes")}>
              All programmes <Icon name="arrow" size={14} />
            </button>
          </div>
          <div className="ages">
            {D.ageGroups.map(a => (
              <div key={a.id}
                className={"age-card " + (activeAge === a.id ? "active" : "")}
                onClick={() => setActiveAge(a.id)}>
                <span className="age-num">{String(D.ageGroups.indexOf(a) + 1).padStart(2, '0')}</span>
                <h4>{a.title}</h4>
                <div className="range">{a.range}</div>
                <div className="desc">{a.desc}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32, padding: 28, background: 'var(--paper)', borderRadius: 'var(--r-lg)', border: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', flexWrap: 'wrap' }}>
              <div style={{ flex: '1 1 320px' }}>
                <span className="eyebrow brown">Now showing · {active.title}</span>
                <h3 style={{ fontSize: 28, marginTop: 8, marginBottom: 10 }}>{active.lead}</h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6 }}>{active.desc}</p>
                {active.tag && (
                  <span className="chip sun" style={{ marginTop: 14 }}>
                    <Icon name="sun" size={12} /> {active.tag}
                  </span>
                )}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, minWidth: 220 }}>
                <span className="eyebrow">Daily focus</span>
                {active.focus.map((f, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: i < active.focus.length - 1 ? '1px solid var(--line)' : '0' }}>
                    <Icon name="check" size={14} />
                    <span style={{ fontSize: 14 }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Environment / facilities */}
      <section className="section">
        <div className="container">
          <div className="shead-row">
            <div className="shead">
              <span className="eyebrow">Environment</span>
              <h2>Natural environments designed for self-discovery and social play.</h2>
              <p>Reggio treats the space as the child's third teacher — after the family and the educator. Every campus contains the eight environments below.</p>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("facilities")}>
              Explore facilities <Icon name="arrow" size={14} />
            </button>
          </div>
          <div className="fac-grid">
            {D.facilities.map((f, i) => (
              <div className="fac" key={i}>
                <div className="ic"><Icon name={f.icon} size={20} /></div>
                <div>
                  <h4>{f.title}</h4>
                  <p>{f.note}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Branches teaser w/ schematic map */}
      <BranchMapSection navigate={navigate} compact />

      {/* CTA band */}
      <section className="section-sm">
        <div className="container">
          <div className="cta-band">
            <div>
              <span className="eyebrow sun" style={{ color: '#f4c46a' }}>The Next Step</span>
              <h2>Tour the campus that's closest to you.</h2>
              <p>A 45-minute walk-through with a member of the admissions team — see a Reggio environment in action, meet the educators, and ask the questions only a real visit can answer.</p>
              <div className="actions">
                <button className="btn btn-sun btn-lg" onClick={onBookTour}>
                  <Icon name="calendar" size={16} /> Book a Tour
                </button>
                <a href="tel:800-REGGIO" className="btn btn-ghost btn-lg" style={{ color: 'var(--paper)', borderColor: 'rgba(255,251,245,0.3)' }}>
                  <Icon name="phone" size={16} /> Call 800-REGGIO
                </a>
              </div>
            </div>
            <div className="form-side">
              <span className="eyebrow sun" style={{ color: '#f4c46a' }}>Or send us a quick note</span>
              <h3 style={{ color: 'var(--paper)', fontSize: 22, margin: '8px 0 18px' }}>Tell us about your child</h3>
              <div className="form-on-dark" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="field"><input placeholder="Your name" /></div>
                <div className="field"><input placeholder="Phone or email" /></div>
                <div className="field">
                  <select defaultValue="">
                    <option value="" disabled>Preferred branch</option>
                    {D.branches.map(b => <option key={b.id} value={b.id}>{b.name}</option>)}
                  </select>
                </div>
                <button className="btn btn-sun" style={{ width: '100%', justifyContent: 'center' }} onClick={onBookTour}>
                  Continue <Icon name="arrow" size={14} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ---------- Reusable: schematic Dubai branch map ----------
const BranchMapSection = ({ navigate, compact }) => {
  const D = window.OdysseyData;
  const [hover, setHover] = React.useState(null);
  return (
    <section className="section" style={{ background: compact ? 'var(--paper-soft)' : 'transparent' }}>
      <div className="container">
        <div className="shead-row">
          <div className="shead">
            <span className="eyebrow">Branches</span>
            <h2>Six campuses across Dubai.</h2>
            <p>Each branch has its own admissions team, atelier and outdoor spaces. Pick the location nearest you.</p>
          </div>
          <button className="btn btn-ghost" onClick={() => navigate("branches")}>
            View all branches <Icon name="arrow" size={14} />
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 28, alignItems: 'stretch' }}>
          {/* Schematic map */}
          <div className="map-placeholder" style={{ aspectRatio: 'auto', minHeight: 420 }}>
            <div style={{ position: 'absolute', top: 14, left: 14, background: 'var(--paper)', padding: '6px 12px', borderRadius: 999, fontSize: 11, fontWeight: 600, color: 'var(--brand-brown)', border: '1px solid var(--line)', letterSpacing: '0.05em' }}>
              <Icon name="pin" size={12} /> DUBAI · SCHEMATIC
            </div>
            {/* Schematic coastline */}
            <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.45 }}>
              <path d="M0,55 Q15,40 30,42 Q45,44 60,38 Q78,32 100,28" stroke="var(--leaf)" strokeWidth="0.4" fill="none" strokeDasharray="1,1" />
              <path d="M-5,30 Q20,28 40,20 Q60,12 100,8" stroke="rgba(96,57,19,0.3)" strokeWidth="0.3" fill="none" />
            </svg>
            {D.branches.map(b => (
              <div key={b.id} className={"pin " + (hover === b.id ? "active" : "")}
                style={{ left: b.mapPos.x + "%", top: b.mapPos.y + "%" }}
                onMouseEnter={() => setHover(b.id)} onMouseLeave={() => setHover(null)}
                onClick={() => navigate("branch", b.id)}>
                <div className="pin-marker" />
                {hover === b.id && <div className="pin-label">{b.name}</div>}
              </div>
            ))}
            <div style={{ position: 'absolute', bottom: 14, right: 14, fontSize: 10, color: 'var(--muted)', fontFamily: 'ui-monospace, monospace', letterSpacing: '0.06em' }}>
              MAP COORDS · TBC WITH CLIENT
            </div>
          </div>

          {/* List */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {D.branches.map((b, i) => (
              <button key={b.id}
                onMouseEnter={() => setHover(b.id)} onMouseLeave={() => setHover(null)}
                onClick={() => navigate("branch", b.id)}
                style={{
                  display: 'flex', gap: 16, alignItems: 'center', textAlign: 'left',
                  padding: 16, background: hover === b.id ? 'var(--paper-soft)' : 'var(--paper)',
                  borderRadius: 'var(--r-md)', border: '1px solid ' + (hover === b.id ? 'var(--brand-brown)' : 'var(--line)'),
                  transition: 'all .15s ease'
                }}>
                <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--brand-brown)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600, fontFamily: 'var(--serif)', flexShrink: 0 }}>{i + 1}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 600, color: 'var(--brand-brown)', fontSize: 15 }}>{b.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{b.area} · {b.phone}</div>
                </div>
                <span className="chip" style={{ fontSize: 10 }}>{b.tag}</span>
                <Icon name="chev" size={14} />
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

// ---------- Curriculum ----------
const CurriculumPage = ({ navigate, onBookTour }) => {
  const D = window.OdysseyData;
  return (
    <div className="page-enter">
      <section className="hero" style={{ paddingTop: 64 }}>
        <div className="container">
          <span className="eyebrow">Curriculum & Approach</span>
          <h1 style={{ maxWidth: 920, marginTop: 18, marginBottom: 24 }}>
            We follow the child — and document the journey with a Washington-State lens.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', maxWidth: 720, lineHeight: 1.55 }}>
            Reggio Emilia is sometimes mistaken for "unstructured play." It isn't. It's a deeply considered
            approach in which children direct their learning, and educators listen, document and respond.
            We pair that practice with the Washington-State Early-Learning Benchmarks, so every family can
            see the cognitive, social, physical and emotional progress their child is making.
          </p>
        </div>
      </section>

      <section className="section-sm" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderRadius: 'var(--r-lg)', overflow: 'hidden', border: '1px solid var(--line)' }}>
            {[
              { l: "Pedagogy", v: "Reggio Emilia–inspired" },
              { l: "Framework", v: "Washington-State Benchmarks" },
              { l: "Languages", v: "EN medium · FR · AR" },
              { l: "Immersion", v: "French (Umm Suqeim only)" }
            ].map((s, i) => (
              <div key={i} style={{ padding: '20px 22px', background: 'var(--paper)', borderRight: i < 3 ? '1px solid var(--line)' : '0' }}>
                <div className="eyebrow">{s.l}</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--brand-brown)', marginTop: 6 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">Pillar 01</span>
              <h2 style={{ margin: '12px 0 18px' }}>Children are competent. The room shows it.</h2>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 16 }}>
                Materials sit at child height. Provocations replace worksheets. A morning may start with a
                child's question — "where does water go?" — and the educator turns it into a week-long
                investigation involving the atelier, the garden, the library and the studio camera.
              </p>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65 }}>
                We document the work — photos, transcripts, drawings — so families see the thinking behind the play.
              </p>
            </div>
            <div className="photo" style={{ aspectRatio: '5/4' }}>
              <img src="assets/fostering-development.webp" alt="Children exploring natural materials" />
              <span className="consent-badge"><Icon name="shield" size={12} /> Consent-cleared</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--paper-soft)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }}>
            <div className="photo" style={{ aspectRatio: '5/4' }}>
              <img src="assets/home-feature-2.webp" alt="Trilingual learning environment" />
            </div>
            <div>
              <span className="eyebrow">Pillar 02</span>
              <h2 style={{ margin: '12px 0 18px' }}>English-medium, with French and Arabic woven through.</h2>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65, marginBottom: 16 }}>
                Most classrooms run in English so children are confident communicators. Native French and
                Arabic specialists join through the week — song circles, storytelling, art and meal-time
                conversations — so the second and third languages are lived, not drilled.
              </p>
              <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.65 }}>
                Our <strong>Umm Suqeim 2</strong> campus runs a full <strong>French-immersion</strong> stream that aligns with the French curriculum.
              </p>
              <button className="btn btn-primary" style={{ marginTop: 22 }} onClick={() => navigate("branch", "umm-suqeim-2")}>
                See Umm Suqeim 2 <Icon name="arrow" size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{ textAlign: 'center' }}>
          <div className="quote" style={{ maxWidth: 880, margin: '0 auto' }}>
            The child is made of one hundred. Our job is to keep all hundred languages alive.
          </div>
          <div style={{ marginTop: 22, fontSize: 13, letterSpacing: '0.06em', color: 'var(--muted)' }}>
            — A guiding principle of the Reggio Emilia approach
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="container">
          <div className="cta-band">
            <div>
              <h2 style={{ color: 'var(--paper)' }}>Come and see it in person.</h2>
              <p>Reggio classrooms read differently to most early-years spaces. Spend 45 minutes with us and you'll feel the difference.</p>
              <div className="actions">
                <button className="btn btn-sun btn-lg" onClick={onBookTour}><Icon name="calendar" size={16} /> Book a Tour</button>
              </div>
            </div>
            <div className="form-side">
              <h3 style={{ color: 'var(--paper)', fontSize: 20, marginBottom: 6 }}>A note on documentation</h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(255,251,245,0.75)' }}>
                Every family receives a personalised digital portfolio of their child's projects, milestones
                and Washington-State benchmark progress — shared on a private channel only you can see.
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { HomePage, CurriculumPage, BranchMapSection });
