// Subscription fit quiz — sliding-scale calculator
// Lives at: Subscription Fit Quiz.html (mode: "quiz")
//
// All non-member prices below match the Flat-Fee Services page exactly.
// Member rate = 25% off, except real estate purchase/sale review which is
// 5% of sale price non-member, 2.5% member.

const FEE = {
  hourly: 350,                  // standard non-member hourly rate
  perQuestionHr: 0.25,          // ~15 minutes attorney time per "real" question
  everyday: 500,                // any everyday-matters item (lease review, demand letter, etc.)
  everydayMember: 375,
  contract: 1000,               // average client-facing business contract (MSA / engagement / NDA)
  contractMember: 750,
  // estate options — non-member retail / member rate
  estate: {
    none:   { retail: 0,     member: 0 },
    update: { retail: 500,   member: 375 },     // priced like an everyday-matters task
    will:   { retail: 1600,  member: 1200 },
    simple: { retail: 2000,  member: 1500 },
    trust:  { retail: 4000,  member: 3000 }
  },
  // business first-year: LLC formation ($1,200) + Operating Agreement ($1,200) + 3 contracts at $1,600 = $7,200
  // ongoing year (no formation): 3 contracts at $1,600 = $4,800
  businessFirstYear:       7200,
  businessFirstYearMember: 5400,    // 25% off
  businessOngoing:         4800,
  businessOngoingMember:   3600,
  // real estate review: 5% non-member, 2.5% member of sale price
  realEstateRate:        0.05,
  realEstateRateMember:  0.025
};

const TIERS = [
  { key: "personal",  name: "Personal",          price: 75,  yr: 900,  blurb: "Best for someone who wants a lawyer on call for the occasional question, light contract, or estate basics." },
  { key: "plus",      name: "Personal Plus",     price: 150, yr: 1800, blurb: "Best for active personal lives — more frequent questions, more documents, faster replies." },
  { key: "premium",   name: "Personal Premium",  price: 350, yr: 4200, blurb: "Best for someone with a trust, real estate, or recurring matters needing priority attention." },
  { key: "solo",      name: "Solo Entrepreneur", price: 350, yr: 4200, blurb: "Built for one-person businesses — represents your single-member LLC, not you personally." }
];

const QuizHero = () => (
  <section style={{ padding: "96px 0 56px", borderBottom: "1px solid var(--rule)" }}>
    <div className="container">
      <div className="mono-label" style={{ fontSize: 12, color: "var(--sun)", marginBottom: 24 }}>
        <span className="dot" style={{ marginRight: 10 }}/>FIT CHECK · 60-SECOND CALCULATOR
      </div>
      <h1 className="serif" style={{
        fontSize: "clamp(44px, 6.4vw, 96px)", lineHeight: 1.04, letterSpacing: "-0.02em",
        margin: 0, color: "var(--ink)", maxWidth: 1100
      }}>
        Is a subscription <em style={{ color: "var(--sun)" }}>actually worth it</em> for you?
      </h1>
      <p className="serif" style={{
        fontSize: 22, lineHeight: 1.45, fontStyle: "italic",
        color: "var(--ink-soft)", margin: "32px 0 0", maxWidth: 820
      }}>
        Pull the sliders. We'll price out a year of your legal life at the exact flat fees from the services page, compare member vs. non-member totals, and tell you which plan fits — or whether you're better off staying off-plan.
      </p>
    </div>
  </section>
);

// ------- Slider primitive -------

