/* global React, Placeholder, Reveal, SectionHead, CtaBand, Testimonial, FaqItem */
const { useState: useHS, useEffect: useHE } = React;

function HomePage({ setRoute, onTour, tweaks }) {
  const [openFaq, setOpenFaq] = useHS(0);

  const faqs = [
    {
      q: "How do you keep my child safe?",
      a: "Keyed entry, secure pickup codes, cameras in every classroom, and background-checked staff. A licensed director is on-site every day we're open."
    },
    {
      q: "What does a typical day look like?",
      a: "Structured but joyful. Breakfast, circle time, purposeful play, outdoor time, nutritious lunch, rest, small-group learning, snack, and free play. Children are also introduced to sign language as part of their learning. You'll get daily updates with photos, meals, naps, and milestones."
    },
    {
      q: "Do you welcome bilingual families?",
      a: "Yes. Agape proudly serves bilingual families, and we work to make sure children and parents from multilingual households feel comfortable and supported here."
    },
    {
      q: "What does 'faith-based' mean in practice?",
      a: "We sing age-appropriate songs and teach kindness, honesty, and love of neighbor. Families of all backgrounds are warmly welcomed — our goal is to form character, not to preach."
    },
    {
      q: "Are you licensed and accredited?",
      a: "Yes. Agape is licensed by the Texas Health and Human Services Commission (HHSC) and meets all state requirements for early childhood facilities. Our inspection reports are available on request."
    },
    {
      q: "What do meals and allergies look like?",
      a: "Hot breakfast, lunch, and two snacks daily, prepared on-site. USDA CACFP compliant menus. We accommodate most allergies and dietary needs — just share details at enrollment."
    },
  ];

  const heroLayout = tweaks.heroLayout || "split";

  return (
    <div className="page">
      <div className="home-crest">
        <img src="assets/agape-logo.webp" alt="Agape Learning Academy" />
        <div className="home-crest-line">Lubbock, Texas &middot; Established 2015</div>
      </div>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          {heroLayout === "centered" ? (
            <div className="text-center mx-auto" style={{ maxWidth: 820 }}>
              <Reveal><div className="eyebrow"></div></Reveal>
              <Reveal delay={100}>
                <h1 className="display" style={{ margin: "18px 0 22px" }}>{tweaks.headline}</h1>
              </Reveal>
              <Reveal delay={200}>
                <p className="lede mx-auto">A faith-based daycare where safety, structure, and warmth come standard — so your child can grow with confidence.</p>
              </Reveal>
              <Reveal delay={300}>
                <div className="hero-ctas" style={{ justifyContent: "center" }}>
                  <a className="btn btn-primary" href="https://calendly.com/agapelearningacademy13" target="_blank" rel="noopener">Schedule a tour</a>
                  <button className="btn btn-ghost" onClick={() => setRoute("programs")}>See programs</button>
                </div>
                <div className="hero-meta" style={{ justifyContent: "center" }}>
                  <div className="hero-meta-item"><span className="dot" /> Texas Rising Star — Four-Star Certified</div>
                  <div className="hero-meta-item"><span className="dot" /> Family-owned & operated</div>
                  <div className="hero-meta-item"><span className="dot" /> Cameras in every room</div>
                </div>
              </Reveal>
              <div style={{ marginTop: 48, aspectRatio: "16/9", borderRadius: 14, overflow: "hidden" }}>
                <Placeholder label="Full-bleed: children painting at round table, natural light, teacher kneeling" tone="green" />
              </div>
            </div>
          ) : heroLayout === "editorial" ? (
            <div>
              <Reveal><div className="eyebrow">Lubbock · Est. 2015</div></Reveal>
              <Reveal delay={100}>
                <h1 className="display" style={{ margin: "20px 0 32px", fontSize: "clamp(54px, 9vw, 120px)" }}>{tweaks.headline}</h1>
              </Reveal>
              <div className="hero-grid" style={{ alignItems: "start" }}>
                <div>
                  <Reveal delay={200}>
                    <p className="lede">A faith-based daycare in Lubbock where safety, structure, and warmth come standard — so your child can grow with confidence.</p>
                  </Reveal>
                  <Reveal delay={300}>
                    <div className="hero-ctas">
                      <a className="btn btn-primary" href="https://calendly.com/agapelearningacademy13" target="_blank" rel="noopener">Schedule a tour</a>
                      <button className="btn btn-ghost" onClick={() => setRoute("programs")}>See programs</button>
                    </div>
                    <div className="hero-meta">
                      <div className="hero-meta-item"><span className="dot" /> Texas Rising Star — Four-Star Certified</div>
                      <div className="hero-meta-item"><span className="dot" /> Family-owned & operated</div>
                      <div className="hero-meta-item"><span className="dot" /> Cameras in every room</div>
                    </div>
                  </Reveal>
                </div>
                <Reveal delay={250}>
                  <div style={{ aspectRatio: "4/5", borderRadius: 14, overflow: "hidden" }}>
                    <Placeholder label="Warm hero: toddler hands building block tower, morning light" tone="green" />
                  </div>
                </Reveal>
              </div>
            </div>
          ) : (
            /* split (default) */
            <div className="hero-grid">
              <div>
                <Reveal><div className="eyebrow">Lubbock · Est. 2015</div></Reveal>
                <Reveal delay={100}>
                  <h1 className="display">{tweaks.headline}</h1>
                </Reveal>
                <Reveal delay={200}>
                  <p className="lede">A faith-based daycare where safety, structure, and warmth come standard — so your child can grow with confidence.</p>
                </Reveal>
                <Reveal delay={300}>
                  <div className="hero-ctas">
                    <a className="btn btn-primary" href="https://calendly.com/agapelearningacademy13" target="_blank" rel="noopener">Schedule a tour</a>
                    <button className="btn btn-ghost" onClick={() => setRoute("programs")}>See programs</button>
                  </div>
                  <div className="hero-meta">
                    <div className="hero-meta-item"><span className="dot" /> Texas Rising Star — Four-Star Certified</div>
                    <div className="hero-meta-item"><span className="dot" /> Family-owned & operated</div>
                    <div className="hero-meta-item"><span className="dot" /> Cameras in every room</div>
                  </div>
                </Reveal>
              </div>
              <Reveal delay={200}>
                <div className="hero-visual">
                  <Placeholder label="Hero image: child at easel, teacher guiding, warm natural light" tone="green" />
                  <div className="hero-visual-badge">
                    <div>
                      <div style={{ color: "var(--accent)", fontSize: 15, letterSpacing: 2, lineHeight: 1 }}>★★★★</div>
                      <div className="num" style={{ fontSize: 22, marginTop: 4 }}>Four-Star</div>
                    </div>
                    <div className="lbl">Texas Rising Star<br/>Certified — highest level</div>
                  </div>
                </div>
              </Reveal>
            </div>
          )}
        </div>
      </section>

      {/* WHY PARENTS CHOOSE US */}
      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Why parents choose Agape"
            title="Three things we won't compromise on."
            description="We don't try to be everything to everyone. We're a family running a school for families — and we do a few things deeply well, the same way, every day."
          />
          <div className="features">
            {[
              { n: "01", t: "Safety you can verify.", p: "Secure entry, cameras in every classroom, and background-checked staff. Every promise we make about safety is one you can check, any day, any time." },
              { n: "02", t: "Quality that's certified.", p: "Agape is a Texas Rising Star Four-Star certified program — the highest certification level in the state's quality rating system for early childhood programs." },
              { n: "03", t: "A family, not a franchise.", p: "Agape is owned and operated by a husband, wife, and their daughter. When it's your own name on the door, every child is personal." },
            ].map((f, i) => (
              <Reveal key={f.n} delay={i * 100}>
                <div className="card">
                  <div className="feature-num">{f.n}</div>
                  <h3>{f.t}</h3>
                  <p>{f.p}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* PROGRAMS OVERVIEW */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="Programs"
            title="Care and learning for every stage."
            description="Four age-specific programs. Each one shaped around what a child that age needs most — and what they're ready to reach for next."
          />
          <div className="programs-grid">
            {[
              { age: "4 weeks – 12 months", title: "Infants", slug: "infant-care", p: "Quiet, calm rooms with predictable schedules and plenty of hold-time. Daily reports track every feeding, nap, and milestone.", tone: "green" },
              { age: "1 – 2 years", title: "Toddlers", slug: "toddler-program", p: "Language explosion meets safe exploration. Purposeful play, early social skills, and gentle routine.", tone: "teal" },
              { age: "3 – 5 years", title: "Preschool & Pre-K", slug: "preschool", p: "Letters, numbers, motor skills, social-emotional growth. Kindergarten-ready without the pressure.", tone: "warm" },
            ].map((p, i) => (
              <Reveal key={p.title} delay={i * 100}>
                <div className="program-card">
                  <Placeholder label={`${p.title} classroom`} tone={p.tone} />
                  <div className="body">
                    <div className="age">{p.age}</div>
                    <h3>{p.title}</h3>
                    <p>{p.p}</p>
                    <button className="btn btn-link" onClick={() => setRoute("programs", p.slug)}>Program details</button>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="From our families"
            title="What parents tell us — and each other."
            description="A few notes from families with kids here now."
          />
          <div className="testimonials">
            <Reveal delay={0}>
              <Testimonial
                initials="MR"
                name="M. Rocker"
                role="Parent"
                quote={"We absolutely love Agape Learning Academy — this daycare makes your little one, and you, feel at home. The owners are truly hands-on: you'll see Ms. Deb helping in the classrooms and giving extra attention to little ones who need some love, and Mr. Alonso preparing meals or out fixing something in the yard.\n\nThe curriculum is thoughtful and engaging, the parties and events are so much fun, and every teacher knows your child by name. This daycare will support you in your parenting, and your child will look forward to it every morning."}
              />
            </Reveal>
            <Reveal delay={120}>
              <Testimonial
                initials="CA"
                name="C. Arriagada"
                role="Texas Tech professors"
                quote={"We came across Agape Learning Academy by pure coincidence, having visited a few other venues that failed to convince us. After two years of our eldest attending, however, there is no other place we would rather have her be.\n\nNot only is Agape a genuine family business, where the owners are actively involved every step of the way, but they are strongly aligned with timeless values and show a true commitment to children's (and parents') personal growth."}
              />
            </Reveal>
            <Reveal delay={240}>
              <Testimonial
                initials="JT"
                name="Jenny T."
                role="Mom to Parker & Whitley"
                quote={"Agape Learning Academy has been such a blessing to our family. The Macias family has been caring for our children since 2017, and we truly couldn't ask for a better place. They treat every child like their own.\n\nOur kids are always excited to go, which says everything. It gives us peace of mind knowing they are loved, safe, and genuinely cared for every single day — we highly recommend them to anyone looking for a daycare that feels like home."}
              />
            </Reveal>
          </div>
        </div>
      </section>

      {/* SAFETY STRIP */}
      <section className="section">
        <div className="container">
          <div className="story-grid">
            <Reveal>
              <div style={{ aspectRatio: "4/3", borderRadius: 14, overflow: "hidden" }}>
                <Placeholder label="Secure entry vestibule with keypad and camera" tone="teal" />
              </div>
            </Reveal>
            <Reveal delay={150}>
              <div>
                <div className="eyebrow">Safety & cleanliness</div>
                <h2 className="display" style={{ margin: "16px 0 20px" }}>The details parents notice — and the ones they don't.</h2>
                <p className="lede" style={{ marginBottom: 24 }}>
                  Every protocol exists so you know exactly how your child is cared for — even when you're not in the room.
                </p>
                <ul className="checklist">
                  <li>Secure keypad entry with unique family codes</li>
                  <li>In-room cameras in every classroom</li>
                  <li>Daily disinfecting of all high-touch surfaces</li>
                  <li>All staff background-checked and CPR/First Aid certified</li>
                </ul>
                <button className="btn btn-link" onClick={() => setRoute("safety")} style={{ marginTop: 20 }}>See our full safety standards</button>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" style={{ background: "var(--cream-2)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Common questions"
            title="What parents ask first."
            align="center"
          />
          <div className="faq">
            {faqs.map((f, i) => (
              <FaqItem
                key={i}
                q={f.q}
                a={f.a}
                open={openFaq === i}
                onToggle={() => setOpenFaq(openFaq === i ? -1 : i)}
              />
            ))}
          </div>
        </div>
      </section>

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

Object.assign(window, { HomePage });