/* VA Classes, About page (founder story). Reuses shared Nav/Footer/TrialModal/Logo/Icon. */

function AboutHero() {
  return (
    <header className="section about-hero" id="top">
      <div className="wrap">
        <p className="eyebrow">Our story</p>
        <h1>On a mission to help every child <span className="mark-yellow">truly understand</span>.</h1>
        <p className="lead">VA Classes was not built from a business plan. It grew from a genuine passion for teaching and a belief that every child deserves one patient, dedicated person in their corner.</p>
      </div>
    </header>
  );
}

function Story() {
  const sectionRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const proseRef = React.useRef(null);

  React.useEffect(() => {
    const section = sectionRef.current;
    const card = cardRef.current;
    if (!section || !card) return;

    const NAV_H = 72;
    let fixedLeft = 0;
    let fixedWidth = 0;

    const resetCard = () => {
      card.style.position = "";
      card.style.top = "";
      card.style.left = "";
      card.style.bottom = "";
      card.style.width = "";
    };

    // Capture wrapper geometry ONCE (before card is fixed)
    const captureGeometry = () => {
      if (window.innerWidth <= 900) { resetCard(); return; }
      // Reset to relative first to get true layout position
      card.style.position = "relative";
      card.style.left = "";
      card.style.width = "";
      const wr = card.parentElement.getBoundingClientRect();
      fixedLeft = wr.left;
      fixedWidth = wr.width;
    };

    captureGeometry();
    window.addEventListener("resize", captureGeometry, { passive: true });

    const onScroll = () => {
      // Skip sticky logic on mobile
      if (window.innerWidth <= 900) { resetCard(); return; }

      const sr = section.getBoundingClientRect();
      const cardH = card.offsetHeight;

      if (sr.top <= NAV_H && sr.bottom > cardH + NAV_H + 16) {
        card.style.position = "fixed";
        card.style.top = (NAV_H + 16) + "px";
        card.style.left = fixedLeft + "px";
        card.style.width = fixedWidth + "px";
        card.style.bottom = "";
      } else if (sr.bottom <= cardH + NAV_H + 16) {
        card.style.position = "absolute";
        card.style.top = "auto";
        card.style.bottom = "0";
        card.style.left = "0";
        card.style.width = "100%";
      } else {
        card.style.position = "relative";
        card.style.top = "";
        card.style.left = "";
        card.style.bottom = "";
        card.style.width = "";
      }
    };

    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", captureGeometry);
    };
  }, []);

  return (
    <section className="section" style={{ paddingTop: 0, position: "relative" }} ref={sectionRef}>
      <div className="wrap story">
        <div style={{ position: "relative" }}>
          <div className="founder-card" ref={cardRef} style={{ position: "relative" }}>
            <div className="ph"><img src="assets/founder.png" alt="Varun Bajpai, Founder of VA Classes" loading="lazy" width="600" height="360" /></div>
            <div className="cap">
              <div className="nm">Varun Bajpai</div>
              <div className="role">Founder, VA Classes</div>
            </div>
          </div>
        </div>
        <div className="prose" ref={proseRef}>
          <h2>How it all started</h2>
          <p>VA Classes was never meant to become a company. It began with a simple realization during my college years. I genuinely loved helping people learn.</p>

          <p>My name is Varun Bajpai, and I graduated with a degree in Engineering. Like many students, I spent countless nights preparing for semester exams with friends and colleagues. The night before an exam was usually chaotic. Everyone was stressed, overwhelmed, and trying to understand weeks of material in just a few hours.</p>

          <p>What surprised me was that I always found myself in a different role. While others were memorizing formulas, I was explaining them. Whenever my colleagues got stuck on a difficult topic, I would break it down into simpler ideas, use examples they could relate to, and help them connect the dots. What seemed complicated suddenly became understandable. And I loved doing it.</p>

          <p>I still remember the feeling when someone would stop halfway through an explanation and say, <em>"Wait, that's actually easy."</em> Those moments stayed with me. I realized that teaching wasn't just something I was good at. It was something I genuinely enjoyed.</p>

          <blockquote className="pull-quote">"I discovered that my favorite part of learning wasn't passing exams. It was helping someone else understand something they thought they never could."</blockquote>

          <p>After graduation, I followed the traditional path and started my professional career. But teaching never left me. I continued helping students after work, during weekends, and whenever I could find the time. What started as helping one student soon became helping several.</p>

          <p>As I worked with more children, I noticed something important. Most students weren't struggling because they lacked ability. They were struggling because nobody had taken the time to teach them in a way that made sense to them.</p>

          <p><span className="mark-yellow">Every child learns differently.</span> Some need more examples. Some need more patience. Some simply need someone who will slow down, listen carefully, and find the exact point where confusion began. When that happens, confidence returns remarkably quickly.</p>

          <p>One student became two. Two became ten. Parents began referring other families. And eventually, I faced a decision. Should teaching remain something I did on the side, or should I dedicate myself fully to helping students succeed?</p>

          <p>I chose the second option. I left my job and founded VA Classes. Not because I wanted to build a large tutoring company, but because I wanted to build the kind of learning experience I wished every child could have.</p>

          <p>Today, VA Classes provides live one-on-one online tutoring in Math, Science, English, and Coding for students <span className="mark-yellow">across Canada</span>. From the beginning, I knew one thing. The quality of a child's tutor matters more than anything else. That's why we never focused on building a huge network of instructors. Instead, we built a carefully selected team of educators who genuinely care about teaching and student success. Every tutor is chosen not only for their subject expertise but for their ability to connect with children, explain concepts clearly, and build confidence.</p>

          <blockquote className="pull-quote">"The standard is simple. Would I trust this tutor with my own child? If the answer isn't yes, they don't join our team."</blockquote>

          <p>We will never be the biggest tutoring company, and that's intentional. We prefer staying focused on what matters most: giving every student the attention, support, and guidance they deserve. Because one child who truly understands a concept is worth more than a hundred students who simply memorized it. That belief is how VA Classes started, and it's the belief that continues to guide us today.</p>

          <div className="sign">Varun Bajpai<small>Founder · VA Classes</small></div>
        </div>
      </div>
    </section>
  );
}

