// asiz-home.jsx — homepage rebuilt around creative-finance value prop
// Every image slot is a placeholder — drop matching filenames into images/ and
// the SmartImg components light up automatically.

function SectionCreativeFinance() {
  const pillars = [
  { k: 'Seller keeps a clean exit', d: "We take over the mortgage payments. Seller walks away with cash at closing, no repairs, no showings, no financing contingency." },
  { k: 'Loan stays on the books', d: "The existing mortgage stays in place. We make every payment on time, which keeps — and often improves — the seller's credit." },
  { k: 'Third-party payment verification', d: "Every monthly payment routes through an independent loan servicer. The seller receives written verification each month on a paper trail that doesn't depend on us." }];

  return (
    <section style={{ padding: '120px 0 96px' }}>
      <div className="asiz-wrap">
        <Reveal><div className="asiz-eyebrow">— subject-to, explained</div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 72, alignItems: 'end', marginTop: 16 }}>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(40px, 5.5vw, 80px)', margin: 0 }}>
              Banks say <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>no.</span> We say <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>close Tuesday.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.25}>
            <p className="asiz-body">
              A traditional sale hinges on a bank approving a new buyer. With a <strong>subject-to existing mortgage takeover — Subject-To for short</strong> — we take the bank out. We buy the house and take over the existing mortgage payments, with the loan staying in the seller's name. Fewer moving parts, faster close, cleaner numbers.
            </p>
          </Reveal>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 56 }}>
          {pillars.map((p, i) =>
          <Reveal key={p.k} delay={0.1 * i}>
              <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
                <h3 className="asiz-display" style={{ fontSize: 32, letterSpacing: '-0.02em', margin: '0 0 10px' }}>
                  {p.k}
                </h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, lineHeight: 1.55 }}>{p.d}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function SectionAudienceSplit({ setRoute }) {
  const Tile = ({ label, title, desc, cta, onClick, img, imgAlt }) =>
  <Reveal>
      <div
      onClick={onClick}
      style={{
        position: 'relative',
        overflow: 'hidden',
        cursor: 'pointer',
        aspectRatio: '4/5',
        background: 'var(--bg-2)',
        display: 'grid',
        gridTemplateRows: '1fr auto'
      }}>
      
        <div style={{ position: 'absolute', inset: 0 }}>
          <Parallax strength={0.15}>
            <SmartImg src={img} alt={imgAlt} ratio="4/5" style={{ aspectRatio: 'auto', height: '100%' }} />
          </Parallax>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, transparent 40%, rgba(24,22,19,0.78) 100%)' }} />
        </div>
        <div />
        <div style={{ position: 'relative', padding: 36, color: 'var(--bg)' }}>
          <div className="asiz-eyebrow" style={{ color: 'color-mix(in oklab, var(--bg) 75%, transparent)' }}>{label}</div>
          <h3 className="asiz-display" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: '10px 0 12px', color: 'var(--bg)' }}>
            {title}
          </h3>
          <p style={{ fontSize: 15, opacity: 0.85, maxWidth: '36ch', margin: '0 0 20px' }}>{desc}</p>
          <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase',
          borderBottom: '1px solid var(--bg)', paddingBottom: 4
        }}>
            {cta} <span>→</span>
          </span>
        </div>
      </div>
    </Reveal>;

  return (
    <section style={{ padding: '96px 0', background: 'var(--bg-2)' }}>
      <div className="asiz-wrap">
        <Reveal><div className="asiz-eyebrow">— two paths</div></Reveal>
        <Reveal delay={0.1}>
          <h2 className="asiz-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '16px 0 48px', maxWidth: '18ch' }}>
            We work with <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>agents</span> and <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>sellers</span> — differently.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          <Tile
            label="— for agents"
            title="Stuck listing? Send the file."
            desc="Expired-listing risk or a seller who can't close traditionally — send the file and we'll send a written offer the same business day. Your seller gets list price. You keep your full 3% commission, paid from our down payment at closing. $0 due from your seller at the table."
            cta="Send a listing"
            onClick={() => setRoute('agents')}
            img="images/10-agents.png"
            imgAlt="Agent meeting seller on a porch, warm editorial" />

          <Tile
            label="— for sellers"
            title="Behind on payments. Or just done with the house."
            desc="Underwater, relocating, divorcing, inheriting a property with a loan still on it, or just done with the house. We take title and take over the existing mortgage payments. You walk away with full market value, on your timeline, without a bank."
            cta="See the offer"
            onClick={() => setRoute('sellers')}
            img="images/08b-after.png"
            imgAlt="Warm craftsman bungalow at golden hour" />

        </div>
      </div>
    </section>);

}

