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

function AboutPage({ onTour }) {
  return (
    <div className="page">
      <section className="section-tight">
        <div className="container">
          <Reveal><div className="eyebrow">Our story</div></Reveal>
          <Reveal delay={100}>
            <h1 className="display" style={{ margin: "16px 0 24px", maxWidth: "16ch" }}>
              We built the daycare we wished we'd had for our own children.
            </h1>
          </Reveal>
          <Reveal delay={200}>
            <p className="lede" style={{ maxWidth: "62ch" }}>
              Agape Learning Academy is a family-owned, family-operated childcare center — run by a husband, wife, and their daughter who believed Lubbock deserved a place where faith, safety, and real early education weren't extras — they were the whole point.
            </p>
          </Reveal>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="story-grid">
            <Reveal>
              <div style={{ aspectRatio: "4/5", borderRadius: 14, overflow: "hidden" }}>
                <Placeholder label="Portrait: founder / director with children in background, natural light" tone="green" />
              </div>
            </Reveal>
            <Reveal delay={150}>
              <div>
                <div className="eyebrow">Leadership</div>
                <h2 className="display" style={{ margin: "14px 0 18px" }}>10+ years. Thousands of mornings. One standard.</h2>
                <p className="lede" style={{ marginBottom: 20 }}>
                  Our director has spent over a decade in early childhood education — as a teacher, an assistant director, and now leading Agape since its doors opened.
                </p>
                <p style={{ color: "var(--ink-2)", marginBottom: 20 }}>
                  She still greets children at the door most mornings. She knows every name, every family, every allergy, and every hard morning a kid is having. Our staff is hired and trained to that same standard: experienced, credentialed, and — the hardest thing to teach — genuinely warm.
                </p>
                <div style={{ display: "flex", gap: 32, flexWrap: "wrap", marginTop: 32 }}>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 500, color: "var(--primary)", lineHeight: 1 }}>10+</div>
                    <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>years in early childhood</div>
                  </div>
                  <div>
                    <div style={{ fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 500, color: "var(--primary)", lineHeight: 1 }}>100%</div>
                    <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>CPR & First Aid certified staff</div>
                  </div>
                  <div>
                    <div style={{ color: "var(--accent)", fontFamily: "var(--font-display)", fontSize: 42, fontWeight: 500, lineHeight: 1, letterSpacing: 2 }}>★★★★</div>
                    <div style={{ fontSize: 13, color: "var(--ink-3)", marginTop: 6 }}>Texas Rising Star — Four-Star Certified</div>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Mission + values */}
      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Mission & values"
            title="Agape is a Greek word. It means the deepest kind of love."
            description="It's the kind that shows up, day after day, whether or not it feels convenient. It's the standard we built this school on, and the one we hold ourselves to."
          />
          <div className="values-list">
            {[
              { n: "01", t: "Faith", d: "We believe every child is made on purpose, with purpose. We teach kindness, honesty, and love of neighbor — all families are welcome." },
              { n: "02", t: "Family", d: "Agape is run by a family — a husband, wife, and their daughter — and it shows. Parents aren't customers; they're partners. We communicate daily, welcome you into the classroom anytime, and treat your child like our own. Bilingual families are warmly welcomed." },
              { n: "03", t: "Growth", d: "Not just reading readiness — though we deliver that. We're growing humans: curious, kind, confident, able to persevere when something is hard." },
              { n: "04", t: "Safety", d: "It's not a feature. It's the floor. Everything we do is built on the assumption that a parent's trust is the most valuable thing we will ever hold." },
            ].map((v, i) => (
              <Reveal key={v.n} delay={i * 80}>
                <div className="value-item">
                  <div className="num">{v.n}</div>
                  <h4>{v.t}</h4>
                  <p style={{ color: "var(--ink-2)", margin: 0 }}>{v.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Why we care */}
      <section className="section">
        <div className="container">
          <div className="story-grid">
            <Reveal delay={50}>
              <div>
                <div className="eyebrow">Why we care</div>
                <h2 className="display" style={{ margin: "14px 0 20px" }}>Because childcare isn't a transaction.</h2>
                <p className="lede" style={{ marginBottom: 20 }}>
                  We're not watching your child. We're helping to shape them — in the most formative years of their life, during the hours when you can't be there.
                </p>
                <p style={{ color: "var(--ink-2)", marginBottom: 12 }}>
                  That weight isn't lost on us. It's why our teachers stay for years, and why we invest in training, materials, and the small, slow moments that actually shape a child.
                </p>
                <p style={{ color: "var(--ink-2)" }}>
                  We only get this season once. We're honored to share it with you.
                </p>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <div style={{ aspectRatio: "4/5", borderRadius: 14, overflow: "hidden" }}>
                <Placeholder label="Teacher reading to small group of preschoolers on rug" tone="warm" style={{ backgroundPosition: "center 38%", objectPosition: "center 38%" }} />
              </div>
            </Reveal>
          </div>
        </div>
      </section>

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

Object.assign(window, { AboutPage });