/* global React */
const { useState, useEffect, useRef } = React;

/* Real Agape Learning Academy photos. */
const IMAGE_MAP = [
// Home hero / warm joyful primaries
["full-bleed", "assets/photos/nature-discovery.jpg"],
["children painting at round table", "assets/photos/nature-discovery.jpg"],
["child at easel", "assets/photos/girls-watercolor.webp"],
["toddler hands building", "assets/photos/boy-green-marigolds.webp"],
["children painting", "assets/photos/group-gardening.webp"],
// Programs
["infants", "assets/photos/infants-classroom-baked.webp"],
["infant care", "assets/photos/infants-classroom-baked.webp"],
["toddlers", "assets/photos/swing-laughing.webp"],
["toddler program", "assets/photos/swing-laughing.webp"],
["preschool & pre-k", "assets/photos/girls-watercolor.webp"],
["preschool", "assets/photos/two-kids-planting.webp"],
["pre-k readiness", "assets/photos/boy-green-marigolds.webp"],
// About
["founder", "assets/photos/group-gardening.webp"],
["director", "assets/photos/group-gardening.webp"],
["teacher reading", "assets/photos/art-god-loves-me.webp"],
["why we care", "assets/photos/swing-laughing.webp"],
// Safety / classroom
["clean, organized classroom", "assets/photos/art-god-loves-me.webp"],
["classroom", "assets/photos/art-god-loves-me.webp"],
["professional development", "assets/photos/parachute-play.webp"],
["secure entry", "assets/photos/playground-running.webp"],
["secure vestibule", "assets/photos/playground-running.webp"],
["parent signing in", "assets/photos/playground-running.webp"],
// Activities
["chicken", "assets/photos/chicken-visit-2.jpg"],
["farm", "assets/photos/farm-trip.jpg"],
["garden", "assets/photos/group-gardening.webp"],
["pizza", "assets/photos/group-pizza-day.jpg"],
["cooking", "assets/photos/cooking-pigs-in-blankets.jpg"],
["nature", "assets/photos/nature-discovery.jpg"],
["playground", "assets/photos/playground-running.webp"],
["outside", "assets/photos/playground-running.webp"]];


function resolveImage(label) {
  if (!label) return null;
  const low = label.toLowerCase();
  for (const [key, url] of IMAGE_MAP) {
    if (low.includes(key)) return url;
  }
  return null;
}

/* Baked photo overrides — slot id -> file path. Edited by Photo Studio "Save to project". */
const BAKED_PHOTOS = /*BAKED-PHOTOS-BEGIN*/{
  "infants-classroom": "assets/photos/infants-classroom-baked.webp",
  "toddlers-classroom": "assets/photos/swing-laughing.webp",
  "hero-image-child-at-easel-teacher-guiding-warm": "assets/photos/girls-watercolor.webp",
  "full-bleed-children-painting-at-round-table-natural": "assets/photos/full-bleed-painting-baked.webp",
  "infant-care-classroom-children-engaged-in-attachment-sensory": "assets/photos/infant-care-baked.webp",
  "portrait-founder-director-with-children-in-background-natural": "assets/photos/art-god-loves-me.webp",
  "teacher-reading-to-small-group-of-preschoolers-on": "assets/photos/teacher-reading-baked.webp",
  "teachers-in-professional-development-session": "assets/photos/teachers-pd-baked.webp",
  "clean-organized-classroom-with-labeled-cubbies-and-toys": "assets/photos/classroom-cubbies-baked.webp"
} /*BAKED-PHOTOS-END*/;
window.__BAKED_PHOTOS__ = BAKED_PHOTOS;

