/* eslint-disable */
/* ============================================================
   Xcela Dreamland — playful redesign
   Single-file React app composed of section components.
   Reads tweakable defaults via useTweaks (from tweaks-panel.jsx).
   ============================================================ */

const { useState, useEffect, useRef } = React;

/* ---------- Tweakable defaults (persisted by host) ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "bubblegum",
  "anim": "playful",
  "stickers": true,
  "trail": false,
  "rotation": true,
  "headlinePhrase": "dreamers"
}/*EDITMODE-END*/;

/* Nav now lives in layout.jsx as <SiteNav active="index.html" /> */

/* ============================================================
   Hero
   ============================================================ */
const Hero = ({ phrase, stickers }) => (
  <section className="hero" id="top">
    {stickers && (
      <>
        <div className="hero-deco float" style={{ top: 20, left: "-2%", "--r": "-8deg" }}>
          <Sticker shape="cloud" size={90} fill="var(--paper)" />
        </div>
        <div className="hero-deco bob" style={{ top: 30, right: "2%", "--r": "12deg" }}>
          <Sticker shape="sun" size={84} fill="var(--yellow)" />
        </div>
        <div className="hero-deco wiggle" style={{ bottom: 10, left: "38%", "--r": "-6deg" }}>
          <Sticker shape="zigzag" size={120} fill="var(--mint)" />
        </div>
      </>
    )}
    <div className="wrap hero-grid">
      <div className="reveal">
        <span className="eyebrow">
          <span className="dot" /> Voted #1 Preschool in the Valley
        </span>
        <h1>
          <span className="hl-line">
            Where little{" "}
            <span className="word stamp stamp-pink">{phrase}</span>
          </span>
          <span className="hl-line">
            become <span className="word stamp stamp-mint">big thinkers</span>
            <span className="word" style={{ color: "var(--tangerine)" }}>.</span>
          </span>
        </h1>
        <p className="hero-sub">
          A joyful, play-based world where curiosity gets messy, friendships
          get loud, and every <em>"why?"</em> turns into a brand new wonder.
        </p>
        <div className="hero-ctas">
          <a href="contact.html" className="btn">
            Book a Tour <span aria-hidden>→</span>
          </a>
          <a href="gallery.html" className="btn btn-ghost">
            <span aria-hidden>▶</span> See Our Space
          </a>
        </div>
        <div className="hero-stats">
          <div className="hero-stat"><span className="hero-stat-num" style={{ background: "var(--pink)", color: "white" }}>1:8</span><span>Teacher to<br/>kid ratio</span></div>
          <div className="hero-stat"><span className="hero-stat-num" style={{ background: "var(--mint)" }}>12+</span><span>Years of<br/>nurturing</span></div>
          <div className="hero-stat"><span className="hero-stat-num" style={{ background: "var(--sky)" }}>★ 4.9</span><span>From 200+<br/>parents</span></div>
        </div>
      </div>

      <div className="collage reveal">
        <HeroCollage stickers={stickers} />
      </div>
    </div>
  </section>
);

const HeroCollage = ({ stickers }) => (
  <>
    {/* Top-left — large photo tile */}
    <div className="tile float" style={{
      width: "62%", height: "58%", top: 0, left: 0,
      "--r": "-4deg", transform: "rotate(-4deg)", padding: 0,
    }}>
      <img src="img/photo-001.jpg"
           style={{ width:"100%", height:"100%", objectFit:"cover" }} alt="Kids at Xcela" />
    </div>

    {/* Top-right */}
    <div className="tile bob" style={{
      width: "46%", height: "44%", top: "8%", right: 0,
      transform: "rotate(5deg)", "--r": "5deg", padding: 0,
    }}>
      <img src="img/photo-018.jpg"
           style={{ width:"100%", height:"100%", objectFit:"cover" }} alt="Kids at Xcela" />
    </div>

    {/* Bottom-left */}
    <div className="tile wiggle" style={{
      width: "44%", height: "38%", bottom: 0, left: "8%",
      transform: "rotate(3deg)", "--r": "3deg", padding: 0,
    }}>
      <img src="img/photo-031.jpg"
           style={{ width:"100%", height:"100%", objectFit:"cover" }} alt="Kids at Xcela" />
    </div>

    {/* Bottom-right */}
    <div className="tile float" style={{
      width: "38%", height: "32%", bottom: "8%", right: "4%",
      transform: "rotate(-6deg)", "--r": "-6deg", padding: 0,
    }}>
      <img src="img/photo-039.jpg"
           style={{ width:"100%", height:"100%", objectFit:"cover" }} alt="Kids at Xcela" />
    </div>

    {stickers && (
      <>
        <div style={{ position: "absolute", top: "-3%", right: "30%" }} className="bob">
          <Sticker shape="spark" size={48} fill="var(--tangerine)" />
        </div>
        <div style={{ position: "absolute", bottom: "30%", left: "-4%" }} className="float">
          <Sticker shape="heart" size={54} fill="var(--pink)" />
        </div>
        <div style={{ position: "absolute", top: "30%", left: "55%" }} className="wiggle">
          <Sticker shape="star" size={42} fill="var(--yellow)" />
        </div>
      </>
    )}
  </>
);