function AboutStats() {
  const stats = [
    { n: "8 years", l: "Teaching experience" },
    { n: "1-on-1", l: "Every single class" },
    { n: "4 subjects", l: "Math · Science · English · Coding" },
    { n: "Canada", l: "Families we serve" },
  ];
  return (
    <section className="band">
      <div className="wrap band-in">
        {stats.map(s => <div className="stat" key={s.l}><div className="n">{s.n}</div><div className="l">{s.l}</div></div>)}
      </div>
    </section>
  );
}

function Values() {
  const vals = [
    { ic: "user-round", t: "One-on-one, always", d: "No crowded classes. Every session is your child and their tutor, full attention, every minute." },
    { ic: "heart-handshake", t: "Tutors who care", d: "We hire for patience and warmth first. Our tutors are mentors, not just subject experts." },
    { ic: "trending-up", t: "Progress you can see", d: "Weekly reports and honest feedback, so you always know exactly how your child is doing." },
  ];
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="sec-head">
          <p className="eyebrow">What we believe</p>
          <h2>The things we won't compromise on</h2>
        </div>
        <div className="values">
          {vals.map(v => (
            <div className="value" key={v.t}>
              <div className="v-ic"><Icon name={v.ic} size={24} /></div>
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutCTA({ onTrial }) {
  return (
    <section className="cta-band">
      <div className="wrap">
        <h2>Come learn with us.</h2>
        <p>Book a free 1-on-1 trial class and see why families across Canada chose VA Classes.</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="index.html#subjects">Explore subjects</a>
        </div>
      </div>
    </section>
  );
}

function AboutApp() {
  const [trial, setTrial] = React.useState(false);
  useLucide();
  const open = () => setTrial(true);
  return (
    <div className="site">
      <Nav onTrial={open} />
      <AboutHero />
      <Story />
      <AboutStats />
      <Values />
      <AboutCTA onTrial={open} />
      <Footer />
      {trial && <TrialModal onClose={() => setTrial(false)} />}
    </div>
  );
}

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