/* VA Classes, homepage sections + App */

const SUBJECTS = [
  { key: "Math", name: "Math", icon: "calculator", grades: "Grades 1 to 10", page: "math.html",
    desc: "From counting and times-tables to algebra and exam-ready problem solving." },
  { key: "Science", name: "Science", icon: "atom", grades: "Grades 1 to 10", page: "science.html",
    desc: "Physics, chemistry and biology made visual, hands-on and curious." },
  { key: "English", name: "English", icon: "book-open", grades: "Grades 1 to 10", page: "english.html",
    desc: "Reading, writing, grammar and confident speaking, at every level." },
  { key: "Coding", name: "Coding", icon: "code-xml", grades: "Grades 3 to 10", page: "coding.html",
    desc: "Scratch, Python and web basics. Real projects young builders love." },
];

const TUTORS_FALLBACK = [];  // tutors now live in tutors-data.js (window.VA_TUTORS)

const TESTIMONIALS = [
  { quote: "My son was really struggling with long division and just shutting down. His tutor figured out why in the first class. Three months in, he does fractions without being asked.", name: "Sandra L.", role: "Grade 4 Math · Vancouver, BC 🇨🇦", flag: "ca", color: "#FF6B6B" },
  { quote: "We moved from India last year and worried about the school switch. Their tutor bridged the gap so well, my daughter says science finally makes sense. We signed up after the demo.", name: "Rajesh P.", role: "Grade 8 Science · Mississauga, ON 🇨🇦", flag: "ca", color: "#5B8DEF" },
  { quote: "My daughter used to say she was 'just bad at English.' Six weeks later she handed in an essay she was actually proud of. Her teacher noticed.", name: "Farah O.", role: "Grade 6 English · Ottawa, ON 🇨🇦", flag: "ca", color: "#C77DFF" },
  { quote: "He was playing video games, now he's building them. Scratch first, now Python. The tutor keeps it fun without it feeling like school.", name: "Tyler B.", role: "Grade 7 Coding · Winnipeg, MB 🇨🇦", flag: "ca", color: "#1F8A4C" },
  { quote: "After every class I get a short note on what went well and what needs more work. No fluff. I always know exactly where my son stands.", name: "Nadia T.", role: "Grade 9 Math · Calgary, AB 🇨🇦", flag: "ca", color: "#FF9F1C" },
  { quote: "As an Indian family in Canada, we loved that the tutors get both the curriculum here and our expectations at home. My twins have different tutors and it just works.", name: "Deepa S.", role: "Grades 5 & 7 · Edmonton, AB 🇨🇦", flag: "ca", color: "#E0A800" },
  { quote: "I was worried about the timezone. Turns out 7pm our time is perfect. Classes every Tuesday, never missed one, tutor is always prepared.", name: "Josh M.", role: "Grade 10 Science · Toronto, ON 🇨🇦", flag: "ca", color: "#2A9DEF" },
  { quote: "First class was free with zero pressure. The tutor was warm, prepared, and explained things two different ways until my daughter got it. That's rare.", name: "Melissa D.", role: "Grade 3 English · Halifax, NS 🇨🇦", flag: "ca", color: "#9B5DE5" },
];

const PLANS = [
  { name: "Single subject", sub: "One subject, one expert tutor.", cta: "Start free trial",
    price: { usd: { month: 49, quarter: 125 }, cad: { month: 65, quarter: 165 } },
    feats: ["1 subject of your choice", "4 live 1-on-1 classes / month", "Weekly progress report", "Homework help on chat"] },
  { name: "Two subjects", popular: true, sub: "The favourite for most families.", cta: "Start free trial",
    price: { usd: { month: 89, quarter: 227 }, cad: { month: 119, quarter: 305 } },
    feats: ["Any 2 subjects", "8 live 1-on-1 classes / month", "Dedicated tutor match", "Monthly parent review call", "Recording of every class"] },
  { name: "All subjects", sub: "Full support across the board.", cta: "Talk to us",
    price: { usd: { month: 149, quarter: 380 }, cad: { month: 199, quarter: 509 } },
    feats: ["All 4 subjects", "12 live 1-on-1 classes / month", "Priority tutor matching", "Exam prep & mock tests", "Family dashboard for 2 kids"] },
];