const Slider = ({ label, sublabel, value, min, max, step, onChange, fmt, hint }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: "22px 24px" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 16 }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
          <span className="serif" style={{ fontSize: 22, lineHeight: 1.15, color: "var(--ink)" }}>{label}</span>
          {sublabel && <span style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.4 }}>{sublabel}</span>}
        </div>
        <span className="numeric" style={{
          fontSize: 36, fontWeight: 500, color: "var(--sun)", letterSpacing: "-0.02em",
          fontFamily: "var(--serif)", lineHeight: 1, whiteSpace: "nowrap"
        }}>{fmt ? fmt(value) : value}</span>
      </div>
      <input
        type="range"
        min={min} max={max} step={step || 1}
        value={value}
        onChange={e => onChange(Number(e.target.value))}
        style={{
          width: "100%", height: 6, appearance: "none", WebkitAppearance: "none",
          background: `linear-gradient(to right, var(--sun) 0%, var(--sun) ${pct}%, var(--rule) ${pct}%, var(--rule) 100%)`,
          outline: "none", borderRadius: 3, cursor: "pointer"
        }}
        className="quiz-slider"
      />
      <div style={{ display: "flex", justifyContent: "space-between", fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-soft)", textTransform: "uppercase" }}>
        <span>{fmt ? fmt(min) : min}</span>
        {hint && <span style={{ fontStyle: "italic", textTransform: "none", letterSpacing: "0.04em", fontFamily: "var(--serif)", fontSize: 12 }}>{hint}</span>}
        <span>{fmt ? fmt(max) : max}</span>
      </div>
    </div>
  );
};

// ------- Segmented control -------

const Seg = ({ label, sublabel, value, options, onChange }) => (
  <div style={{ display: "flex", flexDirection: "column", gap: 12, padding: "22px 24px" }}>
    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
      <span className="serif" style={{ fontSize: 22, lineHeight: 1.15, color: "var(--ink)" }}>{label}</span>
      {sublabel && <span style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.4 }}>{sublabel}</span>}
    </div>
    <div style={{ display: "grid", gridTemplateColumns: `repeat(${options.length}, 1fr)`, gap: 0, border: "1px solid var(--rule)" }}>
      {options.map((o, i) => {
        const active = o.value === value;
        return (
          <button key={o.value} onClick={() => onChange(o.value)} style={{
            padding: "14px 8px", border: 0,
            background: active ? "var(--ink)" : "transparent",
            color: active ? "var(--cream)" : "var(--ink)",
            fontFamily: "var(--serif)", fontSize: 14.5, lineHeight: 1.2,
            cursor: "pointer", textAlign: "center",
            borderRight: i < options.length - 1 ? "1px solid var(--rule)" : "0",
            transition: "background .12s"
          }}>{o.label}</button>
        );
      })}
    </div>
  </div>
);

// ------- Wrapper app -------

const QuizApp = () => (
  <>
    <Nav/>
    <QuizHero/>
    <QuizBody/>
    <CTASection/>
    <Footer/>
  </>
);

// ------- Quiz logic + UI -------

const Step = ({ n, title, sub, children, active }) => (
  <div style={{
    border: "1px solid var(--rule)", background: "var(--paper)",
    overflow: "hidden"
  }}>
    <div style={{
      display: "flex", alignItems: "baseline", gap: 14,
      padding: "16px 24px", borderBottom: "1px solid var(--rule)",
      background: active ? "var(--ink)" : "var(--cream-2)",
      color: active ? "var(--cream)" : "var(--ink)",
      transition: "background .15s"
    }}>
      <span className="mono-label numeric" style={{
        fontSize: 11, letterSpacing: "0.14em",
        color: active ? "var(--sun)" : "var(--sun)"
      }}>STEP {n}</span>
      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
        <span className="serif" style={{ fontSize: 22, lineHeight: 1.1, letterSpacing: "-0.01em" }}>{title}</span>
        {sub && <span style={{ fontSize: 12.5, color: active ? "var(--sun-soft)" : "var(--ink-soft)", lineHeight: 1.4, fontStyle: "italic", fontFamily: "var(--serif)" }}>{sub}</span>}
      </div>
    </div>
    <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
      {children}
    </div>
  </div>
);

const Field = ({ children, last }) => (
  <div style={{ borderBottom: last ? "none" : "1px solid var(--rule)" }}>
    {children}
  </div>
);