function SectionProcess({ setRoute }) {
  const steps = [
  { n: '01', t: 'Submit or call', d: 'Agents submit a listing. Sellers share their address. We reply within one business day.', mark: '☎', img: 'images/02-submit.png' },
  { n: '02', t: 'Deal math in writing', d: 'Purchase price, mortgage takeover, commission, seller cash at closing — every number itemized.', mark: '◈', img: 'images/03-walkthrough.png' },
  { n: '03', t: 'Close on your date', d: 'Reputable title company in your state. Third-party loan servicer sends written verification to seller each month. Keys trade, money wires.', mark: '◎', img: 'images/04-close.png' }];

  return (
    <section style={{ padding: '120px 0 96px' }}>
      <div className="asiz-wrap" style={{ marginBottom: 56 }}>
        <Reveal><div className="asiz-eyebrow">— our process</div></Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'end', marginTop: 16 }}>
          <Reveal delay={0.1}>
            <h2 className="asiz-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: 0 }}>
              Three&nbsp;steps. <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>That's it.</span>
            </h2>
          </Reveal>
          <Reveal delay={0.25}>
            <p className="asiz-body">
              Six-day average from offer to deed across our closes to date. No financing contingency, no appraisal, no bank in the room.
            </p>
          </Reveal>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1, background: 'var(--line)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        {steps.map((s, i) =>
        <Reveal key={s.n} delay={0.1 * i}>
            <div className="asiz-step" style={{ padding: 0, background: 'var(--bg)' }}>
              <MaskReveal src={s.img} alt={s.t} ratio="4/3" direction={i === 1 ? 'right' : 'left'} />
              <div style={{ padding: '36px 32px 48px', position: 'relative' }}>
                <div className="asiz-step-spark">{s.mark}</div>
                <div className="asiz-step-num">{s.n}</div>
                <h3 className="asiz-step-title">{s.t}</h3>
                <p className="asiz-step-desc">{s.d}</p>
              </div>
            </div>
          </Reveal>
        )}
      </div>
    </section>);

}

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

  return (
    <section style={{ padding: '64px 0 80px' }}>
      <div className="asiz-wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {stats.map((s, i) => (
            <Reveal key={i} delay={0.08 * i}>
              <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,
                  whiteSpace: 'nowrap',
                }}>
                  {s.prefix || ''}<Counter to={s.n} />
                  {s.suffix && (
                    <span style={{ fontSize: '0.32em', letterSpacing: '0', marginLeft: '0.15em', verticalAlign: 'baseline' }}>
                      {s.suffix.trim()}
                    </span>
                  )}
                </div>
                <div className="asiz-eyebrow" style={{ marginTop: 16, color: 'var(--ink-soft)' }}>{s.lbl}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>);

}

