/* =============================================================
   KICK IT KIDS SOCCER — APP
   ============================================================= */
const { useState, useEffect, useRef } = React;
const D = window.KICKIT;

/* ---------- Tiny inline icons (stroke-based) ---------- */
const Icon = ({ d, fill }) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
       strokeLinecap="round" strokeLinejoin="round">
    {Array.isArray(d) ? d.map((p, i) => <path key={i} d={p} />) : <path d={d} />}
  </svg>
);
const IconCal   = () => <Icon d={["M8 2v4", "M16 2v4", "M3 10h18", "M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"]} />;
const IconClock = () => <Icon d={["M12 7v5l3 2"]} />;
const IconUsers = () => <Icon d={["M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8", "M22 21v-2a4 4 0 0 0-3-3.87", "M16 3.13a4 4 0 0 1 0 7.75"]} />;
const IconTag   = () => <Icon d={["M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z", "M7 7h.01"]} />;
const IconSearch= () => <Icon d={["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "m21 21-4.3-4.3"]} />;
const IconCheck = () => <Icon d="M20 6 9 17l-5-5" />;
const IconPlus  = () => <Icon d={["M12 5v14", "M5 12h14"]} />;
const IconMail  = () => <Icon d={["M22 6 12 13 2 6", "M2 4h20v16H2z"]} />;
const IconPhone = () => <Icon d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />;

const IconBall = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="10"/>
    <path d="M12 7.5l2.35 1.72-.9 2.78h-2.9l-.9-2.78z"/>
    <line x1="12" y1="7.5" x2="12" y2="2"/>
    <line x1="14.35" y1="9.22" x2="20.5" y2="7.1"/>
    <line x1="13.45" y1="12" x2="18.1" y2="16.1"/>
    <line x1="10.55" y1="12" x2="5.9" y2="16.1"/>
    <line x1="9.65" y1="9.22" x2="3.5" y2="7.1"/>
  </svg>
);
const IconDuo = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="9" cy="7" r="3"/>
    <path d="M3 21v-2a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v2"/>
    <circle cx="17.5" cy="7" r="2.5"/>
    <path d="M21 21v-2a4 4 0 0 0-3-3.87"/>
  </svg>
);
const IconTrophy = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/>
    <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/>
    <path d="M4 22h16"/>
    <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/>
    <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/>
    <path d="M18 2H6v7a6 6 0 0 0 12 0V2z"/>
  </svg>
);

/* Photo placeholder styled on the green field */
const PhotoSlot = ({ code, label }) => (
  <div className="photo-slot">
    <div className="ico"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="9" cy="11" r="2"/><path d="m21 17-5-5L5 19"/></svg></div>
    <div className="label">{label}</div>
    <code>{code}</code>
  </div>
);

/* Scroll reveal hook — sets inline styles (persist across React re-renders;
   a className toggle would be reset by React and make content vanish). */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.style.opacity = "1";
          e.target.style.transform = "none";
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---------- Header ---------- */
const NAV = [
  { label: "Programs", href: "#offering" },
  { label: "Schools", href: "#schools" },
  { label: "Coach Evan", href: "#coach" },
  // { label: "FAQ", href: "#faq" },
];

