/* VA Classes, homepage UI kit · reusable components */

/* ── Lead endpoint fallback — set on every page via components.jsx ── */
if (!window.VA_LEAD_ENDPOINT) {
  window.VA_LEAD_ENDPOINT = "https://script.google.com/macros/s/AKfycbxUjyJHhLAqiyh8A4SzB7tl7Zc_sgmHiTIHaynfftoqcBO_mvUJP37ZHqfVu7YknWNnTw/exec";
}

/* =====================================================================
   LINKS, single place for all external URLs.
   ▶ Replace the "#" placeholders with the real URLs:
     - login:      your student/parent portal LOGIN url (login only, no public sign-up)
     - facebook / instagram / trustpilot: your social & review pages
   ===================================================================== */
window.VA_LINKS = window.VA_LINKS || {
  login:      "https://merithub.com/login",
  facebook:   "#facebook",
  instagram:  "https://www.instagram.com/va__classes",
  trustpilot: "https://www.trustpilot.com/review/vaclasses.live",
};
const LINKS = window.VA_LINKS;

const NAV_SUBJECTS = [
  { name: "Math", icon: "calculator", page: "math.html", grades: "Grades 1 to 10" },
  { name: "Science", icon: "atom", page: "science.html", grades: "Grades 1 to 10" },
  { name: "English", icon: "book-open", page: "english.html", grades: "Grades 1 to 10" },
  { name: "Coding", icon: "code-xml", page: "coding.html", grades: "Grades 3 to 10" },
];

function Icon({ name, size = 18, style }) {
  return <i data-lucide={name} style={{ width: size, height: size, ...style }}></i>;
}
function useLucide() {
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });
}

function Logo({ light = false, boxed = false }) {
  if (boxed) {
    return (
      <a className="brand brand-boxed" href="index.html#top">
        <img src="assets/logo-mark.png" alt="VA Classes" />
        <span className="wm">VA Classes</span>
      </a>
    );
  }
  const markSrc = light ? "assets/logo-mark-light.png" : "assets/logo-mark.png";
  return (
    <a className="brand" href="index.html#top">
      <img src={markSrc} alt="VA Classes" />
      <span className="wm" style={light ? { color: "var(--paper)" } : null}>VA Classes</span>
    </a>
  );
}

function Button({ variant = "primary", size, children, onClick, icon, iconRight }) {
  const cls = ["btn", `btn-${variant}`, size && `btn-${size}`].filter(Boolean).join(" ");
  return (
    <button className={cls} onClick={onClick}>
      {icon && <Icon name={icon} />}{children}{iconRight && <Icon name={iconRight} />}
    </button>
  );
}

// Star rating row, green (#00B67A) like Trustpilot
function Stars({ rating = 5, size = 14 }) {
  return (
    <span className="stars" aria-label={rating + " out of 5"}>
      {[0, 1, 2, 3, 4].map(i => (
        <i key={i} data-lucide="star" style={{ width: size, height: size, fill: i < Math.round(rating) ? "#00B67A" : "none", color: "#00B67A" }}></i>
      ))}
    </span>
  );
}

function PhotoPlaceholder({ caption, glyph = "users", radius = "var(--r-xl)", minHeight = 380 }) {
  return (
    <div className="photo" style={{ borderRadius: radius, minHeight }}>
      <span className="ph-glyph"><Icon name={glyph} size={120} /></span>
      <span className="ph-cap">{caption}</span>
    </div>
  );
}

function SubjectCard({ s }) {
  return (
    <a className="subject" href={s.page}>
      <div className="s-ic"><Icon name={s.icon} size={26} /></div>
      <h3>{s.name}</h3>
      <p>{s.desc}</p>
      <div className="s-grades">Explore {s.name}<Icon name="arrow-right" size={15} /></div>
    </a>
  );
}

function TutorAvatar({ t }) {
  const palette = ["#FF6B6B", "#FFC700", "#4ECDC4", "#5B8DEF", "#C77DFF", "#FF9F1C", "#1F8A4C", "#2A9DEF"];
  const color = palette[(t.name ? t.name.charCodeAt(0) : 0) % palette.length];
  if (t.photo) return <div className="t-photo"><img src={t.photo} alt={t.name} loading="lazy" /></div>;
  return <div className="t-photo t-photo-initial" style={{ background: color }}>{t.name ? t.name[0] : "?"}</div>;
}