/* ============================================================
   Brain Development
   ============================================================ */
const Brain = () => {
  const stages = [
    { num: "0–1", title: "Tiny Sparks", body: "Millions of synapses form every second. Sights, sounds, hugs: they're all building blocks.", color: "var(--pink)", pct: 25 },
    { num: "1–3", title: "Words Bloom", body: "The brain literally doubles. First words, first wobbles, first 'I do it myself!'", color: "var(--tangerine)", pct: 50 },
    { num: "3–5", title: "Big Feels", body: "Empathy, logic and imagination wire together. This is where the magic of preschool lives.", color: "var(--mint)", pct: 80 },
    { num: "By 6", title: "Foundation Set", body: "90% of brain architecture is built. The roof, the walls — all on this foundation.", color: "var(--sky)", pct: 90 },
  ];
  return (
    <section className="brain" id="brain">
      <div className="wrap">
        <div className="brain-headline reveal">
          <span className="eyebrow"><span className="dot" /> The Crucial Years</span>
          <div className="brain-big" style={{ marginTop: 22 }}>90%</div>
          <h2 style={{ fontSize: "clamp(28px, 3.4vw, 42px)", marginTop: 8 }}>
            of a child's brain develops <span className="squiggle">before age 6</span>
          </h2>
          <p style={{ marginTop: 14, color: "var(--ink-soft)", fontSize: 18 }}>
            Every snack-time song, finger-paint blob and bedtime story is laying down circuitry for life.
          </p>
        </div>

        <div className="stages">
          {stages.map((s, i) => (
            <div key={i} className="stage-card reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="stage-num" style={{ background: s.color, color: "var(--ink)" }}>
                {s.num}
              </div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
              <div className="stage-meter">
                <span style={{ width: s.pct + "%", background: s.color }} />
              </div>
              <div style={{
                fontFamily: "Fredoka, sans-serif", fontWeight: 700,
                fontSize: 13, marginTop: 8, color: "var(--ink-soft)",
              }}>{s.pct}% wired</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   Programs (4 cards)
   ============================================================ */
const Programs = () => { // eslint-disable-next-line no-unused-vars
  const items = [
    { icon: "🧸", title: "Playgroup", age: "1.5 – 2.5 yrs", body: "Gentle separation, sensory play, and big love for tiny humans finding their feet.", color: "var(--pink)" },
    { icon: "🎨", title: "Nursery", age: "2.5 – 3.5 yrs", body: "Storytime adventures, language games, and the very first 'best friend' moments.", color: "var(--tangerine)" },
    { icon: "📚", title: "Junior KG", age: "3.5 – 4.5 yrs", body: "Phonics, pre-math puzzles, and structured creativity that still feels like play.", color: "var(--mint)" },
    { icon: "🚀", title: "Senior KG", age: "4.5 – 5.5 yrs", body: "School-ready confidence: independent reading, logical leaps, and project-based thinking.", color: "var(--sky)" },
  ];
  return (
    <section id="programs">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Our Programs</span>
          <h2>Four little <span className="stamp stamp-pink" style={{ color: "white" }}>worlds</span> to grow in</h2>
          <p>Age-appropriate journeys, tuned to wherever your kiddo is right now — not where some textbook says they should be.</p>
        </div>

        <div className="programs-grid">
          {items.map((p, i) => (
            <div key={i} className="program-card reveal" style={{ "--c": p.color, transitionDelay: `${i * 60}ms` }}>
              <div className="splash" />
              <div className="program-icon" style={{ "--c": p.color }}>{p.icon}</div>
              <h3>{p.title}</h3>
              <div className="age-pill">{p.age}</div>
              <p>{p.body}</p>
              <div className="arrow">→</div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 40 }}>
          <a href="curriculum.html" className="btn btn-yellow">View Full Curriculum →</a>
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   Learning is Play — marquee + sticker tiles
   ============================================================ */
const Play = () => {
  const stripWords = ["Messy Art", "Music & Movement", "Sensory Bins", "Story Hour", "Garden Days", "Yoga", "Dance Party", "Puppet Show"];
  const tiles = [
    { title: "Messy Art", shape: "blob", fill: "var(--yellow)" },
    { title: "Music & Movement", shape: "spark", fill: "var(--tangerine)" },
    { title: "Sensory Bins", shape: "flower", fill: "var(--pink)" },
    { title: "Story Hour", shape: "cloud", fill: "var(--paper)" },
    { title: "Outdoor Adventures", shape: "sun", fill: "var(--yellow)" },
  ];
  return (
    <section id="play" style={{ paddingBottom: 0 }}>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> A day at Xcela</span>
          <h2>Learning <em style={{ color: "var(--pink)", fontStyle: "normal" }}>IS</em> play.</h2>
          <p>We don't believe kids need to sit still to learn. They need to splash, sing, build, fall over and get back up.</p>
        </div>
      </div>

      <div className="play-strip">
        <div className="play-track">
          {[...stripWords, ...stripWords].map((w, i) => (
            <span key={i}>{w} <span className="dot">★</span></span>
          ))}
        </div>
      </div>

      <div className="wrap">
        <div className="play-grid">
          {tiles.map((t, i) => (
            <div key={i} className="play-tile reveal">
              <div className="doodle bob">
                <Sticker shape={t.shape} size={140} fill={t.fill} />
              </div>
              <h4>{t.title}</h4>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   Safety
   ============================================================ */
const Safety = () => {
  const tiles = [
    { icon: "📹", title: "Live CCTV", body: "Peek into common areas anytime through our parent app.", color: "var(--pink)" },
    { icon: "🛡️", title: "Verified Staff", body: "100% background-checked, trained and trauma-aware.", color: "var(--mint)" },
    { icon: "🩺", title: "Medical Tie-ups", body: "On-call pediatrician and emergency hospital partnerships.", color: "var(--sky)" },
    { icon: "🧸", title: "Child-Safe Build", body: "Rounded edges, non-toxic paints, padded play zones.", color: "var(--yellow)" },
  ];
  return (
    <section id="safety" style={{ padding: 0 }}>
      <div className="safety reveal">
        <div className="safety-grid">
          <div>
            <span className="eyebrow"><span className="dot" /> Uncompromising security</span>
            <h2 style={{ marginTop: 18 }}>
              A <span style={{ background: "var(--pink)", padding: "0 10px", borderRadius: 14, display: "inline-block" }}>very safe</span> nest for your little one.
            </h2>
            <p style={{ marginTop: 18, lineHeight: 1.55, opacity: 0.9, fontSize: 17 }}>
              Peace of mind is non-negotiable. Our campus is built around a "Safety First"
              philosophy — from secure entry to constant supervision — so kids can explore fearlessly
              and you can breathe easy.
            </p>
            <a href="contact.html" className="btn btn-yellow" style={{ marginTop: 24 }}>Schedule a Visit →</a>
          </div>
          <div className="safety-features">
            {tiles.map((t, i) => (
              <div key={i} className="safety-tile">
                <div className="safety-tile-icon" style={{ "--c": t.color }}>{t.icon}</div>
                <h4>{t.title}</h4>
                <p>{t.body}</p>
              </div>
            ))}
          </div>
        </div>
        {/* corner doodles */}
        <div style={{ position: "absolute", top: -20, right: -20, opacity: 0.9 }} className="spin-slow">
          <Sticker shape="sun" size={120} fill="var(--yellow)" />
        </div>
        <div style={{ position: "absolute", bottom: -20, left: -10 }} className="bob">
          <Sticker shape="heart" size={70} fill="var(--pink)" />
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   Testimonials
   ============================================================ */
const Testimonials = () => {
  const items = [
    {
      quote: "We were so anxious about sending our 2-year-old to school. The app updates and warm teachers put us totally at ease. He runs to school now.",
      name: "Priya & Sameer Desai", meta: "Parents of Aryan, Nursery", initials: "PS", color: "var(--pink)",
    },
    {
      quote: "They weave Indian festivals and culture right alongside an inquiry-based curriculum. The balance is perfect, and the campus is spotless.",
      name: "Anjali Menon", meta: "Mother of Diya, Jr. KG", initials: "AM", color: "var(--mint)",
    },
    {
      quote: "Our daughter's confidence and speech have transformed. Teachers are highly qualified and treat every child with so much patience.",
      name: "Rahul Sharma", meta: "Father of Ananya, Sr. KG", initials: "RS", color: "var(--yellow)",
    },
  ];
  return (
    <section id="testimonials">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot" /> Loved by parents</span>
          <h2>Real words from <span className="stamp stamp-mint">real families</span></h2>
        </div>
        <div className="testi-grid">
          {items.map((t, i) => (
            <div key={i} className="testi reveal" style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="stars">{"★★★★★".split("").map((s, j) => <span key={j}>{s}</span>)}</div>
              <p className="quote">"{t.quote}"</p>
              <div className="parent">
                <div className="avatar" style={{ "--c": t.color }}>{t.initials}</div>
                <div>
                  <div className="parent-name">{t.name}</div>
                  <div className="parent-meta">{t.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   FAQ
   ============================================================ */
const FAQ = () => {
  const items = [
    { q: "What's the teacher-to-student ratio?", a: "Strict 1:8 for Nursery & KG, and 1:4 for Playgroup so every child gets real attention and care." },
    { q: "Are meals provided?", a: "Yes! Fresh, vegetarian, highly nutritious meals cooked in our in-house hygienic kitchen and supervised by a child nutritionist." },
    { q: "What are the timings?", a: "Regular preschool hours are 9:00 AM – 12:30 PM. We also offer extended daycare up to 6:00 PM for working parents." },
    { q: "Do you help with potty training?", a: "Absolutely. We work hand-in-hand with parents to support gentle, encouragement-first potty training for Playgroup and Nursery." },
    { q: "What's a typical day like?", a: "Circle time → free play → focus activity (art / phonics / numbers) → snack → outdoor play → story → goodbye song. Plenty of space for surprises." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="wrap faq-grid">
        <aside className="faq-aside reveal">
          <span className="eyebrow"><span className="dot" /> Got Questions?</span>
          <h2 style={{ marginTop: 16 }}>We've got <span style={{ background: "var(--yellow)", color: "var(--ink)", padding: "0 8px", borderRadius: 12 }}>warm</span> answers.</h2>
          <p>Picking a preschool is huge. Here are the things parents ask us most often. Don't see yours?</p>
          <a href="contact.html" className="btn btn-yellow">💬 Chat With Us</a>
          <div style={{ position: "absolute", top: -20, right: -10 }} className="bob">
            <Sticker shape="lollipop" size={80} fill="var(--pink)" />
          </div>
        </aside>

        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={"faq-item reveal " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span style={{
                  fontFamily: "Fredoka", fontWeight: 700,
                  width: 32, height: 32, display: "grid", placeItems: "center",
                  background: ["var(--pink)", "var(--yellow)", "var(--mint)", "var(--sky)", "var(--grape)"][i % 5],
                  border: "2.5px solid var(--ink)", borderRadius: 10,
                  fontSize: 14,
                }}>Q{i + 1}</span>
                {it.q}
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   Big CTA
   ============================================================ */
const CTA = () => (
  <section style={{ padding: 0 }}>
    <div className="cta reveal">
      <div className="cta-deco float" style={{ top: 30, left: 40, "--r": "-12deg" }}>
        <Sticker shape="balloon" size={90} fill="var(--pink)" />
      </div>
      <div className="cta-deco bob" style={{ top: 50, right: 60 }}>
        <Sticker shape="star" size={70} fill="var(--mint)" />
      </div>
      <div className="cta-deco wiggle" style={{ bottom: 30, left: "30%" }}>
        <Sticker shape="rainbow" size={120} />
      </div>
      <div className="cta-deco float" style={{ bottom: 40, right: 80, "--r": "10deg" }}>
        <Sticker shape="balloon" size={80} fill="var(--sky)" />
      </div>

      <span className="eyebrow"><span className="dot" /> Limited seats — Spring '26</span>
      <h2 style={{ marginTop: 18 }}>Ready to give your kiddo the<br/>
        <span className="stamp stamp-pink" style={{ color: "white" }}>best first chapter?</span>
      </h2>
      <p>Book a free campus tour. Bring your little one. Snacks on us.</p>
      <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="contact.html" className="btn">Book a Free Tour →</a>
        <a href="tel:+917201086596" className="btn btn-mint">📞 Call Us</a>
      </div>
    </div>
  </section>
);

/* Footer lives in layout.jsx as <SiteFooter /> */

/* ============================================================
   Home page content
   ============================================================ */
const HomeContent = () => {
  const [tweaks, setTweakKey] = useState(TWEAK_DEFAULTS);
  useEffect(() => {
    const onMsg = (e) => {
      if (e?.data?.type === "__edit_mode_set_keys") {
        setTweakKey((prev) => ({ ...prev, ...(e.data.edits || {}) }));
      }
    };
    window.addEventListener("message", onMsg);
    return () => window.removeEventListener("message", onMsg);
  }, []);

  return (
    <>
      <Hero phrase={tweaks.headlinePhrase} stickers={tweaks.stickers !== false} />
      <Brain />
      <Programs />
      <Play />
      <Safety />
      <Testimonials />
      <FAQ />
      <CTA />
    </>
  );
};

renderPage("index.html", HomeContent);