/* =========================================================================
   TAXR — Shared demo + disclaimer pieces
   Used by both the Onboarding flow and the Product page.
   ========================================================================= */

/* A real, answerable sample question — the core "try the product" moment. */
function TryQuestion({ onAnswered, compact }) {
  const q = {
    diff: "Medium",
    q: "A client files Form 4868 before April 15 and owes $3,200. Which statement is correct?",
    a: ["They have until October 15 to both file and pay", "They have until October 15 to file, but the $3,200 was due April 15", "The extension waives late-payment penalties", "They must pay at least 50% by April 15"],
    correct: 1,
    why: "Form 4868 extends the deadline to FILE by six months — it does not extend the deadline to PAY. The tax owed was still due April 15.",
    hint: { title: "Think about what the IRS actually wants on time.", body: "The IRS treats filing and paying as two separate obligations. An extension buys time to finish the paperwork — not to hold onto the money. Which option keeps those two things separate?" },
  };
  const [picked, setPicked] = useState(null);
  const [submitted, setSubmitted] = useState(false);
  const [hint, setHint] = useState(0); // 0 none, 1 title, 2 body

  function submit() {
    if (picked === null) return;
    setSubmitted(true);
    onAnswered && onAnswered(picked === q.correct);
  }
  function reset() { setPicked(null); setSubmitted(false); setHint(0); }

  return (
    <div className="card" style={{ padding: compact ? 22 : 28, background: "var(--surface)" }}>
      <div className="row spread" style={{ marginBottom: 16 }}>
        <div className="row gap-12">
          <Badge kind="blue">{q.diff}</Badge>
          <span className="mono fs-13 t-dim">Sample question</span>
        </div>
        <Badge kind="amber"><Icon name="fish" size={13} style={{ marginRight: 2 }} />Free in demo</Badge>
      </div>
      <h3 className="serif" style={{ fontSize: compact ? 21 : 24, lineHeight: 1.25, marginBottom: 20 }}>{q.q}</h3>

      <div className="col gap-10">
        {q.a.map((opt, idx) => {
          const isPick = picked === idx, isCorrect = idx === q.correct;
          let bd = "var(--line)", bg = "var(--surface-2)", ic = null, tc = "var(--text)";
          if (submitted) {
            if (isCorrect) { bd = "rgba(70,214,164,0.5)"; bg = "var(--green-soft)"; ic = <Icon name="check" size={17} style={{ color: "var(--green)" }} />; }
            else if (isPick) { bd = "rgba(240,132,106,0.5)"; bg = "var(--wrong-soft)"; ic = <Icon name="x" size={17} style={{ color: "var(--wrong)" }} />; }
            else tc = "var(--muted)";
          } else if (isPick) { bd = "var(--blue)"; bg = "var(--blue-soft)"; }
          return (
            <button key={idx} onClick={() => !submitted && setPicked(idx)} disabled={submitted}
              className="row gap-14" style={{ textAlign: "left", padding: "13px 15px", borderRadius: 12, border: "1px solid " + bd, background: bg, alignItems: "center", cursor: submitted ? "default" : "pointer" }}>
              <span style={{ width: 24, height: 24, borderRadius: 7, flex: "none", display: "grid", placeItems: "center", border: "1px solid " + (isPick && !submitted ? "var(--blue)" : "var(--line-2)"), fontFamily: "var(--mono)", fontSize: 12, color: isPick && !submitted ? "var(--blue-bright)" : "var(--dim)" }}>{String.fromCharCode(65 + idx)}</span>
              <span className="fs-15" style={{ flex: 1, color: tc }}>{opt}</span>
              {ic}
            </button>
          );
        })}
      </div>

      {submitted && (
        <div className="pop" style={{ marginTop: 16, padding: "16px 18px", borderRadius: 13, background: picked === q.correct ? "var(--green-soft)" : "var(--wrong-soft)", border: "1px solid " + (picked === q.correct ? "rgba(70,214,164,0.3)" : "rgba(240,132,106,0.3)") }}>
          <span className="mono fs-13 upper" style={{ color: picked === q.correct ? "var(--green)" : "var(--wrong)" }}>{picked === q.correct ? "Correct" : "Not quite"}</span>
          <p className="fs-15 lh-rel" style={{ color: "var(--ink)", marginTop: 6 }}>{q.why}</p>
        </div>
      )}

      {!submitted && hint > 0 && (
        <div className="pop" style={{ marginTop: 16 }}>
          <Pip tone="tip" title="Pip's hint" compact>
            <strong>{q.hint.title}</strong>
            {hint === 2 ? <p className="lh-rel" style={{ marginTop: 6 }}>{q.hint.body}</p>
              : <button className="t-peri fs-14" style={{ fontWeight: 600, marginTop: 6, display: "block" }} onClick={() => setHint(2)}>Show me the hint →</button>}
          </Pip>
        </div>
      )}

      <div className="row spread" style={{ marginTop: 18 }}>
        {!submitted
          ? <Button variant="ghost" size="sm" onClick={() => setHint(hint ? 2 : 1)}>{hint ? "Hint shown" : <><Icon name="bulb" size={15} style={{ color: "var(--amber)" }} /> Need a nudge?</>}</Button>
          : <Button variant="quiet" size="sm" onClick={reset}><Icon name="back" size={15} /> Try again</Button>}
        {!submitted
          ? <Button size="sm" arrow disabled={picked === null} onClick={submit}>Check answer</Button>
          : <span className="row gap-8 fs-14 t-green"><Icon name="check" size={16} /> That's the whole flow</span>}
      </div>
    </div>
  );
}

/* "Your path" — visual that reinforces prep ≠ authorization */
function ExamPath() {
  const steps = [
    { i: "book", t: "Learn with Taxr", x: "94 lessons, 18 tests, flashcards & hints.", tone: "blue" },
    { i: "user", t: "Get your PTIN", x: "Register with the IRS to prepare returns for pay.", tone: "blue" },
    { i: "flag", t: "Pass the IRS SEE", x: "All three parts of the Special Enrollment Exam.", tone: "amber" },
    { i: "trophy", t: "Earn the EA", x: "Plus any state requirements that apply to you.", tone: "green" },
  ];
  const col = { blue: "var(--blue-bright)", amber: "var(--amber)", green: "var(--green)" };
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
      {steps.map((s, i) => (
        <div key={i} className="card card-pad" style={{ padding: 22 }}>
          <div className="row spread" style={{ marginBottom: 14 }}>
            <span style={{ width: 40, height: 40, borderRadius: 11, display: "grid", placeItems: "center", background: "rgba(255,255,255,0.04)", color: col[s.tone] }}><Icon name={s.i} size={20} /></span>
            <span className="mono fs-13 t-dim">{String(i + 1).padStart(2, "0")}</span>
          </div>
          <h4 className="serif" style={{ fontSize: 18, marginBottom: 5 }}>{s.t}</h4>
          <p className="fs-14 t-muted lh-rel">{s.x}</p>
          {i === 0 && <Badge kind="solid-green" style={{ marginTop: 12 }}>Taxr covers this</Badge>}
          {i > 0 && <Badge kind="lock" style={{ marginTop: 12 }}>You do this</Badge>}
        </div>
      ))}
    </div>
  );
}

