function Topbar() {
  return (
    <div style={{
      padding: '18px 32px', borderBottom: '1px solid var(--border-subtle)',
      background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      gap: 20,
    }}>
      <div>
        <div style={{
          fontSize: 11, fontWeight: 600, color: 'var(--fg-muted)',
          display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4,
          fontFamily: 'var(--font-mono)',
        }}>
          Pipeline <span style={{ opacity: .4 }}>/</span> <span style={{ color: 'var(--fg)' }}>Dashboard</span>
        </div>
        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 700,
          fontSize: 26, letterSpacing: '-.01em', color: 'var(--fg)',
          margin: 0,
        }}>Good morning, DeShawn</h1>
        <div style={{ fontSize: 13, color: 'var(--fg-muted)', marginTop: 2 }}>
          You've got 4 loans closing this week · 2 need doc review today
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          background: 'var(--cream-alt)', borderRadius: 6,
          padding: '8px 12px', width: 280, border: '1px solid var(--border-subtle)',
        }}>
          <i data-lucide="search" style={{ width: 15, height: 15, color: 'var(--fg-muted)' }}/>
          <input placeholder="Search loans, lenders, guidelines…" style={{
            flex: 1, border: 'none', outline: 'none', background: 'transparent',
            fontSize: 13, color: 'var(--fg)', fontFamily: 'var(--font-body)',
          }}/>
          <kbd style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            padding: '1px 5px', borderRadius: 3,
            background: '#fff', border: '1px solid var(--border)', color: 'var(--fg-muted)',
          }}>⌘K</kbd>
        </div>
        <button style={{
          width: 36, height: 36, borderRadius: 6,
          background: '#fff', border: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative', cursor: 'pointer',
        }}>
          <i data-lucide="bell" style={{ width: 16, height: 16, color: 'var(--fg-muted)' }}/>
          <span style={{
            position: 'absolute', top: 6, right: 6, width: 8, height: 8,
            borderRadius: '50%', background: 'var(--cms-orange)', border: '2px solid #fff',
          }}/>
        </button>
        <button style={{
          background: 'var(--cms-blue)', color: '#fff', border: 'none',
          padding: '9px 16px', borderRadius: 6, fontSize: 13, fontWeight: 600,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--font-body)',
        }}>
          <i data-lucide="plus" style={{ width: 14, height: 14 }}/>
          New Scenario
        </button>
      </div>
    </div>
  );
}

function TierScoreboard() {
  const tiers = [
    { name: 'Scale',         count: 4, delta: '+2', color: '#10b981', bg: '#F0FDF4', subtitle: 'Top performers' },
    { name: 'Breakthrough',  count: 7, delta: '+1', color: '#3b82f6', bg: '#EFF6FF', subtitle: 'Ready to scale' },
    { name: 'Growth',        count: 5, delta: '—',  color: '#f59e0b', bg: '#FFFBEB', subtitle: 'Needs coaching' },
    { name: 'Foundation',    count: 3, delta: '-1', color: '#ef4444', bg: '#FEF2F2', subtitle: 'Needs turnaround' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
      {tiers.map(t => (
        <div key={t.name} style={{
          background: '#fff', border: '1px solid var(--border-subtle)',
          borderRadius: 10, padding: 18, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: 0, left: 0, right: 0, height: 3,
            background: t.color,
          }}/>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div style={{
                fontSize: 10, fontWeight: 700, letterSpacing: '.08em',
                textTransform: 'uppercase', color: t.color,
                fontFamily: 'var(--font-mono)',
              }}>{t.name} Tier</div>
              <div style={{ fontSize: 11, color: 'var(--fg-muted)', marginTop: 2 }}>{t.subtitle}</div>
            </div>
            <div style={{
              padding: '2px 8px', borderRadius: 3, fontSize: 10, fontWeight: 700,
              fontFamily: 'var(--font-mono)', background: t.bg, color: t.color,
              border: `1px solid ${t.color}33`,
            }}>{t.delta}</div>
          </div>
          <div style={{
            marginTop: 12, display: 'flex', alignItems: 'baseline', gap: 6,
          }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 36,
              color: 'var(--fg)', lineHeight: 1,
            }}>{t.count}</div>
            <div style={{ fontSize: 12, color: 'var(--fg-muted)' }}>Loan Officers</div>
          </div>
          <div style={{
            marginTop: 10, height: 4, background: 'var(--cream-alt)',
            borderRadius: 9999, overflow: 'hidden',
          }}>
            <div style={{
              height: '100%', background: t.color, width: `${t.count * 10}%`,
            }}/>
          </div>
        </div>
      ))}
    </div>
  );
}

window.Topbar = Topbar;
window.TierScoreboard = TierScoreboard;