/* VA Classes — dedicated Pricing page. Uses shared PriceTier, WhyDifferent, IncludedGrid, FAQ. */

const PRICING_FAQ = [
  { q: "Is the trial class really free?", a: "Yes, completely. Your child's first 1-on-1 class is free and you don't need to enter a card. It's a real lesson with a real tutor, so you can see the difference before deciding anything." },
  { q: "Can I change or cancel my plan?", a: "Anytime. There are no lock-in contracts. You can upgrade, downgrade, pause or cancel from your account, and changes take effect at the end of your current billing period." },
  { q: "What if my child doesn't click with the tutor?", a: "Just tell us and we'll re-match you with another tutor, free of charge. Finding the right fit is part of what you're paying for." },
  { q: "How are classes scheduled?", a: "You pick times that suit your family when you book, including evenings and weekends. Your child keeps the same dedicated tutor each week wherever possible." },
  { q: "Do you offer sibling or multi-subject discounts?", a: "Yes. The Two subjects and All subjects plans already bundle savings, and the All subjects plan covers up to two children on one family dashboard. Talk to us for larger families." },
  { q: "Which currency will I be charged in?", a: "All prices are shown and billed in Canadian dollars (CAD), so there are no surprise conversion fees." },
];

function PricingHero() {
  return (
    <header className="section pricing-hero" id="top">
      <div className="wrap">
        <p className="eyebrow">Simple, honest pricing</p>
        <h1>One free class.<br />Then a plan that <span className="mark-yellow">fits</span>.</h1>
        <p className="lead">Every plan is live, one-on-one tutoring with a dedicated tutor, aligned to the Canadian curriculum. Start free, cancel anytime, all prices in CAD.</p>
        <div className="ph-trust">
          <span><Icon name="gift" size={16} />First class free</span>
          <span><Icon name="credit-card" size={16} />No card to start</span>
          <span><Icon name="x-circle" size={16} />Cancel anytime</span>
        </div>
      </div>
    </header>
  );
}

function PricingPlans({ onTrial }) {
  const [cycle, setCycle] = React.useState("month");
  return (
    <section className="section" style={{ paddingTop: 8 }} id="plans">
      <div className="wrap">
        <div className="pricing-toggles center-toggle">
          <div className="billing-toggle">
            <button className={cycle === "month" ? "on" : ""} onClick={() => setCycle("month")}>Monthly</button>
            <button className={cycle === "quarter" ? "on" : ""} onClick={() => setCycle("quarter")}>Quarterly <span className="save">Save 15%</span></button>
          </div>
          <span className="price-cad-note"><img src="https://flagcdn.com/w40/ca.png" alt="" width="22" height="16" />Prices in Canadian dollars</span>
        </div>
        <div className="price-grid">
          {window.VA_PLANS.map(p => <PriceTier key={p.name} tier={p} cycle={cycle} currency="cad" />)}
        </div>
        <p className="price-foot"><Icon name="shield-check" size={15} />Every plan starts with a free trial class. No card required, no obligation.</p>
      </div>
    </section>
  );
}

function PricingFAQ() {
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">Pricing questions</p>
          <h2>Good questions, straight answers</h2>
        </div>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          <FAQ items={PRICING_FAQ} />
        </div>
      </div>
    </section>
  );
}

function PricingCTA({ onTrial }) {
  return (
    <section className="cta-band">
      <div className="wrap">
        <h2>Try it before you pay a cent.</h2>
        <p>Book a free 1-on-1 trial class. See the difference, then pick the plan that fits.</p>
        <div className="cta-row">
          <button className="btn btn-pop btn-lg" onClick={onTrial}>Book a free class<Icon name="arrow-right" /></button>
          <a className="btn btn-outline btn-lg" href="contact.html">Talk to us first</a>
        </div>
      </div>
    </section>
  );
}

function PricingApp() {
  const [trial, setTrial] = React.useState(false);
  useLucide();
  const open = () => setTrial(true);
  return (
    <div className="site">
      <Nav onTrial={open} />
      <PricingHero />
      <PricingPlans onTrial={open} />
      <IncludedGrid />
      <WhyDifferent />
      <PricingFAQ />
      <PricingCTA onTrial={open} />
      <Footer />
      {trial && <TrialModal onClose={() => setTrial(false)} />}
    </div>
  );
}

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