const { Button, Card, Badge, Callout } = window.LittleTwigletsDesignSystem_f6a0f6;
const { useState, useEffect, useRef } = React;

/* ---- Icon: renders a Lucide glyph inside a span React fully owns ---- */
function Icon({ name, size = 24, color = "currentColor", style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.lucide) return;
    el.innerHTML = `<i data-lucide="${name}"></i>`;
    window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": 2 } });
  }, [name, size]);
  return <span ref={ref} style={{ display: "inline-flex", alignItems: "center", color, ...style }}></span>;
}

const NAV = [
  { label: "Home", href: "#home" },
  { label: "About", href: "#about" },
  { label: "Book", href: "#book" },
  { label: "FAQs", href: "#faqs" },
  { label: "Contact", href: "#contact" },
];

function goTo(href) {
  const el = document.querySelector(href);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

/* ============================ HEADER ============================ */
function Header() {
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const link = (n) => (
    <a key={n.href} href={n.href} onClick={() => setOpen(false)}
       style={{ fontFamily: "var(--font-ui)", fontWeight: 600, color: "var(--lt-cocoa)",
                fontSize: "1rem", padding: "0.4rem 0", letterSpacing: "0.01em" }}>
      {n.label}
    </a>
  );
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50,
      background: scrolled ? "rgba(255,253,249,0.92)" : "rgba(255,253,249,0.6)",
      backdropFilter: "blur(8px)", borderBottom: "1.5px solid " + (scrolled ? "var(--border-subtle)" : "transparent"),
      boxShadow: scrolled ? "var(--shadow-xs)" : "none", transition: "all var(--dur-base) var(--ease-soft)" }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72 }}>
        <a href="#home" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <img src="assets/logo-transparent.svg" alt="Little Twiglets" style={{ height: 46 }} />
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem",
            color: "var(--lt-cocoa)", letterSpacing: "0.02em", lineHeight: 1 }}>Little&nbsp;Twiglets</span>
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 28 }} className="lt-nav-desktop">
          {NAV.slice(0, 2).map(link)}
          {NAV.slice(3).map(link)}
          <Button variant="primary" size="sm" onClick={() => goTo("#book")}>Book a Friday</Button>
        </nav>
        <button className="lt-nav-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu"
          style={{ display: "none", background: "none", border: "none", cursor: "pointer", color: "var(--lt-cocoa)" }}>
          <Icon name={open ? "x" : "menu"} size={28} />
        </button>
      </div>
      {open && (
        <div className="lt-nav-mobile" style={{ borderTop: "1.5px solid var(--border-subtle)", background: "var(--lt-cream)" }}>
          <div className="wrap" style={{ display: "flex", flexDirection: "column", gap: 6, padding: "16px 32px 24px" }}>
            {NAV.map(link)}
            <div style={{ marginTop: 8 }}><Button variant="primary" size="md" fullWidth onClick={() => { setOpen(false); goTo("#book"); }}>Book a Friday</Button></div>
          </div>
        </div>
      )}
    </header>
  );
}

