/* =========================================================================
   TAXR — Landing / sales page
   ========================================================================= */

/* ---- Animated demo carousel -------------------------------------------- */
function LessonFrame() {
  return (
    <div className="col" style={{ gap: 16, padding: 4 }}>
      <div className="row gap-12"><Badge kind="blue">Module 1 · Lesson 1.1</Badge><span className="mono fs-13 t-dim">6 min read</span></div>
      <h3 className="serif" style={{ fontSize: 22, lineHeight: 1.25 }}>Federal vs State Tax: What's the Difference?</h3>
      <p className="fs-15 t-muted lh-rel">The US runs a <strong>dual tax system</strong> — you pay federal income tax to the IRS <em>and</em> state income tax to your state (unless you live in one of the 9 no-income-tax states).</p>
      <div style={{ background: "var(--surface-2)", borderRadius: 12, padding: "14px 16px" }}>
        <span className="mono fs-12 t-blue" style={{ letterSpacing: ".1em" }}>2024 STANDARD DEDUCTION</span>
        <div className="row gap-24" style={{ marginTop: 10 }}>
          {[["Single", "$14,600"], ["MFJ", "$29,200"], ["HOH", "$21,900"]].map(([k, v]) => (
            <div key={k} className="col" style={{ gap: 2 }}>
              <span className="mono fs-12 t-dim">{k}</span>
              <span className="serif" style={{ fontSize: 20 }}>{v}</span>
            </div>
          ))}
        </div>
      </div>
      <Button arrow size="sm" style={{ alignSelf: "flex-start", pointerEvents: "none" }}>Continue to quick check</Button>
    </div>
  );
}

function QuizFrame() {
  const opts = [["A. 10%", false], ["B. 12%", false], ["C. 22%", true], ["D. 24%", false]];
  return (
    <div className="col" style={{ gap: 14, padding: 4 }}>
      <div className="row spread"><Badge kind="amber">Q3 of 5 · Lesson check</Badge><span className="mono fs-13 t-dim">2 hints left</span></div>
      <p className="fs-16 lh-rel" style={{ fontWeight: 600 }}>A single filer earns $55,000. Which federal bracket applies to income above $47,150?</p>
      <div className="col gap-8">
        {opts.map(([opt, correct]) => (
          <div key={opt} className="card row gap-14" style={{ padding: "11px 16px",
            borderColor: correct ? "var(--green)" : "var(--line)",
            background: correct ? "var(--green-soft)" : "transparent" }}>
            <span className="fs-14" style={{ color: correct ? "var(--green)" : "var(--muted)", fontWeight: correct ? 700 : 400 }}>{opt}</span>
            {correct && <span className="fs-13 t-green" style={{ marginLeft: "auto" }}>✓ Correct</span>}
          </div>
        ))}
      </div>
      <div className="card" style={{ padding: "11px 14px", background: "var(--green-soft)", borderColor: "rgba(70,214,164,0.3)" }}>
        <span className="fs-14" style={{ color: "var(--green)" }}>The 22% bracket starts at $47,150 for single filers in 2024. Nice work.</span>
      </div>
    </div>
  );
}

function DashboardFrame() {
  const mods = [
    { n: 1, t: "How US tax works", pct: 100, done: true },
    { n: 2, t: "Filing status & exemptions", pct: 55, done: false },
    { n: 3, t: "Income — wages & salaries", pct: 0, lock: true },
  ];
  return (
    <div className="col" style={{ gap: 14, padding: 4 }}>
      <div className="row spread" style={{ marginBottom: 4 }}>
        <div><span className="mono fs-12 t-dim" style={{ display: "block", marginBottom: 4 }}>YOUR TRACK</span>
          <span className="serif" style={{ fontSize: 20 }}>Keep going, Alex.</span></div>
        <div className="col center" style={{ gap: 2 }}>
          <span className="serif" style={{ fontSize: 28 }}>38%</span>
          <span className="mono fs-12 t-dim">OVERALL</span>
        </div>
      </div>
      <div className="col gap-10">
        {mods.map((m) => (
          <div key={m.n} className="card" style={{ padding: "12px 16px", opacity: m.lock ? 0.5 : 1 }}>
            <div className="row spread" style={{ marginBottom: m.lock ? 0 : 8, alignItems: "center" }}>
              <div className="row gap-10">
                <span style={{ width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", flex: "none",
                  background: m.done ? "var(--green-soft)" : m.lock ? "rgba(255,255,255,.04)" : "var(--blue-soft)",
                  color: m.done ? "var(--green)" : m.lock ? "var(--dim)" : "var(--blue-bright)", fontSize: 12 }}>
                  {m.done ? "✓" : m.lock ? "🔒" : String(m.n).padStart(2,"0")}
                </span>
                <div className="col" style={{ gap: 1 }}>
                  <span className="fs-14" style={{ fontWeight: 600 }}>M{m.n} — {m.t}</span>
                  <span className="fs-12 t-dim">{m.lock ? "Complete M2 first" : m.done ? "Test passed · 91%" : `${m.pct}% complete`}</span>
                </div>
              </div>
              {m.done && <Badge kind="solid-green">Passed</Badge>}
            </div>
            {!m.lock && <Progress value={m.pct} green={m.done} thin />}
          </div>
        ))}
      </div>
    </div>
  );
}

