function ActiveScenario() {
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border-subtle)',
      borderRadius: 10, padding: 22,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
            letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--fg-muted)', marginBottom: 6,
          }}>Active Scenario · SC-2026-04871</div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20,
            color: 'var(--fg)', letterSpacing: '-.01em',
          }}>Martinez — Primary Purchase, $750K</div>
        </div>
        <div style={{
          padding: '5px 10px', borderRadius: 3,
          background: '#FFFBEB', color: '#92400E',
          border: '1px solid #FDE68A', fontSize: 11, fontWeight: 700,
          fontFamily: 'var(--font-mono)',
        }}>DOCS PENDING</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
        <DataCell label="Credit Score" value="724" note="Mid score" />
        <DataCell label="Loan Amount" value="$600,000" note="80% LTV" />
        <DataCell label="DTI" value="38.2%" note="Target < 43%" />
        <DataCell label="Reserves" value="$42,500" note="6 months PITI" />
      </div>

      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '.08em',
        textTransform: 'uppercase', color: 'var(--fg-muted)',
        fontFamily: 'var(--font-mono)', marginBottom: 8,
      }}>Qualifying Agencies</div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 18 }}>
        <AgencyTicker code="FNMA" />
        <AgencyTicker code="FHLMC" />
        <AgencyTicker code="FHA" fade />
        <AgencyTicker code="VA"  fade />
        <AgencyTicker code="USDA" fade />
      </div>

      <div style={{
        background: '#F0FDF4', border: '1px solid #BBF7D0',
        borderRadius: 6, padding: '12px 14px',
        display: 'flex', gap: 10, fontSize: 13, color: '#166534',
      }}>
        <i data-lucide="check-circle-2" style={{ width: 16, height: 16, flexShrink: 0, marginTop: 1 }}/>
        <div>
          <b>Qualifies under FNMA and FHLMC</b> — using qualifying income $12,450/mo. Two compensating factors: 6-month reserves, stable 7-year employment. Moving to lender matching.
        </div>
      </div>

      <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
        <button style={{
          background: 'var(--cms-blue)', color: '#fff', border: 'none',
          padding: '9px 16px', borderRadius: 6, fontSize: 13, fontWeight: 600, cursor: 'pointer',
        }}>Match Lenders →</button>
        <button style={{
          background: 'rgba(0,38,154,.08)', color: 'var(--cms-blue)',
          border: '1px solid rgba(0,38,154,.20)',
          padding: '8px 16px', borderRadius: 6, fontSize: 13, fontWeight: 600, cursor: 'pointer',
        }}>Request Docs</button>
        <button style={{
          background: 'transparent', color: 'var(--fg)',
          border: '1px solid var(--border)',
          padding: '8px 14px', borderRadius: 6, fontSize: 13, fontWeight: 500, cursor: 'pointer',
        }}>Full Guideline Check</button>
      </div>
    </div>
  );
}

function DataCell({ label, value, note }) {
  return (
    <div style={{
      background: 'var(--cream-alt)', borderRadius: 6, padding: '10px 12px',
      border: '1px solid var(--border-subtle)',
    }}>
      <div style={{
        fontSize: 10, fontWeight: 700, letterSpacing: '.08em',
        textTransform: 'uppercase', color: 'var(--fg-muted)',
        fontFamily: 'var(--font-mono)',
      }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontWeight: 600,
        fontSize: 18, color: 'var(--fg)', marginTop: 4, letterSpacing: '-.01em',
      }}>{value}</div>
      <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 1 }}>{note}</div>
    </div>
  );
}

function AgencyTicker({ code, fade }) {
  const styles = {
    FNMA:  { bg:'#EEF0FA', color:'#2D3DB0', bd:'#C4C9EE' },
    FHLMC: { bg:'#F0FDF4', color:'#166534', bd:'#BBF7D0' },
    FHA:   { bg:'#FFFBEB', color:'#92400E', bd:'#FDE68A' },
    VA:    { bg:'#F5F3FF', color:'#5B21B6', bd:'#DDD6FE' },
    USDA:  { bg:'#ECFDF5', color:'#065F46', bd:'#A7F3D0' },
  }[code];
  return (
    <span style={{
      fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
      letterSpacing: '.08em', padding: '3px 9px', borderRadius: 3,
      background: styles.bg, color: styles.color,
      border: `1px solid ${styles.bd}`,
      opacity: fade ? .4 : 1,
    }}>{code}</span>
  );
}