/* Library of all known photos in the project — used by the photo studio */
const PHOTO_LIBRARY = [
{ src: "assets/photos/girls-watercolor.webp", label: "Girls watercolor painting" },
{ src: "assets/photos/group-gardening.webp", label: "Group gardening with teacher" },
{ src: "assets/photos/art-god-loves-me.webp", label: "Art class — flower collage" },
{ src: "assets/photos/parachute-play.webp", label: "Parachute play outdoors" },
{ src: "assets/photos/two-kids-planting.webp", label: "Two kids planting at sunset" },
{ src: "assets/photos/boy-green-marigolds.webp", label: "Boy planting marigolds" },
{ src: "assets/photos/playground-running.webp", label: "Kids running on playground" },
{ src: "assets/photos/swing-laughing.webp", label: "Girl laughing on swing" },
{ src: "assets/photos/group-pizza-day.jpg", label: "Group pizza day" },
{ src: "assets/photos/cooking-pigs-in-blankets.jpg", label: "Cooking — pigs in blankets" },
{ src: "assets/photos/chicken-visit-1.jpg", label: "Chicken visit (1)" },
{ src: "assets/photos/chicken-visit-2.jpg", label: "Chicken visit (2)" },
{ src: "assets/photos/farm-trip.jpg", label: "Farm field trip" },
{ src: "assets/photos/nature-discovery.jpg", label: "Nature discovery" },
{ src: "assets/photos/garden-marigold.jpg", label: "Garden — marigold" },
{ src: "assets/photos/garden-mamas-boy.jpg", label: "Garden — mama's boy" },
{ src: "assets/photos/garden-two-boys.jpg", label: "Garden — two boys" },
{ src: "assets/photos/garden-boy-green.jpg", label: "Garden — boy in green" },
{ src: "assets/photos/garden-tt-jersey.jpg", label: "Garden — TT jersey" }];

window.__PHOTO_LIBRARY__ = PHOTO_LIBRARY;

/* slot id from label */
function slotFromLabel(label) {
  if (!label) return "unlabeled";
  return label.
  toLowerCase().
  replace(/[^a-z0-9]+/g, "-").
  replace(/^-|-$/g, "").
  split("-").
  slice(0, 8).
  join("-");
}

/* Overrides store — localStorage-backed map of slot -> src */
const PHOTO_OVERRIDES_KEY = "agape_photo_overrides_v1";
const photoStore = (() => {
  let cache = {};
  try {cache = JSON.parse(localStorage.getItem(PHOTO_OVERRIDES_KEY) || "{}");} catch (e) {cache = {};}
  const subs = new Set();
  return {
    get: (slot) => cache[slot],
    getAll: () => ({ ...cache }),
    set: (slot, src) => {
      if (src == null) delete cache[slot];else
      cache[slot] = src;
      try {localStorage.setItem(PHOTO_OVERRIDES_KEY, JSON.stringify(cache));} catch (e) {}
      subs.forEach((fn) => fn());
    },
    reset: () => {
      cache = {};
      try {localStorage.removeItem(PHOTO_OVERRIDES_KEY);} catch (e) {}
      subs.forEach((fn) => fn());
    },
    subscribe: (fn) => {subs.add(fn);return () => subs.delete(fn);}
  };
})();
window.__PHOTO_STORE__ = photoStore;

/* Hook to re-render when overrides change */
function usePhotoOverride(slot) {
  const [, force] = useState(0);
  useEffect(() => photoStore.subscribe(() => force((n) => n + 1)), []);
  return photoStore.get(slot);
}

/* Placeholder — renders an image (override > src prop > resolved label > stripes).
   In photo-studio mode, becomes clickable to swap. */
