/* =========================================================================
   TAXR — Onboarding (also a live product demo)
   ========================================================================= */
function ChoiceCard({ icon, title, sub, active, onClick }) {
  return (
    <button onClick={onClick} className="card row gap-16" style={{ padding: "16px 18px", textAlign: "left", alignItems: "center",
      borderColor: active ? "var(--blue)" : "var(--line)", background: active ? "var(--blue-soft)" : "var(--surface)", transition: "all .15s" }}>
      <span style={{ width: 40, height: 40, borderRadius: 11, flex: "none", display: "grid", placeItems: "center", background: active ? "rgba(58,109,240,0.2)" : "var(--surface-3)", color: active ? "var(--blue-bright)" : "var(--muted)" }}>
        <Icon name={icon} size={20} />
      </span>
      <div className="col" style={{ flex: 1 }}>
        <span className="fs-16" style={{ fontWeight: 600 }}>{title}</span>
        {sub && <span className="fs-14 t-muted">{sub}</span>}
      </div>
      <span style={{ width: 22, height: 22, borderRadius: "50%", flex: "none", border: "2px solid " + (active ? "var(--blue)" : "var(--line-2)"), display: "grid", placeItems: "center" }}>
        {active && <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--blue)" }} />}
      </span>
    </button>
  );
}

