/* =========================================================================
   TAXR — Product page (GigFarmr-style detail page + embedded live demo)
   Reuses globals from Landing.jsx (Section, HeroPreview, FAQ, Footer, Pricing)
   and Demo.jsx (TryQuestion, ExamPath, DisclaimerBand).
   ========================================================================= */
function ProductNav({ nav }) {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "var(--nav-bg)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap row spread" style={{ height: 70 }}>
        <button onClick={() => nav("landing")}><Logo /></button>
        <nav className="row gap-32 fs-15 hide-mobile" style={{ color: "var(--muted)" }}>
          <a href="#demo">Try it</a><a href="#features">Features</a><a href="#curriculum">Curriculum</a><a href="#pricing">Pricing</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" arrow onClick={() => nav("onboarding")}>Start free</Button>
        </div>
      </div>
    </header>
  );
}

function Product({ nav }) {
  const D = window.TAXR;
  const builtFor = ["Career changers", "Bookkeepers leveling up", "Gig & self-employed earners", "Aspiring Enrolled Agents", "Small-firm staff"];
  const features = [
    { i: "book", t: "Plain-English lessons", x: "Every concept explained like a friend would — 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." },
    { i: "bulb", t: "Pip's hints when stuck", x: "Spend a hint and Pip nudges you through it — without handing over the answer." },
    { i: "cards", t: "Flashcards for recall", x: "Decks 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 — the documents you'll actually file." },
    { i: "trophy", t: "All the way to the EA", x: "Phase 3 is full SEE exam prep — three parts, timed mocks, weak-spot drilling." },
  ];

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

      {/* hero */}
      <div className="grid-tex" style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -160, right: -100, width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle, rgba(70,214,164,0.13), transparent 65%)", pointerEvents: "none" }} />
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 52, alignItems: "center", padding: "64px 32px 88px" }}>
          <div>
            <div className="row gap-8 wrap-flex" style={{ marginBottom: 22 }}>
              <Badge kind="green" dot>Live now</Badge><Badge kind="blue">Web app</Badge><Badge>Waddl3 Pro Tool</Badge>
            </div>
            <h1 className="display" style={{ fontSize: 76, lineHeight: 0.95 }}>Taxr</h1>
            <p className="serif-it t-peri" style={{ fontSize: 24, margin: "10px 0 18px" }}>Zero to Enrolled Agent.</p>
            <p className="fs-18 t-muted lh-rel" style={{ maxWidth: 460 }}>
              The self-paced course that takes you from knowing nothing about tax to a credentialed Enrolled Agent — in plain English, with a test after every module.
            </p>
            <div className="row gap-12 wrap-flex" style={{ marginTop: 30 }}>
              <Button size="lg" arrow onClick={() => nav("onboarding")}>Start free</Button>
              <Button size="lg" variant="ghost" onClick={() => document.getElementById("pricing").scrollIntoView({ behavior: "smooth" })}>See pricing</Button>
            </div>
            <p className="mono fs-13 t-dim" style={{ marginTop: 16 }}>No card · first two lessons free</p>
          </div>
          <HeroPreview />
        </div>
      </div>

      {/* built for strip */}
      <div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--bg-2)" }}>
        <div className="wrap row gap-12 wrap-flex" style={{ padding: "22px 32px", alignItems: "center" }}>
          <span className="mono fs-13 t-dim upper" style={{ marginRight: 6 }}>Built for</span>
          {builtFor.map((b) => <span key={b} className="chip">{b}</span>)}
        </div>
      </div>

      {/* live demo */}
      <Section id="demo">
        <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 48, alignItems: "center" }}>
          <div>
            <Eyebrow green style={{ marginBottom: 16 }}>Try it right now</Eyebrow>
            <h2 className="display" style={{ fontSize: 44 }}>Don't take our word — <span className="it">answer one.</span></h2>
            <p className="fs-17 t-muted lh-rel" style={{ marginTop: 18, maxWidth: 420 }}>
              This is a real Module 1 question, exactly as it appears in the course. Pick an answer, or tap for one of Pip's hints. No sign-up needed.
            </p>
            <div className="col gap-16" style={{ marginTop: 26 }}>
              {[["book", "Read the short lesson"], ["target", "Answer to lock it in"], ["bulb", "Stuck? Pip nudges you"]].map(([ic, t]) => (
                <div key={t} className="row gap-12"><Icon name={ic} size={18} style={{ color: "var(--blue-bright)" }} /><span className="fs-15">{t}</span></div>
              ))}
            </div>
          </div>
          <TryQuestion />
        </div>
      </Section>

      {/* features */}
      <Section id="features" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 600, marginBottom: 48 }}>
          <Eyebrow style={{ marginBottom: 16 }}>What's inside</Eyebrow>
          <h2 className="display" style={{ fontSize: 44 }}>Everything you need to <span className="it">actually learn it.</span></h2>
        </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: 20, marginBottom: 9 }}>{f.t}</h3>
              <p className="fs-15 t-muted lh-rel">{f.x}</p>
            </div>
          ))}
        </div>
      </Section>

      {/* curriculum */}
      <Section id="curriculum">
        <div style={{ maxWidth: 600, marginBottom: 40 }}>
          <Eyebrow style={{ marginBottom: 16 }}>The curriculum</Eyebrow>
          <h2 className="display" style={{ fontSize: 44 }}>3 phases · 18 modules · <span className="it">94 lessons.</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: 23, marginBottom: 6 }}>{ph.name}</h3>
              <p className="fs-14 t-muted" style={{ marginBottom: 16 }}>{ph.arc}</p>
              <div className="col" style={{ gap: 9, flex: 1 }}>
                {ph.modules.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>
          ))}
        </div>
      </Section>

      {/* your path + disclaimer */}
      <Section style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", paddingTop: 80, paddingBottom: 80 }}>
        <div style={{ maxWidth: 640, marginBottom: 36 }}>
          <Eyebrow style={{ marginBottom: 16 }}>The honest part</Eyebrow>
          <h2 className="display" style={{ fontSize: 44 }}>Taxr gets you <span className="it">ready.</span> The credential is on you.</h2>
          <p className="fs-17 t-muted lh-rel" style={{ marginTop: 16 }}>
            We'll teach you everything and get you exam-ready — but finishing the course doesn't authorize you to do anything by itself. Here's the real path:
          </p>
        </div>
        <ExamPath />
        <div style={{ marginTop: 24 }}><DisclaimerBand /></div>
      </Section>

      {/* pricing (reused) */}
      <Pricing nav={nav} />

      {/* faq (reused) */}
      <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: "96px 32px", textAlign: "center" }}>
          <h2 className="display" style={{ fontSize: 52, maxWidth: 700 }}>Try a lesson before you <span className="it">spend a cent.</span></h2>
          <p className="fs-18 t-muted" style={{ marginTop: 18, maxWidth: 480 }}>The first two lessons of Module 1 are free — no card, no commitment.</p>
          <Button size="lg" arrow onClick={() => nav("onboarding")} style={{ marginTop: 28 }}>Start free</Button>
        </div>
      </div>

      <Footer />
    </div>
  );
}

Object.assign(window, { Product });