// pages/landing.jsx — public homepage

const { useState: useS_L, useMemo: useM_L } = React;

function LandingPage({ go }) {
  const [openFaq, setOpenFaq] = useS_L(0);

  return (
    <>
      <Navbar go={go} />

      {/* ── Hero ────────────────────────────────────────────── */}
      <section style={{ padding: "80px 0 120px", background: "var(--white)" }}>
        <div className="container">
          <HeroCentered go={go} />
        </div>
      </section>

      {/* ── Social proof bar ───────────────────────────────── */}
      <section style={{ background: "var(--ink)", color: "#fff", padding: "48px 0" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
          <SocialStat n={420} suffix="+" label="ICSE & ISC students taught" />
          <SocialStat n={94}  suffix="%" label="Scored above 90 in boards" />
          <SocialStat n={20}  suffix="yrs" label="Teaching experience" />
          <SocialStat n={2}   suffix="" label="Courses · ICSE X & ISC XII" />
        </div>
      </section>

      {/* ── Past results ────────────────────────────────────── */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <SectionHead
            eyebrow="Results that speak"
            title="Last three board sessions, scored."
            sub="Every score below is a verified ICSE or ISC board result of a student who studied with Computer-tution."
          />
          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16 }}>
            {RESULTS.map((r) => (
              <div key={r.name} className="card" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 38, fontWeight: 600, color: "var(--blue)", letterSpacing: "-0.02em" }}>
                  {r.score}<span style={{ fontSize: 18, color: "var(--ink-3)" }}>/100</span>
                </div>
                <div style={{ fontWeight: 600 }}>{r.name}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em", textTransform: "uppercase", marginTop: 4 }}>
                  {r.board} {r.year} — {r.score}/100
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── About teacher ───────────────────────────────────── */}
      <section className="section" style={{ background: "var(--white)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "center" }}>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
            <div
              aria-label="Teacher avatar"
              style={{
                width: "min(100%, 380px)",
                aspectRatio: "1 / 1",
                borderRadius: "50%",
                background: "var(--blue-50)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "var(--blue)",
              }}
            >
              <svg viewBox="0 0 24 24" width="55%" height="55%" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <circle cx="12" cy="8" r="4" />
                <path d="M4 21c0-4 4-7 8-7s8 3 8 7" />
              </svg>
            </div>
          </div>
          <div>
            <div className="eyebrow">Your teacher</div>
            <h2 style={{ marginTop: 16, marginBottom: 24 }}>M L Revathi.<br/>20 years of teaching. 10 of them spent only on ICSE & ISC.</h2>
            <p style={{ fontSize: 18, color: "var(--ink-2)", maxWidth: 580, lineHeight: 1.55 }}>
              Revathi spent her first decade teaching Computer Science at the college level — the kind of depth most school teachers never get to. The next ten years she devoted entirely to ICSE Class 10 and ISC Class 12 students. Two boards, two age groups, one quiet expertise.
            </p>
            <p style={{ fontSize: 17, color: "var(--ink-2)", maxWidth: 580, marginTop: 16, lineHeight: 1.55 }}>
              That mix matters. The college years mean she answers the "but why does this work?" questions a board syllabus skims over. The school years mean she knows, line by line, what an ICSE or ISC examiner is looking for — and what they aren't.
            </p>
            <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16, maxWidth: 560 }}>
              <CredCard top="MCA" bottom="Postgraduate in Computer Applications — she teaches what she formally mastered." />
              <CredCard top="MPhil" bottom="Research training in the discipline she teaches." />
              <CredCard top="B.Ed" bottom="A trained educator, not just a subject expert." />
              <CredCard top="BSc" bottom="Foundation in the sciences." />
            </div>
            <div className="row gap-16" style={{ marginTop: 32, color: "var(--ink-3)", fontSize: 13, fontFamily: "var(--font-mono)", letterSpacing: "0.04em", textTransform: "uppercase" }}>
              <span>20 yrs teaching</span>
              <span>·</span>
              <span>10 yrs college-level CS</span>
              <span>·</span>
              <span>10 yrs ICSE + ISC only</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── How it works ────────────────────────────────────── */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <SectionHead eyebrow="How it works" title="Three steps. That's the whole thing." />
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            <StepCard n="01" title="Enrol" desc="Pick your course — ICSE Class 10 Computer Applications or ISC Class 12 Computer Science. Pay ₹1800/month via Razorpay. Activated instantly." />
            <StepCard n="02" title="Attend live"  desc="Two 90-min Zoom classes a week — Mon/Thu for ISC Class 12, Tue/Fri for ICSE Class 10. Ask doubts as we go." />
            <StepCard n="03" title="Catch up"     desc="Missed a class? Every session is recorded and uploaded within 24 hours. Re-watch right up to your ICSE or ISC board exam." />
          </div>
        </div>
      </section>

      {/* ── Testimonials ────────────────────────────────────── */}
      <section className="section" style={{ background: "var(--white)" }}>
        <div className="container">
          <SectionHead
            eyebrow="What students say"
            title="In their words."
          />
          <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
            {TESTIMONIALS.slice(0, 6).map((t, i) => (
              <div key={i} className="card" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--blue)", letterSpacing: "0.04em" }}>
                  ★★★★★
                </div>
                <p style={{ fontSize: 16, color: "var(--ink)", lineHeight: 1.55 }}>"{t.quote}"</p>
                <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 12, paddingTop: 16, borderTop: "1px solid var(--line-2)" }}>
                  <div
                    aria-hidden="true"
                    style={{
                      width: 44,
                      height: 44,
                      flexShrink: 0,
                      borderRadius: "50%",
                      background: "var(--blue-50)",
                      color: "var(--blue)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      fontWeight: 600,
                      fontSize: 16,
                      letterSpacing: "-0.01em",
                    }}
                  >
                    {t.name.trim().charAt(0).toUpperCase()}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                    <div className="muted" style={{ fontSize: 12 }}>{t.board} {t.year} — {t.score}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── Pricing (two course cards) ──────────────────────── */}
      <section className="section" style={{ background: "var(--paper)" }}>
        <div className="container">
          <SectionHead eyebrow="Pricing" title="Two courses. One flat price." sub="₹1,800 per month, per course. No tiers, no upsells, no surprise expiries." />

          <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, maxWidth: 960, marginLeft: "auto", marginRight: "auto" }}>
            <CourseCard
              go={go}
              board="ICSE"
              klass="Class 10"
              title="Computer Applications"
              tagline="The Java/BlueJ ICSE Class 10 syllabus, taught for the board paper."
              code="ICSE-X"
              schedule="Tue & Fri · 6:00–7:30 PM IST"
              accent="orange"
              perks={[
                "Two 90-min live classes per week",
                "All recordings, 24 hrs after class",
                "ICSE-format mock papers",
                "Project review (logic + docs)",
                "WhatsApp doubt channel",
              ]}
            />
            <CourseCard
              go={go}
              board="ISC"
              klass="Class 12"
              title="Computer Science"
              tagline="ISC Class 12 Java syllabus +  full  ISC-format mocks  before boards."
              code="ISC-XII"
              schedule="Mon & Thu · 7:00–8:30 PM IST"
              accent="blue"
              featured
              perks={[
                "Two 90-min live classes per week",
                "All recordings, 24 hrs after class",
                " ISC mock papers",
                "Pre-board strategy session",
                "WhatsApp doubt channel",
              ]}
            />
          </div>
          <div style={{ textAlign: "center", marginTop: 24, fontSize: 13, color: "var(--ink-3)" }}>
            Secure payment via Razorpay · UPI, Cards, Net Banking · Cancel anytime
          </div>
        </div>
      </section>

      {/* ── Free preview CTA banner ─────────────────────────── */}
      <section style={{ padding: "80px 0", background: "var(--blue)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div className="container row between center" style={{ position: "relative", zIndex: 1, flexWrap: "wrap", gap: 24 }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,.7)", marginBottom: 12 }}>Try before you enrol</div>
            <h2 style={{ color: "#fff", maxWidth: 720 }}>One chapter from ICSE Class 10. One from ISC Class 12. No card. No account.</h2>
          </div>
          <button className="btn btn-lg" style={{ background: "#fff", color: "var(--blue)" }} onClick={() => go("/preview")}>
            Watch free preview <Icon name="arrow-right" size={18}/>
          </button>
        </div>
        {/* decorative grid */}
        <div aria-hidden style={{ position: "absolute", inset: 0, opacity: 0.08, backgroundImage: "linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px)", backgroundSize: "48px 48px" }}/>
      </section>

      {/* ── FAQ ─────────────────────────────────────────────── */}
      <section className="section" style={{ background: "var(--white)" }}>
        <div className="container-narrow">
          <SectionHead eyebrow="FAQ" title="The honest questions." />
          <div style={{ marginTop: 40, borderTop: "1px solid var(--line)" }}>
            {FAQS.map((f, i) => (
              <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
                <button
                  onClick={() => setOpenFaq(openFaq === i ? -1 : i)}
                  style={{
                    width: "100%", padding: "24px 0", background: "transparent", border: 0, textAlign: "left",
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16,
                    fontFamily: "inherit", fontSize: 18, fontWeight: 600, color: "var(--ink)",
                  }}>
                  <span>{f.q}</span>
                  <span style={{ flexShrink: 0, transition: "transform .2s", transform: openFaq===i ? "rotate(45deg)" : "rotate(0)" }}>
                    <Icon name="plus" size={20} />
                  </span>
                </button>
                {openFaq === i && (
                  <div style={{ paddingBottom: 24, color: "var(--ink-2)", fontSize: 16, lineHeight: 1.6, maxWidth: 640 }}>
                    {f.a}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer go={go} />
    </>
  );
}

// ────────────────── Hero ──────────────────
function HeroCentered({ go }) {
  return (
    <div style={{ textAlign: "center", maxWidth: 880, margin: "0 auto" }}>
      <div className="pill pill-mono" style={{ marginBottom: 28 }}>
        <span className="dot dot-green" /> Aug 2025 · ICSE X + ISC XII batches open
      </div>
      <h1 style={{ marginBottom: 28 }}>
        ICSE Class 10 & ISC Class 12.<br/>
        <span style={{ color: "var(--blue)" }}>Java, live, recorded, done right.</span>
      </h1>
      <p style={{ fontSize: 20, color: "var(--ink-2)", maxWidth: 640, margin: "0 auto 40px" }}>
        Online classes by M L Revathi for ICSE Computer Applications (Class 10) and ISC Computer Science (Class 12). OOP, recursion, data structures — taught with patience and worked board-pattern examples.
      </p>
      <div className="row gap-12" style={{ justifyContent: "center" }}>
        <button className="btn btn-primary btn-lg" onClick={() => go("/preview")}>Watch free preview <Icon name="arrow-right" size={18}/></button>
        <button className="btn btn-secondary btn-lg" onClick={() => go("/signup")}>Enrol — ₹1800/mo</button>
      </div>
    </div>
  );
}

// ────────────────── Pricing course card ──────────────────
function CourseCard({ go, board, klass, title, tagline, code, schedule, perks, featured, accent }) {
  const isBlue = accent === "blue";
  return (
    <div className="card" style={{
      padding: 32,
      borderRadius: 20,
      borderWidth: featured ? 2 : 1,
      borderColor: featured ? "var(--blue)" : "var(--line)",
      background: "#fff",
      position: "relative",
      display: "flex",
      flexDirection: "column",
      gap: 0,
      boxShadow: featured ? "var(--shadow-lg)" : "none",
    }}>
      <div className="row between center" style={{ marginBottom: 16 }}>
        <span className="pill pill-mono">{code}</span>
        {featured && <span className="pill" style={{ background: "var(--blue)", color: "#fff" }}>Most enrolled</span>}
      </div>
      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
        {board} · {klass}
      </div>
      <h3 style={{ marginTop: 8, fontSize: 26 }}>{title}</h3>
      <p className="muted" style={{ marginTop: 8, fontSize: 14, lineHeight: 1.5 }}>{tagline}</p>

      <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line-2)", display: "flex", alignItems: "baseline", gap: 6 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 44, fontWeight: 600, color: "var(--ink)", letterSpacing: "-0.02em" }}>₹1,800</span>
        <span className="muted" style={{ fontSize: 14 }}>/month</span>
      </div>
      <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{schedule}</div>

      <div style={{ marginTop: 20 }}>
        {perks.map((f) => (
          <div key={f} className="row gap-12 center" style={{ padding: "6px 0", alignItems: "flex-start" }}>
            <span style={{ color: "var(--blue)", marginTop: 2 }}><Icon name="check" size={16} stroke={2.5}/></span>
            <span style={{ fontSize: 14, color: "var(--ink-2)" }}>{f}</span>
          </div>
        ))}
      </div>

      <button
        className={featured ? "btn btn-primary btn-lg btn-block" : "btn btn-secondary btn-lg btn-block"}
        style={{ marginTop: 24 }}
        onClick={() => go("/signup")}
      >
        Enrol in {code} <Icon name="arrow-right" size={16}/>
      </button>
    </div>
  );
}

// ────────────────── Bits ──────────────────
const SectionHead = ({ eyebrow, title, sub }) => (
  <div style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
    {eyebrow && <div className="eyebrow">{eyebrow}</div>}
    <h2 style={{ marginTop: 12 }}>{title}</h2>
    {sub && <p style={{ marginTop: 16, color: "var(--ink-2)", fontSize: 18 }}>{sub}</p>}
  </div>
);

const SocialStat = ({ n, suffix, label }) => (
  <div>
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 48, fontWeight: 600, color: "#fff", letterSpacing: "-0.02em", lineHeight: 1 }}>
      <Counter value={n}/>{suffix}
    </div>
    <div style={{ fontSize: 14, color: "rgba(255,255,255,.6)", marginTop: 8 }}>{label}</div>
  </div>
);

