// V2 directions — A's copy + flow, four new visual styles, less blue.
// Each style provides its own NavBar, hero, sections, footer.

const { useState: useV2State, useMemo: useV2Memo } = React;

// Shared content for all four styles (A's copy from v1, refined)
const COPY = {
  hero: {
    eyebrowLeft: "Cost Seg Smart · STR / W-2 Vertical",
    eyebrowMid: "Vol. I · Issue 01",
    eyebrowRight: "Updated 05/2026",
    h1Plain: "Use your short-term rental to ",
    h1Em: "offset",
    h1End: " your W-2 income.",
    sub: "Under IRS rules, an STR with 7-day-average stays plus material participation produces non-passive losses that can reduce W-2 taxes. A cost segregation study turns those losses into tens of thousands in Year-1 savings.",
    sideHeader: "What this looks like in practice —",
    proof: [
      ["$750K STR · 30% reclassified", "$142,400 Year-1 deduction", false],
      ["At 37% W-2 bracket", "$52,688 federal tax reduction", true],
      ["Cost seg study fee", "$895 · 59× return", false],
    ],
    sideCite: "Illustrative. Anonymized client. Numbers rounded.",
    microline: ["CPA-Ready Guarantee", " — if your CPA can't use the report, we revise it free or refund the study."],
  },
  masthead: ["CPA-Ready Guarantee", "IRS ATG Pub. 5653 compliant", "RSMeans 2024 data", "Delivered in under 1 hour", "All 50 states"],
  quiz: {
    eyebrow: "Three Questions",
    h2Plain: "Estimate your Year-1 W-2 reduction.",
    lede: "No email, no signup. The math is the same one your CPA will run — we just put it in front of you first.",
    methodH: "Methodology.",
    method: "30% reclassification midpoint, federal bracket only, 100% bonus depreciation in Year 1. State savings additional.",
  },
  how: {
    eyebrow: "The Mechanism",
    h2Plain: "How three IRS provisions ",
    h2Em: "stack",
    h2End: " into a W-2 deduction.",
    rows: [
      { num: "01", title: "The 7-day average rule.", reg: "IRC §469 · Treas. Reg. §1.469-1T(e)(3)(ii)(A)", body: "If your guests stay an average of seven days or less, the activity is not a \"rental activity\" under §469 — it's a trade or business. Losses lose their passive character." },
      { num: "02", title: "Material participation.", reg: "Treas. Reg. §1.469-5T (seven tests)", body: "Once non-rental, you only need to materially participate. The most common test: 100+ hours managing the STR and more than anyone else (no tax-pro hours competing)." },
      { num: "03", title: "Cost segregation amplifies it.", reg: "Rev. Proc. 87-56 · IRS ATG Pub. 5653", body: "Standard 27.5-year depreciation produces small W-2-offsetting losses. A cost seg study reclassifies 25–35% of basis to 5/15-year property — fully deductible Year 1 under bonus depreciation." },
    ],
  },
  example: {
    eyebrow: "Anonymized Client · Scottsdale, AZ · 2024",
    h2Plain: "A $750K STR. A $52K W-2 reduction. ",
    h2Em: "One year.",
    bignum: "$52,688",
    bignumLabel: "Year-1 Federal Tax Reduction",
    table: [
      ["Property basis (excl. land)", "$750,000"],
      ["Reclassified to 5/15-year", "32%"],
      ["Year-1 accelerated deduction", "$142,400"],
      ["Federal bracket (joint, $480K W-2)", "37%"],
      ["Study fee", "$895"],
      ["Net first-year benefit", "$51,793"],
    ],
    caption: "Illustrative. Anonymized client. Numbers rounded.",
    aside: "Recovered in cash on the next return.",
  },
  when: {
    eyebrow: "Honest Caveats",
    h2Plain: "When this ",
    h2Em: "doesn't",
    h2End: " work.",
    lede: "We'll tell you before you order. Four disqualifiers cover roughly 30% of inquiries.",
    items: [
      ["Average stay over 7 days.", "Long-term rental rules apply. You'd need REPS instead."],
      ["Under 100 hours of participation.", "The activity stays passive. Losses can't touch W-2 income."],
      ["AGI phase-outs apply.", "Some itemized deductions phase out at high incomes; we model that."],
      ["Property under ~$200K basis.", "The study fee can outpace the marginal benefit."],
    ],
  },
  final: {
    eyebrow: "Ready when you are",
    h2Plain: "The study takes ",
    h2Em: "under an hour.",
    sub: "Studies start at $495. Delivered same-day. CPA-Ready Guarantee. Order on costsegsmart.com — your data routes to the same engineering team.",
    routes: "Routes to costsegsmart.com/order — same operations.",
  },
};

// ----- Custom in-style estimators -----
function useEstimator() {
  const [step, setStep] = useV2State(0);
  const [answers, setAnswers] = useV2State({ prop: null, w2: null, mp: null });
  const result = useV2Memo(() => (answers.prop && answers.w2) ? computeEstimate(answers.prop, answers.w2) : null, [answers]);
  function pick(key, value) {
    setAnswers(a => ({ ...a, [key]: value }));
    setTimeout(() => setStep(s => Math.min(s + 1, 3)), 180);
  }
  function reset() { setStep(0); setAnswers({ prop: null, w2: null, mp: null }); }
  return { step, answers, result, pick, reset };
}