const MARKETS = [
  { code: "ca", name: "Canada", tag: "Coast to coast", note: "Aligned to the Ontario & provincial curricula", zones: "All 6 time zones" },
];

const SUBJECT_FILTERS = ["All", "Math", "Science", "English", "Coding"];

function HeroLeadForm() {
  const [done, setDone] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [f, setF] = React.useState({ parent: "", phone: "", grade: "5", subject: "Math" });
  const set = (k, v) => setF(p => ({ ...p, [k]: v }));
  const ready = f.parent.trim() && f.phone.trim();
  const submit = () => {
    if (!ready) return;
    setSending(true);
    const payload = {
      parent: f.parent, phone: f.phone, grade: f.grade, subjects: f.subject,
      email: "", province: "", child: "", schedule: "", goal: "",
      source: "Hero form",
      submittedAt: new Date().toLocaleString("en-CA"), page: location.href,
    };
    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(); }
  };
  return (
    <div className="hero-form card-pop">
      {!done ? (
        <React.Fragment>
          <div className="hf-head">
            <span className="badge badge-yellow">100% free · No card</span>
            <h3>Book a free trial class</h3>
            <p>A real 45-minute 1-on-1 class. See the difference before you pay a cent.</p>
          </div>
          <div className="hf-field">
            <label className="field-label">Parent's name</label>
            <input className="field" placeholder="e.g. Jordan Bennett" value={f.parent} onChange={e => set("parent", e.target.value)} />
          </div>
          <div className="hf-field">
            <label className="field-label">WhatsApp / phone number</label>
            <input className="field" type="tel" placeholder="+1 (555) 123-4567" value={f.phone} onChange={e => set("phone", e.target.value)} />
          </div>
          <div className="hf-row">
            <div className="hf-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 className="hf-field">
              <label className="field-label">Subject</label>
              <select className="field" value={f.subject} onChange={e => set("subject", e.target.value)}>
                {["Math", "Science", "English", "Coding"].map(s => <option key={s}>{s}</option>)}
              </select>
            </div>
          </div>
          <button className={"btn btn-pop btn-block btn-lg" + (ready ? "" : " is-disabled")} disabled={sending} onClick={submit}>
            {sending ? "Sending…" : "Book my free class"}<Icon name={sending ? "loader" : "arrow-right"} />
          </button>
          <p className="hf-trust"><Icon name="message-circle" size={14} />We'll WhatsApp you to confirm, usually within a few hours.</p>
        </React.Fragment>
      ) : (
        <div className="hf-done">
          <div className="badge-check"><svg viewBox="0 0 24 24" width="30" height="30" fill="none" stroke="#14130E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></div>
          <h3>Thanks, {f.parent.split(" ")[0]}!</h3>
          <p>We've got your request for a free {f.subject} class (Grade {f.grade}). We'll WhatsApp <b>{f.phone}</b> shortly to lock in a time.</p>
          <button className="btn btn-outline btn-block" onClick={() => { setDone(false); setF({ parent: "", phone: "", grade: "5", subject: "Math" }); }}>Book another</button>
        </div>
      )}
    </div>
  );
}