const QuizBody = () => {
  const [questions, setQuestions]    = React.useState(2);
  const [everyday, setEveryday]      = React.useState(2);
  const [estate, setEstate]          = React.useState("none");
  const [business, setBusiness]      = React.useState("no");
  const [businessYear, setBizYear]   = React.useState("ongoing");
  const [realEstate, setRealEstate]  = React.useState(0);
  const [pastSpend, setPastSpend]    = React.useState(0);
  const [worry, setWorry]            = React.useState(2);

  // ===== Build line items (only ones with non-zero amounts) =====
  const lines = [];

  // (a) Calls / quick questions — covered by subscription, billed hourly otherwise
  if (questions > 0) {
    const hours = questions * 12 * FEE.perQuestionHr;
    const retail = Math.round(hours * FEE.hourly);
    lines.push({
      label: `Quick questions (${questions}/mo × 15 min)`,
      retail,
      member: 0,                              // subscription covers these
      memberNote: "Included in plan"
    });
  }

  // (b) Everyday-matters items — $500 each, $375 member
  if (everyday > 0) {
    lines.push({
      label: `Everyday flat-fee tasks (× ${everyday}/yr)`,
      retail: everyday * FEE.everyday,
      member: everyday * FEE.everydayMember,
      memberNote: "$375 each"
    });
  }

  // (c) Estate planning
  if (estate !== "none") {
    const e = FEE.estate[estate];
    const label = {
      update: "Update existing estate doc",
      will:   "Will only",
      simple: "Simple Package (Will + POA + HCD)",
      trust:  "Trust Package"
    }[estate];
    lines.push({ label, retail: e.retail, member: e.member, memberNote: "25% off" });
  }

  // (d) Business work — only when business === "yes"
  if (business === "yes") {
    if (businessYear === "first") {
      lines.push({
        label: "LLC formation + Operating Agreement + 3 contracts",
        retail: FEE.businessFirstYear,
        member: FEE.businessFirstYearMember,
        memberNote: "25% off"
      });
    } else {
      lines.push({
        label: "Business contracts (~3 per year, $1,600 each)",
        retail: FEE.businessOngoing,
        member: FEE.businessOngoingMember,
        memberNote: "25% off"
      });
    }
  }

  // (e) Real estate purchase/sale review — 5% / 2.5% of sale price
  if (realEstate > 0) {
    lines.push({
      label: `Home purchase/sale review (sale price ${"$" + (realEstate).toLocaleString()})`,
      retail: Math.round(realEstate * FEE.realEstateRate),
      member: Math.round(realEstate * FEE.realEstateRateMember),
      memberNote: "Half rate (2.5%)"
    });
  }

  const nonMemberProjects = lines.reduce((s, l) => s + l.retail, 0);
  const memberProjects    = lines.reduce((s, l) => s + l.member, 0);

  // ===== Recommend a tier =====
  let recKey;
  if (business === "yes") recKey = "solo";
  else if (estate === "trust" || realEstate > 0 || questions >= 4 || nonMemberProjects >= 4000) recKey = "premium";
  else if (questions >= 2 || everyday >= 2 || estate !== "none" || nonMemberProjects >= 1500) recKey = "plus";
  else recKey = "personal";
  const rec = TIERS.find(t => t.key === recKey);

  // ===== Totals =====
  const nonMemberTotal = nonMemberProjects;
  const memberTotal    = rec.yr + memberProjects;
  const savings        = nonMemberTotal - memberTotal;
  const worthIt        = savings > 0;

  // ===== Fit score (0-100, weighted toward usage) =====
  const score = Math.min(100, Math.round(
    (questions / 8) * 26 +
    (everyday / 6) * 18 +
    (estate === "none" ? 0 : estate === "update" ? 6 : estate === "will" ? 12 : estate === "simple" ? 16 : 22) +
    (business === "yes" ? 22 : 0) +
    (realEstate > 0 ? 12 : 0)
  ));

  const fmtMoney = (n) => "$" + Math.round(n).toLocaleString();
  const fmtMoneyShort = (n) => n >= 1000 ? "$" + (n / 1000).toFixed(n % 1000 === 0 ? 0 : 1) + "k" : "$" + Math.round(n);

  return (
    <section style={{ padding: "56px 0 96px", background: "var(--paper)" }}>
      <div className="container quiz-grid" style={{ display: "flex", flexDirection: "column", gap: 40, alignItems: "stretch" }}>

        {/* ---------- TOP: stepped inputs ---------- */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 22 }}>

          <Step n="01" title="The little stuff" sub="Calls, texts, quick reads. The friction subscription removes." active={questions > 0}>
            <Field last>
              <Slider
                label="Quick legal questions per month"
                sublabel="Billed at $350/hr off-plan. Included in every subscription."
                value={questions}
                min={0} max={8} step={1}
                hint={questions === 0 ? "rarely" : questions <= 2 ? "occasional" : questions <= 4 ? "regular" : "constant"}
                onChange={setQuestions}
              />
            </Field>
          </Step>

          <Step n="02" title="Everyday flat-fee tasks" sub="Lease reviews, demand letters, cease-and-desists, name change, standalone POA — anything at the $500/$375 tier." active={everyday > 0}>
            <Field last>
              <Slider
                label="How many this year?"
                sublabel="$500 each off-plan · $375 each as a member."
                value={everyday}
                min={0} max={6} step={1}
                hint={everyday === 0 ? "none" : everyday <= 2 ? "a couple" : everyday <= 4 ? "several" : "many"}
                onChange={setEveryday}
              />
            </Field>
          </Step>

          <Step n="03" title="Estate planning" sub="Wills, trusts, the transfer documents. What you'd actually want done this year." active={estate !== "none"}>
            <Field last>
              <Seg
                label="Where you stand"
                sublabel="Pick the closest fit — the recommendation will adjust."
                value={estate}
                options={[
                  { value: "none",   label: "Already set" },
                  { value: "update", label: "Update ($500)" },
                  { value: "will",   label: "Will ($1.6k)" },
                  { value: "simple", label: "Simple ($2k)" },
                  { value: "trust",  label: "Trust ($4k)" }
                ]}
                onChange={setEstate}
              />
            </Field>
          </Step>

          <Step n="04" title="Business / LLC" sub="For freelancers, consultants, side businesses, single-member LLCs." active={business === "yes"}>
            <Field {...(business === "yes" ? {} : { last: true })}>
              <Seg
                label="Run a one-person business or single-member LLC?"
                sublabel="Triggers the Solo Entrepreneur recommendation."
                value={business}
                options={[
                  { value: "no",  label: "No" },
                  { value: "yes", label: "Yes" }
                ]}
                onChange={setBusiness}
              />
            </Field>
            {business === "yes" && (
              <Field last>
                <Seg
                  label="Forming this year, or already running?"
                  sublabel="Year one adds formation + operating agreement ($2,400) on top of contract work."
                  value={businessYear}
                  options={[
                    { value: "first",   label: "Year one — forming" },
                    { value: "ongoing", label: "Already running" }
                  ]}
                  onChange={setBizYear}
                />
              </Field>
            )}
          </Step>

        </div>

        {/* ---------- BOTTOM: live result ---------- */}
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>

          {/* Verdict */}
          <div style={{
            background: worthIt ? "var(--ink)" : "var(--cream-2)",
            color: worthIt ? "var(--cream)" : "var(--ink)",
            padding: "32px 28px 28px", border: "1px solid var(--rule)"
          }}>
            <div className="mono-label" style={{ fontSize: 10, color: worthIt ? "var(--sun-soft)" : "var(--sun)", marginBottom: 14 }}>
              {worthIt ? "★ VERDICT" : "○ VERDICT"}
            </div>
            <div className="serif" style={{ fontSize: 44, lineHeight: 1.05, letterSpacing: "-0.02em", margin: 0 }}>
              {worthIt
                ? <>A subscription is <em style={{ color: "var(--sun)", fontStyle: "italic" }}>likely worth it.</em></>
                : <>Honestly? <em style={{ color: "var(--sun)", fontStyle: "italic" }}>Maybe not yet.</em></>
              }
            </div>
            <p className="serif" style={{
              fontSize: 17, lineHeight: 1.45, fontStyle: "italic",
              color: worthIt ? "var(--sun-soft)" : "var(--ink-soft)",
              margin: "20px 0 0", maxWidth: 480
            }}>
              {worthIt
                ? <>At the legal work you described, <strong style={{ fontStyle: "normal", color: worthIt ? "var(--cream)" : "var(--ink)" }}>{rec.name}</strong> comes out ahead on the flat-fee math — and you get the standing relationship on top of that.</>
                : <>You're a light legal user right now. You'd still benefit from the access, but the math is close. Consider <strong style={{ fontStyle: "normal", color: "var(--ink)" }}>{rec.name}</strong> for the access, or pay per project when something comes up.</>
              }
            </p>
          </div>

          {/* Itemized math */}
          <div style={{ border: "1px solid var(--rule)", background: "var(--paper)" }}>
            <div style={{
              padding: "12px 20px", background: "var(--ink)", color: "var(--cream)",
              fontFamily: "var(--mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
              display: "grid", gridTemplateColumns: "1.7fr 0.7fr 0.7fr"
            }}>
              <span>Line item</span>
              <span style={{ textAlign: "right" }}>Non-member</span>
              <span style={{ textAlign: "right", color: "var(--sun-soft)" }}>★ Member</span>
            </div>

            {lines.length === 0 && (
              <div style={{ padding: "22px 20px", fontSize: 14, color: "var(--ink-soft)", fontStyle: "italic" }}>
                Set the sliders to a typical year — line items will populate here using the exact flat fees from the services page.
              </div>
            )}

            {lines.map((l, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "1.7fr 0.7fr 0.7fr", gap: 10,
                padding: "14px 20px", borderTop: i === 0 ? "none" : "1px solid var(--rule)",
                alignItems: "baseline"
              }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: 15, color: "var(--ink)", lineHeight: 1.3 }}>
                  {l.label}
                </span>
                <span className="numeric" style={{ fontSize: 15, color: "var(--ink-soft)", textAlign: "right", textDecoration: l.member < l.retail ? "line-through" : "none", textDecorationColor: "rgba(0,0,0,0.25)" }}>
                  {fmtMoney(l.retail)}
                </span>
                <span className="numeric" style={{ fontSize: 15, fontWeight: 600, color: "var(--sun)", textAlign: "right" }}>
                  {l.member === 0 ? <span style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--sun)", letterSpacing: "0.1em" }}>INCLUDED</span> : fmtMoney(l.member)}
                </span>
              </div>
            ))}

            {/* Subscription line */}
            {lines.length > 0 && (
              <div style={{
                display: "grid", gridTemplateColumns: "1.7fr 0.7fr 0.7fr", gap: 10,
                padding: "14px 20px", borderTop: "1px solid var(--rule)",
                alignItems: "baseline", background: "var(--cream)"
              }}>
                <span style={{ fontFamily: "var(--serif)", fontSize: 15, color: "var(--ink)", lineHeight: 1.3 }}>
                  {rec.name} subscription · ${rec.price}/mo × 12
                </span>
                <span className="numeric" style={{ fontSize: 15, color: "var(--ink-soft)", textAlign: "right" }}>—</span>
                <span className="numeric" style={{ fontSize: 15, fontWeight: 600, color: "var(--sun)", textAlign: "right" }}>
                  +{fmtMoney(rec.yr)}
                </span>
              </div>
            )}

            {/* Totals */}
            <div style={{
              display: "grid", gridTemplateColumns: "1.7fr 0.7fr 0.7fr", gap: 10,
              padding: "18px 20px", borderTop: "2px solid var(--ink)",
              alignItems: "baseline", background: "var(--paper)"
            }}>
              <span className="mono-label" style={{ fontSize: 11, color: "var(--ink)", letterSpacing: "0.12em" }}>One-year total</span>
              <span className="numeric" style={{ fontSize: 22, fontWeight: 500, color: "var(--ink)", textAlign: "right", letterSpacing: "-0.02em" }}>
                {fmtMoney(nonMemberTotal)}
              </span>
              <span className="numeric" style={{ fontSize: 22, fontWeight: 500, color: "var(--sun)", textAlign: "right", letterSpacing: "-0.02em" }}>
                {fmtMoney(memberTotal)}
              </span>
            </div>

            {/* Savings strip */}
            <div style={{
              padding: "18px 20px",
              background: worthIt ? "var(--sun)" : "var(--cream-2)",
              color: "var(--ink)",
              display: "flex", justifyContent: "space-between", alignItems: "baseline"
            }}>
              <span className="mono-label" style={{ fontSize: 11, letterSpacing: "0.12em" }}>
                {worthIt ? "YOU SAVE" : "YOU'D OVERPAY BY"}
              </span>
              <span className="numeric" style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>
                {worthIt ? "" : "−"}{fmtMoney(Math.abs(savings))}
              </span>
            </div>
          </div>

          {/* Fit score */}
          <div style={{ padding: "22px 24px", border: "1px solid var(--rule)", background: "var(--paper)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 12 }}>
              <span className="mono-label" style={{ fontSize: 10, color: "var(--ink-soft)" }}>FIT FOR A SUBSCRIPTION</span>
              <span className="numeric" style={{ fontSize: 22, fontWeight: 500, color: "var(--ink)" }}>{score}<span style={{ fontSize: 13, color: "var(--ink-soft)", marginLeft: 4 }}>/ 100</span></span>
            </div>
            <div style={{ height: 8, background: "var(--rule)", position: "relative", overflow: "hidden" }}>
              <div style={{
                position: "absolute", inset: 0, width: `${score}%`,
                background: "var(--sun)", transition: "width .2s"
              }}/>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--mono)", fontSize: 9, letterSpacing: "0.1em", color: "var(--ink-soft)", textTransform: "uppercase" }}>
              <span>Off-plan</span>
              <span>Light</span>
              <span>Real fit</span>
              <span>No-brainer</span>
            </div>
          </div>

          {/* Recommendation card */}
          <div style={{ padding: "26px 26px 22px", border: "1px solid var(--rule)", background: "var(--cream-2)" }}>
            <div className="mono-label" style={{ fontSize: 10, color: "var(--sun)", marginBottom: 10 }}>WE'D RECOMMEND</div>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 }}>
              <div className="serif" style={{ fontSize: 30, lineHeight: 1.05, color: "var(--ink)" }}>{rec.name}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 3 }}>
                <span className="numeric" style={{ fontSize: 32, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.02em" }}>${rec.price}</span>
                <span className="mono-label" style={{ fontSize: 9, color: "var(--ink-soft)" }}>/MO</span>
              </div>
            </div>
            <p style={{ fontSize: 13.5, color: "var(--ink-soft)", lineHeight: 1.45, margin: "10px 0 18px" }}>{rec.blurb}</p>
            <a href="https://calendly.com/loelaw/consultation-subscription" target="_blank" rel="noopener" className="btn-primary" style={{ width: "100%", justifyContent: "center" }}>
              Start with {rec.name}
            </a>
          </div>

          <p style={{ fontSize: 11.5, color: "var(--ink-soft)", margin: 0, lineHeight: 1.55 }}>
            Estimates use the exact flat fees on the Flat-Fee Services page (member rates = 25% off, except real estate purchase/sale review at 2.5% of sale price). Hourly assumption: $350/hr in 6-minute increments for non-member quick questions. Member quick questions are included in your plan. Real fees are set by the engagement letter. Criminal defense and expungement member rates require active membership on the date of charge.
          </p>

          <Step n="05" title="For reference" sub="Where you're starting from. Not part of the math — just keeps the verdict honest." active={pastSpend > 0 || worry !== 2}>
            <Field>
              <Slider
                label="What you spent on lawyers in the last 12 months"
                sublabel="Honest answer here keeps you honest with the verdict."
                value={pastSpend}
                min={0} max={10000} step={250}
                fmt={fmtMoney}
                hint={pastSpend === 0 ? "avoided" : pastSpend < 1500 ? "a little" : pastSpend < 5000 ? "noticeable" : "painful"}
                onChange={setPastSpend}
              />
            </Field>
            <Field last>
              <Slider
                label="How often do you worry about a legal question going unanswered?"
                sublabel="The 'is this normal? should I push back? am I exposed?' tax — the friction a standing relationship removes."
                value={worry}
                min={1} max={5} step={1}
                hint={worry === 1 ? "never" : worry === 2 ? "rarely" : worry === 3 ? "sometimes" : worry === 4 ? "often" : "constantly"}
                onChange={setWorry}
              />
            </Field>
          </Step>
        </div>
      </div>
    </section>
  );
};

// Expose for embedding on the homepage
Object.assign(window, { QuizApp, QuizBody, QuizHero });

if (window.__loelMode === "quiz") {
  ReactDOM.createRoot(document.getElementById("root")).render(<QuizApp/>);
}