/* ============================================================
   Shared layout — Nav, Footer, PageHero, Tweaks wiring.
   Used by every page in the site. Exports to window.
   ============================================================ */

const { useState: useStateL, useEffect: useEffectL } = React;

const TWEAK_DEFAULTS_SHARED = {
  palette: "bubblegum",
  anim: "playful",
  stickers: true,
  trail: false,
};

/* ---------- Nav ---------- */
const NAV_ITEMS = [
  { href: "index.html",       label: "Home" },
  { href: "curriculum.html",  label: "Curriculum" },
  { href: "admissions.html",  label: "Admissions" },
  { href: "gallery.html",     label: "Gallery" },
  { href: "parents.html",     label: "Parent Corner" },
  { href: "contact.html",     label: "Contact" },
];

const SiteNav = ({ active }) => (
  <nav className="nav">
    <div className="nav-inner">
      <a className="brand" href="index.html">
        <span className="brand-mark wiggle">
          <Sticker shape="star" size={22} fill="white" />
        </span>
        <span>Xcela <span style={{ color: "var(--pink)" }}>Dreamland</span></span>
      </a>
      <ul className="nav-links">
        {NAV_ITEMS.map((it) => (
          <li key={it.href}>
            <a href={it.href}
               className={active === it.href ? "active" : ""}
               aria-current={active === it.href ? "page" : undefined}>
              {it.label}
            </a>
          </li>
        ))}
      </ul>
      <a href="admissions.html" className="btn nav-cta">
        Enroll Now <span aria-hidden>→</span>
      </a>
    </div>
  </nav>
);

/* ---------- Page Hero ---------- */
const PageHero = ({ eyebrow, title, titleColor = "var(--pink)", subtitle, bg = "var(--mint)", icon = "star" }) => (
  <section className="page-hero" style={{ background: bg }}>
    <div className="wrap page-hero-inner">
      <div className="reveal">
        <span className="eyebrow"><span className="dot" /> {eyebrow}</span>
        <h1 style={{ marginTop: 18 }}>
          {title.split("|").map((chunk, i) =>
            i % 2 === 1
              ? <span key={i} className="stamp" style={{ background: titleColor, color: "white" }}>{chunk}</span>
              : <span key={i}>{chunk}</span>
          )}
        </h1>
        {subtitle && <p className="page-hero-sub">{subtitle}</p>}
      </div>
      <div className="page-hero-art">
        <Sticker shape={icon} size={220} fill="var(--yellow)" />
      </div>
    </div>
    <div className="page-hero-deco float" style={{ left: "5%", top: 30, "--r": "-10deg" }}>
      <Sticker shape="cloud" size={70} fill="var(--paper)" />
    </div>
    <div className="page-hero-deco bob" style={{ right: "12%", bottom: 30 }}>
      <Sticker shape="spark" size={50} fill="var(--tangerine)" />
    </div>
    <div className="page-hero-deco wiggle" style={{ left: "30%", bottom: 20 }}>
      <Sticker shape="heart" size={42} fill="var(--pink)" />
    </div>
  </section>
);

/* ---------- Footer ---------- */
const SiteFooter = () => (
  <footer>
    <div className="wrap">
      <div className="footer-grid">
        <div>
          <div className="brand" style={{ color: "var(--cream)" }}>
            <span className="brand-mark wiggle"><Sticker shape="star" size={20} fill="white"/></span>
            <span>Xcela Dreamland</span>
          </div>
          <p style={{ marginTop: 14, opacity: 0.85, lineHeight: 1.5 }}>
            Nurturing tomorrow's big thinkers in a joyful, play-based world where every child
            feels loved, safe, and inspired to explore.
          </p>
          <div className="socials">
            {/* Facebook */}
            <a className="social" href="https://www.facebook.com/xceladreamland" target="_blank" rel="noopener noreferrer" aria-label="Facebook">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
              </svg>
            </a>
            {/* Instagram */}
            <a className="social" href="https://www.instagram.com/xceladreamland" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
              </svg>
            </a>
            {/* WhatsApp */}
            <a className="social" href="https://wa.me/917201086596" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                <path d="M12 0C5.373 0 0 5.373 0 12c0 2.127.557 4.122 1.528 5.855L.057 23.882a.5.5 0 0 0 .612.612l6.09-1.459A11.945 11.945 0 0 0 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 22c-1.891 0-3.667-.523-5.183-1.432l-.37-.221-3.818.915.931-3.743-.241-.386A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z"/>
              </svg>
            </a>
          </div>
        </div>
        <div>
          <h4>Quick Links</h4>
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="curriculum.html">Curriculum</a></li>
            <li><a href="admissions.html">Admissions</a></li>
            <li><a href="gallery.html">Gallery</a></li>
            <li><a href="parents.html">Parent Corner</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li>📞 +91 72010 86596</li>
            <li>✉ hello@xceladreamland.com</li>
          </ul>
        </div>
        <div>
          <h4>Our Campus</h4>
          <ul>
            <li>B-1 Momin Park No. 2</li>
            <li>Opp. Khwaja Garib Nawaz Masjid</li>
            <li>Tandalja, Vadodara – 390012</li>
            <li style={{ marginTop: 6 }}>Mon–Fri · 8:30 AM – 6:00 PM</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Xcela Dreamland · Nurturing tomorrow's dreamers.</span>
        <span>Made with 🩷 + 🎨 + 🎵</span>
      </div>
    </div>
  </footer>
);

/* ---------- Tweaks Panel (shared) ---------- */
const SharedTweaks = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS_SHARED);

  useEffectL(() => {
    document.documentElement.dataset.palette = t.palette;
    const animMap = { calm: "calm", playful: "", wild: "wild" };
    if (animMap[t.anim]) document.documentElement.dataset.anim = animMap[t.anim];
    else document.documentElement.removeAttribute("data-anim");
  }, [t.palette, t.anim]);

  useEffectL(() => {
    if (!t.trail) return;
    return initCursorTrail();
  }, [t.trail]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakSelect
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "bubblegum", label: "🍬 Bubblegum" },
            { value: "crayon",    label: "🖍️ Crayon Box" },
            { value: "pastel",    label: "🎨 Pastel Dream" },
            { value: "tropical",  label: "🌴 Tropical" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Animation">
        <TweakRadio
          value={t.anim}
          onChange={(v) => setTweak("anim", v)}
          options={[
            { value: "calm",    label: "Calm" },
            { value: "playful", label: "Playful" },
            { value: "wild",    label: "Wild" },
          ]}
        />
      </TweakSection>
      <TweakSection title="Extras">
        <TweakToggle label="Floaty stickers" value={t.stickers} onChange={(v) => setTweak("stickers", v)} />
        <TweakToggle label="Cursor sparkle trail" value={t.trail} onChange={(v) => setTweak("trail", v)} />
      </TweakSection>
    </TweaksPanel>
  );
};

/* ---------- Page bootstrap ---------- */
const renderPage = (active, Content) => {
  const Root = () => {
    useEffectL(() => initReveal(), []);
    useEffectL(() => { document.documentElement.dataset.palette = TWEAK_DEFAULTS_SHARED.palette; }, []);
    return (
      <>
        <SiteNav active={active} />
        <Content />
        <SiteFooter />
        <SharedTweaks />
        <canvas id="confetti" />
      </>
    );
  };
  ReactDOM.createRoot(document.getElementById("root")).render(<Root />);
};

Object.assign(window, { SiteNav, PageHero, SiteFooter, SharedTweaks, renderPage });