// sections.jsx — Raffles ECC homepage sections. Loaded via Babel.
/* global React */
const { useState, useEffect, useRef } = React;

// ───────── Icons ─────────
const Icon = ({ name, size = 18 }) => {
  const s = { width: size, height: size, strokeWidth: 1.8, fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "calendar": return (<svg viewBox="0 0 24 24" style={s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>);
    case "phone": return (<svg viewBox="0 0 24 24" style={s}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>);
    case "wa": return (<svg viewBox="0 0 24 24" style={s}><path d="M20 12a8 8 0 0 1-12 6.9L4 20l1.1-3.9A8 8 0 1 1 20 12Z"/><path d="M8.5 9c.4 2 2 4 4.5 5l1.5-1.2 2 .5-.2 2-2 .5a8 8 0 0 1-6.5-6.5l.5-2 2-.2.5 2L8.5 9Z"/></svg>);
    case "shield": return (<svg viewBox="0 0 24 24" style={s}><path d="M12 3l8 3v6a9 9 0 0 1-8 9 9 9 0 0 1-8-9V6l8-3Z"/><path d="m9 12 2 2 4-4"/></svg>);
    case "spark": return (<svg viewBox="0 0 24 24" style={s}><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2 2M16.4 16.4l2 2M5.6 18.4l2-2M16.4 7.6l2-2"/><circle cx="12" cy="12" r="3"/></svg>);
    case "heart": return (<svg viewBox="0 0 24 24" style={s}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z"/></svg>);
    case "run": return (<svg viewBox="0 0 24 24" style={s}><circle cx="14" cy="5" r="2"/><path d="M5 21l3-5 3 2 1-5 4 3-1 5M9 11l3-4 4 2"/></svg>);
    case "speech": return (<svg viewBox="0 0 24 24" style={s}><path d="M4 6h16v10H8l-4 4V6Z"/></svg>);
    case "users": return (<svg viewBox="0 0 24 24" style={s}><circle cx="9" cy="9" r="3"/><path d="M3 19a6 6 0 0 1 12 0M16 11a3 3 0 1 0 0-6M21 19a5 5 0 0 0-4-5"/></svg>);
    case "clock": return (<svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>);
    case "pin": return (<svg viewBox="0 0 24 24" style={s}><path d="M12 22s7-7 7-13a7 7 0 0 0-14 0c0 6 7 13 7 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>);
    case "book": return (<svg viewBox="0 0 24 24" style={s}><path d="M4 5a2 2 0 0 1 2-2h12v18H6a2 2 0 0 1-2-2V5Z"/><path d="M8 7h7M8 11h7"/></svg>);
    case "leaf": return (<svg viewBox="0 0 24 24" style={s}><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14ZM5 19l8-8"/></svg>);
    case "arrow": return (<svg viewBox="0 0 24 24" style={s}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case "plus": return (<svg viewBox="0 0 24 24" style={s}><path d="M12 5v14M5 12h14"/></svg>);
    case "check": return (<svg viewBox="0 0 24 24" style={s}><path d="m5 12 5 5 9-11"/></svg>);
    case "lock": return (<svg viewBox="0 0 24 24" style={s}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>);
    case "mail": return (<svg viewBox="0 0 24 24" style={s}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>);
    case "globe": return (<svg viewBox="0 0 24 24" style={s}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case "bell": return (<svg viewBox="0 0 24 24" style={s}><path d="M6 16V11a6 6 0 0 1 12 0v5l1 2H5l1-2ZM10 20a2 2 0 0 0 4 0"/></svg>);
    default: return null;
  }
};

// ───────── Logo (clean SVG redraw of shield, no copyrighted text faces) ─────────
const Logo = ({ size = 38 }) => (
  <svg className="logo-svg nav-logo-mark" viewBox="0 0 100 116" width={size} height={size * 1.16}>
    <defs>
      <linearGradient id="hl" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="rgba(255,255,255,.25)"/>
        <stop offset=".5" stopColor="rgba(255,255,255,0)"/>
        <stop offset="1" stopColor="rgba(0,0,0,.1)"/>
      </linearGradient>
    </defs>
    <path d="M5 5 L95 5 L95 60 Q95 95 50 110 Q5 95 5 60 Z" fill="var(--paper)"/>
    {/* TL gold */}
    <path className="shield-tl" d="M6 6 L50 6 L50 58 L6 58 Z"/>
    {/* TR plum */}
    <path className="shield-tr" d="M50 6 L94 6 L94 58 L50 58 Z"/>
    {/* BL plum */}
    <path className="shield-bl" d="M6 58 L50 58 L50 109 Q26 100 6 90 Z"/>
    {/* BR gold */}
    <path className="shield-br" d="M50 58 L94 58 L94 90 Q74 100 50 109 Z"/>
    {/* Book TR */}
    <g className="book">
      <path d="M65 22 L82 22 L82 35 L73.5 32 L65 35 Z" fill="var(--paper)"/>
      <path d="M68 26 L79 26 M68 29 L79 29" stroke="var(--plum-deep)" strokeWidth="1.2"/>
    </g>
    {/* Horse silhouette BL */}
    <path className="horse" d="M14 86 Q18 78 26 76 Q30 70 36 70 L40 76 L40 90 L34 90 L34 86 L28 86 L28 90 L20 90 Q14 90 14 86 Z"/>
    <path d="M5 5 L95 5 L95 60 Q95 95 50 110 Q5 95 5 60 Z" fill="url(#hl)" opacity=".7"/>
  </svg>
);

// ───────── Nav ─────────
function Nav({ branch, onBranchChange, onTourClick }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const f = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")} data-screen-label="nav">
      <div className="wrap nav-inner">
        <a className="nav-logo" href="#">
          <Logo />
          <span className="nav-logo-text">
            <span>RAFFLES</span>
            <small>Early Childhood Centre</small>
          </span>
        </a>
        <div className="nav-links">
          <a href="#curriculum">Curriculum</a>
          <a href="#programmes">Programmes</a>
          <a href="#pathway">Pathway</a>
          <a href="#facilities">Facilities</a>
          <a href="#locations">Locations</a>
          <a href="#admissions">Admissions</a>
        </div>
        <div className="nav-cta">
          <button className="nav-branch" onClick={onBranchChange} title="Change branch">
            <span className="dot" />
            {branch.name}
          </button>
          <a href="#tour" className="btn btn-sm btn-ghost">
            <Icon name="phone" size={14} />
            Call
          </a>
          <button className="btn btn-sm btn-primary" onClick={onTourClick}>
            <Icon name="calendar" size={14} />
            Book a tour
          </button>
        </div>
      </div>
    </nav>
  );
}

// ───────── Hero ─────────
function Hero({ branch, onTourClick }) {
  return (
    <section className="hero" data-screen-label="hero">
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <span className="hero-eyebrow">
            <span className="pill">EYFS</span>
            Premium early years · from 45 days
          </span>
          <h1>
            A warm, considered start to <em>school</em>{" "}
            — <span className="underline">for children from 45 days</span>.
          </h1>
          <p className="hero-sub">
            Raffles ECC is a group of premium Dubai nurseries following the UK Early Years Foundation Stage.
            Play-based learning, qualified key persons and a clear pathway into the Innoventures family of schools.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onTourClick}>
              <Icon name="calendar" size={16} /> Book a tour at {branch.name}
            </button>
            <a className="btn btn-light" href="#programmes">
              See our programmes
            </a>
          </div>
          <dl className="hero-meta">
            <div>
              <dt>Since</dt>
              <dd>2008 · ECCs across Dubai</dd>
            </div>
            <div>
              <dt>Ratios</dt>
              <dd>1:3 to 1:8 by age</dd>
            </div>
            <div>
              <dt>Hours</dt>
              <dd>7am – 6pm · 3 or 5 days</dd>
            </div>
          </dl>
        </div>
        <div className="hero-photo-wrap" style={{ position: "relative" }}>
          <div className="hero-photo">
            <img src="media/home-hero-tall.webp" alt="A child in the Raffles ECC uniform, smiling during messy play." />
            <div className="consent-chip">
              <Icon name="shield" size={11} /> Photos shown with parental consent
            </div>
          </div>
          <div className="hero-photo-secondary">
            <img src="media/gallery-03.webp" alt="Sensory play with shaving foam and sea-creature figures." />
          </div>
          <div className="hero-floater">
            <div className="ic"><Icon name="users" size={18} /></div>
            <div>
              <b>1 educator : 3 infants</b>
              <span>The lowest ratio for our under-1s</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Trust strip ─────────
function TrustStrip() {
  const items = [
    { icon: "book", b: "UK EYFS curriculum", s: "Play-based, holistic" },
    { icon: "heart", b: "From 45 days", s: "Babies through preschool" },
    { icon: "users", b: "Ratios 1:3 — 1:8", s: "Attributed to WSA" },
    { icon: "arrow", b: "School pathway", s: "Innoventures priority" },
    { icon: "pin", b: "8 community centres", s: "Dubai-wide" },
  ];
  return (
    <div className="trust" data-screen-label="trust">
      <div className="wrap">
        <div className="trust-row">
          {items.map((i, k) => (
            <div className="trust-cell" key={k}>
              <span className="ic"><Icon name={i.icon} size={16} /></span>
              <div>
                <b>{i.b}</b>
                <span>{i.s}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ───────── Curriculum (EYFS) ─────────
function Curriculum({ pillars }) {
  return (
    <section className="curriculum section" id="curriculum" data-screen-label="curriculum">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">The curriculum</span>
            <h2>Learning is an <em>adventure</em>, not a worksheet.</h2>
          </div>
          <p>
            Every Raffles ECC follows the UK Early Years Foundation Stage — a play-based framework
            that meets each child where they are. Teachers observe, document and gently extend
            learning across four developmental pillars.
          </p>
        </div>

        <div className="eyfs-card">
          <div className="eyfs-copy">
            <h3>The EYFS, in plain language for parents.</h3>
            <p>
              "Play-based" doesn't mean unstructured. Each day balances child-led exploration with
              short, focused group routines: a phonics circle, a number song, a story. Educators
              track ongoing observations against EYFS milestones, then plan the next step.
            </p>
            <ul>
              <li>Daily report via the Kalo Parent App — photos, meals, naps, milestones.</li>
              <li>Key-person model: one consistent educator who knows your child.</li>
              <li>Termly parent–teacher conversations and a written summary.</li>
            </ul>
          </div>
          <div className="eyfs-pillars">
            {pillars.map(p => (
              <div className="eyfs-pillar" key={p.id}>
                <div className="ic"><Icon name={p.icon} size={18} /></div>
                <b>{p.title}</b>
                <span>{p.body}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Programmes (age band tabs) ─────────
function Programmes({ ageBands }) {
  const [active, setActive] = useState(ageBands[0].id);
  const band = ageBands.find(b => b.id === active);
  return (
    <section className="programmes section" id="programmes" data-screen-label="programmes">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Programmes &amp; ages</span>
            <h2>From first weeks to first words to <em>first day of school</em>.</h2>
          </div>
          <p>
            Four age stages, each with a dedicated room, ratio and rhythm. Choose 3 or 5 days a week,
            with day options from 8am–2pm through to 8am–6pm. Early drop-off from 7am on request.
          </p>
        </div>

        <div className="age-tabs" role="tablist">
          {ageBands.map(b => (
            <button
              key={b.id}
              role="tab"
              aria-selected={b.id === active}
              className={"age-tab" + (b.id === active ? " active" : "")}
              onClick={() => setActive(b.id)}
            >
              <span>{b.range}</span>
              {b.label}
            </button>
          ))}
        </div>

        <div className="programme-display">
          <div className="programme-img">
            <img src={band.photo} alt={band.label + " — life at Raffles ECC"} />
            <span className="age-badge">{band.range}</span>
          </div>
          <div className="programme-body">
            <div className="name">{band.label}</div>
            <h3>{band.lede}</h3>
            <p>{band.summary}</p>
            <div className="focus">
              {band.focus.map(([k, v], i) => (
                <div className="focus-row" key={i}>
                  <b>{k}</b>
                  <span>{v}</span>
                </div>
              ))}
            </div>
            <div className="row" style={{ gap: 12, flexWrap: "wrap" }}>
              <span className="ratio-pill"><Icon name="users" size={13} /> Ratio {band.ratio}</span>
              <a href="#tour" className="btn btn-sm btn-ghost">Book a tour</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Pathway ─────────
function Pathway({ schools }) {
  const stages = [
    { age: "45d — 4 yrs", title: "Raffles ECC", body: "EYFS nursery across 7 community centres." },
    { age: "3 — 5 yrs", title: "Raffles Starters", body: "Preschool bridge at Springs 7." },
    { age: "FS1 onward", title: "Innoventures Schools", body: "Priority admission into five sister schools." },
  ];
  return (
    <section className="pathway section" id="pathway" data-screen-label="pathway">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Pathway to school</span>
            <h2>One family of schools. <em>Eighteen years</em> of education planned for.</h2>
          </div>
          <p>
            Children leaving Raffles ECC receive priority admission into the five Innoventures
            schools across IB, British and American curricula — so the question "what's next?"
            already has an answer.
          </p>
        </div>

        <div className="pathway-flow">
          <div className="pathway-stages">
            {stages.map((s, i) => (
              <div className="pathway-stage" key={i}>
                <div className="num">{i + 1}</div>
                <div>
                  <h4>{s.title}</h4>
                  <p>{s.body}</p>
                </div>
                <div className="age">{s.age}</div>
              </div>
            ))}
          </div>
          <div className="pathway-schools">
            <h4>Continue at Innoventures</h4>
            <p className="lede">The five schools your child can move into:</p>
            <ul>
              {schools.map((s, i) => (
                <li key={i}>
                  <b>{s.name}</b>
                  <span><Icon name="arrow" size={14} /></span>
                </li>
              ))}
            </ul>
            <p className="attribution">
              Curriculum details and KHDA ratings live on each school's own site — they're sister
              schools, not the ECC. We won't merge their inspection data here.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Mission / Director quote ─────────
function Mission() {
  return (
    <section className="mission section" data-screen-label="mission">
      <div className="wrap mission-grid">
        <div className="director-img">
          <img src="media/director-lara-hudson.webp" alt="Lara Hudson, Director of Raffles ECCs." />
          <div className="badge">
            <b>Lara Hudson</b>
            <span>Director · Raffles ECCs</span>
          </div>
        </div>
        <div>
          <span className="eyebrow" style={{ marginBottom: 16, display: "inline-flex" }}>From the director</span>
          <p className="mission-quote">
            "Every child is valued and supported. We don't measure them against the next child —
            we follow <em>their</em> next step. That's what EYFS, done well, looks like."
          </p>
          <div className="mission-attr">
            <span className="line" />
            Lara Hudson, Director of all Raffles ECCs
          </div>
          <div className="mission-stats">
            <div className="mission-stat">
              <div className="num">2008</div>
              <div className="lbl">Raffles ECCs founded</div>
            </div>
            <div className="mission-stat">
              <div className="num">8</div>
              <div className="lbl">Community centres across Dubai</div>
            </div>
            <div className="mission-stat">
              <div className="num">9,000+</div>
              <div className="lbl">Students across Innoventures group, daily</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── Facilities gallery ─────────
function Facilities() {
  const items = [
    { src: "media/gallery-01.webp", label: "Provocation tables", cls: "lg" },
    { src: "media/content-hero-04.webp", label: "Construction & STEM", cls: "sq" },
    { src: "media/where-next-04.webp", label: "Outdoor reading nook", cls: "sq" },
    { src: "media/content-hero-05.webp", label: "Make-your-mark wall", cls: "md" },
    { src: "media/gallery-02.webp", label: "Loose-parts play", cls: "md" },
    { src: "cta", cls: "sm" },
    { src: "media/home-mission.webp", label: "Library corner", cls: "md" },
  ];
  return (
    <section className="facilities section" id="facilities" data-screen-label="facilities">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Facilities</span>
            <h2>Rooms that <em>invite</em> children in.</h2>
          </div>
          <p>
            Every centre is set up as a series of invitations — soft corners for stories, low tables
            for messy play, shaded outdoor zones for gross-motor work. Plus on-site clinic, Kalo
            meals and door-to-door transport where available.
          </p>
        </div>

        <div className="gallery-grid">
          {items.map((it, i) =>
            it.src === "cta" ? (
              <div className="gallery-cta" key={i}>
                <h4>See it in person.</h4>
                <a href="#tour" className="btn btn-sm">
                  <Icon name="calendar" size={13} /> Book a tour
                </a>
              </div>
            ) : (
              <div className={"gallery-item " + it.cls} key={i}>
                <img src={it.src} alt={it.label} loading="lazy" />
                <span className="label">{it.label}</span>
              </div>
            )
          )}
        </div>

        <div className="consent-note">
          <Icon name="shield" size={14} />
          Photography shown with parental consent and reviewed under our safeguarding policy.
          Per-branch facility tours are by appointment.
        </div>
      </div>
    </section>
  );
}

// ───────── Locations ─────────
function Locations({ branches, branch, setBranch }) {
  return (
    <section className="locations section" id="locations" data-screen-label="locations">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">Locations</span>
            <h2>Eight community centres. <em>One</em> standard of care.</h2>
          </div>
          <p>
            Choose a centre near home or work, then book a tour. Each branch has its own team,
            uniform and rhythm — but every Raffles ECC delivers the same EYFS curriculum, ratios
            and safeguarding standards.
          </p>
        </div>

        <div className="location-grid">
          {branches.map(b => (
            <div
              key={b.id}
              className={"location-card" + (b.id === branch.id ? " active" : "")}
              onClick={() => setBranch(b)}
            >
              <div className="location-thumb">
                <img src={b.hero} alt={b.name + " — Raffles ECC"} loading="lazy" />
                {b.flag && <span className="flag">{b.flag}</span>}
              </div>
              <div className="location-info">
                <h4>{b.name}</h4>
                <span className="area">{b.area}</span>
                <div className="meta">
                  {b.tags.map((t, i) => <span className="tag" key={i}>{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Tour booking form ─────────
function TourForm({ branches, branch, setBranch, ageBands, contact, formRef }) {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [age, setAge] = useState(ageBands[1].id);
  const [day, setDay] = useState("");
  const [message, setMessage] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <section className="tour" id="tour" ref={formRef} data-screen-label="tour-booking">
      <div className="wrap tour-grid">
        <div className="tour-side">
          <span className="eyebrow" style={{ marginBottom: 14, display: "inline-flex" }}>Book a tour</span>
          <h2>Visit {branch.name}. <span style={{ color: "var(--plum)" }}>Bring your questions.</span></h2>
          <p>
            Tours run during the operating day so you can see the rooms in motion. Allow about
            45 minutes — and bring your child if you'd like to see how they settle.
          </p>
          <ul className="checklist">
            <li><span className="ic"><Icon name="check" size={12} /></span> Walk every room your child would use</li>
            <li><span className="ic"><Icon name="check" size={12} /></span> Meet the centre manager and key persons</li>
            <li><span className="ic"><Icon name="check" size={12} /></span> Leave with the current fee table and start date options</li>
            <li><span className="ic"><Icon name="check" size={12} /></span> Talk through the school pathway, if relevant</li>
          </ul>
          <div className="contact-line">
            <span style={{ color: "var(--plum)" }}><Icon name="phone" size={18} /></span>
            <div>
              <b>Prefer to call?</b><br />
              <a href={"tel:" + contact.adminPhoneRaw} style={{ color: "var(--ink-soft)" }}>{contact.adminPhone}</a>
              {" · "}
              <a href={contact.whatsapp} style={{ color: "var(--ink-soft)" }}>WhatsApp</a>
            </div>
          </div>
        </div>

        <div className="tour-card">
          {submitted ? (
            <div className="tour-success">
              <div className="ic"><Icon name="check" size={28} /></div>
              <h3>Thank you, {name.split(" ")[0] || "friend"} 👋</h3>
              <p>
                We've received your tour request for <b>{branch.name}</b>. A member of our
                admissions team will be in touch within one working day to confirm a time.
              </p>
              <div className="row" style={{ justifyContent: "center", gap: 10 }}>
                <a href={contact.whatsapp} className="btn btn-sm btn-primary">
                  <Icon name="wa" size={14} /> Message on WhatsApp
                </a>
                <button className="btn btn-sm btn-light" onClick={() => { setSubmitted(false); setName(""); setEmail(""); setPhone(""); setMessage(""); }}>
                  Book another
                </button>
              </div>
            </div>
          ) : (
            <form onSubmit={submit}>
              <div className="form-row">
                <div className="form-field">
                  <label>Parent name</label>
                  <input required value={name} onChange={e => setName(e.target.value)} placeholder="Jane Smith" />
                </div>
                <div className="form-field">
                  <label>Phone</label>
                  <input required value={phone} onChange={e => setPhone(e.target.value)} placeholder="+971 …" />
                </div>
              </div>
              <div className="form-row single">
                <div className="form-field">
                  <label>Email</label>
                  <input required type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="jane@example.com" />
                </div>
              </div>
              <div className="form-row">
                <div className="form-field">
                  <label>Preferred branch</label>
                  <select value={branch.id} onChange={e => setBranch(branches.find(b => b.id === e.target.value))}>
                    {branches.map(b => <option key={b.id} value={b.id}>{b.name} · {b.area}</option>)}
                  </select>
                </div>
                <div className="form-field">
                  <label>Earliest start</label>
                  <input type="month" value={day} onChange={e => setDay(e.target.value)} />
                </div>
              </div>
              <div className="form-field" style={{ marginBottom: 14 }}>
                <label>Child age band</label>
                <div className="chip-row">
                  {ageBands.map(b => (
                    <button
                      type="button"
                      key={b.id}
                      className={"chip" + (b.id === age ? " selected" : "")}
                      onClick={() => setAge(b.id)}
                    >
                      {b.label} · {b.range}
                    </button>
                  ))}
                </div>
              </div>
              <div className="form-row single">
                <div className="form-field">
                  <label>Anything we should know? (optional)</label>
                  <textarea value={message} onChange={e => setMessage(e.target.value)} placeholder="e.g. dietary needs, sibling at one of our schools, preferred tour day…" />
                </div>
              </div>
              <button type="submit" className="btn btn-primary btn-block" style={{ marginTop: 6 }}>
                <Icon name="calendar" size={16} /> Request my tour at {branch.name}
              </button>
              <p style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 12, textAlign: "center" }}>
                <Icon name="lock" size={11} /> Your details are handled per our safeguarding &amp; privacy policies.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ───────── FAQ ─────────
function FAQ({ faqs }) {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq section" data-screen-label="faq">
      <div className="wrap faq-grid">
        <div>
          <span className="eyebrow">Common questions</span>
          <h2 style={{ fontSize: "clamp(28px, 3.2vw, 40px)", marginTop: 14 }}>Before you book.</h2>
          <p style={{ color: "var(--ink-soft)", marginTop: 16 }}>
            The answers parents reach for most often. Anything else? Ask on your tour, or
            WhatsApp us — we read every message.
          </p>
        </div>
        <div className="faq-list">
          {faqs.map((f, i) => (
            <div className={"faq-item" + (i === open ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                <span>{f.q}</span>
                <span className="toggle"><Icon name="plus" size={14} /></span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── Footer ─────────
function Footer({ contact, branches }) {
  return (
    <footer className="foot" data-screen-label="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-lockup">
            <div className="row" style={{ gap: 12 }}>
              <Logo size={36} />
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 18, color: "var(--paper)" }}>
                RAFFLES <span style={{ display: "block", fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.16em", color: "rgba(255,255,255,.5)", textTransform: "uppercase", marginTop: 2 }}>Early Childhood Centre</span>
              </div>
            </div>
            <p>
              A group of premium Dubai nurseries following the UK Early Years Foundation Stage,
              for children from 45 days through to school.
            </p>
            <div className="innov">
              Part of Innoventures Education · 5 schools · 8 ECCs · since 2004
            </div>
          </div>

          <div>
            <h5>Centres</h5>
            <ul>
              {branches.slice(0, 6).map(b => (
                <li key={b.id}><a href="#locations">{b.name}</a></li>
              ))}
              <li><a href="#locations" style={{ color: "var(--gold)" }}>All locations →</a></li>
            </ul>
          </div>

          <div>
            <h5>The centre</h5>
            <ul>
              <li><a href="#curriculum">Curriculum (EYFS)</a></li>
              <li><a href="#programmes">Programmes &amp; ages</a></li>
              <li><a href="#facilities">Facilities</a></li>
              <li><a href="#pathway">School pathway</a></li>
              <li><a href="#admissions">Admissions &amp; fees</a></li>
            </ul>
          </div>

          <div>
            <h5>Reach us</h5>
            <ul>
              <li><a href={"tel:" + contact.adminPhoneRaw}>{contact.adminPhone}</a></li>
              <li><a href={"tel:" + contact.adminMobileRaw}>{contact.adminMobile}</a></li>
              <li><a href={"mailto:" + contact.email}>{contact.email}</a></li>
              <li><a href={contact.whatsapp}>WhatsApp tour booking</a></li>
            </ul>
            <h5 style={{ marginTop: 24 }}>Head office</h5>
            <p style={{ color: "rgba(255,255,255,.65)", fontSize: 13, lineHeight: 1.55 }}>{contact.address}</p>
          </div>
        </div>

        <div className="foot-bottom">
          <div>© 2026 Raffles Early Childhood Centre · KHDA-registered · Part of Innoventures Education</div>
          <div className="links">
            <a href="#">Safeguarding</a>
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#"><Icon name="globe" size={12} /> EN · العربية · РУС · 中文</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ───────── Floating WA + mobile sticky ─────────
function WhatsAppFab({ href }) {
  return (
    <a className="wa-fab" href={href} aria-label="WhatsApp">
      <svg viewBox="0 0 32 32" fill="currentColor">
        <path d="M16 3a13 13 0 0 0-11 19.7L3 29l6.5-1.7A13 13 0 1 0 16 3Zm7.7 18.5c-.3.8-1.7 1.6-2.4 1.7-.6.1-1.4.1-2.3-.1-2.5-.6-5.6-3-7.3-6.3-.6-1.1-1-2.3-1-3.4 0-1.2.6-2.3 1-2.8.4-.5.9-.5 1.2-.5h.8c.3 0 .6 0 .9.7l1.1 2.7c.1.3.1.6 0 .8l-.7 1c-.2.2-.3.3-.1.6.7 1.5 2.2 3 3.6 3.7.3.1.4.1.6-.1l1.1-1.3c.2-.3.5-.2.7-.1l2.5 1.2c.3.2.5.3.6.4 0 .1 0 .9-.3 1.7Z"/>
      </svg>
    </a>
  );
}

function MobileCTA({ onTourClick, contact }) {
  return (
    <div className="m-cta">
      <a className="btn btn-sm btn-light" href={"tel:" + contact.adminPhoneRaw}>
        <Icon name="phone" size={14} /> Call
      </a>
      <button className="btn btn-sm btn-primary" onClick={onTourClick}>
        <Icon name="calendar" size={14} /> Book tour
      </button>
    </div>
  );
}

// expose to App
Object.assign(window, {
  RNav: Nav, RHero: Hero, RTrust: TrustStrip,
  RCurriculum: Curriculum, RProgrammes: Programmes,
  RPathway: Pathway, RMission: Mission, RFacilities: Facilities,
  RLocations: Locations, RTourForm: TourForm, RFAQ: FAQ,
  RFooter: Footer, RWAFab: WhatsAppFab, RMobileCTA: MobileCTA,
  RIcon: Icon,
});
