function Customers({ ctx }) {
  const [filter, setFilter] = React.useState('Semua');
  const filters = ['Semua', 'Enterprise', 'SMB', 'High Value', 'At Risk', 'New Leads'];
  return (
    <div className="stack">
      <div className="row between">
        <div>
          <span className="eyebrow">348 customer aktif · 24 owner</span>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="download" size={14} /> Export</button>
          <button className="btn ghost"><Icon name="filter" size={14} /> Filter lanjutan</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Tambah Customer</button>
        </div>
      </div>

      <div className="filterbar">
        <Icon name="search" size={15} />
        <input placeholder="Cari nama company, contact, email, atau kota…" defaultValue="" />
        <span className="divider" />
        {filters.map(f => (
          <button key={f} className={`chip-filter ${filter === f ? 'active' : ''}`} onClick={() => setFilter(f)}>{f}</button>
        ))}
        <span className="divider" />
        <button className="chip-filter"><Icon name="filter" size={12} /> Owner</button>
        <button className="chip-filter"><Icon name="filter" size={12} /> Lifecycle</button>
      </div>

      <div className="card flat" style={{ padding: 0, overflow: 'hidden' }}>
        <table className="table" style={{ border: 0, borderRadius: 0 }}>
          <thead>
            <tr>
              <th style={{ width: 32 }}><input type="checkbox" /></th>
              <th>Company / Contact</th>
              <th>Segment</th>
              <th>Lifecycle</th>
              <th>Owner</th>
              <th>Last Contact</th>
              <th>Next Follow-up</th>
              <th>Deal Value</th>
              <th>Skor</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {CUSTOMERS.map(c => (
              <tr key={c.id} onClick={() => ctx.go('detail')} style={{ cursor: 'pointer' }}>
                <td onClick={(e) => e.stopPropagation()}><input type="checkbox" /></td>
                <td>
                  <div className="cell-user">
                    <Avatar name={c.company} tone={c.tone} />
                    <div><b>{c.company}</b><span>{c.contact} · {c.role} · {c.city}</span></div>
                  </div>
                </td>
                <td><StatusPill tone={c.segment === 'Enterprise' ? 'indigo' : c.segment === 'High Value' ? 'cyan' : 'blue'}>{c.segment}</StatusPill></td>
                <td><StatusPill tone={c.lifecycle === 'Customer' || c.lifecycle === 'Retention' ? 'green' : c.lifecycle === 'Lead' ? 'slate' : 'amber'}>{c.lifecycle}</StatusPill></td>
                <td><div className="cell-user"><Avatar name={c.owner} tone="slate" /><span style={{ color: 'var(--text2)' }}>{c.owner}</span></div></td>
                <td>{c.lastContact}</td>
                <td>{c.nextFollow === 'Overdue' ? <StatusPill tone="red"><span className="dot" />Overdue</StatusPill> : c.nextFollow}</td>
                <td><b>{fmtShort(c.deal)}</b></td>
                <td>
                  <div className={`score-bar ${c.score >= 80 ? '' : c.score >= 60 ? 'med' : 'low'}`}>
                    <div className="score-bar-track"><div className="score-bar-fill" style={{ width: c.score + '%' }} /></div>
                    <b>{c.score}</b>
                  </div>
                </td>
                <td><button className="icon-btn" style={{ width: 28, height: 28 }} onClick={(e) => { e.stopPropagation(); ctx.notify('Quick action menu'); }}><Icon name="chevr" size={14} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="row between" style={{ padding: '4px 4px' }}>
        <small style={{ color: 'var(--muted)' }}>Menampilkan 10 dari 348 customer</small>
        <div className="row" style={{ gap: 6 }}>
          <button className="btn ghost sm">‹ Prev</button>
          <button className="btn primary sm">1</button>
          <button className="btn ghost sm">2</button>
          <button className="btn ghost sm">3</button>
          <button className="btn ghost sm">… 35</button>
          <button className="btn ghost sm">Next ›</button>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Customers });