function DemoCarousel() {
  const tabs = [
    { label: "Lesson", icon: "book", content: <LessonFrame /> },
    { label: "Quiz", icon: "flag", content: <QuizFrame /> },
    { label: "Progress", icon: "grid", content: <DashboardFrame /> },
  ];
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setActive((a) => (a + 1) % tabs.length), 4000);
    return () => clearInterval(t);
  }, [paused]);

  return (
    <div>
      <div className="row gap-8" style={{ marginBottom: 24 }}>
        {tabs.map((tab, i) => (
          <button key={tab.label} onClick={() => { setActive(i); setPaused(true); }}
            className="row gap-8"
            style={{ padding: "8px 18px", borderRadius: 999, fontSize: 14, fontWeight: active === i ? 600 : 400,
              background: active === i ? "var(--blue)" : "var(--surface-2)",
              color: active === i ? "#fff" : "var(--muted)",
              border: "1px solid " + (active === i ? "transparent" : "var(--line)"),
              transition: "all .2s", alignItems: "center", gap: 8 }}>
            <Icon name={tab.icon} size={15} />{tab.label}
          </button>
        ))}
        <div className="row gap-6" style={{ marginLeft: "auto", alignItems: "center" }}>
          {tabs.map((_, i) => (
            <div key={i} style={{ width: i === active ? 18 : 6, height: 6, borderRadius: 3,
              background: i === active ? "var(--blue)" : "var(--line-2)", transition: "all .3s" }} />
          ))}
        </div>
      </div>
      <WindowMock url="taxr.waddl3.com/learn" style={{ maxWidth: 660 }}>
        <div style={{ padding: "22px 26px", minHeight: 320 }}>
          {tabs[active].content}
        </div>
      </WindowMock>
    </div>
  );
}
function LandingNav({ nav }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const sc = () => setSolid(window.scrollY > 20);
    window.addEventListener("scroll", sc);
    return () => window.removeEventListener("scroll", sc);
  }, []);
  const links = ["Course", "How it works", "Pricing", "FAQ"];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50,
      background: solid ? "var(--nav-bg)" : "transparent",
      backdropFilter: solid ? "blur(12px)" : "none",
      borderBottom: "1px solid " + (solid ? "var(--line)" : "transparent"), transition: "all .25s" }}>
      <div className="wrap row spread" style={{ height: 70 }}>
        <div className="row gap-16" style={{ alignItems: "center" }}>
          <a href="https://waddl3.com" className="hide-mobile row gap-6" style={{ alignItems: "center", color: "var(--dim)", fontSize: 13, textDecoration: "none", transition: "color .15s" }}
            onMouseEnter={(e) => e.currentTarget.style.color = "var(--muted)"}
            onMouseLeave={(e) => e.currentTarget.style.color = "var(--dim)"}>
            <span style={{ fontSize: 16 }}>🐧</span><span>waddl3.com</span>
          </a>
          <Logo />
        </div>
        <nav className="row gap-32 fs-15 hide-mobile" style={{ color: "var(--muted)" }}>
          <button onClick={() => nav("product")} style={{ color: "var(--muted)" }}
            onMouseEnter={(e) => (e.target.style.color = "var(--text)")}
            onMouseLeave={(e) => (e.target.style.color = "var(--muted)")}>Product</button>
          {links.map((l) => (
            <a key={l} href={"#" + l.replace(/\s/g, "")} style={{ transition: "color .15s" }}
              onMouseEnter={(e) => (e.target.style.color = "var(--text)")}
              onMouseLeave={(e) => (e.target.style.color = "var(--muted)")}>{l}</a>
          ))}
        </nav>
        <div className="row gap-12" style={{ alignItems: "center" }}>
          <ThemeSwitcher />
          <span className="hide-mobile"><Button variant="quiet" size="sm" onClick={() => nav("auth", { mode: "login" })}>Sign in</Button></span>
          <Button variant="ghost" size="sm" onClick={() => nav("auth", { mode: "signup" })}>Start free</Button>
        </div>
      </div>
    </header>
  );
}

