// asiz-subpages.jsx — About, How it works, Compare, FAQ, Testimonials, Contact

function PageHead({ eyebrow, title, lead }) {
  return (
    <section className="asiz-page-head">
      <div className="asiz-wrap">
        <Reveal>
          <div className="asiz-eyebrow">{eyebrow}</div>
        </Reveal>
        <Reveal delay={0.1}>
          <h1>
            <SplitHeadline text={title} />
          </h1>
        </Reveal>
        {lead && (
          <Reveal delay={0.3}>
            <p className="asiz-body" style={{ marginTop: 32, fontSize: 20, maxWidth: '52ch' }}>{lead}</p>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function AboutPage({ setRoute, formStyle }) {
  const notUs = [
    ['We are not a course or community.', "We don't teach Sub-To. We don't run a mastermind, a coaching program, or a paid community. Our audience is sellers and listing agents — not investors learning to do deals."],
    ['We are not a cash-buyer franchise.', "The yellow-and-black bandit-sign register isn't ours. We don't run \"we'll inspect and reduce\" pricing games. The cash-discount math isn't our business model — we don't deploy capital on the loan portion, so we don't need to recover it out of a haircut."],
    ['We are not a wholesaler.', "We don't assign contracts. We close on title. The home is bought, not relisted to an investor network. State wholesaling-disclosure regimes don't apply to us because we are structurally distinct from wholesaling."],
    ['We are not a foreclosure-prevention service.', "Pre-foreclosure is one situation among several that bring sellers to us. The government and licensed nonprofit housing counselors own that domain. We can help a seller avoid foreclosure through a Subject-To sale when the structure fits — but we don't lead with the framing and we don't claim guarantees the law forbids us to claim."],
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— about"
        title="We close Sub-To deals. That's the whole company."
        lead="No course. No community. No assignment network. No bandit signs. We take over existing mortgages, take title at closing, and hold the property long-term. Our payment record is the entire product."
      />

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why we exist</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0, letterSpacing: '-0.02em' }}>
                The cash-buyer math is <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>wrong for the seller, every time.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  The cash-buyer model takes 30 to 40% of the seller's home in exchange for speed. That spread pays for the buyer's capital, the buyer's holding costs, the buyer's rehab, and the buyer's profit on the resale. The seller funds all of it out of equity that should have stayed in their pocket.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  Sub-To is the alternative. When the existing loan is the structure, the buyer doesn't need a 60–70% offer to make the deal work — and the seller walks with the same number a 90-day traditional sale would have produced, in 15 days, without a bank in the room. We exist to do that, on every deal we touch.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what we do, mechanically</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0, letterSpacing: '-0.02em' }}>
                Same on <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>every deal.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  We buy homes Subject-To the existing mortgage. We take title; the loan stays in place, in the seller's name, with the same rate and balance the seller originally signed. From closing forward, we make every monthly payment, on time, through an independent third-party loan servicer that sends the seller written verification each month.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  That's the whole setup. We run it the same way on every deal.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what we are not</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              Four categories we <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>don't belong to.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {notUs.map(([t, d], i) => (
              <Reveal key={t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === notUs.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— how we operate</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0 }}>
                The numbers speak <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>quietly.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  We close nationally, working with licensed local title professionals at closing in your state. The seller's attorney is welcome on the seller side. Title work, recording, and disbursement happen the way they happen on any other real estate transaction — at a licensed title company, on a date everyone agrees on, with documents the parties read before they sign.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  The brand is anonymous on purpose. No founder photos, no team headshots, no LinkedIn-bio hero. Trust in this category should not come from a face — it should come from the structure of the deal, the protections recorded at closing, and the payment record on the loans we've taken over. Five Sub-To closes. Six-day average from offer to deed. Every one closed in under a week. When the next deal closes, the numbers update.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <SectionStats />

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what we will not do</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', margin: '16px 0 32px', maxWidth: '22ch' }}>
              Lines we <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>don't cross.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
            <Reveal delay={0.2}>
              <p className="asiz-body" style={{ marginTop: 0 }}>
                No fabricated metrics. No "100+ deals." No "thousands of happy sellers." No "America's #1 anything." We have five closes — we say five.
              </p>
              <p className="asiz-body">
                No "guaranteed top dollar." No "guaranteed stop foreclosure." No "guaranteed" anything. The setup does the work; the language stays honest.
              </p>
              <p className="asiz-body">
                No urgency theater. No "limited spots." No "act now or lose this." The seller's situation is the urgency; we don't manufacture more.
              </p>
            </Reveal>
            <Reveal delay={0.3}>
              <p className="asiz-body" style={{ marginTop: 0 }}>
                No bandit signs, no yellow-and-black palette, no smiling-family stock photography, no "we buy ugly houses" register. We built the brand the way we did because the alternative is the visible language of operators who behave badly toward people in hard moments. ProPublica's 2023 investigation into the cash-buyer franchise industry documented what happens when that register is allowed to operate without scrutiny. We don't sell that.
              </p>
              <p className="asiz-body">
                No franchise dilution. No licensees running the model under our name. One company, one operator, one payment record.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

function HowPage({ setRoute, formStyle }) {
  const skim = [
    "We take title to your home and take over the existing mortgage payments",
    "The mortgage stays in your name — your credit, your tradeline, our payments",
    "Our payment guarantee is recorded at closing — if we ever miss, you foreclose on us",
    "Close in 15 days, full market value, $0 to you at the closing table",
  ];

  const stages = [
    {
      n: '01',
      t: 'We agree on price and structure',
      d: "You tell us the address, the loan basics (lender, balance, rate), and the situation. We send a written offer within 24 to 48 hours. The number is typically full market value, because we take over the existing loan instead of writing a cash check.",
    },
    {
      n: '02',
      t: 'Title transfers to us',
      d: "At closing, the deed transfers from you to As Iz Homes. The closing happens at a licensed title company in your state. Your attorney is welcome on your side.",
    },
    {
      n: '03',
      t: 'The mortgage stays in place, in your name',
      d: "Same loan, same lender, same rate, same balance. Nothing about the loan changes. The lender continues to receive the same payment, on the same schedule — only the source of that payment changes from you to us.",
    },
    {
      n: '04',
      t: 'Payments route through an independent third-party loan servicer',
      d: "A separate company we don't control receives our payments, sends them to the lender, and sends you written verification each month. You see the payment hit, in writing, on a paper trail that doesn't depend on us.",
    },
    {
      n: '05',
      t: 'Our payment guarantee is recorded at closing',
      d: "We have maintained a 100% on-time payment record across every deal we've closed. We commit contractually, in the closing documents, to keep every monthly payment current — and a separate third-party servicer sends you written verification each month.",
    },
  ];

  const dueOnSale = [
    ['The clause exists.', "It gives the lender the right (not the obligation) to call the loan due upon transfer of title. We don't pretend otherwise."],
    ['Lenders rarely call loans current on payments.', "The mortgage industry has known about Subject-To and similar structures for decades. Title companies and real estate attorneys handle them routinely. Lenders rarely exercise the clause when a loan is current and the borrower's credit is intact. We say \"rarely,\" not \"never.\""],
    ['We commit contractually to keep your loan current.', "Every monthly payment, on time, every month, with monthly written verification from the third-party servicer. The commitment is written into the closing documents."],
    ['Your name stays on the loan.', "That is the structural truth of Subject-To, not a workaround. Because the loan stays in your name, you remain the borrower of record. We commit contractually to keep every payment current — backed by a third-party servicer who sends you written verification monthly. We don't pretend the legal picture is simpler than it is. That's exactly why you can trust the setup."],
  ];

  const protections = [
    {
      t: 'Third-party loan servicing',
      d: "Every monthly mortgage payment routes through an independent third-party loan servicer — a separate company whose only job is to receive money from us, send it to the lender, and report. You receive written verification from the servicer every month, on a paper trail that doesn't depend on us. No guessing. No \"trust me.\" If a payment ever doesn't hit, you find out from the servicer the same week — not from a missed-payment notice on your credit report months later.",
    },
    {
      t: 'Positive credit tradeline',
      d: "Because the loan stays in your name and the payments continue on time, the on-time payment history continues to register on your credit report as a positive tradeline for as long as the loan is in place.",
    },
  ];

  const wontDo = [
    ['We don\'t refinance the loan into our name later.', "We don't promise to. The loan stays in place, as-is, until the property is sold again or the loan is paid off some other way. Earlier internal documents incorrectly listed a \"refinance commitment\" as a seller protection; we corrected that. Seller protection comes from the two named pieces above — third-party servicing and positive credit tradeline — not from a refinance promise we won't keep."],
    ['We don\'t promise the loan comes off your name.', "That isn't how Subject-To works. The honest answer is that the loan stays in your name; the protections are around the loan, not a promised exit from it. If you specifically want a buyer who will refinance into their own name or formally assume the loan, we are not the right fit and we'll say so."],
    ['We don\'t say "guaranteed."', "Not \"guaranteed top dollar,\" not \"guaranteed stop foreclosure,\" not \"guaranteed\" anything. We name the structure and let the setup do the work."],
    ['We don\'t assign your contract.', "We close on title and hold the property. We are not a wholesaler."],
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— how it works"
        title="Full market value, no bank, in 15 days."
        lead="We run it the same way on every deal. We take care of the mortgage. You get your price and your timeline. Five closes to date. Six-day average from offer to deed. Every one closed in under a week."
      />

      <section style={{ padding: '48px 0 64px' }}>
        <div className="asiz-wrap">
          <Reveal>
            <div style={{
              borderLeft: '3px solid var(--accent)',
              padding: '20px 28px',
              background: 'var(--bg-2)',
            }}>
              <div className="asiz-eyebrow" style={{ marginBottom: 14 }}>— if you skim, here's what to know</div>
              <ul style={{ margin: 0, paddingLeft: 18, listStyle: 'disc' }}>
                {skim.map((line, i) => (
                  <li key={i} style={{ fontSize: 16, lineHeight: 1.55, marginBottom: 6 }}>{line}</li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— here is what actually happens</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0 }}>
                How this works, in <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>plain English.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  We take title to your home. Your mortgage stays in place, in your name, untouched — same rate, same balance, same lender. From that day forward, we make every monthly payment, on time, through an independent third-party loan servicer that sends you written verification each month. Our payment guarantee is recorded at closing — if we ever miss, you foreclose on us, with the property itself as collateral.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  This is called a <strong>subject-to existing mortgage takeover — Subject-To for short</strong>.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— the five steps, in order</div></Reveal>
          <div style={{ display: 'grid', gap: 0, marginTop: 16 }}>
            {stages.map((s, i) => (
              <Reveal key={s.n} delay={i * 0.06}>
                <div style={{
                  display: 'grid',
                  gridTemplateColumns: '100px 1fr 1.4fr',
                  gap: 40,
                  padding: '36px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === stages.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{s.n}</div>
                  <h3 className="asiz-display" style={{ fontSize: 'clamp(24px, 2.6vw, 34px)', margin: 0, lineHeight: 1.15 }}>
                    {s.t}
                  </h3>
                  <p className="asiz-body" style={{ fontSize: 16, margin: 0 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why our offer doesn't look like the other cash offers you've gotten</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.05, margin: 0 }}>
                Different setup. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Different number.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  A cash buyer must offer 60–70% of fair market value to make their math work. They are deploying capital — buying the home outright, holding it, fixing it, flipping it, paying interest the whole time. To recover that capital plus a profit, they need a deep discount on the front end.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  We are not deploying capital. We don't write a check for the loan portion of the purchase. We take title and the existing mortgage stays in place, with us making the payments going forward. The cash-discount math doesn't apply to our business model.
                </p>
              </Reveal>
              <Reveal delay={0.4}>
                <p className="asiz-body">
                  Same outcome — the home is sold, you walk away. Different setup — and a meaningfully different number on the offer.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— due-on-sale, treated honestly</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', margin: '16px 0 16px', maxWidth: '22ch' }}>
              The honest answer has <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>four parts.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '60ch', marginBottom: 40 }}>
              Most mortgages contain a due-on-sale clause. Here's the truth about it, without the workaround language.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {dueOnSale.map(([t, d], i) => (
              <Reveal key={t} delay={i * 0.06}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === dueOnSale.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 22, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— three named protections</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              Recorded, written, or paid <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>through a third party.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {protections.map((p, i) => (
              <Reveal key={p.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === protections.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 4px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{p.t}</h3>
                    {p.sub && (
                      <div style={{
                        fontFamily: 'var(--font-mono)', fontSize: 12,
                        letterSpacing: '0.06em', textTransform: 'uppercase',
                        color: 'var(--ink-soft)', marginBottom: 10,
                      }}>{p.sub}</div>
                    )}
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{p.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what about equity above the loan</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.05, margin: 0 }}>
                Two instruments. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>One transaction.</span>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="asiz-body" style={{ marginTop: 0 }}>
                When a seller has substantial equity above the existing mortgage balance — for example, you owe $200,000 and the home is worth $350,000 — pure Subject-To leaves the equity stranded. In those cases, we layer a carryback note on top of the Subject-To. We take title Subject-To the existing mortgage, pay you a cash down payment at closing, and the remaining equity becomes a carryback note from you to us — typically a 5 to 7 year balloon, low or no interest. Two instruments, one transaction.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what we don't do</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              Honest about the <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>edges.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {wontDo.map(([t, d], i) => (
              <Reveal key={t} delay={i * 0.06}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '24px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === wontDo.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 22, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
        <div className="asiz-wrap" style={{ textAlign: 'left' }}>
          <Reveal><div className="asiz-eyebrow">— next step</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              We can read your file and send a <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>real offer in 24–48 hours.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch' }}>
              No commitment, no qualifying questions, no obligation. We run it the same way on every deal. The numbers depend on yours.
            </p>
          </Reveal>
          <Reveal delay={0.3} style={{ marginTop: 28, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('sellers')}>
              See the offer (sellers)
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
            <button className="asiz-btn asiz-btn--ghost" onClick={() => setRoute('agents')}>
              Send a listing (agents)
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function ComparePage({ setRoute, formStyle }) {
  const rows = [
    ['Commissions', '5–6% of sale price', "Full 3% to your agent, paid from our down payment"],
    ['Closing costs', '1–2% of sale price', 'We cover them'],
    ['Repairs before sale', 'Often required', 'None'],
    ['Appraisal needed', 'Yes', 'No'],
    ['Showings', '10–25 on average', 'Zero'],
    ['Inspection contingency', 'Typical', 'None'],
    ['Days on market', '30–90+', 'N/A'],
    ['Closing timeline', '60+ days', '6-day average across our closes to date'],
    ['Financing falls through', '~13% of contracts', "Never — the mortgage that funds the deal is already there"],
  ];
  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— compare"
        title="Traditional listing vs. As Iz Homes."
        lead="A traditional listing can work when the home is in good shape and you have months to wait. We're built for the cases where one of those isn't true — and where you'd rather walk away with full market value than take a cash-buyer haircut. We typically pay full market value because we take over the existing loan instead of writing a cash check."
      />
      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <table className="asiz-compare">
            <thead>
              <tr>
                <th style={{ width: '32%' }}></th>
                <th>Traditional listing</th>
                <th className="asiz-col-us" style={{ color: 'var(--accent)' }}>As Iz Homes</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(([lbl, a, b], i) => (
                <Reveal key={lbl} as="tr" delay={i * 0.04}>
                  <td style={{ fontWeight: 500 }}>{lbl}</td>
                  <td style={{ color: 'var(--ink-soft)' }}>{a}</td>
                  <td className="asiz-col-us" style={{ fontWeight: 500 }}>{b}</td>
                </Reveal>
              ))}
            </tbody>
          </table>
        </div>
      </section>
      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

function FAQPage({ setRoute, formStyle }) {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    [
      "Does the loan stay in the seller's name after closing?",
      [
        "Yes. That is structurally how a subject-to existing mortgage takeover (Subject-To, for short) works. Title transfers to us, but the existing mortgage stays in place, in the seller's name, with the same rate and balance the seller originally signed.",
        "Three things make that workable. First, every monthly payment routes through an independent third-party loan servicer that sends written verification to the seller each month — they see the payment hit, in writing, on a separate paper trail from us. Second, our payment guarantee is recorded at closing — if we ever miss, the seller takes the house back through foreclosure, with the property itself as collateral. Third, on-time payment history continues to register on the seller's credit report as a positive tradeline.",
        "What we don't do: we don't promise the loan comes off the seller's name. The honest answer is that it stays — that's how the structure works — and the protections are around the loan, not a promised exit from it. If the seller specifically wants a buyer who will refinance into their own name, we are not the right fit and we'll say so.",
      ],
    ],
    [
      "Why doesn't your offer look like the other cash offers we've gotten?",
      [
        "Because we are not a cash buyer. The cash-buyer math is structurally different from ours.",
        "A cash buyer must offer 60–70 percent of fair market value to recover the capital they're deploying — the cash they pay for the home, the holding costs, the rehab, the resale costs, and a profit margin on the back end. To make that math work, they need the discount.",
        "We don't deploy capital on the loan portion. We take title and the existing mortgage stays in place, with us making the payments going forward. The cash-discount math doesn't apply to our business model. So we typically pay full market value because we structurally don't need a cash-buyer haircut.",
      ],
    ],
    [
      "What protects the seller in a Sub-To deal?",
      [
        "Two named protections, written into the closing documents — not \"trust us.\"",
        "First, third-party payment servicing. Every monthly mortgage payment routes through an independent loan servicer — a separate company whose only job is to receive our payment, send it to the lender, and report. The seller receives written verification from the servicer every month. We are not handling the money directly between buyer and lender; an independent paper trail sits between us.",
        "Second, positive credit tradeline. Because the loan stays in the seller's name and the payments continue on time, the on-time payment history continues to register on the seller's credit report as a positive tradeline for as long as the loan is in place.",
      ],
    ],
    [
      "Will you use a third party to make the payments?",
      [
        "Yes. Every monthly mortgage payment routes through an independent third-party loan servicer — a separate company whose only job is to receive our payment, send it to the lender on schedule, and report the transaction to all three parties.",
        "The seller receives written verification from the servicer each month: who paid, when, how much, to whom. The paper trail is independent of us. We are not handling money directly between buyer and lender; the servicer sits between us and provides the receipts.",
        "This is one of two named protections that secure the seller. The other is the positive credit tradeline that continues registering on the seller's credit report as on-time payments continue.",
      ],
    ],
    [
      "How fast can you actually close?",
      [
        "Six-day average from offer to deed across the closes we've done. Every one of those has closed in under a week. The number is auditable; when the next deal closes the average updates.",
        "The reason it's fast is structural. There is no bank application on our side, no appraisal contingency, no rate-lock window, no underwriting file to push through committee. The mortgage that funds the deal is already there. What slows down a Subject-To close is title work, document preparation, and the seller's own timeline — not financing.",
      ],
    ],
    [
      "What does this cost the seller? Are there hidden fees?",
      [
        "$0 to the seller at the closing table. Your seller pays nothing on the buyer side, and we cover the seller-side closing costs — title-company fees, transfer taxes, recording fees, prorations. We don't add a \"buyer convenience fee\" or a \"service fee\" or a \"program fee\" on top. The number on the offer is the number; the closing statement reflects that.",
        "If you have an agent, the agent's full commission — typically 3 percent — is paid from our down payment at closing. That comes out of our money, not yours.",
      ],
    ],
    [
      "Is Subject-To loan fraud?",
      [
        "No. No false statements are made to any lender. No new loan is created. No application is submitted, no underwriting is performed, and no representations are made to anyone other than the parties to the sale. Subject-To is a well-established legal structure routinely closed by title companies and real estate attorneys. Mortgages have contained due-on-sale clauses for decades; the legal infrastructure handles Subject-To transfers as a matter of routine.",
        "What's happening is: title transfers from seller to buyer, and the existing mortgage stays in place per its existing terms. Both parties know about it. The title company records the documents. There is no concealment, because nothing is being concealed.",
      ],
    ],
    [
      "What about the due-on-sale clause?",
      [
        "The clause exists. It gives the lender the right (not the obligation) to call the loan due upon transfer of title.",
        "In practice, lenders rarely call loans current on payments. The mortgage industry has known about Subject-To for decades and the legal infrastructure handles it routinely. We commit contractually to keep your loan current — every monthly payment, on time, every month, with monthly written verification from the third-party servicer.",
        "The seller's name stays on the loan, structurally. We commit contractually to keep every payment current — backed by a third-party servicer who sends the seller monthly written verification.",
        "We say \"rarely,\" not \"never.\" We do not say \"the bank won't notice.\" We do not say \"the bank can't do anything.\" Both of those framings are dishonest, and informed sellers and agents can spot them.",
      ],
    ],
    [
      "Do you need bank approval to close?",
      [
        "No. Subject-To does not require bank approval. The existing loan stays in place per its existing terms; we don't apply to the bank, refinance, or assume. The lender continues to receive the same payment, on the same schedule — only the source of the payment changes.",
      ],
    ],
    [
      "Is there an escrow deposit or proof of funds?",
      [
        "The traditional-purchase versions don't apply cleanly. There is no bank application, so there is no proof-of-funds in the conventional sense — no underwriting file to attach a POF letter to.",
        "What protects the seller instead: the third-party loan servicer (independent monthly verification), and the structural fact that we take title and operate the property long-term — we are not flipping it back to an investor on assignment.",
        "If your seller's attorney wants escrow language structured a particular way at closing, we'll work with the title company to accommodate. The structure is flexible at the closing table; what's not flexible is that we don't apply to a bank.",
      ],
    ],
    [
      "What if the seller has equity above the loan balance?",
      [
        "We pay it. When the home is worth more than the existing mortgage balance, we layer a carryback note on top of the Subject-To. We take title Subject-To the existing mortgage, pay the seller a cash down payment at closing, and the remaining equity becomes a carryback note from the seller to us — typically a 5 to 7 year balloon, at low or no interest.",
        "Two instruments, one transaction. The Subject-To is the mortgage instrument; the carryback is the seller-financing instrument. They coexist at closing.",
      ],
    ],
    [
      "What about VA, FHA, or assumable loans?",
      [
        "We offer Subject-To, not formal loan assumption. If the seller (or their agent) specifically wants a buyer who will assume the existing loan into their own name through the lender's formal assumption process, we are not the right fit and we'll say so up front.",
        "VA loans deserve a specific note: VA entitlement can be tied to the loan in ways that some sellers want preserved and others don't mind. If the seller cares about VA entitlement specifically, the formal assumption path may matter to them more than the Subject-To path. We can discuss; if the structure doesn't fit, we send them elsewhere rather than push.",
      ],
    ],
    [
      "Do you assign the contract to another buyer?",
      [
        "No. We close on title and we hold the property long-term. We are not a wholesaler. The contract is in our name; the deed is in our name at closing; the home is bought, not relisted to an investor network.",
      ],
    ],
    [
      "How long does this stay on the seller's credit report or in their name?",
      [
        "The mortgage stays in place, as-is, until the property is sold again or the loan is paid off some other way. We don't refinance into our own name and we don't promise to.",
        "That is the honest structural answer. Seller protection comes from the three named pieces — our payment guarantee, third-party servicing, and positive credit tradeline — not from a refinance promise that we won't keep. The on-time payment history continuing on the seller's credit is a feature of the structure, not a bug.",
        "If a seller specifically needs the loan off their name on a defined timeline, they need a buyer who will refinance or formally assume. That is a different transaction than what we do, and we'll say so.",
      ],
    ],
    [
      "We can help you avoid foreclosure through a Subject-To sale — what does that mean in practice?",
      [
        "If your situation fits the structure, we can take over the existing mortgage payments and close before a trustee's sale date, which moves the lender's foreclosure clock. The setup is the same as on any other Subject-To: title to us, the loan stays in place, payments resume on time through the third-party servicer, our payment guarantee is recorded.",
        "What we don't say: \"guaranteed stop foreclosure.\" That phrasing is FTC-actionable and we don't use it. Whether we can close before a specific auction date depends on the date, the lender, the title work, and the seller's situation. The honest answer is \"if deal structure fits, we close in 15 days — call us early enough that the timeline works.\"",
      ],
    ],
    [
      "We are not a fit. Can you refer us elsewhere?",
      [
        "Yes. If Subject-To isn't the right structure for your situation — for example, you specifically need a buyer who will formally assume the loan, or you specifically want a cash transaction — we'll tell you and, where we can, point you at the path that fits. We'd rather send a seller to the right answer than push them into the wrong one.",
      ],
    ],
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— direct answers"
        title="Direct answers."
        lead="Sourced from real questions agents and sellers ask. Yes, no, or here's how — first, then the named piece that supports it. We don't bury the answer."
      />
      <section style={{ padding: '64px 0 96px' }}>
        <div className="asiz-wrap" style={{ maxWidth: 960 }}>
          {faqs.map(([q, a], i) => (
            <Reveal key={q} delay={Math.min(i, 8) * 0.04}>
              <div
                className={`asiz-faq-item ${open === i ? 'is-open' : ''}`}
                onClick={() => setOpen(open === i ? -1 : i)}
              >
                <div className="asiz-faq-q">
                  <span>
                    <span style={{
                      fontFamily: 'var(--font-mono)', fontSize: 12, marginRight: 14,
                      color: 'var(--accent)', letterSpacing: '0.08em',
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    {q}
                  </span>
                  <span className="asiz-faq-toggle">+</span>
                </div>
                <div className="asiz-faq-a">
                  {Array.isArray(a)
                    ? a.map((para, pi) => <p key={pi} style={{ margin: pi === 0 ? '0 0 12px' : '0 0 12px' }}>{para}</p>)
                    : a}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{ padding: '64px 0', borderTop: '1px solid var(--line)' }}>
        <div className="asiz-wrap">
          <Reveal>
            <p className="asiz-body" style={{ fontSize: 18, marginBottom: 24 }}>
              Still have a question we didn't answer?
            </p>
          </Reveal>
          <Reveal delay={0.1} style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('contact')}>
              See the offer
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
            <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">
              Speak with someone — (424) 424-2959
            </a>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function ContactPage({ setRoute, formStyle }) {
  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— contact"
        title="Two ways to reach us."
        lead="Phone is the fastest. The form is the unhurried option. Either gets you to Paul or David."
      />

      <section style={{ padding: '64px 0 32px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— phone</div></Reveal>
          <Reveal delay={0.1}>
            <a href="tel:4244242959" className="asiz-display" style={{
              fontSize: 'clamp(56px, 8vw, 112px)',
              letterSpacing: '-0.03em',
              display: 'block', marginTop: 8, lineHeight: 1,
              fontVariantNumeric: 'tabular-nums',
            }}>
              (424) 424-2959
            </a>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ marginTop: 24, maxWidth: '60ch' }}>
              Phone calls are answered during business hours. Voicemails are returned the same business day. If you'd rather talk than type, this is the path.
            </p>
          </Reveal>
          <Reveal delay={0.3} style={{ marginTop: 24 }}>
            <a className="asiz-btn asiz-btn--accent" href="tel:4244242959">
              Call (424) 424-2959
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </a>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
            <div>
              <Reveal><div className="asiz-eyebrow">— sellers</div></Reveal>
              <Reveal delay={0.1}>
                <h2 className="asiz-display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: '12px 0 16px', lineHeight: 1.1 }}>
                  See the <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>offer.</span>
                </h2>
              </Reveal>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  Name, phone, the property address, and what brought you here if you'd like to share. We don't qualify you on the form — no income questions, no employment questions, no credit-score questions. Paul or David will call you back.
                </p>
              </Reveal>
            </div>
            <Reveal kind="blur" delay={0.2}>
              <OfferForm style={formStyle} />
            </Reveal>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'start' }}>
            <div>
              <Reveal><div className="asiz-eyebrow">— agents</div></Reveal>
              <Reveal delay={0.1}>
                <h2 className="asiz-display" style={{ fontSize: 'clamp(32px, 4vw, 48px)', margin: '12px 0 16px', lineHeight: 1.1 }}>
                  Send a <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>listing.</span>
                </h2>
              </Reveal>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  Send the listing. We'll send a written offer the same business day. Include the listing address, MLS number if you have one, and anything else useful about the seller's situation.
                </p>
              </Reveal>
              <Reveal delay={0.3} style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <a className="asiz-btn asiz-btn--accent" href="mailto:oleg@asizhomes.com?subject=New%20listing%20for%20As%20Iz%20Homes">
                  Email the listing
                  <span className="asiz-arrow">
                    <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                  </span>
                </a>
                <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">Call (424) 424-2959</a>
              </Reveal>
            </div>
            <div>
              <Reveal>
                <div style={{ marginTop: 0, display: 'grid', gap: 28 }}>
                  <div>
                    <div className="asiz-eyebrow">Email</div>
                    <a href="mailto:oleg@asizhomes.com" className="asiz-display" style={{ fontSize: 28, letterSpacing: '-0.02em', display: 'block', marginTop: 8 }}>
                      oleg@asizhomes.com
                    </a>
                  </div>
                  <div>
                    <div className="asiz-eyebrow">Office hours</div>
                    <p className="asiz-body" style={{ marginTop: 8 }}>
                      Mon–Fri · 8am – 7pm PT<br />
                      Sat · 9am – 3pm PT<br />
                      Voicemail &amp; text after hours.
                    </p>
                  </div>
                  <div>
                    <div className="asiz-eyebrow">Where we buy</div>
                    <p className="asiz-body" style={{ marginTop: 8 }}>
                      All 50 states. If deal structure fits, we close in 15 days.
                    </p>
                  </div>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '64px 0', background: 'var(--bg-2)', borderTop: '1px solid var(--line)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what happens next</div></Reveal>
          <Reveal delay={0.1}>
            <p className="asiz-body" style={{ marginTop: 12, maxWidth: '60ch' }}>
              Phone calls are answered during business hours; voicemails are returned the same business day. Form submissions reach Paul or David directly — sellers and agents both hear back from a human, not an autoresponder. If the deal fits the structure, a written offer follows within 24 to 48 hours.
            </p>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

// ─── Sellers ──────────────────────────────────────────────────

function SellersPage({ setRoute, formStyle }) {
  const offerStack = [
    "Full market value for your home — not a cash-buyer haircut",
    "Close in 15 days — 6-day average across our closes to date",
    "$0 from you at the closing table — we cover your seller-side closing costs",
    "Your existing mortgage keeps registering on-time payments to your credit",
    "Independent monthly verification on every payment — written, on paper, separate from us",
    "No showings. No repairs. No listing. No inspections. No contingencies.",
    "No income, employment, or credit-score questions to qualify",
  ];

  const motivations = [
    {
      t: 'Behind on payments',
      d: "You are 30, 60, or 90 days behind, and the lender's letters have changed tone. You have already tried what was available to try. We can take over the mortgage payments and move you to closing in 15 days.",
    },
    {
      t: 'Underwater on the loan',
      d: "You owe more than the home is worth, or close enough that a traditional sale would consume any equity. You don't bring a check to closing with us. The loan stays in place; you walk away.",
    },
    {
      t: 'Relocating on a fixed date',
      d: "The new job starts when it starts. The school year starts when it starts. We close on your schedule, not on a buyer's loan-approval calendar, and you don't take a 30% haircut to get there.",
    },
    {
      t: 'Divorce',
      d: "The marital home needs to sell, quietly, without showings, without dragging on. Both signatures, an attorney in the loop if there is one, and a written offer in the first conversation.",
    },
    {
      t: 'Inherited a house with a mortgage on it',
      d: "You don't want the property and you don't qualify to assume the loan. You don't have to. We take title, the existing mortgage stays in place, and the estate closes out clean.",
    },
    {
      t: 'Downsizing',
      d: "The house is bigger than the life you live in it now. You don't want a season of showings, lockboxes, and strangers walking through. As-is means as-is, and the price is what the home is worth.",
    },
  ];

  const protections = [
    {
      t: 'Yes, the loan stays in your name — and here\'s exactly what that means',
      d: "The loan stays in your name structurally; that's how Sub-To works. What changes: the payment burden, immediately and contractually, moves to us. What doesn't change: your credit (it keeps registering on-time payments as a positive tradeline), your equity (you walk with full market value), your control (the payment guarantee gives you foreclosure rights against us if we miss).",
    },
    {
      t: 'Our payment guarantee — recorded at closing',
      d: "If we ever miss a single mortgage payment, you take the house back. Not through arbitration. Not through a 1-800 number. Through foreclosure, in court, with the property itself as collateral. We sign that into the closing documents on every deal. It is the strongest guarantee a Sub-To buyer can give, and we can give it because we make our payments.",
    },
    {
      t: 'Third-party payment servicing',
      d: "Every monthly payment routes through an independent loan servicer — a separate company whose only job is to receive money from us, send it to the lender, and report. You get monthly written verification of the payment, on a paper trail that doesn't depend on us.",
    },
    {
      t: 'Positive credit tradeline',
      d: "On-time payment history continues to register on your credit report as a positive tradeline for as long as the loan is in place.",
    },
  ];

  const stats = [
    { n: 5, lbl: 'Sub-To closes since launch' },
    { n: 6, lbl: 'Day average from offer to deed', suffix: ' days' },
    { n: 0, prefix: '$', lbl: 'Closing costs to the seller, every deal' },
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— for sellers"
        title="We pay 100% of your home's value while cash buyers offer 60%."
        lead="We take over your existing mortgage payments and close in 15 days. You walk with the same money you'd get from a 90-day traditional sale — without the listing, the showings, or the bank. Last close: 6 days from offer to deed."
      />

      <section style={{ padding: '64px 0' }}>
        <div className="asiz-wrap" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('contact')}>
            See the offer
            <span className="asiz-arrow">
              <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
            </span>
          </button>
          <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">Call (424) 424-2959</a>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what you get when we close</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              Seven things, named in <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>writing.</span>
            </h2>
          </Reveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gridTemplateRows: `repeat(${Math.ceil(offerStack.length / 2)}, auto)`,
            gridAutoFlow: 'column',
            columnGap: 64,
          }}>
            {offerStack.map((item, i) => {
              const half = Math.ceil(offerStack.length / 2);
              const isLastInColumn = (i === half - 1) || (i === offerStack.length - 1);
              return (
              <Reveal key={i} delay={i * 0.05}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '48px 1fr', gap: 18,
                  padding: '20px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: isLastInColumn ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5 }}>{item}</p>
                </div>
              </Reveal>
              );
            })}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 32, fontSize: 18 }}>
              If this fits your situation, we'll send a written offer in 24–48 hours.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— whatever brought you here</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 16px', maxWidth: '22ch' }}>
              Six situations. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>One way out.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 48 }}>
              Six situations bring most sellers to us. The product is one. The way out is the same.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {motivations.map((m, i) => (
              <Reveal key={m.t} delay={i * 0.08}>
                <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                  <h3 className="asiz-display" style={{ fontSize: 24, letterSpacing: '-0.02em', margin: '0 0 12px', lineHeight: 1.15 }}>
                    {m.t}
                  </h3>
                  <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, lineHeight: 1.55 }}>{m.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— here is what actually happens</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: 0, lineHeight: 1.05 }}>
                How this works, in <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>plain English.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  We take title to your home. Your mortgage stays in place, in your name, untouched — same rate, same balance, same lender. From that day forward, we make every monthly payment, on time, through an independent third-party loan servicer that sends you written verification each month. Our payment guarantee is recorded at closing — if we ever miss, you foreclose on us, with the property itself as collateral. This is called a <strong>subject-to existing mortgage takeover — Subject-To for short</strong>. We have closed 5 of them. The average from offer to deed is 6 days, and every one has closed in under a week.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  Due-on-sale: the clause exists. Lenders rarely call loans current on payments, and we commit contractually to keep yours current. Your name stays on the loan; the payment burden moves to us. We don't pretend the legal picture is simpler than it is — that's exactly why you can trust the setup.
                </p>
              </Reveal>
              <Reveal delay={0.4}>
                <p className="asiz-body">
                  We typically pay full market value because we take over your existing loan instead of paying cash. Cash buyers need a 60–70% discount to cover holding costs, rehab, and profit. We don't.
                </p>
              </Reveal>
              <Reveal delay={0.5} style={{ marginTop: 16 }}>
                <button className="asiz-btn asiz-btn--ghost" onClick={() => setRoute('how')}>
                  Read how it works
                  <span className="asiz-arrow">
                    <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                  </span>
                </button>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— when Sub-To isn't the right fit</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', margin: 0, lineHeight: 1.05 }}>
                One conversation, <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>two paths.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  Sub-To works best when your existing loan has a decent rate and you'd rather walk away with full market value than take a cash haircut.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  If the structure doesn't fit your situation — the rate is too high to be worth taking over, the equity picture is unusual, or you specifically want cash in hand — tell us. We also buy for cash where the math works for both of us. The price is lower than Sub-To, the timeline is similar, and there is no obligation to choose fast on the call.
                </p>
              </Reveal>
              <Reveal delay={0.4} style={{ marginTop: 16 }}>
                <button className="asiz-btn asiz-btn--ghost" onClick={() => setRoute('contact')}>
                  Speak with someone
                  <span className="asiz-arrow">
                    <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                  </span>
                </button>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— four protections, named in writing</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              Recorded, written, or paid <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>through a third party.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {protections.map((p, i) => (
              <Reveal key={p.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === protections.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{p.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{p.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— the numbers</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              What we have. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>What we say.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {stats.map((s, i) => (
              <Reveal key={i} delay={i * 0.08}>
                <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                  <div className="asiz-display" style={{
                    fontSize: 'clamp(72px, 10vw, 144px)',
                    lineHeight: 1, letterSpacing: '-0.04em',
                    fontVariantNumeric: 'tabular-nums',
                    margin: 0,
                  }}>
                    {s.prefix || ''}<Counter to={s.n} />{s.suffix || ''}
                  </div>
                  <div className="asiz-eyebrow" style={{ marginTop: 16, color: 'var(--ink-soft)' }}>{s.lbl}</div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 40, maxWidth: '52ch' }}>
              These are the numbers we have. When the next deal closes, the numbers update. We say what's true.
            </p>
          </Reveal>
        </div>
      </section>

      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

// ─── Agents ──────────────────────────────────────────────────

function AgentsPage({ setRoute, formStyle }) {
  const offerStack = [
    "$0 from your seller at closing",
    "6-day average to deed",
    "Written offer in 24–48 hours",
    "No financing contingency, no appraisal contingency",
    "Monthly third-party verification on every payment",
    "We close on title and hold — not assigned to an investor network",
    "No fee, no haircut, no \"creative\" claw-back on your commission",
  ];

  const handoff = [
    {
      t: 'Same business day',
      d: "Once we have the address, the existing-loan basics, and the seller's situation, Paul or David reads the file. If the structure works, you get an LOI in writing within 24 to 48 hours.",
    },
    {
      t: 'The seller decides',
      d: "You present the offer the way you'd present any other. We don't bypass you, we don't bid your seller through a back channel, and we don't ask you to give up the listing.",
    },
    {
      t: 'Title and closing',
      d: "We work with licensed local title professionals at closing in your state. The seller's attorney is welcome on the seller side. We commit contractually, in the closing documents, to keep every monthly payment current with third-party servicing that sends the seller written verification each month.",
    },
    {
      t: 'Six-day average to deed',
      d: "Across the closes we've done, the median from accepted offer to deed is six days. Not a marketing number — that's the time it actually takes.",
    },
  ];

  const benefits = [
    {
      t: 'Full commission',
      d: "Your 3% is paid from our down payment at closing. No haircut for \"cash buyer convenience.\" No \"we'll cover your side only.\" The commission is the commission.",
    },
    {
      t: 'List price for the seller',
      d: "We typically pay full market value because we take over the existing loan instead of paying cash. The cash-buyer discount math doesn't apply to our offers.",
    },
    {
      t: '$0 to your seller in closing costs',
      d: "Your seller pays nothing at the closing table. The number on the offer is the number that lands in your seller's pocket — no buyer-side fees passed through, no last-minute deductions on the closing statement.",
    },
    {
      t: 'A close that holds',
      d: "No financing contingency, no appraisal contingency, no last-minute rate-lock collapse. The mortgage that funds the deal is already there.",
    },
    {
      t: 'Named seller protections',
      d: "Third-party loan servicing with monthly written verification to the seller. Positive credit tradeline as on-time payments continue.",
    },
  ];

  const notUs = [
    ['We are not a wholesaler.', "We don't assign your contract to an investor network. We close on title and we hold the property."],
    ['We are not a course or a community.', "We don't teach Sub-To. We close Sub-To deals."],
    ['We are not a cash-buyer franchise.', "We don't run the \"we'll inspect and reduce\" playbook."],
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— for listing agents"
        title="Your seller gets list price. You keep your full commission. We close in a week."
        lead="Full 3% commission, paid from our down payment at closing. Six-day average from offer to deed across our closes to date. Send the listing — we'll send a written offer the same day."
      />

      <section style={{ padding: '64px 0' }}>
        <div className="asiz-wrap" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('contact')}>
            Send a listing
            <span className="asiz-arrow">
              <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
            </span>
          </button>
          <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">Call (424) 424-2959</a>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— for your seller, for you</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              For your seller: <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>full list price.</span> For you: <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>full 3% commission.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 40 }}>
              Paid from our down payment at closing.
            </p>
          </Reveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gridTemplateRows: `repeat(${Math.ceil(offerStack.length / 2)}, auto)`,
            gridAutoFlow: 'column',
            columnGap: 64,
          }}>
            {offerStack.map((item, i) => {
              const half = Math.ceil(offerStack.length / 2);
              const isLastInColumn = (i === half - 1) || (i === offerStack.length - 1);
              return (
              <Reveal key={i} delay={i * 0.05}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '48px 1fr', gap: 18,
                  padding: '20px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: isLastInColumn ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <p style={{ margin: 0, fontSize: 16, lineHeight: 1.5 }}>{item}</p>
                </div>
              </Reveal>
              );
            })}
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— how the handoff works</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              You send the listing. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>We send a written offer.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {handoff.map((s, i) => (
              <Reveal key={s.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '100px 1fr 1fr', gap: 40,
                  padding: '40px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === handoff.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <h3 className="asiz-display" style={{ fontSize: 'clamp(26px, 3vw, 38px)', margin: 0, lineHeight: 1.1 }}>
                    {s.t}
                  </h3>
                  <p className="asiz-body" style={{ fontSize: 16, margin: 0 }}>{s.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what the offer looks like</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)', margin: 0, lineHeight: 1.05 }}>
                Numbers in the <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>first message.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  A real-deal-shape preview. We name the numbers in the first message because that's the only way an agent can present to a seller without a second round of qualifying.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  A typical offer names: purchase price, the existing mortgage balance and rate we're taking over (subject-to existing mortgage takeover — Subject-To for short), the down payment we're paying at closing, the commission line (your full 3%, paid from our down payment), the close timeline, the $0 due from your seller at the closing table, and the seller protections recorded at closing.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what you and your seller get</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              Five guarantees. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>None of them squishy.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {benefits.map((b, i) => (
              <Reveal key={b.t} delay={i * 0.06}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === benefits.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 26, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.15 }}>{b.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{b.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— what we're not</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              We are <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>not</span> the other guys.
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {notUs.map(([t, d], i) => (
              <Reveal key={t} delay={i * 0.08}>
                <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                  <h3 className="asiz-display" style={{ fontSize: 22, letterSpacing: '-0.02em', margin: '0 0 12px', lineHeight: 1.2 }}>
                    {t}
                  </h3>
                  <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, lineHeight: 1.55 }}>{d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

// ─── Sub-To vs Cash Offer ──────────────────────────────────────

function SubToVsCashOfferPage({ setRoute, formStyle }) {
  // Side-by-side comparison rows: [label, cashBuyerCol, asIzCol]
  const rows = [
    ['Typical offer', '60–70% of fair market value', '100% of fair market value'],
    ['What funds the deal', 'A cash check from the buyer', 'Existing mortgage stays in place; we take over payments'],
    ['Time to close', '7–21 days', '6-day average across our closes'],
    ['Closing costs to seller', 'Standard seller-side', '$0 — we cover seller-side closing costs'],
    ['Repairs before close', 'Often required', 'None'],
    ['Showings', 'Sometimes one walkthrough', 'None'],
    ['Financing contingency', 'No — discounted to compensate', 'No — the loan that funds the deal is already there'],
    ['Seller protections', 'None', 'Third-party servicing + positive credit tradeline'],
    ['Agent commission', 'Sometimes negotiated down', 'Full 3%, paid from our down payment at closing'],
  ];

  // Cash-buyer math breakdown — five line items the spread has to cover.
  const cashMath = [
    ['Capital cost', "The cash to pay for the home — borrowed at hard-money or private-lender rates, with origination fees on top."],
    ['Holding costs', "Mortgage interest, property taxes, insurance, utilities for as long as the property sits on their books."],
    ['Rehab', "Paint, flooring, kitchen, bath — whatever the resale market demands to move the property."],
    ['Resale costs', "Agent commissions, transfer taxes, title work, marketing — paid on the back end out of the same spread."],
    ['Profit margin', "Typically 10–20% of resale price, which is what compensates them for taking the risk."],
  ];

  const honestFits = [
    {
      t: 'The existing loan rate is high enough to make the structure uneconomical',
      d: "If the rate on the loan we'd be taking over is high enough that the monthly payment burden makes the deal unworkable for us, the structure doesn't fit. A cash buyer paying 60% may still be the right answer.",
    },
    {
      t: 'The seller specifically wants cash in hand at closing',
      d: "Sub-To pays any seller equity above the loan balance as a down payment, but the loan balance itself isn't paid off — it stays in place. If the seller specifically wants the full purchase price in cash on closing day, that's a different product than Sub-To.",
    },
    {
      t: 'The property has condition issues that block conventional financing on a future resale',
      d: "If the home needs more work than the existing loan can comfortably carry through, a cash investor who plans to rehab is the right buyer.",
    },
  ];

  // Two named seller protections.
  const protections = [
    {
      t: 'Third-party loan servicing',
      d: "Every monthly payment routes through an independent loan servicer — a separate company whose only job is to receive money from us, send it to the lender, and report. The seller gets monthly written verification on a paper trail that doesn't depend on us.",
    },
    {
      t: 'Positive credit tradeline',
      d: "Because the loan stays in the seller's name and payments continue on time, the on-time history continues registering on the seller's credit report as a positive tradeline for as long as the loan is in place.",
    },
  ];

  const stats = [
    { n: 100, suffix: '%', lbl: 'Of fair market value we typically pay' },
    { n: 60, suffix: '%', lbl: 'Of fair market value cash buyers typically pay' },
    { n: 6, suffix: ' days', lbl: 'Average from offer to deed across our closes' },
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— sub-to vs cash offer"
        title="Cash buyers offer 60%. We offer 100%."
        lead="The math is structurally different. A cash buyer must discount to recover the capital they're deploying. We take over your existing mortgage instead of writing a check, so the discount isn't required. Both numbers are real. Here is the side-by-side, with the honest cases where each one fits."
      />

      <section style={{ padding: '64px 0' }}>
        <div className="asiz-wrap" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('contact')}>
            See the offer
            <span className="asiz-arrow">
              <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
            </span>
          </button>
          <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">Call (424) 424-2959</a>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— side-by-side</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              Two different <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>products,</span> two different numbers.
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 40 }}>
              The table is what shows up on the closing statement on each path, not what shows up in the pitch.
            </p>
          </Reveal>
          <table className="asiz-compare">
            <thead>
              <tr>
                <th style={{ width: '28%' }}></th>
                <th>Cash buyer</th>
                <th className="asiz-col-us" style={{ color: 'var(--accent)' }}>As Iz Homes (Sub-To)</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(([lbl, a, b], i) => (
                <Reveal key={lbl} as="tr" delay={i * 0.04}>
                  <td style={{ fontWeight: 500 }}>{lbl}</td>
                  <td style={{ color: 'var(--ink-soft)' }}>{a}</td>
                  <td className="asiz-col-us" style={{ fontWeight: 500 }}>{b}</td>
                </Reveal>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why cash buyers must discount</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0 }}>
                Not greed. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Structure.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  Cash buyers don't discount because they're greedy. They discount because the math doesn't work without it. Every cash buyer's offer has to cover, out of the spread between purchase price and resale price, five line items:
                </p>
              </Reveal>
              <div style={{ display: 'grid', gap: 0, marginTop: 24 }}>
                {cashMath.map(([t, d], i) => (
                  <Reveal key={t} delay={0.3 + i * 0.05}>
                    <div style={{
                      display: 'grid', gridTemplateColumns: '60px 1fr', gap: 24,
                      padding: '20px 0',
                      borderTop: '1px solid var(--line)',
                      borderBottom: i === cashMath.length - 1 ? '1px solid var(--line)' : 'none',
                      alignItems: 'baseline',
                    }}>
                      <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                      <div>
                        <h3 className="asiz-display" style={{ fontSize: 20, margin: '0 0 6px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{t}</h3>
                        <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{d}</p>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
              <Reveal delay={0.7}>
                <p className="asiz-body" style={{ marginTop: 32 }}>
                  Add those up against a typical resale price and you get a purchase price around 60–70% of fair market value. That's not a negotiation tactic. That's the floor below which the deal stops being a deal for the buyer.
                </p>
              </Reveal>
              <Reveal delay={0.8}>
                <p className="asiz-body">
                  When you read about iBuyers offering 90% of fair market value, that's a different surface presentation — they typically tack on a 5–10% service fee that brings the net to the seller back into the 60–70% range. The structural math is the same.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why we don't need to discount</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0 }}>
                We don't deploy capital on the <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>loan portion.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  We take title and the existing mortgage stays in place — same lender, same rate, same balance the seller originally signed. From closing forward, we make every monthly payment, on time, through an independent third-party loan servicer that sends the seller written verification each month.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  The capital deployment that forces the cash-buyer math doesn't apply. We're not paying cash for the loan portion of the home value; the existing mortgage is doing that work. What we put up at closing is a down payment that covers the seller's equity above the loan balance plus the agent's commission — not the full purchase price.
                </p>
              </Reveal>
              <Reveal delay={0.4}>
                <p className="asiz-body">
                  Because we don't deploy capital on the loan portion, we don't need a 60–70% haircut to recover it. We typically pay full market value because the structure makes that workable.
                </p>
              </Reveal>
              <Reveal delay={0.5} style={{ marginTop: 16 }}>
                <button className="asiz-btn asiz-btn--ghost" onClick={() => setRoute('how')}>
                  Read how it works
                  <span className="asiz-arrow">
                    <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                  </span>
                </button>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— when cash is actually the right fit</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              Three honest cases. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>We'll say so.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 32 }}>
              We won't pretend Sub-To beats cash every time. Three cases where a cash offer genuinely fits better:
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {honestFits.map((f, i) => (
              <Reveal key={f.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === honestFits.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 22, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{f.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{f.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.5}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              If you tell us where you are and the rate / equity / condition picture, we can be honest with you about which path fits. If Sub-To doesn't fit, we'll say so and, where we can, point you toward someone who buys for cash at honest numbers.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— real numbers from our closes</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 48px', maxWidth: '22ch' }}>
              What we have. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>What we say.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {stats.map((s, i) => (
              <Reveal key={i} delay={i * 0.08}>
                <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                  <div className="asiz-display" style={{
                    fontSize: 'clamp(64px, 9vw, 128px)',
                    lineHeight: 1, letterSpacing: '-0.04em',
                    fontVariantNumeric: 'tabular-nums',
                    margin: 0,
                  }}>
                    <Counter to={s.n} />{s.suffix || ''}
                  </div>
                  <div className="asiz-eyebrow" style={{ marginTop: 16, color: 'var(--ink-soft)' }}>{s.lbl}</div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 40, maxWidth: '60ch' }}>
              In each of our closes, the seller walked away with the same net they'd have received from a 90-day traditional listing — without the listing, the showings, or the bank approval process. The gap between what a cash buyer would have paid and what we paid in those same five deals was, on average, 30–40% of fair market value. That gap is the seller's equity that would have funded the cash buyer's spread.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— seller protection comparison</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              A check, or a <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>recorded instrument.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 32 }}>
              A cash buyer gives the seller a closing check and a recorded deed. That's the protection: the money is in hand, the deal is done. A Sub-To buyer demonstrates protection differently, because the seller's mortgage stays in place after the deal closes. We do that with three named pieces, recorded or written into the closing documents.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {protections.map((p, i) => (
              <Reveal key={p.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === protections.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{p.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{p.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              A cash buyer offers none of those because they don't need to — the cash itself is the protection. A Sub-To buyer who can't name those three pieces is not a real Sub-To buyer.
            </p>
          </Reveal>
        </div>
      </section>

      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

// ─── Sub-To vs Short Sale ──────────────────────────────────────

function SubToVsShortSalePage({ setRoute, formStyle }) {
  const rows = [
    ['Bank approval needed', "Yes — the lender's loss-mitigation department", 'No — the existing loan stays in place per its terms'],
    ['Time to close', '60–90 days typical (some longer)', '6-day average across our closes'],
    ['Approval certainty', 'Bank can decline, counter, or delay', 'Structure-fit, not approval-based'],
    ['Credit impact', 'Typically reports as settled-for-less; significant damage', "Loan stays in seller's name; on-time payments continue as a positive tradeline"],
    ['Cash to seller', 'Usually $0 above the payoff', "Seller's equity above the loan, paid as a down payment at closing"],
    ['Closing costs to seller', 'Standard seller-side', '$0 — we cover seller-side closing costs'],
    ['Suitable for', 'Underwater + needing the deficiency wiped through the bank', 'Behind on payments, underwater, or current — any case where the loan is workable'],
    ['Seller protections', 'None', 'Third-party servicing + positive credit tradeline'],
  ];

  // Short-sale process steps — five-step loss mitigation flow.
  const shortSaleSteps = [
    ['Hardship package', "The seller submits financial statements, a hardship letter, tax returns, and bank statements."],
    ['Lender ordered BPO or appraisal', "The lender orders a broker price opinion or appraisal to confirm the property's current value."],
    ['Offer review', "The lender reviews offers — multiple offers are common; the lender chooses among them."],
    ['Loss-mitigation decision', "The lender's loss-mitigation department decides whether to approve the discount."],
    ['Closing', "The closing happens, sometimes weeks after the seller thinks the deal is done."],
  ];

  const subToFits = [
    {
      t: 'No bank approval step',
      d: "The existing loan stays in place per its existing terms; we don't apply to the bank, refinance, or assume. The lender continues to receive the same payment, on the same schedule — only the source of the payment changes.",
    },
    {
      t: 'Title work is routine',
      d: "Title companies handle Subject-To transfers as a matter of routine, the same way they handle any other deed transfer. The legal infrastructure has known about Subject-To for decades.",
    },
    {
      t: 'Closes in 15 days',
      d: "What slows down a Subject-To close is title work, document preparation, and the seller's own timeline — not financing. 6-day average across our closes; every one closed in under a week.",
    },
  ];

  const honestFits = [
    {
      t: 'The seller is significantly underwater and specifically needs the deficiency wiped',
      d: "If the seller owes more than the home is worth and wants the bank to formally accept less than the full payoff — releasing the seller from any remaining liability — that is a short-sale outcome, not a Sub-To outcome. Sub-To keeps the loan in place; it does not erase debt, it transfers the responsibility for paying it.",
    },
    {
      t: 'The existing loan structure makes Sub-To uneconomical',
      d: "If the rate is high enough that the monthly payment burden makes the deal economically unworkable for us, or the seller's equity / loan picture doesn't fit our structure, the short-sale path may genuinely be the better answer. A licensed short-sale attorney or HUD-approved housing counselor is the right next call in that case.",
    },
  ];

  const protections = [
    {
      t: 'Third-party loan servicing',
      d: "Every monthly payment routes through an independent loan servicer. The seller gets monthly written verification.",
    },
    {
      t: 'Positive credit tradeline',
      d: "Because the loan stays in the seller's name and payments continue on time, the on-time history continues registering as a positive tradeline.",
    },
  ];

  return (
    <div className="asiz-page">
      <PageHead
        eyebrow="— sub-to vs short sale"
        title="Short sale: the bank approves a discount. Sub-To: no bank involved."
        lead="A short sale asks the lender to accept less than what's owed on the loan. We don't ask the lender for anything. The loan stays in place; we take over the payments. For a seller who is behind on payments, the two paths produce very different timelines, credit outcomes, and certainty."
      />

      <section style={{ padding: '64px 0' }}>
        <div className="asiz-wrap" style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('contact')}>
            See the offer
            <span className="asiz-arrow">
              <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
            </span>
          </button>
          <a className="asiz-btn asiz-btn--ghost" href="tel:4244242959">Call (424) 424-2959</a>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— the 60-second difference</div></Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start', marginTop: 16 }}>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0 }}>
                A bank decides, <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>or no bank at all.</span>
              </h2>
            </Reveal>
            <div>
              <Reveal delay={0.2}>
                <p className="asiz-body" style={{ marginTop: 0 }}>
                  A short sale is the lender's loss-mitigation department agreeing to accept less than the loan balance to release the property. The bank is a party to the deal. The bank decides whether the deal happens.
                </p>
              </Reveal>
              <Reveal delay={0.3}>
                <p className="asiz-body">
                  A subject-to existing mortgage takeover (Subject-To for short) is title transferring to us while the existing mortgage stays in place, untouched. The bank is not a party to the deal. The bank has no approval to give.
                </p>
              </Reveal>
              <Reveal delay={0.4}>
                <p className="asiz-body">
                  <strong>Time:</strong> short sale runs 60–90 days because the bank's review takes that long. Sub-To closes in 15 days because there's nothing for the bank to review.
                </p>
              </Reveal>
              <Reveal delay={0.5}>
                <p className="asiz-body">
                  <strong>Credit:</strong> short sale typically reports as a settled-for-less account, which damages the seller's score for years. Sub-To keeps the loan in place and the on-time payments continue to register as a positive tradeline.
                </p>
              </Reveal>
              <Reveal delay={0.6}>
                <p className="asiz-body">
                  <strong>Certainty:</strong> short sale approval is not guaranteed — the bank can decline, counter, or take months and then decline. Sub-To certainty depends on whether the structure fits the seller's loan and timeline.
                </p>
              </Reveal>
              <Reveal delay={0.7}>
                <p className="asiz-body">
                  <strong>Walk-away cash:</strong> short sale usually leaves the seller with $0 above the loan payoff, because the bank takes the proceeds. Sub-To pays the seller any equity above the loan as a down payment at closing.
                </p>
              </Reveal>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— side-by-side</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              Two paths. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>Eight differences.</span>
            </h2>
          </Reveal>
          <table className="asiz-compare">
            <thead>
              <tr>
                <th style={{ width: '28%' }}></th>
                <th>Short sale</th>
                <th className="asiz-col-us" style={{ color: 'var(--accent)' }}>As Iz Homes (Sub-To)</th>
              </tr>
            </thead>
            <tbody>
              {rows.map(([lbl, a, b], i) => (
                <Reveal key={lbl} as="tr" delay={i * 0.04}>
                  <td style={{ fontWeight: 500 }}>{lbl}</td>
                  <td style={{ color: 'var(--ink-soft)' }}>{a}</td>
                  <td className="asiz-col-us" style={{ fontWeight: 500 }}>{b}</td>
                </Reveal>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why short sales are slow and uncertain</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 32px', maxWidth: '22ch' }}>
              The bank's <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>five-step</span> review.
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 32 }}>
              The short-sale process exists because the bank is being asked to accept less than what it's owed. That's a loss-mitigation decision the lender makes through a defined process.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {shortSaleSteps.map(([t, d], i) => (
              <Reveal key={t} delay={i * 0.06}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === shortSaleSteps.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 22, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.5}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              Each step takes time. Each step can stall or restart. The seller is on the bank's calendar, not their own. For sellers in active pre-foreclosure, the timeline can collide with the trustee's sale date — a short sale that doesn't close in time doesn't stop the foreclosure.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— why sub-to moves fast</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 40px', maxWidth: '22ch' }}>
              No approval step <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>to wait for.</span>
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {subToFits.map((f, i) => (
              <Reveal key={f.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === subToFits.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{f.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{f.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              If your situation fits the structure, we can take over the existing mortgage payments and close before a trustee's sale date, which moves the lender's foreclosure clock. We do not say "guaranteed stop foreclosure" — whether we can close before a specific auction date depends on the date, the lender, the title work, and the seller's situation. The honest answer: if deal structure fits, we close in 15 days. Call us early enough that the timeline works.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— when a short sale is actually the right fit</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              Two honest cases. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>We'll say so.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 32 }}>
              Two cases where a short sale fits better than Sub-To:
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {honestFits.map((f, i) => (
              <Reveal key={f.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === honestFits.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 22, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{f.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{f.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              If you tell us where you are and the loan / equity / timeline picture, we can be honest with you about which path fits. If Sub-To doesn't fit, we'll say so.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '120px 0 96px' }}>
        <div className="asiz-wrap">
          <Reveal><div className="asiz-eyebrow">— recorded protection vs short-sale uncertainty</div></Reveal>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px', maxWidth: '22ch' }}>
              Three named pieces, in <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>writing.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ maxWidth: '52ch', marginBottom: 32 }}>
              A short sale ends when the bank approves and the closing happens. Until that moment, there is no formal protection for the seller — only the loss-mitigation department's pending review. A Sub-To deal ends with three named seller protections, recorded or written into the closing documents.
            </p>
          </Reveal>
          <div style={{ display: 'grid', gap: 0 }}>
            {protections.map((p, i) => (
              <Reveal key={p.t} delay={i * 0.08}>
                <div style={{
                  display: 'grid', gridTemplateColumns: '60px 1fr', gap: 28,
                  padding: '28px 0',
                  borderTop: '1px solid var(--line)',
                  borderBottom: i === protections.length - 1 ? '1px solid var(--line)' : 'none',
                  alignItems: 'baseline',
                }}>
                  <div className="asiz-eyebrow" style={{ color: 'var(--accent)' }}>{String(i + 1).padStart(2, '0')}</div>
                  <div>
                    <h3 className="asiz-display" style={{ fontSize: 24, margin: '0 0 8px', letterSpacing: '-0.02em', lineHeight: 1.2 }}>{p.t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '60ch', lineHeight: 1.55 }}>{p.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
          <Reveal delay={0.4}>
            <p className="asiz-body" style={{ marginTop: 32, maxWidth: '60ch' }}>
              A short sale offers none of those because the loan is being closed out, not continued. A Sub-To buyer who can't name those three pieces is not a real Sub-To buyer.
            </p>
          </Reveal>
        </div>
      </section>

      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>
  );
}

Object.assign(window, { AboutPage, HowPage, ComparePage, FAQPage, ContactPage, SellersPage, AgentsPage, SubToVsCashOfferPage, SubToVsShortSalePage });
