// asiz-calc.jsx — interactive offer calculator for the creative-finance pitch

function formatMoney(n, digits = 0) {
  return '$' + Math.round(n).toLocaleString('en-US', { maximumFractionDigits: digits });
}

function OfferCalculator() {
  const [price, setPrice] = React.useState(325000);
  const [balance, setBalance] = React.useState(225000);
  const [commission, setCommission] = React.useState(3);

  // Deal math (simplified illustration, not a binding offer)
  const agentCommission = price * (commission / 100);
  const closingCosts = price * 0.015; // we cover
  const sellerCashAtClose = Math.max(0, price - balance - agentCommission - closingCosts);
  const mortgageTakeover = balance;

  const Bar = ({ value, total, color, label, sub }) => {
    const pct = Math.max(2, (value / total) * 100);
    return (
      <div style={{ display: 'grid', gap: 6 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12 }}>
          <span style={{ fontSize: 13, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{label}</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '-0.02em', color: 'var(--ink)' }}>{formatMoney(value)}</span>
        </div>
        <div style={{ height: 8, background: 'var(--bg-2)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: `${pct}%`, height: '100%', background: color, transition: 'width .4s cubic-bezier(.2,.7,.3,1)' }} />
        </div>
        {sub && <div style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{sub}</div>}
      </div>
    );
  };

  const Input = ({ label, value, setValue, min, max, step, prefix = '$' }) => (
    <div>
      <label style={{ fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-soft)', display: 'block', marginBottom: 8 }}>
        {label}
      </label>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, borderBottom: '1px solid var(--line)', paddingBottom: 10 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--ink-soft)' }}>{prefix}</span>
        <input
          type="number"
          value={value}
          onChange={(e) => setValue(Math.max(min, Math.min(max, Number(e.target.value) || 0)))}
          style={{
            flex: 1, minWidth: 0,
            border: 0, background: 'transparent', outline: 'none',
            fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '-0.02em',
            color: 'var(--ink)', padding: 0,
          }}
        />
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => setValue(Number(e.target.value))}
        style={{ width: '100%', marginTop: 12, accentColor: 'var(--accent)' }}
      />
    </div>
  );

  return (
    <div style={{
      background: 'var(--bg)',
      border: '1px solid var(--line)',
      padding: 36,
      borderRadius: 4,
      position: 'relative',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
        <div className="asiz-eyebrow">— illustrative offer</div>
        <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--ink-soft)' }}>Not a binding quote</span>
      </div>

      <h3 className="asiz-display" style={{ fontSize: 36, margin: '0 0 24px', lineHeight: 1.05 }}>
        Run the deal math <span style={{ fontStyle: 'italic', color: 'var(--accent)' }}>live.</span>
      </h3>

      <div style={{ display: 'grid', gap: 24, marginBottom: 32 }}>
        <Input label="Estimated home value" value={price} setValue={setPrice} min={80000} max={1500000} step={5000} />
        <Input label="Existing mortgage balance" value={balance} setValue={setBalance} min={0} max={price} step={5000} />
        <Input label="Agent commission (%)" value={commission} setValue={setCommission} min={0} max={3} step={0.1} prefix="" />
      </div>

      <div style={{ display: 'grid', gap: 18, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
        <Bar
          value={mortgageTakeover}
          total={price}
          color="var(--ink)"
          label="Mortgage takeover (Sub-To)"
          sub="We assume the existing loan — seller stops making payments"
        />
        <Bar
          value={agentCommission}
          total={price}
          color="var(--warn)"
          label={`Agent commission · ${commission}%`}
          sub="Paid to the listing agent from our down payment"
        />
        <Bar
          value={closingCosts}
          total={price}
          color="color-mix(in oklab, var(--ink) 50%, var(--bg))"
          label="Closing costs"
          sub="We cover at closing, in every state"
        />
        <Bar
          value={sellerCashAtClose}
          total={price}
          color="var(--accent)"
          label="Seller cash at closing"
          sub="Wired same day"
        />
      </div>

      <div style={{
        marginTop: 28, padding: '16px 18px',
        background: 'var(--bg-2)', borderRadius: 2,
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16,
      }}>
        <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>Seller's effective take-home</div>
        <div className="asiz-display" style={{ fontSize: 42, letterSpacing: '-0.03em' }}>
          {formatMoney(sellerCashAtClose)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OfferCalculator });