function TutorCard({ t, onBook }) {
  return (
    <article className="tutor">
      <div className="t-top">
        <TutorAvatar t={t} />
        <div>
          <h3 className="t-name">{t.name}</h3>
          <div className="t-rate"><Stars rating={t.rating} size={13} /><b>{t.rating.toFixed(1)}</b><span>· {t.reviews} reviews</span></div>
        </div>
      </div>
      <div className="t-body">
        <div className="t-tags">
          <span className="badge badge-yellow">{t.subject}</span>
          <span className="badge badge-outline">{t.experience}+ yrs</span>
        </div>
        {t.bio && <p className="t-bio">{t.bio}</p>}
        <div className="t-meta">
          <span className="mrow"><Icon name="graduation-cap" size={15} />{t.education}</span>
          <span className="mrow"><Icon name="map-pin" size={15} />{t.location}</span>
        </div>
        <div className="t-foot">
          <button className="btn btn-outline btn-sm btn-block" onClick={() => onBook && onBook(t)}>Book a trial with {t.name.split(" ")[0]}</button>
        </div>
      </div>
    </article>
  );
}

function TestimonialCard({ q, feat = false }) {
  return (
    <div className={"testi" + (feat ? " feat" : "")}>
      <div className="testi-top">
        <Stars rating={5} onDark={feat} />
        {q.flag && <img className="testi-flag" src={`https://flagcdn.com/w40/${q.flag}.png`} alt="" width="22" height="16" />}
      </div>
      <blockquote>“{q.quote}”</blockquote>
      <div className="who">
        <span className="pa" style={q.color ? { background: q.color, color: "#fff" } : null}>{q.name ? q.name[0] : ""}</span>
        <div>
          <div className="nm">{q.name}</div>
          <div className="gr">{q.role}</div>
        </div>
      </div>
    </div>
  );
}

function PriceTier({ tier, cycle, currency }) {
  const cur = currency || "cad";
  const price = tier.price[cur][cycle];
  const prefix = cur === "cad" ? "CA$" : "US$";
  const label = cur === "cad" ? "CAD" : "USD";
  return (
    <div className={"tier" + (tier.popular ? " pop" : "")}>
      {tier.popular && <span className="badge badge-yellow pop-tag">Most popular</span>}
      <p className="t-name">{tier.name}</p>
      <div className="t-price">
        <span className="amt">{prefix}{price}</span>
        <span className="per">/{cycle === "quarter" ? "quarter" : "month"}</span>
      </div>
      <p className="t-sub">{tier.sub} <span className="t-billed">Billed in {label}</span></p>
      <ul className="t-feats">
        {tier.feats.map((f, i) => <li key={i}><Icon name="check" size={17} />{f}</li>)}
      </ul>
      <button className={"btn btn-block " + (tier.popular ? "btn-pop" : "btn-outline")}>{tier.cta}</button>
    </div>
  );
}

// ---- Shared chrome (used by every page) ----
function LoginLink({ small = true }) {
  return (
    <a className={"btn btn-ghost" + (small ? " btn-sm" : "")} href={LINKS.login} target="_blank" rel="noopener">
      <Icon name="log-in" size={16} />Log in
    </a>
  );
}

function SubjectsMenu() {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    const close = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, []);
  React.useEffect(() => {
    if (open && window.lucide) window.lucide.createIcons();
  }, [open]);
  return (
    <div className="menu-wrap nav-subjects" ref={ref}>
      <button className="nav-link-btn" onClick={() => setOpen(o => !o)} aria-expanded={open}>
        Subjects<Icon name={open ? "chevron-up" : "chevron-down"} size={15} />
      </button>
      {open && (
        <div className="dropdown subjects-dd">
          <div className="dd-bridge"></div>
          {NAV_SUBJECTS.map(s => (
            <a className="subj-dd-item" href={s.page} key={s.name} onClick={() => setOpen(false)}>
              <span className="sd-ic"><Icon name={s.icon} size={20} /></span>
              <span className="sd-tx"><b>{s.name}</b><small>{s.grades}</small></span>
              <Icon name="arrow-right" size={16} style={{ color: "var(--stone-500)" }} />
            </a>
          ))}
        </div>
      )}
    </div>
  );
}