function Header() {
  const [open, setOpen] = useState(false);
  return (
    <header className="header">
      <div className="wrap header-inner">
        <a className="logo" href="#top" aria-label="Kick It Kids Soccer home">
          <img className="logo-img" src={D.business.logo} alt="Kick It Kids Soccer" />
        </a>
        <nav className="nav">
          {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
        </nav>
        <div className="header-cta">
          <a className="header-phone" href={"tel:" + D.business.phone.replace(/[^0-9+]/g, "")}>{D.business.phone}</a>
          {/* Parent Login hidden until portal is ready */}
          <a href="register.html" className="btn btn-primary">Register</a>
        </div>
        <img className="mobile-wordmark" src="assets/kickit-kids-soccer-logo.png" alt="Kick It Kids Soccer" />
        <button className="burger" aria-label="Menu" onClick={() => setOpen(!open)}>
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={"mobile-nav" + (open ? " open" : "")}>
        <div className="wrap">
            {NAV.map((n) => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
          {/* Parent Login hidden until portal is ready */}
          <a href="register.html" className="btn btn-primary btn-block" onClick={() => setOpen(false)}>Register</a>
        </div>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="reveal in">
          <h1>Soccer Programs <span className="hl">for Kids</span></h1>
          <p className="hero-sub">
            Kick it offers non-competitive, soccer for kids! We prioritize individual growth, and community building through soccer. Whether it's with our partnered schools, private groups or parties, Kick It has a program for you!
          </p>
          <div className="hero-actions">
            <a href="#schools" className="btn btn-primary btn-lg">Register</a>
            <a href="#offering" className="btn btn-ghost btn-lg">Explore Programs</a>
          </div>
          <p className="hero-note">
            Now enrolling — sessions held on-site, right after the bell.
          </p>
        </div>

        <div className="reveal in">
          <div className="hero-photo">
            <div className="field-lines">
              <div className="stripe"></div>
              <div className="midline"></div>
              <div className="circle"></div>
              <div className="spot"></div>
              <div className="box"></div>
            </div>
            <div className="enroll-badge"><span className="pulse"></span> Currently Enrolling</div>
            <img src="assets/kickit-logo-T.png" alt="Kick It Kids Soccer"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", padding: "24px" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Mission ---------- */
function Mission() {
  return (
    <section className="mission">
      <div className="wrap mission-grid">
        <div className="reveal">
          <h2>
            Growth, Community & a real <span className="hl">love for the game</span>
          </h2>
          <p className="mission-body">
            Through kindness, structure &amp; excitement, I strive to provide a safe place for every child to grow on and off the field. To build a community, leading to a love for the great game of soccer!
          </p>
          <p className="mission-body" style={{ marginTop: 16 }}>
            I also pledge that a portion of all enrollments will be donated to soccer based charities across the globe!
          </p>
        </div>
        <div className="reveal">
          <div className="mission-photo">
            <div className="ball-motif"></div>
            <img src="assets/kickit-mascots.png" alt="Kick It with Coach Evan mascots"
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", borderRadius: "inherit" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Program Types (offering) ---------- */
function ProgramTypes() {
  const fieldRef = useRef(null);

  useEffect(() => {
    const svg = fieldRef.current;
    if (!svg) return;
    const section = svg.parentElement;

    // Parallax
    const onScroll = () => {
      const rect = section.getBoundingClientRect();
      svg.style.transform = `translate(-50%, calc(-50% + ${rect.top * 0.12}px))`;
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    // Draw-in animation: initialise all paths as invisible
    const draws = Array.from(svg.querySelectorAll('[data-draw]'));
    draws.forEach(el => {
      const len = el.getTotalLength ? el.getTotalLength() : 100;
      el.style.strokeDasharray = len;
      el.style.strokeDashoffset = len;
      el.style.transition = 'none';
    });

    // Fire once when section enters viewport
    const io = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      io.disconnect();
      draws.forEach((el, i) => {
        setTimeout(() => {
          el.style.transition = 'stroke-dashoffset 680ms cubic-bezier(.4,0,.2,1)';
          el.style.strokeDashoffset = '0';
        }, i * 100);
      });
    }, { threshold: 0.2 });
    io.observe(section);

    return () => {
      window.removeEventListener('scroll', onScroll);
      io.disconnect();
    };
  }, []);

  return (
    <section className="section prog-section" id="offering">
      <svg ref={fieldRef} className="prog-field-svg" viewBox="0 0 105 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
        <rect data-draw="" x="2.5" y="2.5" width="100" height="65" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <line data-draw="" x1="52.5" y1="2.5" x2="52.5" y2="67.5" stroke="currentColor" strokeWidth="0.1"/>
        <circle data-draw="" cx="52.5" cy="35" r="9.15" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <rect data-draw="" x="2.5" y="21.3" width="16.5" height="27.4" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <rect data-draw="" x="86" y="21.3" width="16.5" height="27.4" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <rect data-draw="" x="2.5" y="29" width="5.5" height="12" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <rect data-draw="" x="97" y="29" width="5.5" height="12" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <path data-draw="" d="M2.5 8 A5.5 5.5 0 0 1 8 2.5" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <path data-draw="" d="M97 2.5 A5.5 5.5 0 0 1 102.5 8" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <path data-draw="" d="M2.5 62 A5.5 5.5 0 0 0 8 67.5" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <path data-draw="" d="M97 67.5 A5.5 5.5 0 0 0 102.5 62" fill="none" stroke="currentColor" strokeWidth="0.1"/>
        <circle cx="52.5" cy="35" r="0.22" fill="currentColor"/>
        <circle cx="15" cy="35" r="0.22" fill="currentColor"/>
        <circle cx="90" cy="35" r="0.22" fill="currentColor"/>
      </svg>
      <div className="wrap" style={{position:"relative",zIndex:1}}>
        <div className="prog-cards">
          <div className="prog-card reveal">
            <div className="prog-icon prog-icon-green"><img src="assets/schoolhouse-icon.png" alt="" /></div>
            <h3>Kids Soccer Program</h3>
            <p>On-site soccer sessions at your child's school or daycare — right after the bell, no extra driving.</p>
            <a href="#schools" className="prog-link-cta">Find your school →</a>
          </div>
          <div className="prog-card reveal">
            <div className="prog-icon prog-icon-navy"><img src="assets/cleat-icon.png" alt="" /></div>
            <h3>Private Groups</h3>
            <p>Want a soccer class on YOUR terms? Pick a location to your liking — your home, a park, you name it!</p>
            <p style={{marginTop:10}}>Need a location? Ask Coach Evan about his beach location for some soccer in the sand in Playa del Rey!</p>
            <p style={{marginTop:10}}><strong>$25 per class</strong> &nbsp;·&nbsp; Min. 4-week commitment &nbsp;·&nbsp; Min. 6 students</p>
            <a href="register.html#privateGroup" className="prog-link-cta">Request a Private Group →</a>
          </div>
          <div className="prog-card reveal">
            <div className="prog-icon prog-icon-warm"><img src="assets/party-icon.png" alt="" /></div>
            <h3>Parties</h3>
            <p>Celebrating a special event? Let's party with some soccer! Perfect for birthdays, graduations &amp; any other reason to celebrate!</p>
            <p style={{marginTop:10}}>A 60-minute session full of games and scrimmaging. Soccer goodie bags provided for all kids!</p>
            <ul style={{marginTop:10, paddingLeft:18, lineHeight:1.8}}>
              <li><strong>Under 10 kids:</strong> $250</li>
              <li><strong>Over 10 kids:</strong> $300</li>
              <li><strong>Over 20 kids:</strong> $350</li>
            </ul>
            <a href="register.html#party" className="prog-link-cta">Request a Party →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Programs / Age Groups ---------- */
function Programs() {
  return (
    <section className="section programs" id="age-groups">
      <div className="wrap">
        <div className="section-head center reveal">
          <h2>Soccer for every age</h2>
          <p>Sessions are grouped by age so every child is challenged at the right level — and has fun doing it.</p>
        </div>
        <div className="age-grid">
          {D.ageGroups.map((g, i) => (
            <div className="age-card reveal" key={i}>
              <h3>{g.ages}</h3>
              <span className="age-name">{g.name}</span>
              <p>{g.blurb}</p>
              {g.duration && <span className="age-duration">{g.duration}</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Coach Bio ---------- */
function Coach() {
  return (
    <section className="section bg-alt" id="coach">
      <div className="wrap coach-grid">
        <div className="reveal">
          <div className="coach-photo">
            <div className="stripe-bg"></div>
            <img src="coach-evan.png" alt="Coach Evan Canepa" className="coach-img" />
          </div>
        </div>
        <div className="reveal">
          <h2 className="section-head" style={{ marginBottom: 18 }}>Meet Coach {D.business.coachName}</h2>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink-soft)", marginBottom: 16 }}>
            Hello! If you're reading this, thank you for your time. My name is Evan Canepa, and
            I'm proud to announce Kick It Kids Soccer! For the last 5 years I have worked for
            school enrichment programs, and have had the honor of coaching soccer at countless
            schools, private groups, and parties. Thanks to all the wonderful staff and families
            I have met over the years, I have been able to take a leap of faith and start my own
            independent coaching journey!
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink-soft)", marginBottom: 16 }}>
            I started playing in youth groups like many of your kiddos are starting to do now.
            What I've come to realize, soccer was simply the vessel that led to lifelong
            friendships, role models, a healthy lifestyle, achievements, and of course… a love
            for the great game of soccer! That is what I strive to provide each and every
            student — a safe place to grow not just in size, but with communication, confidence
            building, structure, community, values, and to discover a passion for soccer that
            they can add to their lives! It is truly a privilege to do my part in helping guide
            each child in their own unique way.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.75, color: "var(--ink-soft)", marginBottom: 24 }}>
            Being lucky enough to start this venture, I believe it is only right that I pledge
            a portion of all enrollments to soccer-based charities across the globe. With your
            help, we can make a difference.
          </p>
          <ul className="trust-list">
            {D.trustPoints.map((t) => (
              <li key={t}><span className="check"><IconCheck /></span>{t}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------- How It Works ---------- */
function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="section-head center reveal">
          <h2>Registration in five simple steps</h2>
          <p>A clear, transparent process to get your child on the roster and onto the field.</p>
        </div>
        <div className="steps">
          {D.steps.map((s, i) => (
            <div className="step reveal" key={i}>
              <div className="step-num">{i + 1}</div>
              <div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- School Directory ---------- */
const STATUS = {
  Open:     { cls: "s-open",   mod: "", btn: (n) => `Register for ${shortName(n)}`, kind: "primary", disabled: false },
  Waitlist: { cls: "s-wait",   mod: "is-waitlist", btn: () => "Join Waitlist", kind: "dark", disabled: false },
  Closed:   { cls: "s-closed", mod: "is-closed", btn: () => "Enrollment Closed", kind: "disabled", disabled: true },
};
function shortName(n) {
  // "Oakridge Elementary" -> "Oakridge"; keep short proper names whole
  const w = n.split(" ");
  return w.length > 1 && w[0].length > 4 ? w[0] : n;
}

function SchoolCard({ s }) {
  const cfg = STATUS[s.status] || STATUS.Open;
  const rows = [
    { ico: <IconCal />,   k: "Schedule", v: s.schedule },
    { ico: <IconClock />, k: "Length",   v: s.duration },
    { ico: <IconUsers />, k: "Ages",     v: s.ages },
    { ico: <IconTag />,   k: "Price",    v: s.price },
  ];
  const btnClass = "btn btn-block " + (cfg.kind === "primary" ? "btn-primary" : cfg.kind === "dark" ? "btn-dark" : "btn-disabled");
  return (
    <div className={"school-card " + cfg.mod}>
      <div className="card-top">
        <h3 className="card-name">{s.name}</h3>
        <span className={"status-pill " + cfg.cls}><span className="d"></span>{s.status}</span>
      </div>
      <div className="card-rows">
        {rows.map((r) => (
          <div className="card-row" key={r.k}>
            <span className="ri">{r.ico}</span>
            <span className="rk">{r.k}</span>
            <span className="rv">{r.v}</span>
          </div>
        ))}
      </div>
      <div className="card-foot">
        {cfg.disabled
          ? <button className={btnClass} disabled>{cfg.btn(s.name)}</button>
          : <a className={btnClass} href={"register.html?school=" + encodeURIComponent(s.name)}>{cfg.btn(s.name)}</a>}
      </div>
    </div>
  );
}

function Directory() {
  const [q, setQ] = useState("");
  const list = D.schools.filter((s) => s.name.toLowerCase().includes(q.trim().toLowerCase()));
  return (
    <section className="section bg-alt" id="schools">
      <div className="wrap">
        <div className="dir-head reveal">
          <div>
            <h2>Find your school</h2>
            <p>Select your child's school to register for the current soccer session.</p>
          </div>
          <div className="search-box">
            <IconSearch />
            <input
              type="text"
              placeholder="Search your school…"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              aria-label="Search your school"
            />
          </div>
        </div>
        <div className="dir-count reveal"><b>{list.length}</b> {list.length === 1 ? "school" : "schools"}{q ? " match your search" : " enrolling now"}</div>
        <div className="school-grid">
          {list.length > 0
            ? list.map((s) => <SchoolCard key={s.name} s={s} />)
            : (
              <div className="dir-empty">
                <b>No school found</b>
                Don't see your child's school? <a href="#contact">Contact us for help</a> — we may be able to add it.
              </div>
            )}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section bg-alt" id="faq">
      <div className="wrap">
        <div className="section-head center reveal">
          <h2>Questions parents ask</h2>
        </div>
        <div className="faq-list">
          {D.faqs.map((f, i) => (
            <div className={"faq-item reveal" + (open === i ? " open" : "")} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                {f.q}
                <span className="toggle"><IconPlus /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? "420px" : "0px" }}>
                <div className="faq-a-inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Contact CTA ---------- */
function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="wrap reveal">
        <h2>Questions Before Registering?</h2>
        <p>
          If you don't see your child's school or have questions about the current soccer session,
          contact us before registering.
        </p>
        <div className="contact-actions">
          <a className="btn btn-dark btn-lg" href={"mailto:" + D.business.email}><IconMail /> Email Us</a>
          <a className="btn btn-white btn-lg" href={"tel:" + D.business.phone.replace(/[^0-9+]/g, "")}><IconPhone /> Call / Text</a>
        </div>
      </div>
    </section>
  );
}

/* ---------- For Schools (director pathway) ---------- */
function ForSchools() {
  return (
    <section className="for-schools" id="for-schools">
      <div className="wrap fs-grid">
        <div className="reveal">
          <span className="fs-kicker">For school directors</span>
          <h2>Don't see your school? Let's bring soccer to it.</h2>
          <p>
            We partner with elementary schools, preschools, and daycares to run on-site soccer
            sessions — no fields, equipment, or staff time required on your end. Tell us about your
            school and we'll walk you through getting a program started.
          </p>
          <div className="fs-actions">
            <a className="btn btn-primary btn-lg" href={"mailto:" + D.business.email + "?subject=Bring%20Kick%20It%20to%20our%20school"}>Request Our Program</a>
            <a className="btn btn-ghost-light btn-lg" href={"tel:" + D.business.phone.replace(/[^0-9+]/g, "")}>Call {D.business.phone}</a>
          </div>
        </div>
        <ul className="fs-points reveal">
          <li><span className="check"><IconCheck /></span> We bring all the equipment and coaches</li>
          <li><span className="check"><IconCheck /></span> Sessions run right after the school day</li>
          <li><span className="check"><IconCheck /></span> Background-checked, certified staff</li>
          <li><span className="check"><IconCheck /></span> Simple online registration for your families</li>
        </ul>
      </div>
    </section>
  );
}

/* ---------- Charity Banner ---------- */
function CharityBanner() {
  return (
    <div className="charity-banner-wrap">
      <div className="wrap">
        <img
          src="assets/charity-banner.png"
          alt="Kick It Kids Soccer gives back"
          className="charity-banner-img reveal"
        />
      </div>
    </div>
  );
}

/* ---------- Testimonials ---------- */
function Testimonials() {
  return (
    <section className="section testimonials" id="parents">
      <div className="wrap">
        <h2 className="testi-head reveal">What parents are saying</h2>
        <div className="testi-grid">
          {D.testimonials.map((t, i) => (
            <figure className="testi-card reveal" key={i}>
              <div className="quote-mark">&ldquo;</div>
              <blockquote>{t.quote}</blockquote>
              <figcaption>
                <span className="testi-avatar">{t.name.charAt(0)}</span>
                <span>
                  <strong>{t.name}</strong>
                  <em>{t.detail}</em>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
const SOCIALS = [
  { key: "instagram", label: "Instagram", path: ["M16 4H8a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4z", "M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z", "M17.5 6.5h.01"] },
  { key: "facebook", label: "Facebook", path: ["M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"] },
  { key: "youtube", label: "YouTube", path: ["M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z", "m9.75 15.02 5.75-3.27-5.75-3.27v6.54z"] },
];
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <a className="logo" href="#top" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
            <img src="assets/kickit-logo-T.png" alt="Kick It Kids Soccer" style={{ height: 54, width: "auto" }} />
            <span className="logo-text"><b>Kick It</b><span>Kids Soccer</span></span>
          </a>
          <nav className="footer-links">
            {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
          </nav>
          <div className="footer-contact">
            <a href={"mailto:" + D.business.email}>{D.business.email}</a>
            <a href={"tel:" + D.business.phone.replace(/\D/g, "")}>{D.business.phone}</a>
          </div>
        </div>
        <p className="footer-note">
          Registration information is kept private and used only for soccer program scheduling,
          attendance, and parent communication.
        </p>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Kick It Kids Soccer LLC. All rights reserved.</span>
          <span className="footer-legal">
            <a href="privacy-policy.html">Privacy Policy</a>
            <a href="terms.html">Terms &amp; Conditions</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- App ---------- */
function App() {
  useReveal();
  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <ProgramTypes />
        <Mission />
        <Programs />
        <Coach />
        <HowItWorks />
        <Directory />
        <ForSchools />
        <CharityBanner />
        <Testimonials />
        {/* <FAQ /> */}
        <Contact />
      </main>
      <Footer />
    </React.Fragment>
  );
}

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