/* Reusable disclaimer block. variant: 'band' (full) | 'inline' (compact) */
function DisclaimerBand({ variant }) {
  if (variant === "inline") {
    return (
      <div className="row gap-12" style={{ padding: "13px 16px", borderRadius: 12, border: "1px solid var(--line-2)", background: "rgba(255,255,255,0.015)", alignItems: "flex-start" }}>
        <Icon name="shield" size={17} style={{ color: "var(--amber)", flex: "none", marginTop: 2 }} />
        <p className="fs-13 t-muted lh-rel">
          <strong className="t-amber">Prep, not a license.</strong> Finishing Taxr doesn't authorize you to prepare returns or represent taxpayers. You still need a PTIN, must pass the IRS SEE for the EA credential, and must meet any state requirements. Taxr isn't affiliated with the IRS.
        </p>
      </div>
    );
  }
  return (
    <div className="card grid-lines" style={{ padding: "30px 34px", display: "grid", gridTemplateColumns: "auto 1fr", gap: 22, alignItems: "flex-start" }}>
      <span style={{ width: 46, height: 46, borderRadius: 12, display: "grid", placeItems: "center", background: "var(--amber-soft)", color: "var(--amber)", flex: "none" }}><Icon name="shield" size={22} /></span>
      <div className="col" style={{ gap: 8 }}>
        <span className="mono fs-13 t-amber upper">Important — what Taxr is, and isn't</span>
        <p className="fs-15 t-muted lh-rel" style={{ maxWidth: 760 }}>
          Taxr is an independent training and <strong style={{ color: "var(--text)" }}>exam-preparation</strong> course. Completing it does <strong style={{ color: "var(--text)" }}>not</strong> certify, license, or authorize you to prepare tax returns for pay or to represent taxpayers before the IRS. To prepare returns for compensation you need a <strong style={{ color: "var(--text)" }}>PTIN</strong> from the IRS. To earn the <strong style={{ color: "var(--text)" }}>Enrolled Agent</strong> credential you must pass all three parts of the IRS <strong style={{ color: "var(--text)" }}>Special Enrollment Examination (SEE)</strong> and a suitability check. Some states (e.g. California, Oregon, New York, Maryland, Connecticut) have their own preparer registration or exam requirements. Taxr is not affiliated with or endorsed by the IRS — always confirm current rules and figures at IRS.gov and your state tax authority.
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { TryQuestion, ExamPath, DisclaimerBand });