function Nav({ onTrial }) {
  useLucide();
  const [mOpen, setMOpen] = React.useState(false);
  const navRef = React.useRef(null);

  // Add shadow when page is scrolled
  React.useEffect(() => {
    const onScroll = () => {
      if (navRef.current) {
        navRef.current.classList.toggle("is-scrolled", window.scrollY > 10);
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    if (!mOpen) return;
    const close = () => setMOpen(false);
    document.addEventListener("click", close);
    return () => document.removeEventListener("click", close);
  }, [mOpen]);
  return (
    <nav className="nav" ref={navRef} style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 100 }}>
      <div className="wrap nav-in">
        <Logo />
        <div className="nav-links">
          <SubjectsMenu />
          <a href="pricing.html">Pricing</a>
          <a href="about.html">About us</a>
        </div>
        <div className="nav-right">
          <LoginLink />
          <button className="btn btn-pop btn-sm nav-cta-btn" onClick={onTrial}>Book free class</button>
          <button className="nav-burger" onClick={e => { e.stopPropagation(); setMOpen(o => !o); }} aria-label="Menu">
            <Icon name={mOpen ? "x" : "menu"} size={22} />
          </button>
        </div>
      </div>
      {mOpen && (
        <div className="nav-drawer" onClick={e => e.stopPropagation()}>
          <div className="nd-subjects">
            {NAV_SUBJECTS.map(s => (
              <a key={s.name} href={s.page} className="nd-subj" onClick={() => setMOpen(false)}>
                <span className="nd-sic"><Icon name={s.icon} size={16} /></span>
                <span>{s.name}</span>
              </a>
            ))}
          </div>
          <div className="nd-divider"></div>
          <a href="pricing.html" className="nd-link" onClick={() => setMOpen(false)}>Pricing</a>
          <a href="about.html" className="nd-link" onClick={() => setMOpen(false)}>About us</a>
          <a href={LINKS.login} className="nd-link" target="_blank" rel="noopener" onClick={() => setMOpen(false)}>Log in</a>
          <button className="btn btn-pop btn-block" style={{ marginTop: 8 }} onClick={() => { setMOpen(false); onTrial(); }}>
            Book free class<Icon name="arrow-right" size={16} />
          </button>
        </div>
      )}
    </nav>
  );
}

function SocialIcon({ kind }) {
  if (kind === "facebook") return (
    <svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.89h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z"/></svg>
  );
  if (kind === "instagram") return (
    <svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M12 2c2.72 0 3.06.01 4.12.06 1.07.05 1.79.22 2.43.47.66.26 1.22.6 1.77 1.16.56.55.9 1.11 1.16 1.77.25.64.42 1.36.47 2.43.05 1.06.06 1.4.06 4.12s-.01 3.06-.06 4.12c-.05 1.07-.22 1.79-.47 2.43a4.9 4.9 0 0 1-1.16 1.77c-.55.56-1.11.9-1.77 1.16-.64.25-1.36.42-2.43.47-1.06.05-1.4.06-4.12.06s-3.06-.01-4.12-.06c-1.07-.05-1.79-.22-2.43-.47a4.9 4.9 0 0 1-1.77-1.16 4.9 4.9 0 0 1-1.16-1.77c-.25-.64-.42-1.36-.47-2.43C2.01 15.06 2 14.72 2 12s.01-3.06.06-4.12c.05-1.07.22-1.79.47-2.43.26-.66.6-1.22 1.16-1.77.55-.56 1.11-.9 1.77-1.16.64-.25 1.36-.42 2.43-.47C8.94 2.01 9.28 2 12 2Zm0 1.8c-2.67 0-2.99.01-4.04.06-.98.04-1.5.21-1.86.35-.47.18-.8.4-1.15.75-.35.35-.57.68-.75 1.15-.14.36-.31.88-.35 1.86-.05 1.05-.06 1.37-.06 4.04s.01 2.99.06 4.04c.04.98.21 1.5.35 1.86.18.47.4.8.75 1.15.35.35.68.57 1.15.75.36.14.88.31 1.86.35 1.05.05 1.37.06 4.04.06s2.99-.01 4.04-.06c.98-.04 1.5-.21 1.86-.35.47-.18.8-.4 1.15-.75.35-.35.57-.68.75-1.15.14-.36.31-.88.35-1.86.05-1.05.06-1.37.06-4.04s-.01-2.99-.06-4.04c-.04-.98-.21-1.5-.35-1.86a3.1 3.1 0 0 0-.75-1.15 3.1 3.1 0 0 0-1.15-.75c-.36-.14-.88-.31-1.86-.35-1.05-.05-1.37-.06-4.04-.06Zm0 3.06a5.14 5.14 0 1 1 0 10.28 5.14 5.14 0 0 1 0-10.28Zm0 1.8a3.34 3.34 0 1 0 0 6.68 3.34 3.34 0 0 0 0-6.68Zm5.34-3.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z"/></svg>
  );
  return (
    <svg viewBox="0 0 24 24" width="19" height="19" fill="currentColor" aria-hidden="true"><path d="M12 2l2.93 6.26L22 9.27l-5 4.87 1.18 6.86L12 17.77l-6.18 3.23L7 14.14 2 9.27l7.07-1.01L12 2z"/></svg>
  );
}