function SectionCalculator() {
  return (
    <section style={{ padding: '120px 0', background: 'var(--bg-2)' }}>
      <div className="asiz-wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 72, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 120 }}>
            <Reveal><div className="asiz-eyebrow">— offer calculator</div></Reveal>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', margin: '16px 0 24px' }}>
                Every number <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>on the page.</span>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="asiz-body">
                Drop in a list price and mortgage balance. See the structure of our offer in real time — purchase price, loan takeover, agent commission, seller cash at closing. This is the same math we send to agents for every live deal.
              </p>
            </Reveal>
            <Reveal delay={0.3} style={{ marginTop: 24 }}>
              <Parallax strength={0.08}>
                <SmartImg src="images/05-calculator-detail.png" alt="Craftsman porch column and number plate" ratio="16/9" />
              </Parallax>
            </Reveal>
          </div>
          <Reveal kind="blur" delay={0.2}>
            <OfferCalculator />
          </Reveal>
        </div>
      </div>
    </section>);

}

function SectionProtections() {
  const items = [
  ['Third-party loan servicing', "A licensed servicer collects our payments and sends them to the seller's lender. Monthly written verification to the seller."],
  ['Positive credit tradeline', "While we pay on time, the seller's credit keeps improving — exactly as if they were still paying."],
  ['Local title closing', "Every deal closes at a reputable title company in your state. Every number on the HUD. No back-room signing."]];

  return (
    <section style={{ padding: '120px 0' }}>
      <div className="asiz-wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'start' }}>
          <div>
            <Reveal><div className="asiz-eyebrow">— seller protections</div></Reveal>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '16px 0 24px' }}>
                Four contracts that keep <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>you</span> in control.
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="asiz-body">
                Creative finance works because it's wrapped in structural protections. Here's what every As Iz deal includes — non-negotiable, in every closing packet.
              </p>
            </Reveal>
          </div>
          <div style={{ display: 'grid', gap: 0 }}>
            {items.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 === items.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 6px', letterSpacing: '-0.02em' }}>{t}</h3>
                    <p style={{ color: 'var(--ink-soft)', fontSize: 15, margin: 0, maxWidth: '52ch' }}>{d}</p>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function SectionCTA({ setRoute, formStyle }) {
  return (
    <section style={{ padding: '96px 0', borderTop: '1px solid var(--line)' }}>
      <div className="asiz-wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Reveal><div className="asiz-eyebrow">— start here</div></Reveal>
            <Reveal delay={0.1}>
              <h2 className="asiz-display" style={{ fontSize: 'clamp(44px, 6vw, 88px)', margin: '16px 0 24px' }}>
                Ready for a <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>structured offer?</span>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="asiz-body">
                Share the address and your role (agent or owner). We'll come back within a business day with deal math in writing — no pressure, no obligation.
              </p>
            </Reveal>
            <Reveal delay={0.3} style={{ marginTop: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <Asterisk size={36} />
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.08em' }}>
                  A human reads every submission.<br />Reply in under a business day, always.
                </div>
              </div>
            </Reveal>
          </div>
          <Reveal kind="blur" delay={0.2}>
            <OfferForm style={formStyle} />
          </Reveal>
        </div>
      </div>
    </section>);

}

function SectionMarquee() {
  return (
    <div style={{ padding: '24px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)' }}>
      <Marquee
        speed={50}
        items={[
        'Subject-To', 'No bank approval', '6-day average to deed',
        'Full 3% commission paid', 'Payment guarantee recorded at closing',
        'Third-party servicing', 'Nationwide']
        } />

    </div>);

}

function HomePage({ setRoute, heroVariant, formStyle }) {
  return (
    <div className="asiz-page">
      <Hero variant={heroVariant} setRoute={setRoute} formStyle={formStyle} />
      <SectionMarquee />
      <SectionStats />
      <SectionCreativeFinance />
      <SectionAudienceSplit setRoute={setRoute} />
      <SectionProcess setRoute={setRoute} />
      <SectionCalculator />
      <SectionProtections />
      <SectionCTA setRoute={setRoute} formStyle={formStyle} />
    </div>);

}

Object.assign(window, { HomePage, SectionStats, SectionCTA, SectionMarquee });