/* global React, Placeholder, Reveal, SectionHead, CtaBand */

function ProgramsPage({ onTour }) {
  const programs = [
    {
      age: "4 weeks – 12 months",
      title: "Infant Care",
      slug: "infant-care",
      tone: "green",
      focus: "Attachment, sensory, milestones",
      p: "A quiet, calm room with low lights and low voices. Teachers follow your infant's rhythm — not a forced schedule. We track every feeding, nap and diaper change.",
      outcomes: ["Secure attachment with consistent caregivers", "Age-appropriate tummy time and sensory play", "Daily milestone tracking shared with parents", "Safe sleep environment following AAP guidelines"]
    },
    {
      age: "1 – 2 years",
      title: "Toddler Program",
      slug: "toddler-program",
      tone: "teal",
      focus: "Language, autonomy, routine",
      p: "Toddlers are wired to explore — we give them a safe, stimulating world to do it in. Daily routine includes circle time, purposeful play, outside time, and rest.",
      outcomes: ["Language exploration supported by daily read-alouds", "Early social skills and sharing", "Beginning potty-training support (at your pace)", "Motor development through structured movement"]
    },
    {
      age: "3 – 4 years",
      title: "Preschool",
      slug: "preschool",
      tone: "warm",
      focus: "Letters, numbers, friendship",
      p: "Structured learning wrapped in play. Children learn their letters, numbers, colors, and shapes alongside the skills that matter just as much — sharing, listening, resolving conflict. Sign language is woven into the learning experience, giving children another way to communicate and express themselves.",
      outcomes: ["Letter recognition & phonics foundation", "Counting, patterns, and basic math readiness", "Scissors, writing grip, and fine motor prep", "Social-emotional regulation skills"]
    },
    {
      age: "4 – 5 years",
      title: "Pre-K Readiness",
      slug: "pre-k-readiness",
      tone: "green",
      focus: "Kindergarten-ready, confident",
      p: "Our Pre-K graduates walk into kindergarten knowing how to read simple words, write their name, follow directions, and — maybe most important — sit still when asked.",
      outcomes: ["Simple sight-word reading", "Full name writing and letter formation", "Numbers 1–20 with one-to-one correspondence", "Classroom readiness: listening, raising hands, transitions"]
    },
  ];

  const schedule = [
    { time: "7:00 AM", t: "Arrival & breakfast", d: "Hot breakfast served family-style. Quiet games and books until classes begin." },
    { time: "8:30 AM", t: "Circle time", d: "Weather, calendar, a story, and a song. The day's intention set together." },
    { time: "9:00 AM", t: "Learning blocks", d: "Small-group lessons: letters, numbers, sign language, art, or science — rotating daily." },
    { time: "10:15 AM", t: "Outside play", d: "Weather permitting. Motor skills, fresh air, and room to run." },
    { time: "11:30 AM", t: "Lunch", d: "Hot, made on-site, CACFP compliant. Kids serve themselves where age-appropriate." },
    { time: "12:30 PM", t: "Rest time", d: "Cots, soft music, dimmed lights. Non-nappers do quiet activities." },
    { time: "2:30 PM", t: "Snack & free play", d: "Protein-forward snack, then choice-based play in learning centers." },
    { time: "4:00 PM", t: "Enrichment", d: "Art, music, or movement — varies by day." },
    { time: "5:00 PM", t: "Wind-down & pickup", d: "Quieter activities as parents arrive. Daily recap handed off to you." },
  ];

  return (
    <div className="page">
      {/* Page hero */}
      <section className="section-tight">
        <div className="container">
          <Reveal><div className="eyebrow">Programs</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ margin: "16px 0 20px", maxWidth: 14 + "ch" }}>
              A program for every stage — not one size for all.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p className="lede">Infants need one thing. Toddlers need something different. Preschoolers need something different still. Our classrooms are designed to meet each child exactly where they are.</p>
          </Reveal>
        </div>
      </section>

      {/* Program detail rows */}
      <section className="section-tight" style={{ paddingTop: 0 }}>
        <div className="container">
          {programs.map((p, i) => (
            <Reveal key={p.title} delay={50}>
              <div id={p.slug} className="story-grid" style={{ marginBottom: 72, gap: "clamp(24px, 4vw, 64px)" }}>
                <div style={{ order: i % 2 === 0 ? 0 : 2 }}>
                  <div style={{ aspectRatio: "4/3", borderRadius: 14, overflow: "hidden" }}>
                    <Placeholder label={`${p.title} — classroom, children engaged in ${p.focus.toLowerCase()}`} tone={p.tone} />
                  </div>
                </div>
                <div>
                  <div className="program-detail-age">{p.age}</div>
                  <h2 className="display" style={{ margin: "14px 0 16px" }}>{p.title}</h2>
                  <p className="lede" style={{ marginBottom: 24 }}>{p.p}</p>
                  <div style={{ display: "flex", gap: 32, marginBottom: 24, flexWrap: "wrap" }}>
                    <div>
                      <div className="eyebrow" style={{ marginBottom: 4 }}>Daily focus</div>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 20, fontWeight: 500 }}>{p.focus}</div>
                    </div>
                  </div>
                  <ul className="checklist">
                    {p.outcomes.map((o) => <li key={o}>{o}</li>)}
                  </ul>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* A day at Agape */}
      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="A day at Agape"
            title="Here's what structure actually looks like."
            description="Our daily rhythm is the backbone of everything. Children thrive on it — and so do parents, who always know what their child is doing right now."
          />
          <Reveal>
            <div className="schedule">
              {schedule.map((s) => (
                <div key={s.time} className="schedule-row">
                  <div className="schedule-time">{s.time}</div>
                  <div className="schedule-activity">
                    <h5>{s.t}</h5>
                    <p>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Development outcomes */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Development outcomes"
            title="What your child will walk out with."
            description="Measured not by tests, but by how ready — and how confident — your child is on the first day of kindergarten."
          />
          <div className="features">
            {[
              { n: "Cognitive", p: "Pre-reading, pre-math, problem solving, and curiosity that sticks — because learning happened through play, not pressure." },
              { n: "Social", p: "How to share, how to listen, how to apologize, how to stand up for yourself. The habits that make a good classmate and a good friend." },
              { n: "Character", p: "Kindness, honesty, patience, gratitude — taught through stories, modeled by teachers, practiced in small moments every day." },
            ].map((c, i) => (
              <Reveal key={c.n} delay={i * 100}>
                <div className="card card-tinted">
                  <div className="eyebrow" style={{ marginBottom: 12 }}>Domain</div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, margin: "0 0 10px" }}>{c.n}</h3>
                  <p style={{ margin: 0, color: "var(--ink-2)" }}>{c.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onTour={onTour} />
    </div>
  );
}

Object.assign(window, { ProgramsPage });