function Footer() {
  const cols = [
    { h: "Subjects", links: [["Math", "math.html"], ["Science", "science.html"], ["English", "english.html"], ["Coding", "coding.html"]] },
    { h: "Company", links: [["About us", "about.html"], ["Pricing", "pricing.html"], ["Contact us", "contact.html"], ["Teach with us", "tutor.html"]] },
    { h: "For families", links: [["Book a free class", "index.html#top"], ["Log in", LINKS.login], ["Reviews on Trustpilot", LINKS.trustpilot], ["Privacy policy", "privacy.html"], ["Terms of service", "terms.html"]] },
  ];
  const socials = [
    { kind: "facebook", label: "Facebook", href: LINKS.facebook, bg: "#1877F2" },
    { kind: "instagram", label: "Instagram", href: LINKS.instagram, bg: "linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)" },
    { kind: "trustpilot", label: "Trustpilot", href: LINKS.trustpilot, bg: "#00B67A" },
  ];
  useLucide();
  return (
    <footer className="footer">
      <div className="wrap footer-in">
        <div>
          <Logo boxed />
          <p className="f-tag">Live 1-on-1 online tutoring in Math, Science, English &amp; Coding for grades 1 to 10, for families across Canada.</p>
          <div className="footer-canada">
            <img src="https://flagcdn.com/w40/ca.png" alt="Canada" width="26" height="20" loading="lazy" />
            <span>Proudly serving families across Canada</span>
          </div>
          <div className="footer-social-block">
            <span className="footer-social-label">Follow us</span>
            <div className="socials">
              {socials.map(s => (
                <a key={s.label} className="social social-brand" href={s.href} target="_blank" rel="noopener" aria-label={s.label} style={{ background: s.bg }}>
                  <SocialIcon kind={s.kind} />
                </a>
              ))}
            </div>
          </div>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <h4>{c.h}</h4>
            {c.links.map(l => <a key={l[0]} href={l[1]}>{l[0]}</a>)}
          </div>
        ))}
      </div>
      <div className="wrap f-bottom">
        <span>© 2026 VA Classes · vaclasses.live</span>
        <span>Live online tutoring · Privacy · Terms</span>
      </div>
    </footer>
  );
}

const ALL_SUBJECTS = ["Math", "Science", "English", "Coding"];

function SubjectPicker({ value, onChange }) {
  const toggle = (s) => onChange(value.includes(s) ? value.filter(x => x !== s) : [...value, s]);
  return (
    <div className="subj-picker">
      {ALL_SUBJECTS.map(s => (
        <button type="button" key={s} className={"sp-chip" + (value.includes(s) ? " on" : "")} onClick={() => toggle(s)}>
          {value.includes(s) && <Icon name="check" size={15} />}{s}
        </button>
      ))}
    </div>
  );
}