function StyledEstimator({ pillClass, resultClass, resultNumClass, eyebrowClass, qClass, accentBtn, ghostBtn, dotClass, dotOnClass }) {
  const { step, answers, result, pick, reset } = useEstimator();
  const stepCopy = [
    { lbl: "Question 01 / 03", q: "What did you (or will you) pay for the property?" },
    { lbl: "Question 02 / 03", q: "What's your W-2 income (you + spouse if joint)?" },
    { lbl: "Question 03 / 03", q: "Will you spend 100+ hours managing the STR — and more than anyone else?" },
  ];
  const propKeys = Object.keys(PROPERTY_BUCKETS);
  const w2Keys = Object.keys(W2_BUCKETS);
  const ctaPrimary = window.__W2_CTA_PRIMARY || "Order my study";

  return (
    <>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22, paddingBottom: 14, borderBottom: "1px solid currentColor", opacity: step === 3 ? 0.4 : 1 }}>
        <div style={{ display: "flex", gap: 6 }}>
          {[0,1,2].map(i => <span key={i} className={i <= step ? dotOnClass : dotClass} style={{ width: 22, height: 2, display: "inline-block" }} />)}
        </div>
        {step < 3 ? (
          <span className={eyebrowClass} style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>{stepCopy[step].lbl}</span>
        ) : (
          <button onClick={reset} style={{ background: "transparent", border: 0, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "inherit", opacity: 0.7, cursor: "pointer", padding: 0, fontFamily: "inherit" }}>← Re-estimate</button>
        )}
      </div>

      {step === 0 && (
        <>
          <div className={qClass}>{stepCopy[0].q}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 10 }}>
            {propKeys.map(k => <button key={k} className={`${pillClass} ${answers.prop === k ? "is-active" : ""}`} onClick={() => pick("prop", k)}>{PROPERTY_BUCKETS[k].label}</button>)}
          </div>
        </>
      )}
      {step === 1 && (
        <>
          <div className={qClass}>{stepCopy[1].q}</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 10 }}>
            {w2Keys.map(k => <button key={k} className={`${pillClass} ${answers.w2 === k ? "is-active" : ""}`} onClick={() => pick("w2", k)}>{W2_BUCKETS[k].label}</button>)}
          </div>
        </>
      )}
      {step === 2 && (
        <>
          <div className={qClass}>{stepCopy[2].q}</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 10 }}>
            {[["yes","Yes"],["maybe","Not sure"],["no","No"]].map(([k, l]) => <button key={k} className={`${pillClass} ${answers.mp === k ? "is-active" : ""}`} onClick={() => pick("mp", k)}>{l}</button>)}
          </div>
        </>
      )}
      {step === 3 && result && answers.mp === "yes" && (
        <div className={resultClass}>
          <span className={eyebrowClass} style={{ opacity: 0.7, fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>Estimated Year-1 W-2 tax reduction</span>
          <div className={resultNumClass + " num"}>{fmt$(result.reduction)}</div>
          <div className="num" style={{ fontFamily: "var(--sans)", fontSize: 14, opacity: 0.8 }}>
            On <strong>{fmt$(result.deduction)}</strong> of accelerated deductions · Study fee <strong>{fmt$(result.fee)}</strong> · <strong>{result.roi}×</strong> return
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href={ORDER_URL} className={accentBtn}>{ctaPrimary} →</a>
            <a href="#playbook" className={ghostBtn}>Download playbook</a>
          </div>
        </div>
      )}
      {step === 3 && answers.mp === "maybe" && (
        <div className={resultClass} style={{ background: "transparent", color: "inherit", border: "1px dashed currentColor", padding: 32 }}>
          <span className={eyebrowClass} style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>One step left</span>
          <div className={qClass} style={{ marginTop: 12 }}>Take the Material Participation Test.</div>
          <p style={{ fontFamily: "var(--sans)", fontSize: 14, marginTop: 8, opacity: 0.75, lineHeight: 1.55 }}>Six questions. Two minutes. Confirms whether your hours qualify before you spend a dollar.</p>
          <div style={{ marginTop: 22, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#qualify" className={accentBtn}>Take the test →</a>
            <button onClick={reset} className={ghostBtn} style={{ cursor: "pointer" }}>Re-estimate</button>
          </div>
        </div>
      )}
      {step === 3 && answers.mp === "no" && (
        <div className={resultClass} style={{ background: "transparent", color: "inherit", border: "1px dashed currentColor", padding: 32 }}>
          <span className={eyebrowClass} style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>Different path</span>
          <div className={qClass} style={{ marginTop: 12 }}>You probably need REPS — not the STR loophole.</div>
          <p style={{ fontFamily: "var(--sans)", fontSize: 14, marginTop: 8, opacity: 0.75, lineHeight: 1.55 }}>Without 100+ hours of material participation, an STR's losses stay passive. Read the 7-Day Rule explainer for the alternate route.</p>
          <div style={{ marginTop: 22, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#7day" className={accentBtn}>Read the 7-Day Rule</a>
            <button onClick={reset} className={ghostBtn} style={{ cursor: "pointer" }}>Re-estimate</button>
          </div>
        </div>
      )}
    </>
  );
}

window.COPY = COPY;
window.StyledEstimator = StyledEstimator;