function LenderResults() {
  const lenders = [
    { name: 'Summit Capital',   tier: 1, ltv: '85%', rate: '6.125', note: 'Best overall — fast turn', delta: '+0.000' },
    { name: 'Arrowpoint Lending', tier: 1, ltv: '85%', rate: '6.250', note: '21-day close, low doc', delta: '+0.125' },
    { name: 'Harbor Mortgage',   tier: 2, ltv: '80%', rate: '6.375', note: 'Reliable, full doc',        delta: '+0.250' },
    { name: 'Beacon National',   tier: 2, ltv: '80%', rate: '6.500', note: 'Strong jumbo program',     delta: '+0.375' },
    { name: 'Redwood Loans',     tier: 3, ltv: '75%', rate: '6.750', note: 'Specialty non-QM',         delta: '+0.625' },
  ];
  const tierStyle = (t) => [
    null,
    { bg:'#F0FDF4', c:'#166534', bd:'#BBF7D0', label:'1 · Preferred' },
    { bg:'#EEF0FA', c:'#2D3DB0', bd:'#C4C9EE', label:'2 · Standard' },
    { bg:'#FFFBEB', c:'#92400E', bd:'#FDE68A', label:'3 · Specialty' },
    { bg:'#FEF2F2', c:'#DC2626', bd:'#FECACA', label:'4 · Avoid' },
  ][t];
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border-subtle)',
      borderRadius: 10, overflow: 'hidden',
    }}>
      <div style={{
        padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--fg)',
          }}>Matched Lenders · 12 of 50</div>
          <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2, fontFamily: 'var(--font-mono)' }}>
            Based on: 724 FICO · 80% LTV · $600K · Primary Purchase · FNMA/FHLMC eligible
          </div>
        </div>
        <div style={{ display: 'flex', gap: 4 }}>
          {['All', 'T1', 'T2', 'T3'].map((f, i) => (
            <button key={f} style={{
              padding: '5px 10px', borderRadius: 4, fontSize: 11, fontWeight: 600,
              background: i === 0 ? 'var(--cms-blue)' : 'transparent',
              color: i === 0 ? '#fff' : 'var(--fg-muted)',
              border: i === 0 ? 'none' : '1px solid var(--border)',
              cursor: 'pointer', fontFamily: 'var(--font-mono)',
            }}>{f}</button>
          ))}
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <thead>
          <tr style={{ background: 'var(--cream-alt)' }}>
            {['Lender', 'Tier', 'Max LTV', 'Rate', 'vs Base', 'Note', ''].map((h, i) => (
              <th key={i} style={{
                padding: '9px 14px', textAlign: i > 1 && i < 5 ? 'right' : 'left',
                fontSize: 10, fontWeight: 700, letterSpacing: '.08em',
                textTransform: 'uppercase', color: 'var(--fg-muted)',
                fontFamily: 'var(--font-mono)', borderBottom: '1px solid var(--border-subtle)',
              }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {lenders.map((l, i) => {
            const t = tierStyle(l.tier);
            return (
              <tr key={l.name} style={{
                borderBottom: i < lenders.length - 1 ? '1px solid var(--border-subtle)' : 'none',
              }}>
                <td style={{ padding: '11px 14px' }}>
                  <div style={{ fontWeight: 600, color: 'var(--fg)' }}>{l.name}</div>
                </td>
                <td style={{ padding: '11px 14px' }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                    padding: '3px 8px', borderRadius: 3,
                    background: t.bg, color: t.c, border: `1px solid ${t.bd}`,
                  }}>{t.label}</span>
                </td>
                <td style={{
                  padding: '11px 14px', textAlign: 'right',
                  fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--cms-blue)',
                }}>{l.ltv}</td>
                <td style={{
                  padding: '11px 14px', textAlign: 'right',
                  fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--fg)',
                }}>{l.rate}<span style={{ color: 'var(--fg-muted)' }}>%</span></td>
                <td style={{
                  padding: '11px 14px', textAlign: 'right',
                  fontFamily: 'var(--font-mono)', fontSize: 12,
                  color: l.delta === '+0.000' ? '#16A34A' : 'var(--fg-muted)',
                }}>{l.delta}</td>
                <td style={{ padding: '11px 14px', color: 'var(--fg-muted)', fontSize: 12 }}>{l.note}</td>
                <td style={{ padding: '11px 14px', textAlign: 'right' }}>
                  <i data-lucide="chevron-right" style={{ width: 14, height: 14, color: 'var(--fg-muted)' }}/>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

window.ActiveScenario = ActiveScenario;
window.LenderResults = LenderResults;