function Placeholder({ label, tone = "green", className = "", style = {}, src, slot: slotProp }) {
  const slot = slotProp || slotFromLabel(label);
  const override = usePhotoOverride(slot);
  const [studioOn, setStudioOn] = useState(!!window.__PHOTO_STUDIO_ON__);
  useEffect(() => {
    const handler = (e) => setStudioOn(!!e.detail);
    window.addEventListener("photo-studio-toggle", handler);
    return () => window.removeEventListener("photo-studio-toggle", handler);
  }, []);

  const url = override || BAKED_PHOTOS[slot] || src || resolveImage(label);
  const onClick = (e) => {
    if (!studioOn) return;
    e.preventDefault();
    e.stopPropagation();
    window.dispatchEvent(new CustomEvent("photo-studio-pick", { detail: { slot, label, currentSrc: url } }));
  };
  const studioCls = studioOn ? "ph-studio-active" : "";

  if (url) {
    return (
      <div
        className={`ph ph-image ${className} ${studioCls}`}
        data-tone={tone}
        data-photo-slot={slot}
        style={{
          ...style,
          backgroundImage: `url(${url})`,
          backgroundSize: "cover",
          backgroundPosition: "center", flexDirection: "row"
        }}
        role="img"
        aria-label={label}
        onClick={onClick}>

        {studioOn && <div className="ph-studio-tag">📷 Swap photo</div>}
      </div>);

  }
  return (
    <div
      className={`ph ${className} ${studioCls}`}
      data-tone={tone}
      data-photo-slot={slot}
      style={style}
      onClick={onClick}>

      <div className="ph-label">{label}</div>
      {studioOn && <div className="ph-studio-tag">📷 Add photo</div>}
    </div>);

}

/* Reveal-on-scroll */
function Reveal({ children, delay = 0, className = "" }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setShown(true);
            obs.unobserve(el);
          }
        });
      },
      { threshold: 0.12 }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div
      ref={ref}
      className={`reveal ${shown ? "in" : ""} ${className}`}
      style={{ transitionDelay: `${delay}ms` }}>

      {children}
    </div>);

}

/* Section head (eyebrow + h2 + description) */
function SectionHead({ eyebrow, title, description, align = "split" }) {
  if (align === "center") {
    return (
      <div className="text-center mx-auto max-prose" style={{ marginBottom: 48 }}>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 14 }}>{eyebrow}</div>}
        <h2 className="display" style={{ margin: "0 0 16px" }}>{title}</h2>
        {description && <p className="lede mx-auto">{description}</p>}
      </div>);

  }
  return (
    <div className="section-head">
      <div>
        {eyebrow && <div className="eyebrow">{eyebrow}</div>}
        <h2 className="display">{title}</h2>
      </div>
      {description && <p>{description}</p>}
    </div>);

}

/* CTA Band — used on most pages near the bottom */
function CtaBand({ onTour }) {
  const CALENDLY_URL = "https://calendly.com/agapelearningacademy13";
  return (
    <section className="section">
      <div className="container">
        <div className="cta-band">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Visit us</div>
            <h2 className="display">The best way to know us is to meet us.</h2>
            <p className="mt-sm">Tours take about 30 minutes. You'll see the classrooms, meet teachers, and get every question answered.</p>
          </div>
          <div className="cta-actions">
            <a className="btn btn-primary" href={CALENDLY_URL} target="_blank" rel="noopener">Schedule a tour</a>
            <button className="btn btn-ghost" onClick={onTour}>Request a call back</button>
            <a className="btn btn-ghost" href="tel:+18067017946">Call (806) 701-7946</a>
          </div>
        </div>
      </div>
    </section>);

}

/* Testimonial card */
function Testimonial({ quote, name, role, initials, featured }) {
  const paras = String(quote).split(/\n\s*\n/);
  return (
    <div className={featured ? "testimonial testimonial-lg" : "testimonial"}>
      <div className="testimonial-quote">
        {paras.map((p, i) => <p key={i} style={{ margin: i ? "12px 0 0" : 0 }}>{p}</p>)}
      </div>
      <div className="testimonial-author">
        <div className="testimonial-avatar">{initials}</div>
        <div>
          <div className="testimonial-name">{name}</div>
          <div className="testimonial-role">{role}</div>
        </div>
      </div>
    </div>);

}

/* FAQ Item */
function FaqItem({ q, a, open, onToggle }) {
  return (
    <div className={`faq-item ${open ? "open" : ""}`}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        <span>{q}</span>
        <span className="plus">+</span>
      </button>
      <div className="faq-a">
        <p style={{ margin: 0, paddingRight: 40 }}>{a}</p>
      </div>
    </div>);

}

/* Expose */
Object.assign(window, { Placeholder, Reveal, SectionHead, CtaBand, Testimonial, FaqItem });