function Hero({ onTrial }) {
  return (
    <header className="hero" id="top">
      <div className="hero-dots"></div>
      <div className="wrap hero-in">
        <div className="hero-copy">
          <p className="hero-eyebrow"><img src="https://flagcdn.com/w40/ca.png" alt="Canada" className="eyebrow-flag" />1-on-1 · Grades 1 to 10 · Canada</p>
          <h1>Classes that finally <span className="mark-yellow">click</span>.</h1>
          <p className="sub">Live, 1-on-1 tutoring in Math, Science, English and Coding. Expert Indian tutors, handpicked for Canadian families. Better grades start with one great teacher.</p>
          <div className="hero-tp">
            <div className="hero-tp-stars">
              {[0,1,2,3,4].map(i => <i key={i} data-lucide="star" style={{width:14,height:14,fill:"#00B67A",color:"#00B67A"}}></i>)}
            </div>
            <span className="hero-tp-text">Rated <b>Excellent</b> on Trustpilot</span>
            <a href={window.VA_LINKS.trustpilot} className="hero-tp-link" target="_blank" rel="noopener">Read reviews</a>
          </div>
          <div className="hero-btns">
            <a className="btn btn-pop btn-lg" href="#subjects">
              Explore subjects<Icon name="arrow-right" size={18} />
            </a>
            <a className="btn btn-outline btn-lg" href="pricing.html">
              See pricing<Icon name="chevron-down" size={18} />
            </a>
          </div>
          <div className="hero-chips">
            <span><Icon name="check-circle" size={15} />No card needed</span>
            <span><Icon name="check-circle" size={15} />Cancel anytime</span>
            <span><Icon name="check-circle" size={15} />First class free</span>
          </div>
        </div>
        <HeroLeadForm />
      </div>
    </header>
  );
}