function HeroPreview() {
  return (
    <WindowMock url="taxr.app/learn" style={{ width: "100%" }}>
      <div style={{ padding: 22 }}>
        <div className="row spread" style={{ marginBottom: 18 }}>
          <div className="col" style={{ gap: 3 }}>
            <span style={{ fontFamily: "var(--serif)", fontWeight: 600, fontSize: 19 }}>Your track</span>
            <span className="mono fs-13 t-dim">PHASE 1 · FOUNDATION</span>
          </div>
          <Badge kind="green" dot>On track</Badge>
        </div>
        <div className="col gap-12">
          {[
            { t: "How the US tax system works", s: "6 lessons · test passed", p: 100, done: true },
            { t: "Filing status & exemptions", s: "Lesson 3 of 5", p: 55 },
            { t: "Income — wages & salaries", s: "Locked", p: 0, lock: true },
          ].map((m, i) => (
            <div key={i} className="card-pad" style={{ background: "var(--surface-2)", border: "1px solid var(--line)", borderRadius: 14, padding: "15px 17px" }}>
              <div className="row spread" style={{ marginBottom: m.lock ? 0 : 11 }}>
                <div className="row gap-12">
                  <span style={{ width: 30, height: 30, borderRadius: 9, display: "grid", placeItems: "center",
                    background: m.done ? "var(--green-soft)" : m.lock ? "rgba(255,255,255,0.04)" : "var(--blue-soft)",
                    color: m.done ? "var(--green)" : m.lock ? "var(--dim)" : "var(--blue-bright)" }}>
                    <Icon name={m.done ? "check" : m.lock ? "lock" : "book"} size={16} />
                  </span>
                  <div className="col">
                    <span className="fs-14" style={{ fontWeight: 600 }}>{m.t}</span>
                    <span className="fs-13 t-dim">{m.s}</span>
                  </div>
                </div>
                {m.done && <Badge kind="solid-green">Done</Badge>}
              </div>
              {!m.lock && <Progress value={m.p} green={m.done} thin />}
            </div>
          ))}
        </div>
      </div>
    </WindowMock>
  );
}

function Section({ id, children, light, style }) {
  return (
    <section id={id} className={"section" + (light ? "" : "")} style={{ background: light ? "var(--light)" : "transparent", color: light ? "var(--on-light)" : "inherit", ...style }}>
      <div className="wrap">{children}</div>
    </section>
  );
}