function TrialModal({ onClose }) {
  const [step, setStep] = React.useState(1);
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [f, setF] = React.useState({
    parent: "", email: "", phone: "", province: "Ontario",
    child: "", grade: "5", subjects: ["Math"], schedule: "Weekday evenings", goal: "", heard: "",
  });
  const set = (k, v) => setF(prev => ({ ...prev, [k]: v }));
  useLucide();

  // Sends the lead to your Google Sheet + Gmail (see LEAD_ENDPOINT in components.jsx).
  const submitLead = () => {
    setSending(true);
    const payload = {
      ...f,
      subjects: f.subjects.join(", "),
      source: "Detailed form",
      submittedAt: new Date().toLocaleString("en-CA"),
      page: location.href,
    };
    // Always show success to the parent; lead is sent in the background.
    const finish = () => { setSending(false); setDone(true); };
    if (window.VA_LEAD_ENDPOINT && window.VA_LEAD_ENDPOINT.startsWith("http")) {
      fetch(window.VA_LEAD_ENDPOINT, {
        method: "POST",
        mode: "no-cors",
        headers: { "Content-Type": "text/plain;charset=utf-8" },
        body: JSON.stringify(payload),
      }).then(finish).catch(finish);
    } else {
      console.warn("VA_LEAD_ENDPOINT not set — lead not sent:", payload);
      finish();
    }
  };

  const canNext = f.parent.trim() && f.email.trim();
  const total = 2;

  return (
    <div className="modal-scrim" onClick={onClose}>
      <div className="modal modal-lg" onClick={e => e.stopPropagation()}>
        {!done ? (
          <React.Fragment>
            <div className="m-head">
              <div>
                <h3>Book your free class</h3>
                <p className="m-eyebrow">Step {step} of {total} · {step === 1 ? "About you" : "About your child"}</p>
              </div>
              <button className="x" onClick={onClose}><Icon name="x" size={22} /></button>
            </div>
            <div className="m-progress"><span style={{ width: (step / total * 100) + "%" }}></span></div>

            {step === 1 ? (
              <div className="m-step">
                <div className="m-field">
                  <label className="field-label">Parent's full name</label>
                  <input className="field" placeholder="e.g. Jordan Bennett" value={f.parent} onChange={e => set("parent", e.target.value)} />
                </div>
                <div className="m-grid2">
                  <div className="m-field">
                    <label className="field-label">Email</label>
                    <input className="field" type="email" placeholder="you@email.com" value={f.email} onChange={e => set("email", e.target.value)} />
                  </div>
                  <div className="m-field">
                    <label className="field-label">Phone</label>
                    <input className="field" type="tel" placeholder="(555) 123-4567" value={f.phone} onChange={e => set("phone", e.target.value)} />
                  </div>
                </div>
                <div className="m-field">
                  <label className="field-label">Your province</label>
                  <select className="field" value={f.province || "Ontario"} onChange={e => set("province", e.target.value)}>
                    {["Ontario","British Columbia","Alberta","Quebec","Manitoba","Saskatchewan","Nova Scotia","New Brunswick","Newfoundland & Labrador","Prince Edward Island","Other / Outside Canada"].map(p => <option key={p}>{p}</option>)}
                  </select>
                </div>
                <button className={"btn btn-pop btn-block btn-lg" + (canNext ? "" : " is-disabled")} onClick={() => canNext && setStep(2)}>
                  Continue<Icon name="arrow-right" />
                </button>
                <p className="m-trust"><Icon name="shield-check" size={14} />No card required · 100% free trial class</p>
              </div>
            ) : (
              <div className="m-step">
                <div className="m-grid2">
                  <div className="m-field">
                    <label className="field-label">Child's first name</label>
                    <input className="field" placeholder="e.g. Maya" value={f.child} onChange={e => set("child", e.target.value)} />
                  </div>
                  <div className="m-field">
                    <label className="field-label">Grade</label>
                    <select className="field" value={f.grade} onChange={e => set("grade", e.target.value)}>
                      {Array.from({ length: 10 }, (_, i) => <option key={i} value={i + 1}>Grade {i + 1}</option>)}
                    </select>
                  </div>
                </div>
                <div className="m-field">
                  <label className="field-label">Which subjects? <span className="lbl-hint">pick one or more</span></label>
                  <SubjectPicker value={f.subjects} onChange={v => set("subjects", v)} />
                </div>
                <div className="m-field">
                  <label className="field-label">Preferred class time</label>
                  <select className="field" value={f.schedule} onChange={e => set("schedule", e.target.value)}>
                    {["Weekday mornings", "Weekday afternoons", "Weekday evenings", "Weekends", "Flexible / not sure"].map(o => <option key={o}>{o}</option>)}
                  </select>
                </div>
                <div className="m-field">
                  <label className="field-label">What would you like help with? <span className="lbl-hint">optional</span></label>
                  <textarea className="field" rows="2" placeholder="e.g. building confidence with fractions before the next test" value={f.goal} onChange={e => set("goal", e.target.value)}></textarea>
                </div>
                <div className="m-actions">
                  <button className="btn btn-outline btn-lg" onClick={() => setStep(1)}><Icon name="arrow-left" />Back</button>
                  <button className="btn btn-pop btn-lg" style={{ flex: 1 }} disabled={sending} onClick={submitLead}>{sending ? "Sending…" : "Book my free class"}<Icon name={sending ? "loader" : "arrow-right"} /></button>
                </div>
              </div>
            )}
          </React.Fragment>
        ) : (
          <div className="success">
            <div className="badge-check"><svg viewBox="0 0 24 24" width="32" height="32" fill="none" stroke="#14130E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
            <h3>You're booked{f.child ? `, ${f.parent.split(" ")[0]}!` : "!"}</h3>
            <p className="m-sub" style={{ marginBottom: 18 }}>
              We'll email <b>{f.email || "you"}</b> within a few hours to confirm {f.child || "your child"}'s
              free {f.subjects.join(" & ")} trial. Talk soon!
            </p>
            <button className="btn btn-pop btn-block" onClick={onClose}>Done</button>
          </div>
        )}
      </div>
    </div>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div className={"faq-item" + (open === i ? " open" : "")} key={i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{it.q}</span>
            <Icon name={open === i ? "minus" : "plus"} size={20} />
          </button>
          {open === i && <div className="faq-a">{it.a}</div>}
        </div>
      ))}
    </div>
  );
}