const Stat = ({ top, bottom }) => (
  <div>
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, color: "var(--blue)", fontWeight: 600 }}>{top}</div>
    <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>{bottom}</div>
  </div>
);

const CredCard = ({ top, bottom }) => (
  <div style={{ padding: "16px 18px", border: "1px solid var(--line)", borderRadius: 12, background: "var(--paper)" }}>
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 18, color: "var(--blue)", fontWeight: 600, letterSpacing: "-0.01em" }}>{top}</div>
    <div className="muted" style={{ fontSize: 13, marginTop: 6, lineHeight: 1.45 }}>{bottom}</div>
  </div>
);

const MiniProof = ({ icon, text }) => (
  <div className="row center gap-8" style={{ color: "var(--ink-2)", fontSize: 14 }}>
    <span style={{ color: "var(--blue)" }}><Icon name={icon} size={16} stroke={2.5}/></span> {text}
  </div>
);

const StepCard = ({ n, title, desc }) => (
  <div className="card" style={{ padding: 32, display: "flex", flexDirection: "column", gap: 16 }}>
    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--blue)", letterSpacing: "0.08em" }}>{n}</div>
    <h3>{title}</h3>
    <p className="muted" style={{ fontSize: 15 }}>{desc}</p>
  </div>
);

window.LandingPage = LandingPage;
