// EzClaim — standard Homestead offer block (results-screen actionable hero).
//
// Deterministic, fixed-template: window.homesteadOffer(item, policy) (see
// homestead_offer.js) decides the banner STATE and the slot numbers; this file
// only renders the fixed banner + the standard three cards (Do nothing · File
// free with SDAT · EzClaim $39.99). No per-home prose is generated here — the
// banner string and card copy are constant; the data fills the slots.
//
// The detailed per-year math lives in the "See how we calculated this"
// disclosure, reusing the existing future-protection projection.

function HomesteadOfferBlock({ offer, futureProtection, nav }) {
  const o = offer || {};
  const cap = o.cap != null ? o.cap : 10;
  const bannerKind =
    o.state === "SAVINGS" ? "good" :
    o.state === "DENIED" ? "warn" :
    o.state === "APPROVED" ? "good" : "info";

  // APPROVED homes never reach this block (results routes them to StatusBlock),
  // but render banner-only defensively if they ever do.
  const showCards = o.state !== "APPROVED";

  return (
    <>
      <Callout kind={bannerKind}>{o.banner || "Look up your Homestead status to see your options."}</Callout>

      {showCards ? (
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Your three options</div>
          <div style={{ display: "grid", gap: 14, gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>

            {/* 1 — Do nothing (the loss anchor) */}
            <div className="choice" style={{ borderStyle: "dashed", opacity: 0.92 }}>
              <div className="row between">
                <div className="choice-title">Do nothing</div>
                <Tag kind="warn">Uncapped</Tag>
              </div>
              <div className="choice-price"><strong>$0</strong> today · uncapped later</div>
              <ul>
                <li><span className="x"><I.X size={14}/></span>No Homestead cap on your assessment</li>
                <li><span className="x"><I.X size={14}/></span>A future reassessment passes through in full</li>
                <li><span className="x"><I.X size={14}/></span>You keep none of the protection</li>
              </ul>
            </div>

            {/* 2 — File free with SDAT (honest free path) */}
            <div className="choice">
              <div className="row between">
                <div className="choice-title">File free with SDAT</div>
                <Tag>Free</Tag>
              </div>
              <div className="choice-price"><strong>$0</strong> · you do it</div>
              <ul>
                <li><span className="ck"><I.Check size={14}/></span>The official state route, always free</li>
                <li><span className="ck"><I.Check size={14}/></span>You complete the form, prove residency, submit</li>
                <li><span className="ck"><I.Check size={14}/></span>You track it — and fix any rejection — yourself</li>
              </ul>
              <Button kind="secondary" iconRight={<I.ExternalLink size={14}/>} onClick={() => nav("/sdat")}>How to file free</Button>
            </div>

            {/* 3 — EzClaim (done-for-you, recommended) */}
            <div className="choice recommended">
              <span className="rec-tag">Done for you</span>
              <div className="row between">
                <div className="choice-title">EzClaim files it for you</div>
                <Tag kind="info">$39.99</Tag>
              </div>
              <div className="choice-price"><strong>$39.99</strong> · one-time</div>
              <ul>
                <li><span className="ck"><I.Check size={14}/></span>We prepare your SDAT Homestead application</li>
                <li><span className="ck"><I.Check size={14}/></span>We submit it and track it to confirmation</li>
                <li><span className="ck"><I.Check size={14}/></span>Caps you at {cap}%/yr — none of the paperwork</li>
              </ul>
              <Button kind="primary" iconRight={<I.ArrowRight size={14}/>} onClick={() => nav("/wizard/address")}>Start with my address</Button>
            </div>
          </div>

          <OfferMethodDetail offer={o} futureProtection={futureProtection}/>

          <Callout kind="info" style={{ marginTop: 12 }}>
            <strong>Not a government agency.</strong> The Homestead Credit is administered by Maryland SDAT — you can also file free directly with SDAT. Flat $39.99 if you want help. Estimates are modeled from public data; SDAT determines eligibility.
          </Callout>
        </div>
      ) : null}
    </>
  );
}

function OfferMethodDetail({ offer, futureProtection }) {
  const rows =
    futureProtection && typeof taxBillRowsForProtection === "function"
      ? (taxBillRowsForProtection(futureProtection) || [])
      : [];
  return (
    <details className="fp-disclosure" style={{ marginTop: 14 }}>
      <summary>
        <span className="fp-d-label"><I.Info size={15}/> See how we calculated this</span>
        <span className="fp-d-chev"><I.ChevronRight size={16}/></span>
      </summary>
      <div className="fp-d-body">
        <p className="fp-d-meth">
          We start from this property's <strong>own</strong> assessment record — a most-recent reassessment of about{" "}
          <strong>{offer.recentReassessmentPct}%</strong> — and apply the <strong>{offer.cap}%/yr</strong> local Homestead
          cap (10%/yr state) across the three-year phase-in. The dollar figure is the tax on the portion that
          exceeds the cap — <em>what filing removes</em> — not the gross increase, which happens with or without
          Homestead. A "sharp reassessment" models ~25% (≈ the recent statewide average). Modeled, not guaranteed.
        </p>
        {rows.length ? (
          <div className="fp-year-summary" aria-label="Year-by-year protection">
            {rows.map((r) => (
              <div className="fp-year-summary-item is-future" key={`offer-${r.year}`}>
                <div className="fp-year-summary-label">{r.label || `${r.year} Tax Bill`}</div>
                <div className="fp-year-summary-v tabnum"><MoneyLine low={r.low} high={r.high}/></div>
              </div>
            ))}
          </div>
        ) : null}
      </div>
    </details>
  );
}

window.HomesteadOfferBlock = HomesteadOfferBlock;