function Onboarding({ nav, onFinish }) {
  const STEPS = ["Welcome", "Goal", "Experience", "State", "How it works", "Try it", "The honest bit", "Done"];
  const [step, setStep] = useState(0);
  const [goal, setGoal] = useState(null);
  const [exp, setExp] = useState(null);
  const [state, setState] = useState("RI");
  const [tried, setTried] = useState(false);
  const [ack, setAck] = useState(false);

  const canNext = [true, goal !== null, exp !== null, true, true, true, ack, true][step];
  function next() { if (step < STEPS.length - 1) setStep(step + 1); else onFinish(); }
  function back() { if (step > 0) setStep(step - 1); }

  const usStates = ["RI", "CA", "NY", "MA", "TX", "FL", "Other"];

  return (
    <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* header */}
      <header className="row spread" style={{ padding: "20px 32px", borderBottom: "1px solid var(--line)" }}>
        <Logo size={20} />
        <div className="row gap-16" style={{ alignItems: "center" }}>
          <ThemeSwitcher />
          <button className="fs-14 t-dim" onClick={onFinish}>Skip for now</button>
        </div>
      </header>

      {/* stepper */}
      <div className="wrap" style={{ padding: "22px 32px 0", maxWidth: 760 }}>
        <div className="row gap-8" style={{ marginBottom: 6 }}>
          {STEPS.map((_, i) => (
            <div key={i} style={{ flex: 1, height: 4, borderRadius: 999, background: i <= step ? "var(--blue)" : "rgba(255,255,255,0.08)", transition: "background .3s" }} />
          ))}
        </div>
        <div className="row spread">
          <span className="mono fs-13 t-dim">STEP {step + 1} / {STEPS.length}</span>
          <span className="mono fs-13 t-blue">{STEPS[step]}</span>
        </div>
      </div>

      {/* body */}
      <div className="wrap" style={{ flex: 1, padding: "36px 32px 40px", maxWidth: 760, width: "100%", margin: "0 auto" }}>
        {step === 0 && (
          <div className="col center" style={{ textAlign: "center", paddingTop: 30 }}>
            <span style={{ fontSize: 72 }}>🐧</span>
            <h1 className="display" style={{ fontSize: 44, marginTop: 16 }}>Hi, I'm <span className="it">Pip.</span></h1>
            <p className="fs-18 t-muted lh-rel" style={{ marginTop: 16, maxWidth: 440 }}>
              I'll be your guide from your very first lesson to exam-ready. Let's set you up in about 60 seconds — and I'll show you exactly how Taxr works along the way.
            </p>
          </div>
        )}

        {step === 1 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>What brings you to <span className="it">Taxr?</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 26 }}>This tailors the path I suggest — you can study any module either way.</p>
            <div className="col gap-12">
              <ChoiceCard icon="user" title="Prepare tax returns for pay" sub="Start earning as a paid preparer" active={goal === "prep"} onClick={() => setGoal("prep")} />
              <ChoiceCard icon="trophy" title="Become an Enrolled Agent" sub="The full path, including SEE exam prep" active={goal === "ea"} onClick={() => setGoal("ea")} />
              <ChoiceCard icon="book" title="Understand my own taxes" sub="Confidence with my own return" active={goal === "self"} onClick={() => setGoal("self")} />
              <ChoiceCard icon="spark" title="Brush up before the season" sub="Refresh what I already know" active={goal === "brush"} onClick={() => setGoal("brush")} />
            </div>
          </div>
        )}

        {step === 2 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>How much tax do you <span className="it">already know?</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 26 }}>No wrong answer. Phase 1 assumes zero knowledge regardless.</p>
            <div className="col gap-12">
              <ChoiceCard icon="book" title="Total beginner" sub="I'm starting from scratch" active={exp === "0"} onClick={() => setExp("0")} />
              <ChoiceCard icon="cards" title="I know the basics" sub="W-2s, deductions, the gist of a 1040" active={exp === "1"} onClick={() => setExp("1")} />
              <ChoiceCard icon="shield" title="I already prepare returns" sub="I want the EA credential" active={exp === "2"} onClick={() => setExp("2")} />
            </div>
          </div>
        )}

        {step === 3 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>Which state for <span className="it">state returns?</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 26 }}>Module 11 goes deep on one state (Rhode Island is fully built). We'll highlight what's relevant to you.</p>
            <div className="row gap-12 wrap-flex">
              {usStates.map((s) => (
                <button key={s} onClick={() => setState(s)} className="chip" style={{ padding: "12px 20px", fontSize: 15,
                  borderColor: state === s ? "var(--blue)" : "var(--line)", background: state === s ? "var(--blue-soft)" : "rgba(255,255,255,0.015)", color: state === s ? "var(--text)" : "var(--muted)" }}>
                  {s === "Other" ? "Other / not sure" : s}
                </button>
              ))}
            </div>
            <Pip tone="tip" compact style={{ marginTop: 26 }}>Don't worry if you're not sure — the federal material (the bulk of the course) is the same for everyone.</Pip>
          </div>
        )}

        {step === 4 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>Here's how a <span className="it">lesson works.</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 24 }}>Short, plain-English reads — then you prove it stuck. Like this:</p>
            <div className="card card-pad" style={{ padding: 26 }}>
              <Badge kind="green" style={{ marginBottom: 14 }}>Lesson 1.2 · excerpt</Badge>
              <h3 className="serif" style={{ fontSize: 22, marginBottom: 10 }}>An extension to file isn't an extension to pay</h3>
              <p className="fs-16 lh-rel" style={{ color: "var(--ink)", marginBottom: 16 }}>Form 4868 pushes the filing deadline six months to October 15. But if the client owes tax, it's still due April 15 — pay late and interest and penalties start adding up.</p>
              <div style={{ borderLeft: "3px solid var(--green)", paddingLeft: 18 }}>
                <div className="mono fs-13 t-green upper" style={{ marginBottom: 4 }}>Remember this</div>
                <p className="serif-it" style={{ fontSize: 19, color: "var(--text)" }}>"Extension to file, not to pay." One line that saves clients thousands.</p>
              </div>
            </div>
            <Pip tone="cheer" compact style={{ marginTop: 18 }}>That's a real excerpt from Module 1. Ready to try the part where it sticks? →</Pip>
          </div>
        )}

        {step === 5 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>Now <span className="it">you try.</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 22 }}>Every lesson and module ends with questions like this. Stuck? Spend a hint and I'll nudge you — no answer handed over.</p>
            <TryQuestion onAnswered={() => setTried(true)} />
            {tried && <Pip tone="cheer" compact style={{ marginTop: 18 }}>That's the whole loop — learn, check, get a nudge when you need one. You've basically used the product already!</Pip>}
          </div>
        )}

        {step === 6 && (
          <div>
            <h1 className="display" style={{ fontSize: 36, marginBottom: 10 }}>One honest thing <span className="it">before we start.</span></h1>
            <p className="fs-16 t-muted" style={{ marginBottom: 24 }}>We'd rather be straight with you up front:</p>
            <DisclaimerBand />
            <div style={{ marginTop: 22 }}>
              <ExamPath />
            </div>
            <button onClick={() => setAck(!ack)} className="row gap-12" style={{ marginTop: 24, padding: "14px 18px", borderRadius: 12, border: "1px solid " + (ack ? "rgba(70,214,164,0.4)" : "var(--line-2)"), background: ack ? "var(--green-soft)" : "var(--surface)", width: "100%", textAlign: "left" }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, flex: "none", display: "grid", placeItems: "center", border: "1px solid " + (ack ? "var(--green)" : "var(--line-2)"), background: ack ? "var(--green)" : "transparent", color: "#06241a" }}>{ack && <Icon name="check" size={15} />}</span>
              <span className="fs-15">I understand Taxr is training & exam prep — it doesn't authorize me to prepare returns, and I'll still need a PTIN, the SEE, and any state requirements.</span>
            </button>
          </div>
        )}

        {step === 7 && (
          <div className="col center" style={{ textAlign: "center", paddingTop: 20 }}>
            <span style={{ fontSize: 64 }}>🎉</span>
            <h1 className="display" style={{ fontSize: 40, marginTop: 12 }}>You're all set, <span className="it">let's go.</span></h1>
            <p className="fs-17 t-muted lh-rel" style={{ marginTop: 14, maxWidth: 440 }}>
              {goal === "ea" ? "Full EA path it is — we'll take you all the way to SEE-ready." : goal === "self" ? "We'll build your confidence return by return." : "Let's get you preparing returns with confidence."} Your first two lessons are free.
            </p>
            <div className="card card-pad" style={{ marginTop: 26, width: "100%", maxWidth: 380, textAlign: "left" }}>
              <span className="mono fs-13 t-dim upper">Starting you at</span>
              <h3 className="serif" style={{ fontSize: 22, margin: "8px 0 4px" }}>Module 1 · Lesson 1.1</h3>
              <p className="fs-14 t-muted">Federal vs State Tax: What's the Difference?</p>
            </div>
          </div>
        )}
      </div>

      {/* footer controls */}
      <div style={{ borderTop: "1px solid var(--line)", background: "var(--bg-2)" }}>
        <div className="wrap row spread" style={{ padding: "18px 32px", maxWidth: 760 }}>
          <Button variant="quiet" back disabled={step === 0} onClick={back}>Back</Button>
          <Button arrow disabled={!canNext} onClick={next}>{step === STEPS.length - 1 ? "Start lesson 1.1" : step === 0 ? "Let's go" : "Continue"}</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Onboarding });