function Pipeline() {
  const rows = [
    { id: 'L-8471', borrower: 'Martinez, A.', status: 'Docs Pending', sVar: 'amber', loan: 'CONV', amt: '600,000', close: 'Apr 28', lo: 'Amorette', daysLeft: 8 },
    { id: 'L-8469', borrower: 'Chen, B.',     status: 'Underwriting', sVar: 'blue',  loan: 'FHA',  amt: '342,000', close: 'Apr 24', lo: 'Moe',      daysLeft: 4 },
    { id: 'L-8465', borrower: 'Okonkwo, L.',  status: 'Cleared to Close', sVar: 'green', loan: 'VA',  amt: '485,000', close: 'Apr 22', lo: 'DeShawn', daysLeft: 2 },
    { id: 'L-8462', borrower: 'Patel, R.',    status: 'Funding',      sVar: 'green', loan: 'CONV', amt: '775,000', close: 'Apr 21', lo: 'Corrina',  daysLeft: 1 },
    { id: 'L-8459', borrower: 'Williams, T.', status: 'Appraisal',    sVar: 'blue',  loan: 'JUMBO',amt: '1,240,000', close: 'May 2', lo: 'DeShawn', daysLeft: 12 },
    { id: 'L-8458', borrower: 'Kim, S.',      status: 'Docs Pending', sVar: 'amber', loan: 'FHA',  amt: '280,000', close: 'May 5', lo: 'Dora',     daysLeft: 15 },
    { id: 'L-8452', borrower: 'Garcia, M.',   status: 'Needs Action', sVar: 'red',   loan: 'REFI', amt: '425,000', close: 'Apr 30', lo: 'Amorette', daysLeft: 10 },
  ];
  const statusStyle = {
    green: { bg: '#F0FDF4', c: '#16A34A', bd: '#BBF7D0' },
    blue:  { bg: '#EEF0FA', c: '#2D3DB0', bd: '#C4C9EE' },
    amber: { bg: '#FFFBEB', c: '#92400E', bd: '#FDE68A' },
    red:   { bg: '#FEF2F2', c: '#DC2626', bd: '#FECACA' },
  };
  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 style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--fg)',
          }}>Loans in Progress</div>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11,
            padding: '2px 8px', borderRadius: 9999,
            background: 'var(--cream-alt)', color: 'var(--fg-muted)', border: '1px solid var(--border)',
          }}>23 active</span>
        </div>
        <div style={{ display: 'flex', gap: 6, alignItems: 'center', fontSize: 12, color: 'var(--fg-muted)' }}>
          Sort: <select style={{
            fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg)',
            border: '1px solid var(--border)', borderRadius: 4,
            padding: '3px 8px', background: '#fff',
          }}>
            <option>Closing date</option>
            <option>Loan amount</option>
            <option>Status</option>
          </select>
        </div>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
        <thead>
          <tr style={{ background: 'var(--cream-alt)' }}>
            {['ID', 'Borrower', 'Type', 'Loan Amount', 'LO', 'Status', 'Close', ''].map((h, i) => (
              <th key={i} style={{
                padding: '9px 14px', textAlign: i === 3 ? '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>
          {rows.map((r, i) => {
            const s = statusStyle[r.sVar];
            return (
              <tr key={r.id} style={{
                borderBottom: i < rows.length - 1 ? '1px solid var(--border-subtle)' : 'none',
              }}>
                <td style={{
                  padding: '11px 14px', fontFamily: 'var(--font-mono)',
                  fontSize: 12, fontWeight: 600, color: 'var(--cms-blue)',
                }}>{r.id}</td>
                <td style={{ padding: '11px 14px', fontWeight: 600, color: 'var(--fg)' }}>{r.borrower}</td>
                <td style={{ padding: '11px 14px' }}>
                  <span style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                    padding: '2px 7px', borderRadius: 3,
                    background: 'var(--cream-alt)', color: 'var(--fg)', border: '1px solid var(--border)',
                  }}>{r.loan}</span>
                </td>
                <td style={{
                  padding: '11px 14px', textAlign: 'right',
                  fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--fg)',
                }}>
                  <span style={{ color: 'var(--fg-muted)' }}>$</span>{r.amt}
                </td>
                <td style={{ padding: '11px 14px', fontSize: 12, color: 'var(--fg-muted)' }}>{r.lo}</td>
                <td style={{ padding: '11px 14px' }}>
                  <span style={{
                    fontSize: 11, fontWeight: 600, padding: '3px 9px', borderRadius: 4,
                    background: s.bg, color: s.c, border: `1px solid ${s.bd}`,
                    display: 'inline-flex', alignItems: 'center', gap: 5,
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: s.c }}/>
                    {r.status}
                  </span>
                </td>
                <td style={{ padding: '11px 14px', fontSize: 12 }}>
                  <div style={{ color: 'var(--fg)' }}>{r.close}</div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 10, color: r.daysLeft <= 4 ? '#DC2626' : 'var(--fg-muted)',
                  }}>{r.daysLeft}d</div>
                </td>
                <td style={{ padding: '11px 14px', textAlign: 'right' }}>
                  <button style={{
                    background: 'transparent', border: 'none', cursor: 'pointer', padding: 4,
                    display: 'inline-flex', color: 'var(--fg-muted)',
                  }}><i data-lucide="more-horizontal" style={{ width: 16, height: 16 }}/></button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

function RateTicker() {
  const rates = [
    { name: '30-yr Fixed', rate: '6.125', delta: '-0.125', up: false },
    { name: '15-yr Fixed', rate: '5.375', delta: '-0.100', up: false },
    { name: 'FHA 30',      rate: '5.875', delta: '-0.125', up: false },
    { name: 'VA 30',       rate: '5.750', delta: '+0.000', up: null  },
    { name: 'Jumbo',       rate: '6.500', delta: '+0.125', up: true  },
  ];
  return (
    <div style={{
      background: '#fff', border: '1px solid var(--border-subtle)',
      borderRadius: 10, padding: '14px 18px',
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--fg)',
          }}>Today's Rates</div>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
            color: '#16A34A', background: '#F0FDF4', padding: '2px 8px', borderRadius: 3,
            border: '1px solid #BBF7D0',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#16A34A' }}/>
            LIVE
          </span>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-muted)' }}>
          Updated 4:32 PM PT
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {rates.map(r => (
          <div key={r.name} style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '8px 10px', background: 'var(--cream-alt)', borderRadius: 6,
          }}>
            <span style={{ fontSize: 12, color: 'var(--fg)', fontWeight: 500 }}>{r.name}</span>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 14, color: 'var(--fg)',
              }}>{r.rate}<span style={{ color: 'var(--fg-muted)', fontSize: 11 }}>%</span></span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700,
                color: r.up === false ? '#16A34A' : r.up ? '#DC2626' : 'var(--fg-muted)',
                minWidth: 48, textAlign: 'right',
              }}>{r.up === false ? '▼' : r.up ? '▲' : '—'} {r.delta}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Pipeline = Pipeline;
window.RateTicker = RateTicker;