function TeachingEdge() {
  const pillars = [
    { ic: "graduation-cap", title: "IIT and university educated tutors", body: "Every VA tutor holds a degree from India's most rigorous institutions. They teach the concept behind the answer, so your child actually understands it rather than just memorising it." },
    { ic: "map-pin", title: "Mapped to your provincial curriculum", body: "Lessons follow Ontario, BC, Alberta or your child's exact syllabus. No filler, no gaps. Exactly what their teacher expects next week." },
    { ic: "heart-handshake", title: "High standards, warm delivery", body: "Indian educators set high expectations but deliver them with patience and encouragement. Your child is challenged, never pressured." },
    { ic: "message-circle", title: "You stay in the loop, always", body: "After every class, a short WhatsApp note: what went well, what to practise. No jargon. Just clarity." },
  ];
  useLucide();
  return (
    <section className="edge-sec" id="why-us">
      <div className="wrap">
        <div className="edge-in">
          <div className="edge-left">
            <p className="edge-eyebrow">The Indian teaching advantage</p>
            <h2 className="edge-h">The teachers your parents wished <em>they</em> had.</h2>
            <p className="edge-body">India produces the world's most rigorous academic tradition. VA Classes brings that depth of knowledge, with real personal attention, to your child's screen every week. Every lesson maps to the Canadian curriculum your child follows at school.</p>
            <div className="edge-stats">
              <div className="es-item">
                <span className="es-n">94%</span>
                <span className="es-l">of students show measurable improvement within 8 weeks</span>
              </div>
              <div className="es-div"></div>
              <div className="es-item">
                <span className="es-n">4.9★</span>
                <span className="es-l">average tutor rating from Canadian parents</span>
              </div>
            </div>
          </div>
          <div className="edge-right">
            {pillars.map(p => (
              <div className="edge-pillar" key={p.title}>
                <span className="ep-ic"><Icon name={p.ic} size={19} /></span>
                <div>
                  <h4 className="ep-title">{p.title}</h4>
                  <p className="ep-text">{p.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SubjectsBand({ onTrial }) {
  return (
    <section className="section" id="subjects">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">What we teach</p>
          <h2>Four subjects, one expert tutor each</h2>
          <p>Every class is one-on-one and built around your child's grade, pace and goals.</p>
        </div>
        <div className="subjects">
          {SUBJECTS.map(s => <SubjectCard key={s.key} s={s} onPick={onTrial} />)}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "1", ic: "clipboard-list", t: "Tell us about your child", d: "Share your child's grade, the subject they need, and a time that suits you. Takes about 30 seconds, no card, no commitment." },
    { n: "2", ic: "user-check", t: "We match the right tutor", d: "We pair your child with a specialist Indian tutor for their grade and goal, and confirm your free demo slot on WhatsApp." },
    { n: "3", ic: "sparkles", t: "Watch it click", d: "Your child has a real 1-on-1 demo class. Love it? Continue with a plan. If not, no pressure at all." },
  ];
  return (
    <section className="section alt how-sec" id="how">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">How it works</p>
          <h2>Book a free demo in 3 simple steps</h2>
          <p>From first click to first class, it's genuinely this easy.</p>
        </div>
        <div className="steps">
          <span className="steps-line"></span>
          {steps.map(s => (
            <div className="step" key={s.n}>
              <div className="step-top">
                <div className="num">{s.n}</div>
                <span className="step-ic"><Icon name={s.ic} size={26} /></span>
              </div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// A real demo-booking conversation, plays out like a screen recording.
const WA_CONVO = [
  { from: "in", text: "Hi! Saw your page, is the demo class really free? 😊", t: "9:38 AM" },
  { from: "out", text: "Hi Meena! Yes, 100% free, no card needed 🙌", t: "9:38 AM" },
  { from: "in", text: "My son's in Grade 5, really struggling with maths lately", t: "9:39 AM" },
  { from: "out", text: "Perfect, we'll match a specialist Math tutor for his grade. Which evenings suit you?", t: "9:39 AM" },
  { from: "in", text: "Tuesdays & Thursdays after 6 work best 🙏", t: "9:40 AM" },
  { from: "out", text: "Booked! Tuesday 6:30pm with Ms. Priya ✅ You'll get a reminder right here.", t: "9:40 AM" },
  { from: "in", text: "Amazing, thank you so much! Really excited ❤️", t: "9:41 AM" },
];

// WhatsApp widgets inspired by real parent feedback (names changed for privacy)
const WA_REVIEWS = [
  { name: "Ranjit Singh", loc: "Brampton, ON", flag: "ca", time: "4:51 am", color: "#7B61FF", ava: "R",
    msgs: [
      { txt: "94 in math 😭", ts: "6:18 pm", mine: false },
      { txt: "arjun", ts: "6:18 pm", mine: false },
      { txt: "wowww!! tell him I said well done seriously", ts: "6:19 pm", mine: true },
      { txt: "tuesday same time pls. he wants extra class this week also", ts: "6:21 pm", mine: false },
    ]
  },
  { name: "Tanya Dhawan", loc: "Mississauga, ON", flag: "ca", time: "2:49 pm", color: "#FF6B6B", ava: "T",
    msgs: [
      { txt: "hi", ts: "4:13 am", mine: false },
      { txt: "my son kabir sat through the whole class today. he never does that", ts: "4:14 am", mine: false },
      { txt: "sunday evening slot available for english? 7pm EST?", ts: "4:17 am", mine: false },
      { txt: "yes sunday 7 works! done ✅", ts: "4:19 am", mine: true },
    ]
  },
  { name: "Preethi Nair", loc: "Calgary, AB", flag: "ca", time: "9:24 am", color: "#1F8A4C", ava: "P",
    msgs: [
      { txt: "kenisha had her exam", ts: "7:51 pm", mine: false },
      { txt: "she came out smiling", ts: "7:52 pm", mine: false },
      { txt: "aww that's the best thing to hear honestly", ts: "7:53 pm", mine: true },
      { txt: "she said she wasnt scared at all. thank u so much", ts: "7:54 pm", mine: false },
    ]
  },
  { name: "Kavya Iyer", loc: "Winnipeg, MB", flag: "ca", time: "7:02 am", color: "#2A6FDB", ava: "K",
    msgs: [
      { txt: "aryan got 88 in math", ts: "8:29 pm", mine: false },
      { txt: "was 61 last term", ts: "8:30 pm", mine: false },
      { txt: "that's a massive jump in one term!", ts: "8:31 pm", mine: true },
      { txt: "he asked for more classes himself. i dont know what u did lol", ts: "8:32 pm", mine: false },
    ]
  },
  { name: "Suresh Pillai", loc: "Halifax, NS", flag: "ca", time: "2:44 am", color: "#E05C5C", ava: "S",
    msgs: [
      { txt: "can we move sunday class to saturday", ts: "5:11 pm", mine: false },
      { txt: "rohan has a game", ts: "5:11 pm", mine: false },
      { txt: "no problem, saturday 4pm done", ts: "5:13 pm", mine: true },
      { txt: "also he passed his test. said to say thanks", ts: "5:14 pm", mine: false },
    ]
  },
  { name: "Meera Krishnan", loc: "Surrey, BC", flag: "ca", time: "8:32 am", color: "#FF9F1C", ava: "M",
    msgs: [
      { txt: "diya recited the periodic table for her dad yesterday", ts: "6:59 pm", mine: false },
      { txt: "he had no idea she knew all that 😂", ts: "7:00 pm", mine: false },
      { txt: "hahaha love this!! she's worked so hard", ts: "7:01 pm", mine: true },
      { txt: "she used to say science is boring. not anymore", ts: "7:02 pm", mine: false },
    ]
  },
];

function WaHeader({ name, color, status, time = "9:41" }) {
  return (
    <>
      <div className="wa-notch"></div>
      <div className="wa-statusbar">
        <span className="wa-statusbar-time">{time}</span>
        <div className="wa-statusbar-icons">
          <svg width="15" height="11" viewBox="0 0 15 11" fill="white"><rect x="0" y="3" width="3" height="8" rx="0.5"/><rect x="4" y="2" width="3" height="9" rx="0.5"/><rect x="8" y="0" width="3" height="11" rx="0.5"/><rect x="12" y="0" width="3" height="11" rx="0.5" opacity="0.3"/></svg>
          <svg width="14" height="11" viewBox="0 0 14 11" fill="white"><path d="M7 2.5C8.8 2.5 10.4 3.2 11.6 4.4L13 3C11.4 1.4 9.3 0.5 7 0.5C4.7 0.5 2.6 1.4 1 3L2.4 4.4C3.6 3.2 5.2 2.5 7 2.5Z" opacity="0.5"/><path d="M7 5.5C8.1 5.5 9.1 5.9 9.8 6.7L11.2 5.3C10.1 4.2 8.6 3.5 7 3.5C5.4 3.5 3.9 4.2 2.8 5.3L4.2 6.7C4.9 5.9 5.9 5.5 7 5.5Z"/><circle cx="7" cy="9.5" r="1.5"/></svg>
          <svg width="22" height="11" viewBox="0 0 22 11" fill="none"><rect x="0.5" y="0.5" width="18" height="10" rx="2" stroke="white" strokeOpacity="0.35"/><rect x="1.5" y="1.5" width="14" height="8" rx="1.5" fill="white"/><path d="M20 3.5V7.5C20.8 7.2 21.5 6.4 21.5 5.5C21.5 4.6 20.8 3.8 20 3.5Z" fill="white" opacity="0.4"/></svg>
        </div>
      </div>
      <div className="wa-head">
        <Icon name="chevron-left" size={18} />
        <span className="wa-ava" style={{ background: color }}>{name[0]}</span>
        <div className="wa-who">
          <span className="wa-name">{name}</span>
          <span className="wa-status">{status}</span>
        </div>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 9.1a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.6a16 16 0 0 0 6.29 6.29l.96-.96a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 17.92z"/></svg>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.85"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
      </div>
    </>
  );
}

// Animated phone, types and reveals messages on a loop, like a screen recording.
function LiveWhatsApp() {
  const [shown, setShown] = React.useState(0);
  const [typing, setTyping] = React.useState(false);
  const bodyRef = React.useRef(null);
  React.useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setShown(WA_CONVO.length); return; }
    const timers = [];
    const run = () => {
      timers.forEach(clearTimeout); timers.length = 0;
      setShown(0); setTyping(false);
      let d = 800;
      WA_CONVO.forEach((m, i) => {
        timers.push(setTimeout(() => setTyping(true), d));
        d += m.from === "in" ? 1200 : 1000;
        timers.push(setTimeout(() => { setTyping(false); setShown(i + 1); }, d));
        d += 900;
      });
      timers.push(setTimeout(run, d + 2600));
    };
    run();
    return () => timers.forEach(clearTimeout);
  }, []);
  React.useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [shown, typing]);
  const nextFrom = WA_CONVO[shown] ? WA_CONVO[shown].from : null;
  return (
    <div className="wa-phone wa-live">
      <WaHeader name="Meena Iyer" color="#7B61FF" status={typing ? "typing…" : "online"} time="4:48 am" />
      <div className="wa-body" ref={bodyRef}>
        <div className="wa-daystamp"><span>TODAY</span></div>
        {WA_CONVO.slice(0, shown).map((m, j) => (
          <div className={"wa-bubble pop " + (m.from === "out" ? "wa-out" : "wa-in")} key={j}>
            {m.text}
            <span className="wa-meta">{m.t}{m.from === "out" && <span className="wa-tick">✓✓</span>}</span>
          </div>
        ))}
        {typing && nextFrom && (
          <div className={"wa-bubble wa-typing " + (nextFrom === "out" ? "wa-out" : "wa-in")}>
            <span className="wa-dot"></span><span className="wa-dot"></span><span className="wa-dot"></span>
          </div>
        )}
      </div>
      <div className="wa-foot"><span className="wa-input">Message</span><span className="wa-send"><svg viewBox="0 0 24 24" width="16" height="16" fill="white"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg></span></div>
      <div className="wa-home-bar"><span></span></div>
    </div>
  );
}

function WaPhone({ review }) {
  return (
    <div className="wa-phone wa-side">
      <WaHeader name={review.name} color={review.color} status="online" time={review.time} />
      <div className="wa-body">
        <div className="wa-daystamp"><span>TODAY</span></div>
        {review.msgs.map((m, j) => (
          <div className={"wa-bubble " + (m.mine ? "wa-out" : "wa-in")} key={j}>
            {m.txt}
            <span className="wa-meta">{m.ts}{m.mine && <span className="wa-tick"> ✓✓</span>}</span>
          </div>
        ))}
        <div className="wa-loc-tag">
          <img src="https://flagcdn.com/w40/ca.png" alt="CA" width="18" height="13" />
          {review.loc}
        </div>
      </div>
      <div className="wa-foot">
        <span className="wa-input">Message</span>
        <span className="wa-send"><svg viewBox="0 0 24 24" width="16" height="16" fill="white"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg></span>
      </div>
      <div className="wa-home-bar"><span></span></div>
    </div>
  );
}

function WhatsAppReviews() {
  useLucide();
  return (
    <section className="section wa-sec">
      <div className="wrap">
        <div className="wa-label">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M11.999 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.978-1.306A9.945 9.945 0 0 0 12 22c5.523 0 10-4.477 10-10S17.522 2 12 2z" fillRule="evenodd" clipRule="evenodd" opacity="0.3"/></svg>
          <span>Messages from parents</span>
        </div>
        <div className="wa-grid">
          <WaPhone review={WA_REVIEWS[0]} />
          <LiveWhatsApp />
          <WaPhone review={WA_REVIEWS[1]} />
          <WaPhone review={WA_REVIEWS[2]} />
          <WaPhone review={WA_REVIEWS[3]} />
          <WaPhone review={WA_REVIEWS[4]} />
        </div>
      </div>
    </section>
  );
}

function Tutors({ onTrial }) {
  const ALL = (window.VA_TUTORS && window.VA_TUTORS.length) ? window.VA_TUTORS : TUTORS_FALLBACK;
  const [filter, setFilter] = React.useState("All");
  const shown = filter === "All" ? ALL : ALL.filter(t => t.subject.includes(filter));
  return (
    <section className="section" id="tutors">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">Meet the tutors</p>
          <h2>Expert Indian tutors, hand-picked for Canada</h2>
          <p>Every tutor is a subject specialist based in India, experienced at teaching Canadian students online, patient, qualified and background-checked.</p>
        </div>
        <div className="filters">
          {SUBJECT_FILTERS.map(f => (
            <button key={f} className={"chip" + (filter === f ? " is-active" : "")} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>
        <div className="tutor-grid">
          {shown.map(t => <TutorCard key={t.name} t={t} onBook={onTrial} />)}
        </div>
      </div>
    </section>
  );
}

function Countries() {
  const stats = [
    { ic: "user-round", n: "1-on-1", l: "Every single class" },
    { ic: "book-open", n: "4", l: "Core subjects" },
    { ic: "graduation-cap", n: "1 to 10", l: "Grades we teach" },
    { ic: "gift", n: "Free", l: "First trial class" },
  ];
  const provinces = ["Ontario", "British Columbia", "Alberta", "Quebec", "Manitoba",
    "Saskatchewan", "Nova Scotia", "New Brunswick", "Newfoundland & Labrador", "PEI"];
  return (
    <section className="countries">
      <div className="wrap">
        <div className="markets-head">
          <p className="eyebrow" style={{ color: "var(--brand-yellow)" }}>Where we teach</p>
          <h2>Proudly built for families across <span style={{ color: "var(--brand-yellow)" }}>Canada 🇨🇦</span></h2>
          <p>Coast to coast, every class aligned to your child's provincial curriculum, your time zone, and priced simply in CAD.</p>
        </div>
        <div className="canada-feature">
          <div className="cf-flag-wrap">
            <img className="cf-flag" src="https://flagcdn.com/w640/ca.png" alt="Canada" loading="lazy" />
            <span className="mk-flag-glow"></span>
          </div>
          <div className="cf-body">
            <div className="cf-rows">
              <div className="mk-row"><Icon name="book-open-check" size={18} />Aligned to the Ontario &amp; provincial curricula</div>
              <div className="mk-row"><Icon name="clock" size={18} />Classes in every Canadian time zone, evenings &amp; weekends</div>
              <div className="mk-row"><Icon name="dollar-sign" size={18} />Simple pricing in CAD, no conversion surprises</div>
            </div>
            <div className="cf-provinces">
              {provinces.map(p => <span className="cf-prov" key={p}><Icon name="map-pin" size={13} />{p}</span>)}
            </div>
          </div>
        </div>
        <div className="mini-stats">
          {stats.map(s => (
            <div className="ms" key={s.l}>
              <span className="ms-ic"><Icon name={s.ic} size={20} /></span>
              <div className="ms-n">{s.n}</div>
              <div className="ms-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section testimonials-sec" id="testimonials">
      <div className="wrap">
        <div className="sec-head center">
          <p className="eyebrow">Parent stories</p>
          <h2>Real families. Real results.</h2>
          <p>Every word here was written by a parent or student, no scripts, no stock quotes. We're a small team and every single review matters to us. Many come from our growing NRI community across Canada.</p>
        </div>
        <div className="testi-grid">
          {TESTIMONIALS.map((q, i) => <TestimonialCard key={i} q={q} feat={i === 1 || i === 5} />)}
        </div>
        <div className="testi-cta">
          <div className="tc-stat">Every review is from a real family we've taught</div>
          <a className="btn btn-outline" href={window.VA_LINKS.trustpilot} target="_blank" rel="noopener">See our reviews on Trustpilot<Icon name="external-link" size={16} /></a>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  useLucide();
  const avatars = ["#FF6B6B", "#FFC700", "#4ECDC4", "#5B8DEF", "#C77DFF", "#FF9F1C"];
  return (
    <section className="reviews-band" id="reviews">
      <span className="rb-blob b1"></span>
      <span className="rb-blob b2"></span>
      <span className="rb-blob b3"></span>
      <div className="wrap">
        <div className="tp-card">
          <div className="tp-top">
            <span className="tp-logo"><Icon name="star" size={22} style={{ fill: "currentColor" }} />Trustpilot</span>
            <span className="tp-rated">Rated <b>Excellent</b></span>
          </div>
          <div className="tp-stars">
            {[0, 1, 2, 3, 4].map(i => (
              <span className="tp-star" key={i} style={{ animationDelay: (i * 110 + 100) + "ms" }}>
                <Icon name="star" size={26} style={{ fill: "currentColor" }} />
              </span>
            ))}
          </div>
          <h2>Reviewed by real families</h2>
          <p>We're a small, growing team, so every review on Trustpilot is from a real parent or student. No bought reviews, no bots. Read them for yourself.</p>
          <div className="tp-faces">
            {avatars.map((c, i) => <span className="tp-face" style={{ background: c, zIndex: avatars.length - i }} key={i}></span>)}
            <span className="tp-faces-txt">Loved by parents &amp; students</span>
          </div>
          <a className="btn btn-pop btn-lg" href={window.VA_LINKS.trustpilot} target="_blank" rel="noopener">Read our reviews on Trustpilot<Icon name="external-link" /></a>
        </div>
      </div>
    </section>
  );
}

function Pricing({ onTrial }) {
  const [cycle, setCycle] = React.useState("month");
  // CANADA-FIRST: prices shown in CAD only. US/USD is dormant (PLANS still carry usd
  // figures), to re-enable a currency switch later, restore the currency-toggle below.
  const currency = "cad";
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">Simple pricing</p>
          <h2>Plans that grow with your child</h2>
          <p>Cancel anytime. Every plan starts with a free trial class, no card required. All prices in CAD.</p>
        </div>
        <div className="pricing-toggles">
          <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={currency} />)}
        </div>
        <p className="price-foot"><a className="btn btn-outline" href="pricing.html">See full pricing &amp; FAQ<Icon name="arrow-right" size={16} /></a></p>
      </div>
    </section>
  );
}

function FinalCTA({ onTrial }) {
  const perks = [
    { ic: "shield-check", t: "No card required", d: "Book a free class, zero obligation." },
    { ic: "user-round", t: "Matched to your child", d: "We pick the right tutor for their grade and goal." },
    { ic: "clock", t: "You pick the time", d: "Evenings, weekends, whatever fits your family." },
    { ic: "trending-up", t: "Progress after 1 class", d: "You'll see the difference in the very first session." },
  ];
  return (
    <section className="final-cta-band">
      <div className="wrap">
        <div className="fca-left">
          <p className="fca-eyebrow">Start today</p>
          <h2>One free class.<br />No card. No risk.</h2>
          <p className="fca-sub">Your child's first 1-on-1 lesson is completely free. If it clicks, we'll help you find the right plan. If it doesn't, no hard feelings.</p>
          <div className="fca-perks">
            {perks.map(p => (
              <div className="fca-perk" key={p.t}>
                <span className="fca-ic"><Icon name={p.ic} size={18} /></span>
                <span><b>{p.t}</b>, {p.d}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="fca-right">
          <div className="fca-form card-pop">
            <p className="fca-form-head">Book your free class right now</p>
            <p className="fca-form-sub">Takes 30 seconds. We'll WhatsApp you to confirm.</p>
            <div className="hf-field" style={{ marginBottom: 12 }}>
              <label className="field-label">Parent's name</label>
              <input className="field" placeholder="e.g. Sandra Bennett" />
            </div>
            <div className="hf-field" style={{ marginBottom: 12 }}>
              <label className="field-label">WhatsApp / phone</label>
              <input className="field" type="tel" placeholder="+1 (555) 123-4567" />
            </div>
            <div style={{ display: "flex", gap: 10, marginBottom: 14 }}>
              <div style={{ flex: 1 }}>
                <label className="field-label">Grade</label>
                <select className="field">
                  {Array.from({length:10},(_,i)=><option key={i}>Grade {i+1}</option>)}
                </select>
              </div>
              <div style={{ flex: 1 }}>
                <label className="field-label">Subject</label>
                <select className="field">
                  {["Math","Science","English","Coding"].map(s=><option key={s}>{s}</option>)}
                </select>
              </div>
            </div>
            <button className="btn btn-pop btn-block btn-lg" onClick={onTrial}>
              Claim your free class<Icon name="arrow-right" />
            </button>
            <p className="hf-trust" style={{ marginTop: 10 }}>
              <Icon name="message-circle" size={14} />We'll WhatsApp you to lock in a time.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}


function App() {
  const [trial, setTrial] = React.useState(false);
  useLucide();
  const open = () => setTrial(true);
  return (
    <div className="site">
      <Nav onTrial={open} />
      <Hero onTrial={open} />
      <TeachingEdge />
      <SubjectsBand onTrial={open} />
      <WhyDifferent />
      <HowItWorks />
      <Tutors onTrial={open} />
      <Countries />
      <Testimonials />
      <WhatsAppReviews />
      <FinalCTA onTrial={open} />
      <Footer />
      {trial && <TrialModal onClose={() => setTrial(false)} />}
    </div>
  );
}

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