/* sections.jsx — the standard Mini Scholars content that flows in
   below the cinematic intro. Uses the brand site.css classes/tokens. */
const { useState: useStateSec } = React;

/* ---------- Decorative organic blobs ---------- */
function Blobs({ tint = "default" }) {
  return (
    <svg className="blob-layer" viewBox="0 0 1280 640" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
      <path d="M-40 120 Q 200 40 360 160 T 760 140" fill="none" stroke="#DA9DA7" strokeWidth="2" opacity="0.5" strokeLinecap="round"/>
      <path d="M520 540 Q 760 470 980 560 T 1340 520" fill="none" stroke="#ABD0C3" strokeWidth="2" opacity="0.5" strokeLinecap="round"/>
      <ellipse cx="120" cy="470" rx="190" ry="150" fill="#DA9DA7" opacity="0.16"/>
      <ellipse cx="1180" cy="150" rx="210" ry="160" fill="#ABD0C3" opacity="0.18"/>
    </svg>
  );
}

/* ---------- Services ---------- */
const SERVICES = [
  { slot: "svc-edu", title: "High-Quality Early Education",
    body: <>Curriculum aligned with <b>Missouri DESE standards</b>, enhanced by <b>AI-powered learning tools</b> and immersive sensory learning for infants, toddlers, preschoolers and pre-K students.</>,
    ph: "Wooden blocks photo" },
  { slot: "svc-meal", title: "Organic Meal Program",
    body: <>Locally sourced, <b>USDA-approved organic meals</b> designed by local <b>nutritionists</b>, ensuring children receive wholesome, nutrient-rich foods.</>,
    ph: "Fresh produce photo" },
  { slot: "svc-app", title: "Parent Portal App",
    body: <>Real-time updates on your child's <b>daily activities, meals and milestones</b> through our <b>secure parent portal and mobile app</b>.</>,
    ph: "Parent on phone photo" },
];
function ServicesGrid() {
  return (
    <section className="services reveal" id="sec-services">
      <div className="section-intro-eyebrow">What we offer</div>
      <h2 className="section-h2" style={{ textAlign: "center" }}>Services we offer</h2>
      <div className="services-grid">
        {SERVICES.map((s) => (
          <article className="service-card" key={s.slot}>
            <image-slot id={s.slot} shape="rounded" radius="18" placeholder={s.ph}></image-slot>
            <h3 className="service-title">{s.title}</h3>
            <p className="service-body">{s.body}</p>
            <button className="btn-pill">Learn More</button>
          </article>
        ))}
      </div>
    </section>
  );
}