/* ============================ HERO ============================ */
function Hero() {
  return (
    <section id="home" style={{ background: "var(--lt-leaf)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -140, right: -120, width: 420, height: 420, borderRadius: "50%", background: "var(--lt-leaf-100)", opacity: 0.5 }}></div>
      <div style={{ position: "absolute", bottom: -120, left: -100, width: 320, height: 320, borderRadius: "50%", background: "var(--lt-gold-50)", opacity: 0.45 }}></div>
      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingTop: "var(--sp-8)", paddingBottom: "var(--sp-8)", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
        <img src="assets/logo-transparent.svg" alt="Little Twiglets — big adventures for little learners" style={{ width: 260, maxWidth: "70vw", marginBottom: "var(--sp-5)" }} />
        <h1 style={{ fontSize: "clamp(2.2rem, 5.5vw, var(--fs-4xl))", maxWidth: "16ch", margin: "0 auto" }}>
          Easy to book, lovely to attend, <span style={{ color: "var(--lt-tangerine-700)" }}>hard to forget.</span>
        </h1>
        <p className="lead" style={{ maxWidth: "44ch", marginTop: "var(--sp-5)" }}>
          Warm, cosy Friday classes for little ones aged 1–5 and their grown-ups — right here in Lutterworth.
        </p>
        <div style={{ display: "flex", gap: "var(--sp-3)", marginTop: "var(--sp-6)", flexWrap: "wrap", justifyContent: "center" }}>
          <Button variant="primary" size="lg" onClick={() => goTo("#book")} iconRight={<Icon name="arrow-right" size={20} />}>Book a Friday</Button>
          <Button variant="outline" size="lg" onClick={() => goTo("#about")}>Meet Hannah &amp; Jessie</Button>
        </div>
      </div>
      {/* image collage */}
      <div className="wrap" style={{ position: "relative", zIndex: 2, paddingBottom: "var(--sp-9)" }}>
        <div className="lt-hero-collage" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gridTemplateRows: "180px 180px", gap: "var(--sp-4)" }}>
          <div style={{ gridRow: "1 / span 2", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
            <image-slot id="hero-1" shape="rect" placeholder="Photo — a child laughing mid-play"></image-slot>
          </div>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
            <image-slot id="hero-2" shape="rect" placeholder="Photo — parent &amp; toddler together"></image-slot>
          </div>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
            <image-slot id="hero-3" shape="rect" placeholder="Photo — sensory play"></image-slot>
          </div>
          <div style={{ gridColumn: "2 / span 2", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-md)" }}>
            <image-slot id="hero-4" shape="rect" placeholder="Photo — group of happy little ones"></image-slot>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ INFO BAR ============================ */
const INFO = [
  { icon: "calendar-days", h: "Term-time", s: "Fridays" },
  { icon: "baby", h: "Age", s: "1–5 years" },
  { icon: "map-pin", h: "Where", s: "The Pavilion, Lutterworth" },
  { icon: "pound-sterling", h: "Drop-in", s: "£7.50 / session" },
];
function InfoBar() {
  return (
    <section style={{ padding: "0 0 var(--sp-2)", marginTop: "calc(-1 * var(--sp-7))", position: "relative", zIndex: 5 }}>
      <div className="wrap">
        <Card padding="0" style={{ boxShadow: "var(--shadow-lg)" }}>
          <div className="lt-info-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
            {INFO.map((it, i) => (
              <div key={it.h} style={{ display: "flex", alignItems: "center", gap: "var(--sp-4)", padding: "var(--sp-5) var(--sp-5)",
                borderLeft: i === 0 ? "none" : "1.5px solid var(--border-subtle)" }}>
                <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--lt-leaf-100)",
                  display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name={it.icon} size={24} color="var(--lt-sage-600)" />
                </div>
                <div>
                  <div className="overline" style={{ color: "var(--text-muted)" }}>{it.h}</div>
                  <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.15rem", color: "var(--lt-cocoa)", lineHeight: 1.2 }}>{it.s}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </section>
  );
}

/* ============================ ABOUT ============================ */
function Person({ id, name, role }) {
  return (
    <Card padding="0" style={{ textAlign: "left" }}>
      <div style={{ height: 300 }}>
        <image-slot id={id} shape="rect" placeholder={"Photo of " + name}></image-slot>
      </div>
      <div style={{ padding: "var(--sp-5)" }}>
        <h3 style={{ fontSize: "var(--fs-xl)" }}>{name}</h3>
        <div className="overline" style={{ marginTop: 4 }}>{role}</div>
        <p style={{ marginTop: "var(--sp-4)", color: "var(--text-body)" }}>
          Add {name.split(" ")[0]}'s short bio here — a warm sentence or two about who they are and what
          they love about Fridays with the Twiglets. <em>[Placeholder — edit later.]</em>
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--sp-2)", marginTop: "var(--sp-4)" }}>
          <Badge tone="leaf"><Icon name="graduation-cap" size={14} />&nbsp;Qualified primary school teacher</Badge>
          <Badge tone="gold">DBS checked</Badge>
          <Badge tone="tangerine">Paediatric first aid</Badge>
        </div>
      </div>
    </Card>
  );
}

function About() {
  return (
    <section id="about" style={{ padding: "var(--sp-9) 0 var(--sp-8)" }}>
      <div className="wrap">
        <div style={{ maxWidth: "var(--container-narrow)", margin: "0 auto var(--sp-7)", textAlign: "center" }}>
          <div className="overline">The grown-ups behind the giggles</div>
          <h2 style={{ fontSize: "var(--fs-3xl)", marginTop: "var(--sp-3)" }}>Meet Hannah &amp; Jessie</h2>
          <p className="lead" style={{ marginTop: "var(--sp-4)" }}>
            We're two qualified primary school teachers, parents ourselves, and firm believers that the early
            years should be full of play. We started Little Twiglets to fill a gap for families near Lutterworth —
            a warm, welcoming morning where your little one can explore and you can breathe out for a while, too.
          </p>
        </div>
        <div className="lt-two-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-6)", maxWidth: 900, margin: "0 auto" }}>
          <Person id="about-hannah" name="Hannah" role="Co-founder &amp; teacher" />
          <Person id="about-jessie" name="Jessie" role="Co-founder &amp; teacher" />
        </div>
        <div style={{ maxWidth: "var(--container-narrow)", margin: "var(--sp-7) auto 0" }}>
          <Callout tone="leaf" title="Why we do it" icon={<Icon name="heart" size={22} />}>
            Add a short paragraph on your passion for supporting local parents and giving little ones a brilliant
            start — the community you're building and the gap in local classes you set out to fill.
            <em> [Placeholder — edit later.]</em>
          </Callout>
        </div>
      </div>
    </section>
  );
}

/* ============================ SESSIONS ============================ */
function SessionCard({ tag, title, time, accent, desc, icon }) {
  return (
    <Card interactive accent={accent} padding="0" style={{ display: "flex", flexDirection: "column" }}>
      <div style={{ padding: "var(--sp-6) var(--sp-6) var(--sp-5)", flex: 1 }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "var(--sp-4)" }}>
          <div style={{ width: 56, height: 56, borderRadius: "var(--radius-md)", background: "var(--lt-sand)",
            display: "flex", alignItems: "center", justifyContent: "center" }}>
            <Icon name={icon} size={28} color={accent} />
          </div>
          <Badge tone="cocoa"><Icon name="clock" size={14} />&nbsp;{time}</Badge>
        </div>
        <div className="overline" style={{ color: accent }}>{tag}</div>
        <h3 style={{ fontSize: "var(--fs-2xl)", marginTop: 4 }}>{title}</h3>
        <p style={{ marginTop: "var(--sp-3)", color: "var(--text-body)" }}>{desc} <em>[Placeholder — edit later.]</em></p>
        <div style={{ display: "flex", gap: "var(--sp-2)", marginTop: "var(--sp-4)", color: "var(--text-muted)", fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: "0.95rem", alignItems: "center" }}>
          <Icon name="timer" size={18} /> 45 minutes
        </div>
      </div>
      <div style={{ padding: "0 var(--sp-6) var(--sp-6)" }}>
        <Button variant="primary" size="md" fullWidth onClick={() => goTo("#book")} iconRight={<Icon name="arrow-right" size={18} />}>Book this session</Button>
      </div>
    </Card>
  );
}
function Sessions() {
  return (
    <section style={{ background: "var(--lt-sand)", padding: "var(--sp-9) 0" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: "var(--container-narrow)", margin: "0 auto var(--sp-7)" }}>
          <div className="overline">One Friday, two ways to play</div>
          <h2 style={{ fontSize: "var(--fs-3xl)", marginTop: "var(--sp-3)" }}>Two classes, one cosy morning</h2>
          <p className="lead" style={{ marginTop: "var(--sp-4)" }}>Pick the session that suits your Twiglet — or make a morning of it and do both.</p>
        </div>
        <div className="lt-two-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-6)", maxWidth: 900, margin: "0 auto" }}>
          <SessionCard tag="Little Twiglets" title="MOVE" time="9:30am" icon="footprints" accent="var(--lt-tangerine)"
            desc="Wriggle, bounce and toddle! A joyful mix of movement, music and parachute play to get little bodies moving and giggling." />
          <SessionCard tag="Little Twiglets" title="CREATE" time="10:30am" icon="palette" accent="var(--lt-sage-600)"
            desc="Messy, mucky, marvellous. Hands-on sensory and craft play that sparks curiosity and lets imaginations run wild." />
        </div>
      </div>
    </section>
  );
}

/* ============================ BOOK ============================ */
function Book() {
  return (
    <section id="book" style={{ padding: "var(--sp-9) 0" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: "var(--container-narrow)", margin: "0 auto var(--sp-6)" }}>
          <div className="overline">Booking</div>
          <h2 style={{ fontSize: "var(--fs-3xl)", marginTop: "var(--sp-3)" }}>Grab a Friday, we'll do the rest</h2>
          <p className="lead" style={{ marginTop: "var(--sp-4)" }}>
            Check availability and book your spot below. Schedules, places and payment are handled securely by
            our booking partner, Happity.
          </p>
        </div>
        {/* Happity widget placeholder — replace the inner content with the Happity embed code. */}
        <div id="happity-embed" style={{ maxWidth: 900, margin: "0 auto" }}>
          <div style={{ border: "3px dashed var(--lt-oat)", borderRadius: "var(--radius-lg)", background: "var(--lt-cream)",
            padding: "var(--sp-8) var(--sp-6)", textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-4)" }}>
            <div style={{ width: 72, height: 72, borderRadius: "50%", background: "var(--lt-leaf-100)", display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="calendar-check" size={34} color="var(--lt-sage-600)" />
            </div>
            <h3 style={{ fontSize: "var(--fs-xl)" }}>Happity booking widget goes here</h3>
            <p style={{ maxWidth: "48ch", color: "var(--text-body)" }}>
              This box is a placeholder for the live Happity bookings widget. When you're ready, paste the embed
              snippet from your Happity provider account into the <code>#happity-embed</code> container and it will
              show your real schedule, availability and checkout.
            </p>
            <div style={{ display: "flex", gap: "var(--sp-3)", flexWrap: "wrap", justifyContent: "center" }}>
              <Button variant="primary" size="md" iconRight={<Icon name="external-link" size={18} />}
                onClick={() => window.open("https://providers.happity.co.uk/features/bookings/", "_blank")}>About Happity bookings</Button>
              <Button variant="ghost" size="md" onClick={() => goTo("#contact")}>Prefer to ask us first?</Button>
            </div>
          </div>
        </div>
        <p style={{ textAlign: "center", marginTop: "var(--sp-5)", color: "var(--text-muted)", fontSize: "0.95rem" }}>
          Places are limited each week — booking ahead is the surest way to secure your spot.
        </p>
      </div>
    </section>
  );
}

/* ============================ FAQ ============================ */
const FAQS = [
  { q: "Do I need to book in advance?", a: "Booking ahead is best as spaces are limited, but drop-ins are welcome at £7.50 per session if there's room. You can reserve your place through our Happity booking page." },
  { q: "What should we bring?", a: "Just comfy clothes that can get a little messy and a water bottle. We provide everything for the play — and we're not precious about mess!" },
  { q: "Which session is right for my child?", a: "MOVE (9:30am) is all about music and movement; CREATE (10:30am) is hands-on sensory and craft play. Both suit ages 1–5, and you're very welcome to stay for both." },
  { q: "Where exactly are you, and is there parking?", a: "We're at The Pavilion on the recreation ground in Lutterworth, LE17 4RB. [Add a note about parking here.]" },
  { q: "Can siblings come along?", a: "Absolutely. Little Twiglets is a family space — add your own note here about sibling pricing or arrangements." },
  { q: "What happens during school holidays?", a: "Classes run term-time on Fridays. [Confirm your holiday arrangements here.]" },
];
function FaqItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1.5px solid var(--border-subtle)" }}>
      <button onClick={onToggle} style={{ width: "100%", background: "none", border: "none", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--sp-4)",
        padding: "var(--sp-5) 0", textAlign: "left", fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: "1.2rem", color: "var(--lt-cocoa)" }}>
        {q}
        <span style={{ flexShrink: 0, transition: "transform var(--dur-base) var(--ease-bounce)", transform: open ? "rotate(45deg)" : "none", color: "var(--lt-tangerine)" }}>
          <Icon name="plus" size={24} />
        </span>
      </button>
      {open && <p style={{ padding: "0 0 var(--sp-5)", color: "var(--text-body)", maxWidth: "62ch" }}>{a}</p>}
    </div>
  );
}
function Faqs() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faqs" style={{ background: "var(--lt-sand)", padding: "var(--sp-9) 0" }}>
      <div className="wrap" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: "center", marginBottom: "var(--sp-6)" }}>
          <div className="overline">Good to know</div>
          <h2 style={{ fontSize: "var(--fs-3xl)", marginTop: "var(--sp-3)" }}>Things parents often ask before their first Friday</h2>
        </div>
        <Card padding="0 var(--sp-6)">
          {FAQS.map((f, i) => (
            <FaqItem key={i} {...f} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </Card>
        <p style={{ textAlign: "center", marginTop: "var(--sp-5)", color: "var(--text-muted)" }}>
          Still wondering something? <a href="#contact" onClick={(e) => { e.preventDefault(); goTo("#contact"); }}>Get in touch</a> — we're happy to help.
        </p>
      </div>
    </section>
  );
}

/* ============================ CONTACT ============================ */
function Contact() {
  return (
    <section id="contact" style={{ padding: "var(--sp-9) 0" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: "var(--container-narrow)", margin: "0 auto var(--sp-7)" }}>
          <div className="overline">Say hello</div>
          <h2 style={{ fontSize: "var(--fs-3xl)", marginTop: "var(--sp-3)" }}>Where to find us</h2>
        </div>
        <div className="lt-two-col" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-6)", alignItems: "stretch" }}>
          <Card padding="var(--sp-6)" style={{ display: "flex", flexDirection: "column", gap: "var(--sp-5)" }}>
            <div style={{ display: "flex", gap: "var(--sp-4)" }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--lt-leaf-100)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <Icon name="map-pin" size={24} color="var(--lt-sage-600)" />
              </div>
              <div>
                <div className="overline" style={{ color: "var(--text-muted)" }}>Address</div>
                <p style={{ fontFamily: "var(--font-display)", fontWeight: 700, color: "var(--lt-cocoa)", fontSize: "1.15rem" }}>The Pavilion</p>
                <p style={{ color: "var(--text-body)" }}>On the recreation ground, Lutterworth, LE17 4RB</p>
              </div>
            </div>
            <div style={{ display: "flex", gap: "var(--sp-4)" }}>
              <div style={{ width: 52, height: 52, borderRadius: "var(--radius-md)", background: "var(--lt-gold-50)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <Icon name="mail" size={24} color="var(--lt-gold-700)" />
              </div>
              <div>
                <div className="overline" style={{ color: "var(--text-muted)" }}>Email Hannah &amp; Jessie</div>
                <p style={{ fontSize: "1.15rem" }}><a href="mailto:hello@littletwiglets.com" style={{ fontFamily: "var(--font-display)", fontWeight: 700 }}>hello@littletwiglets.com</a></p>
              </div>
            </div>
            <div>
              <div className="overline" style={{ color: "var(--text-muted)", marginBottom: "var(--sp-3)" }}>Follow along</div>
              <div style={{ display: "flex", gap: "var(--sp-3)" }}>
                <a href="https://www.instagram.com/little.twiglets/?hl=en-gb" target="_blank" rel="noopener" className="lt-social">
                  <Icon name="instagram" size={22} /> Instagram
                </a>
                <a href="https://www.facebook.com/profile.php?id=100089779375310" target="_blank" rel="noopener" className="lt-social">
                  <Icon name="facebook" size={22} /> Facebook
                </a>
              </div>
            </div>
            <div style={{ marginTop: "auto", paddingTop: "var(--sp-2)" }}>
              <Button variant="primary" size="md" onClick={() => goTo("#book")} iconRight={<Icon name="arrow-right" size={18} />}>Book a Friday</Button>
            </div>
          </Card>
          <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)", border: "1.5px solid var(--border-subtle)", minHeight: 380 }}>
            <iframe title="Map — The Pavilion, Lutterworth"
              src="https://www.openstreetmap.org/export/embed.html?bbox=-1.2140%2C52.4520%2C-1.1900%2C52.4640&layer=mapnik&marker=52.4580%2C-1.2020"
              style={{ width: "100%", height: "100%", minHeight: 380, border: 0 }}></iframe>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================ FOOTER ============================ */
function Footer() {
  return (
    <footer style={{ background: "var(--lt-leaf)", padding: "var(--sp-8) 0 var(--sp-6)" }}>
      <div className="wrap" style={{ display: "flex", flexWrap: "wrap", gap: "var(--sp-6)", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ maxWidth: 320 }}>
          <img src="assets/logo-transparent.svg" alt="Little Twiglets" style={{ height: 96 }} />
          <p style={{ marginTop: "var(--sp-3)", color: "var(--lt-cocoa)" }}>Baby &amp; toddler classes in Lutterworth. Big adventures for little learners.</p>
        </div>
        <div style={{ display: "flex", gap: "var(--sp-8)", flexWrap: "wrap" }}>
          <div>
            <div className="overline" style={{ color: "var(--lt-twig)" }}>Explore</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: "var(--sp-3)" }}>
              {NAV.map(n => <a key={n.href} href={n.href} onClick={(e) => { e.preventDefault(); goTo(n.href); }} style={{ color: "var(--lt-cocoa)", fontFamily: "var(--font-ui)", fontWeight: 600 }}>{n.label}</a>)}
            </div>
          </div>
          <div>
            <div className="overline" style={{ color: "var(--lt-twig)" }}>Get in touch</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, marginTop: "var(--sp-3)", color: "var(--lt-cocoa)" }}>
              <a href="mailto:hello@littletwiglets.com" style={{ color: "var(--lt-cocoa)", fontFamily: "var(--font-ui)", fontWeight: 600 }}>hello@littletwiglets.com</a>
              <a href="https://www.instagram.com/little.twiglets/?hl=en-gb" target="_blank" rel="noopener" style={{ color: "var(--lt-cocoa)", fontFamily: "var(--font-ui)", fontWeight: 600 }}>Instagram</a>
              <a href="https://www.facebook.com/profile.php?id=100089779375310" target="_blank" rel="noopener" style={{ color: "var(--lt-cocoa)", fontFamily: "var(--font-ui)", fontWeight: 600 }}>Facebook</a>
            </div>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: "var(--sp-6)", paddingTop: "var(--sp-5)", borderTop: "1.5px solid rgba(63,23,14,0.12)", color: "var(--lt-twig)", fontSize: "0.9rem" }}>
        © {new Date().getFullYear()} Little Twiglets · The Pavilion, Lutterworth, LE17 4RB
      </div>
    </footer>
  );
}

/* ============================ APP ============================ */
function App() {
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <InfoBar />
        <About />
        <Sessions />
        <Book />
        <Faqs />
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
