function Pipeline({ ctx }) {
  const cols = PIPELINE_COLS.map(c => ({
    ...c,
    deals: DEALS.filter(d => d.stage === c.id),
    total: DEALS.filter(d => d.stage === c.id).reduce((s, d) => s + d.value, 0),
  }));
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">SALES PIPELINE · Q2 2026</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="filter" size={14} /> Filter owner</button>
          <button className="btn ghost"><Icon name="chart" size={14} /> Switch ke list</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Tambah Deal</button>
        </div>
      </div>

      <div className="grid grid-4">
        <Stat label="Total Pipeline" value={fmtShort(DEALS.reduce((s, d) => s + d.value, 0))} delta="+18%" tone="indigo" icon="money" />
        <Stat label="Weighted Forecast" value={fmtShort(2350000000)} delta="+12%" tone="blue" icon="target" />
        <Stat label="Won This Month" value={fmtShort(1380000000)} delta="+24%" tone="green" icon="trend" />
        <Stat label="Avg Deal Size" value={fmtShort(310000000)} delta="+6%" tone="cyan" icon="chart" />
      </div>

      <div className="kanban">
        {cols.map(col => (
          <div key={col.id} className="kanban-col">
            <div className="kanban-head">
              <div className="row" style={{ gap: 8 }}>
                <span className={`status-pill ${col.tone}`}><span className="dot" />{col.label}</span>
                <span className="count">{col.deals.length}</span>
              </div>
              <button className="icon-btn" style={{ width: 26, height: 26, border: 0 }}><Icon name="plus" size={14} /></button>
            </div>
            <div style={{ fontSize: 11.5, color: 'var(--muted)', padding: '4px 2px 8px' }}>
              Total: <b style={{ color: 'var(--text)', fontFamily: 'var(--display)' }}>{fmtShort(col.total)}</b>
            </div>
            <div className="kanban-body">
              {col.deals.map(d => (
                <div key={d.id} className={`deal-card ${d.overdue ? 'overdue' : ''}`} onClick={() => ctx.go('detail')}>
                  <div className="row between">
                    <span className="company">{d.company}</span>
                    <Avatar name={d.owner} tone="indigo" />
                  </div>
                  <span className="value">{fmtShort(d.value)}</span>
                  <span className="next">
                    {d.overdue ? <><Icon name="clock" size={11} /> Overdue · {d.next}</> : <><Icon name="arrow" size={11} /> {d.next}</>}
                  </span>
                </div>
              ))}
              {col.deals.length === 0 && <div style={{ textAlign: 'center', padding: 20, color: 'var(--muted2)', fontSize: 12 }}>Belum ada deal</div>}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
Object.assign(window, { Pipeline });