function WhyDifferent({ subjectName }) {
  const C = window.VA_COMPARE;
  const cell = (v) => {
    if (v === true) return <span className="cmp-yes"><Icon name="check" size={15} /></span>;
    if (v === "some") return <span className="cmp-some">Sometimes</span>;
    return <span className="cmp-no"><Icon name="x" size={14} /></span>;
  };
  useLucide();
  return (
    <section className="section why-diff" id="why-different">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">Why we're different</p>
          <h2>{subjectName ? `Why families choose VA Classes for ${subjectName}` : "What sets VA Classes apart"}</h2>
          <p>Studies are consistent: one-on-one tutoring is the most effective way to learn, because lessons adapt to your child, feedback is instant, and there's no crowd to hide behind. Here's how the three options really compare.</p>
        </div>
        <div className="cmp2">
          <div className="cmp-spot" aria-hidden="true"></div>
          {/* header row */}
          <div className="cmp-c cmp-head cmp-corner"></div>
          <div className="cmp-c cmp-head cmp-vahead">
            <span className="cmp-star"><Icon name="star" size={13} /></span>VA Classes
          </div>
          <div className="cmp-c cmp-head">Group online<br />classes</div>
          <div className="cmp-c cmp-head">Self-study<br />apps</div>
          {/* data rows */}
          {C.rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className={"cmp-c cmp-feat" + (i % 2 ? " alt" : "")}>{r.f}</div>
              <div className={"cmp-c cmp-va" + (i % 2 ? " alt" : "")}>{cell(r.va)}</div>
              <div className={"cmp-c" + (i % 2 ? " alt" : "")}>{cell(r.group)}</div>
              <div className={"cmp-c" + (i % 2 ? " alt" : "")}>{cell(r.app)}</div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function IncludedGrid() {
  useLucide();
  return (
    <section className="section alt" id="included">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">Included in every plan</p>
          <h2>Every plan comes with all of this</h2>
          <p>No hidden tiers for the things that matter. These come standard, whichever plan you pick.</p>
        </div>
        <div className="included-grid">
          {window.VA_INCLUDED.map(it => (
            <div className="inc-card" key={it.t}>
              <span className="inc-ic"><Icon name={it.ic} size={22} /></span>
              <div><h3>{it.t}</h3><p>{it.d}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Icon, useLucide, Logo, Button, Stars, PhotoPlaceholder, SubjectCard, TutorCard, TestimonialCard, PriceTier, Nav, Footer, TrialModal, LoginLink, SubjectsMenu, FAQ, SubjectPicker, SocialIcon, WhyDifferent, IncludedGrid });