/* ---------- Waitlist + Policies ---------- */
const POLICIES = [
  "Flexible hours",
  "State subsidy program accepted",
  "Weekly & Bi-weekly rates available",
  "Breakfast, lunch and one snack provided",
  "Specialty trained teachers",
  "Age appropriate curriculum",
  "Before and after school program",
];
function WaitlistPolicies({ onJoin }) {
  return (
    <section className="chapter wl-chapter">
      <div className="chapter-head reveal">
        <p className="chapter-eyebrow">Are you a parent?</p>
        <h2 className="chapter-title">Join the <span className="ital">waitlist</span></h2>
      </div>
      <div className="wl-grid reveal">
        <div className="wl-left">
          <p className="wl-copy">
            Give your child the best start in a <b>safe, tech-driven learning
            environment</b>. Tell us a little about your family and we'll hold
            your place at Mini Scholars.
          </p>
          <button className="btn-solid" onClick={onJoin}>Join the Waitlist</button>
          <p className="wl-note">
            It is the daycare's responsibility to report ANY signs (or suspicious
            grounds) of child abuse or neglect of a child, at any given time.
          </p>
        </div>
        <div className="wl-right">
          <p className="wl-label">Our policies</p>
          <ul className="wl-policies">
            {POLICIES.map((p, i) => (
              <li key={p}><span className="wl-idx">{String(i + 1).padStart(2, "0")}</span>{p}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact ---------- */
function Field({ label, req, wide, type = "text", area, name }) {
  return (
    <div className={"field" + (wide ? " wide" : "")}>
      <label>{label}{req && <span className="req"> (required)</span>}</label>
      {area ? <textarea name={name} rows="4"></textarea> : <input name={name} type={type} />}
    </div>
  );
}
function ContactForm({ panel = false, id }) {
  const [sent, setSent] = useStateSec(false);
  return (
    <section className={"contact" + (panel ? " panel" : " reveal")} id={id}>
      <div className="contact-intro">
        {!panel && <div className="section-intro-eyebrow" style={{ textAlign: "left" }}>Say hello</div>}
        <h1 className="section-h1">{panel ? "Contact us" : "Contact Us"}</h1>
        <p className="contact-copy">
          Interested in collaborating with us? Please provide your details, and we
          will connect with you promptly. We look forward to engaging with both
          prospective employees and parents alike!
        </p>
        {!panel && (
          <div className="contact-meta">
            <a href="mailto:info@minischolarskc.com">info@minischolarskc.com</a>
            <span>(816) 400-7436</span>
          </div>
        )}
      </div>
      <form className="contact-form" onSubmit={(e) => {
        e.preventDefault();
        const f = e.currentTarget;
        const g = (n) => { const el = f.elements[n]; return el ? el.value.trim() : ""; };
        const payload = { first_name: g("first_name"), last_name: g("last_name"), email: g("email"), message: g("message") };
        if (window.MSForms) window.MSForms.submit("contact_submissions", payload).catch(() => {});
        setSent(true);
      }}>
        <div className="field-group">
          <span className="group-label">Name</span>
          <div className="field-row">
            <Field label="First Name" req name="first_name" />
            <Field label="Last Name" req name="last_name" />
          </div>
        </div>
        <Field label="Email" req wide type="email" name="email" />
        {panel && (
          <label className="checkbox">
            <input type="checkbox" name="subscribe" /> <span>Sign up for news and updates</span>
          </label>
        )}
        <Field label="Message" req wide area name="message" />
        <button className={"btn-pill" + (panel ? " on-panel" : "")} type="submit">
          {sent ? "Sent ✓" : (panel ? "Submit" : "Send")}
        </button>
      </form>
    </section>
  );
}

/* ---------- Footer ---------- */
function SocialDot({ label }) {
  return (
    <a className="social-dot" title={label} aria-label={label}>
      {label === "fb" && <svg viewBox="0 0 24 24" width="13" height="13" fill="currentColor"><path d="M13 22v-8h2.7l.4-3H13V9.1c0-.9.3-1.5 1.6-1.5H16V5c-.3 0-1.2-.1-2.2-.1-2.2 0-3.8 1.4-3.8 3.9V11H7.5v3H10v8h3z"/></svg>}
      {label === "ig" && <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>}
      {label === "mail" && <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M4 7l8 6 8-6"/></svg>}
    </a>
  );
}
function SiteFooter() {
  const addr = "9000 Old Santa Fe Rd, Kansas City, MO 64138";
  const mapQ = encodeURIComponent(addr);
  // labeled-marker embed: forces a precise pin on the exact geocoded address
  const mapEmbed = "https://maps.google.com/maps?q=" + encodeURIComponent(addr + " (Mini Scholars Learning Center)") + "&t=&z=16&ie=UTF8&iwloc=B&output=embed";
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="assets/logo-lockup-transparent.png" alt="Mini Scholars Learning Center" />
          <div className="socials">
            <SocialDot label="fb" /><SocialDot label="ig" /><SocialDot label="mail" />
          </div>
        </div>
        <div className="footer-col">
          <h4>Location</h4>
          <p>9000 Old Santa Fe Rd,<br/>Kansas City, MO 64138</p>
        </div>
        <div className="footer-col">
          <h4>Hours</h4>
          <p>Monday – Friday<br/>7:00 AM – 5:30 PM</p>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <p><a href="mailto:info@minischolarskc.com">info@minischolarskc.com</a><br/>(816) 400-7436</p>
        </div>
      </div>
      <a className="footer-map" href={"https://www.google.com/maps/search/?api=1&query=" + mapQ} target="_blank" rel="noopener" aria-label="View Mini Scholars on Google Maps">
        <iframe
          title="Map to Mini Scholars Learning Center"
          src={mapEmbed}
          loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
        <span className="footer-map-pin">
          <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 21s-7-6.3-7-11a7 7 0 0 1 14 0c0 4.7-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg>
          Open in Google Maps
        </span>
      </a>
    </footer>
  );
}

Object.assign(window, { Blobs, ServicesGrid, WaitlistPolicies, ContactForm, SiteFooter });