function Landing({ nav }) {
  const D = window.TAXR;
  const builtFor = ["Career changers", "Bookkeepers leveling up", "Gig & self-employed earners", "Aspiring Enrolled Agents", "Small-firm staff", "Anyone tired of overpaying tax"];
  const features = [
    { i: "book", t: "Plain-English lessons", x: "No jargon walls. Every concept explained the way you'd explain it to a friend — then backed by the real IRS rule." },
    { i: "flag", t: "A test after every module", x: "18 module tests, 70% to pass. You don't move on until it sticks. Retake after a short cooldown, no penalty." },
    { i: "bulb", t: "Pip's hints when you're stuck", x: "Hit a wall on a question? Spend a hint and Pip walks you through it — without just handing you the answer." },
    { i: "cards", t: "Flashcards for recall", x: "Every module ships with flashcards for the terms and numbers that show up on the SEE exam." },
    { i: "shield", t: "Built around real forms", x: "1040, Schedule C, RI-1040 and more — you learn on the documents you'll actually file for clients." },
    { i: "trophy", t: "All the way to the EA", x: "Phase 3 is full SEE exam prep — all three parts, timed mocks, and adaptive weak-spot drilling." },
  ];
  const steps = [
    { t: "Learn the lesson", x: "Short, focused reads. Tables, examples and a recap you can actually remember." },
    { t: "Pass the test", x: "5 questions per lesson, 15 per module. Wrong answers come with a full explanation." },
    { t: "Level up the phase", x: "Clear all six Foundation modules and you've earned your PTIN milestone." },
    { t: "Sit the SEE", x: "Drill with timed mocks until you're exam-ready, then we walk you through registration." },
  ];

  return (
    <div>
      <LandingNav nav={nav} />

      {/* ---------------- hero ---------------- */}
      <div className="grid-tex" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -180, right: -120, width: 560, height: 560, borderRadius: "50%",
          background: "radial-gradient(circle, rgba(58,109,240,0.18), transparent 65%)", pointerEvents: "none" }} />
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 56, alignItems: "center", padding: "76px 32px 96px" }}>
          <div className="fade-up">
            <Badge kind="blue" dot style={{ marginBottom: 24 }}>Waddl3 Pro Tool · Now enrolling</Badge>
            <h1 className="display" style={{ fontSize: 72 }}>
              Become a tax<br />preparer. Then an<br /><span className="it">Enrolled Agent.</span>
            </h1>
            <p className="fs-19 t-muted lh-rel" style={{ maxWidth: 480, marginTop: 26 }}>
              {D.course.sub}
            </p>
            <div className="row gap-12 wrap-flex" style={{ marginTop: 34 }}>
              <Button size="lg" arrow onClick={() => nav("onboarding")}>Start Module 1 free</Button>
              <Button size="lg" variant="ghost" onClick={() => nav("product")}>See it in action</Button>
            </div>
            <p className="mono fs-13 t-dim" style={{ marginTop: 18, letterSpacing: ".04em" }}>
              No card to start · First two lessons free · Tax year {D.course.taxYear}
            </p>
          </div>
          <div className="fade-up" style={{ animationDelay: ".08s" }}><HeroPreview /></div>
        </div>
      </div>

      {/* ---------------- stat strip ---------------- */}
      <div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
        <div className="wrap row stat-strip" style={{ padding: "30px 32px", gap: 0 }}>
          {[["3", "Phases"], ["18", "Modules"], ["94", "Lessons"], ["18", "Module tests"], ["EA", "End goal"]].map((s, i) => (
            <React.Fragment key={i}>
              {i > 0 && <div className="vr" style={{ margin: "0 auto" }} />}
              <div className="stat col center" style={{ flex: 1, textAlign: "center" }}>
                <span className="num" style={{ color: s[0] === "EA" ? "var(--green)" : "var(--text)" }}>{s[0]}</span>
                <span className="lab">{s[1]}</span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* ---------------- built for ---------------- */}
      <Section style={{ paddingBottom: 0 }}>
        <Eyebrow style={{ marginBottom: 20 }}>Built for</Eyebrow>
        <div className="row gap-12 wrap-flex">
          {builtFor.map((b) => <span key={b} className="chip">{b}</span>)}
        </div>
      </Section>

      {/* ---------------- features ---------------- */}
      <Section id="Course">
        <div style={{ maxWidth: 640, marginBottom: 52 }}>
          <Eyebrow style={{ marginBottom: 16 }}>Why Taxr</Eyebrow>
          <h2 className="display" style={{ fontSize: 46 }}>Tax, taught like it <span className="it">finally makes sense.</span></h2>
          <p className="fs-17 t-muted lh-rel" style={{ marginTop: 18 }}>
            Most tax courses read like the tax code itself. Taxr is the opposite — short lessons, real examples, and a test that proves it stuck before you move on.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {features.map((f) => (
            <div key={f.t} className="card card-hover card-pad">
              <span style={{ width: 44, height: 44, borderRadius: 12, display: "grid", placeItems: "center",
                background: "var(--blue-soft)", color: "var(--blue-bright)", marginBottom: 18 }}>
                <Icon name={f.i} size={21} />
              </span>
              <h3 className="serif" style={{ fontSize: 21, marginBottom: 9 }}>{f.t}</h3>
              <p className="fs-15 t-muted lh-rel">{f.x}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* ---------------- how it works ---------------- */}
      <Section id="Howitworks" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="row spread" style={{ alignItems: "flex-end", marginBottom: 48 }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow style={{ marginBottom: 16 }}>How it works</Eyebrow>
            <h2 className="display" style={{ fontSize: 46 }}>Four steps, <span className="it">repeated until you're ready.</span></h2>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }}>
          {steps.map((s, i) => (
            <div key={i} className="col" style={{ gap: 16 }}>
              <div className="row gap-12" style={{ alignItems: "center" }}>
                <span className="stepno">{String(i + 1).padStart(2, "0")}</span>
                {i < 3 && <div style={{ flex: 1, height: 1, background: "var(--line)" }} />}
              </div>
              <h3 className="serif" style={{ fontSize: 20 }}>{s.t}</h3>
              <p className="fs-15 t-muted lh-rel">{s.x}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* ---------------- live demo ---------------- */}
      <Section id="Demo">
        <div style={{ maxWidth: 600, marginBottom: 40 }}>
          <Eyebrow style={{ marginBottom: 16 }}>See it in action</Eyebrow>
          <h2 className="display" style={{ fontSize: 44 }}>A real lesson. <span className="it">Right here.</span></h2>
          <p className="fs-17 t-muted lh-rel" style={{ marginTop: 14 }}>
            Every screen in the full course works exactly like this. Short read, quick check, instant feedback.
          </p>
        </div>
        <DemoCarousel />
      </Section>

      {/* ---------------- curriculum ---------------- */}
      <Section>
        <div style={{ maxWidth: 640, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 16 }}>The curriculum</Eyebrow>
          <h2 className="display" style={{ fontSize: 46 }}>Three phases. <span className="it">One clear path.</span></h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {D.phases.map((ph) => (
            <div key={ph.id} className="card card-pad" style={{ display: "flex", flexDirection: "column" }}>
              <div className="row spread" style={{ marginBottom: 14 }}>
                <span className="mono fs-13 t-blue" style={{ letterSpacing: ".14em" }}>PHASE {ph.n}</span>
                <span className="mono fs-13 t-dim">{ph.modules.length} modules</span>
              </div>
              <h3 className="serif" style={{ fontSize: 24, marginBottom: 6 }}>{ph.name}</h3>
              <p className="fs-14 t-muted" style={{ marginBottom: 18 }}>{ph.arc}</p>
              <div className="col" style={{ gap: 10, flex: 1 }}>
                {ph.modules.slice(0, 6).map((m) => (
                  <div key={m.id} className="row gap-12" style={{ alignItems: "baseline" }}>
                    <span className="mono fs-13 t-dim" style={{ width: 22, flex: "none" }}>{String(m.n).padStart(2, "0")}</span>
                    <span className="fs-14" style={{ color: "var(--text)" }}>{m.title}</span>
                  </div>
                ))}
              </div>
              <div className="row gap-8" style={{ marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--line)", color: "var(--green)" }}>
                <Icon name="flag" size={15} />
                <span className="fs-13" style={{ color: "var(--muted)" }}>{ph.milestone.split("—")[0].trim()}</span>
              </div>
            </div>
          ))}
        </div>
      </Section>

      {/* ---------------- Pip band ---------------- */}
      <Section style={{ paddingTop: 0 }}>
        <div className="card card-pad grid-lines" style={{ padding: "44px 48px", display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center" }}>
          <span style={{ fontSize: 64, lineHeight: 1 }}>🐧</span>
          <div>
            <p className="serif-it t-peri" style={{ fontSize: 15, marginBottom: 8 }}>Hi, I'm Pip <span className="mono" style={{ fontSize: 12, letterSpacing: ".04em", color: "var(--dim)", fontStyle: "normal" }}>— Performance Improvement Penguin.</span></p>
            <p className="display" style={{ fontSize: 30, lineHeight: 1.15 }}>
              "I'll be with you the whole way — nudging you when you're stuck, cheering when you pass, and never letting tax feel cold."
            </p>
          </div>
        </div>
      </Section>

      {/* ---------------- pricing ---------------- */}
      <Pricing nav={nav} />

      {/* ---------------- faq ---------------- */}
      <FAQ />

      {/* ---------------- final CTA ---------------- */}
      <div className="grid-tex" style={{ borderTop: "1px solid var(--line)", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", bottom: -200, left: "50%", transform: "translateX(-50%)", width: 700, height: 400,
          background: "radial-gradient(circle, rgba(58,109,240,0.16), transparent 65%)", pointerEvents: "none" }} />
        <div className="wrap col center" style={{ padding: "100px 32px", textAlign: "center" }}>
          <h2 className="display" style={{ fontSize: 56, maxWidth: 760 }}>Your first two lessons are <span className="it">on the house.</span></h2>
          <p className="fs-19 t-muted" style={{ marginTop: 20, maxWidth: 520 }}>Start Module 1 right now. No card, no account — see if Taxr clicks for you before you pay a cent.</p>
          <div className="row gap-12" style={{ marginTop: 32 }}>
            <Button size="lg" arrow onClick={() => nav("onboarding")}>Start learning free</Button>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

/* ----------------------------------------------------------------- Pricing */
function Pricing({ nav }) {
  const D = window.TAXR;
  return (
    <Section id="Pricing" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="col center" style={{ textAlign: "center", marginBottom: 52 }}>
        <Eyebrow style={{ marginBottom: 16 }}>Pricing</Eyebrow>
        <h2 className="display" style={{ fontSize: 48 }}>Simple. <span className="it">No subscription.</span></h2>
        <p className="fs-17 t-muted" style={{ marginTop: 16, maxWidth: 480 }}>Buy the whole course once, or pick up single modules. Either way you own it — no monthly fee, ever.</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, maxWidth: 860, margin: "0 auto" }}>
        {/* full course */}
        <div className="card card-pad" style={{ borderColor: "rgba(58,109,240,0.5)", padding: 34, position: "relative", overflow: "hidden" }}>
          <Badge kind="blue" style={{ position: "absolute", top: 22, right: 22 }}>Best value</Badge>
          <span className="mono fs-13 t-dim upper">Full course</span>
          <div className="row" style={{ alignItems: "baseline", gap: 8, margin: "12px 0 4px" }}>
            <span className="serif" style={{ fontSize: 56, lineHeight: 1 }}>$39</span>
            <span className="t-muted fs-15">one-time</span>
          </div>
          <p className="fs-14 t-muted" style={{ marginBottom: 22 }}>All 18 modules, every test & flashcard, all the way to EA exam prep.</p>
          <div className="col gap-12" style={{ marginBottom: 26 }}>
            {["All 3 phases · 94 lessons", "18 module tests + practice exams", "Flashcards for every module", "Lifetime access · free content updates", "10 starter hints included"].map((f) => (
              <div key={f} className="row gap-12"><Icon name="check" size={17} style={{ color: "var(--green)", flex: "none" }} /><span className="fs-15">{f}</span></div>
            ))}
          </div>
          <Button block size="lg" arrow onClick={() => nav("auth", { mode: "signup", plan: "full" })}>Get the full course</Button>
        </div>

        {/* per module */}
        <div className="card card-pad" style={{ padding: 34 }}>
          <span className="mono fs-13 t-dim upper">Per module</span>
          <div className="row" style={{ alignItems: "baseline", gap: 8, margin: "12px 0 4px" }}>
            <span className="serif" style={{ fontSize: 56, lineHeight: 1 }}>$14.99</span>
            <span className="t-muted fs-15">each</span>
          </div>
          <p className="fs-14 t-muted" style={{ marginBottom: 22 }}>Just need one topic? Buy any single module and keep it forever.</p>
          <div className="col gap-12" style={{ marginBottom: 26 }}>
            {["Every lesson in that module", "The module test + flashcards", "Lifetime access to what you buy", "Upgrade to full course anytime"].map((f) => (
              <div key={f} className="row gap-12"><Icon name="check" size={17} style={{ color: "var(--green)", flex: "none" }} /><span className="fs-15">{f}</span></div>
            ))}
          </div>
          <Button block size="lg" variant="ghost" onClick={() => nav("dashboard")}>Browse modules</Button>
        </div>
      </div>

      {/* hint packs */}
      <div className="card card-pad" style={{ maxWidth: 860, margin: "20px auto 0", display: "grid", gridTemplateColumns: "1fr auto auto", gap: 18, alignItems: "center", background: "var(--surface)" }}>
        <div className="row gap-16">
          <span style={{ width: 46, height: 46, borderRadius: 12, display: "grid", placeItems: "center", background: "var(--amber-soft)", color: "var(--amber)" }}><Icon name="fish" size={22} /></span>
          <div className="col">
            <span className="serif" style={{ fontSize: 19 }}>Hint packs</span>
            <span className="fs-14 t-muted">Stuck on a tricky question? Spend a hint, get a nudge from Pip.</span>
          </div>
        </div>
        {D.pricing.hintPacks.map((p) => (
          <button key={p.id} className="card card-hover" onClick={() => nav("auth", { mode: "signup" })}
            style={{ padding: "14px 20px", textAlign: "center", borderColor: p.best ? "rgba(231,179,92,0.4)" : "var(--line)" }}>
            <div className="row gap-8 center" style={{ color: "var(--amber)" }}><Icon name="fish" size={15} /><span className="serif" style={{ fontSize: 22, color: "var(--text)" }}>{p.count}</span></div>
            <div className="fs-14 t-muted" style={{ marginTop: 2 }}>${p.price}{p.best && " · best value"}</div>
          </button>
        ))}
      </div>

      <div style={{ maxWidth: 860, margin: "22px auto 0" }}><DisclaimerBand variant="inline" /></div>
    </Section>
  );
}

/* --------------------------------------------------------------------- FAQ */
function FAQ() {
  const items = [
    { q: "Do I need any background in tax or accounting?", a: "None at all. Phase 1 assumes zero knowledge — it starts with what tax even is and builds from there. By the end you're preparing real returns." },
    { q: "What's actually free?", a: "The first two lessons of Module 1, in full, with no account or card. That's roughly 30% of the opening module — enough to know if Taxr works for the way you learn." },
    { q: "Is this an official IRS or EA certification?", a: "Taxr is exam prep and training, not the credential itself. We take you all the way to exam-ready and walk you through registering for the IRS Special Enrollment Examination (SEE), which is the official path to the EA." },
    { q: "What are hints?", a: "When a test question stumps you, you can spend a hint to have Pip explain the concept — without just revealing the answer. Every plan includes some, and you can top up with hint packs." },
    { q: "One-time or subscription?", a: "One-time. Buy the full course ($39) or any single module ($14.99) and you own it for good, including free content updates each tax year." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <Section id="FAQ">
      <div style={{ display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: 48 }}>
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>FAQ</Eyebrow>
          <h2 className="display" style={{ fontSize: 42 }}>Common <span className="it">questions.</span></h2>
        </div>
        <div className="col">
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: "1px solid var(--line)" }}>
              <button className="row spread" onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: "100%", padding: "22px 0", textAlign: "left", gap: 20 }}>
                <span className="serif" style={{ fontSize: 20 }}>{it.q}</span>
                <Icon name={open === i ? "chevd" : "chev"} size={20} style={{ color: "var(--dim)", flex: "none" }} />
              </button>
              {open === i && <p className="fs-16 t-muted lh-rel" style={{ paddingBottom: 24, maxWidth: 620 }}>{it.a}</p>}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

/* ------------------------------------------------------------------ Footer */
function Footer() {
  return (
    <footer style={{ borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
      <div className="wrap row spread" style={{ padding: "40px 32px", alignItems: "flex-start" }}>
        <div className="col gap-12" style={{ maxWidth: 280 }}>
          <Logo />
          <p className="fs-14 t-dim">A Waddl3 Pro Tool. Apps, tools and software built for real people.</p>
        </div>
        <div className="row gap-32 fs-14 t-muted">
          <div className="col gap-12">
            <span className="mono fs-13 t-dim upper">Course</span>
            <a href="#Course">Curriculum</a><a href="#Pricing">Pricing</a><a href="#FAQ">FAQ</a>
          </div>
          <div className="col gap-12">
            <span className="mono fs-13 t-dim upper">Waddl3</span>
            <span>GigFarmr</span><span>Learnr</span><span>Penguin Packs</span>
          </div>
        </div>
      </div>
      <div className="wrap" style={{ padding: "0 32px 32px" }}>
        <div className="hr" style={{ marginBottom: 20 }} />
        <p className="mono fs-13 t-dim">© 2026 Waddl3 · Taxr is exam prep & training, not the EA credential itself. Always confirm current figures with the IRS.</p>
      </div>
    </footer>
  );
}

Object.assign(window, { Landing, Pricing });