function Segments({ ctx }) {
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">SMART SEGMENTATION · 8 segmen aktif</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="sparkle" size={14} /> AI suggestion</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Buat Segmen</button>
        </div>
      </div>

      <div className="grid grid-4">
        {SEGMENTS.map(s => (
          <div key={s.name} className={`segment-card ${s.color}`}>
            <div className="row between">
              <span className="seg-icon"><Icon name="segment" size={18} /></span>
              <span className={`status-pill ${s.growth >= 0 ? 'green' : 'red'}`}>{s.growth >= 0 ? '+' : ''}{s.growth}%</span>
            </div>
            <h3>{s.name}</h3>
            <span className="seg-num">{s.count} <small style={{ fontSize: 12, fontFamily: 'var(--font)', color: 'var(--muted)', fontWeight: 400 }}>customer</small></span>
            <p>{s.desc}</p>
            <div className="seg-foot">
              <span>Revenue · <b style={{ color: 'var(--text)' }}>{fmtShort(s.revenue)}</b></span>
              <button className="link-btn" style={{ fontSize: 12 }}>View →</button>
            </div>
          </div>
        ))}
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head"><h3>Rule Builder · Segmen "Enterprise Hot Leads"</h3><button className="btn ghost sm"><Icon name="edit" size={13} /> Edit rules</button></div>
          <div className="stack" style={{ gap: 8 }}>
            {[['Segment', 'is', 'Enterprise', 'indigo'], ['Lifecycle stage', 'in', 'Qualified, Proposal, Negotiation', 'blue'], ['Last contact', '<', '7 hari', 'cyan'], ['Deal value', '>', 'Rp 200jt', 'green'], ['Customer score', '>', '75', 'amber']].map(([f, op, v, c], i) => (
              <div key={i} className="row" style={{ gap: 8, padding: 10, background: 'var(--elev)', borderRadius: 10 }}>
                <span className={`status-pill ${c}`}>{f}</span>
                <span style={{ fontSize: 12, color: 'var(--muted)' }}>{op}</span>
                <b style={{ fontSize: 13, color: 'var(--text)' }}>{v}</b>
                <span style={{ flex: 1 }}></span>
                <button className="icon-btn" style={{ width: 26, height: 26, border: 0 }}><Icon name="edit" size={12} /></button>
              </div>
            ))}
            <button className="btn ghost sm" style={{ alignSelf: 'flex-start', marginTop: 4 }}><Icon name="plus" size={13} /> Tambah kondisi</button>
          </div>
          <div style={{ marginTop: 16, padding: 14, background: 'linear-gradient(135deg, var(--indigo-soft), var(--primary-soft))', borderRadius: 12 }}>
            <div className="row between">
              <div>
                <b style={{ fontSize: 14, color: 'var(--indigo)' }}>32 customer match segmen ini</b>
                <p style={{ fontSize: 12, color: 'var(--text2)', marginTop: 2 }}>Total deal value: <b style={{ color: 'var(--text)' }}>Rp 4,2M</b> · Avg score: 87</p>
              </div>
              <button className="btn indigo sm">Launch campaign</button>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Campaign Suggestion</h3><Icon name="sparkle" size={16} /></div>
          <div className="stack" style={{ gap: 12 }}>
            {[
              { t: 'Re-engage Dormant', d: '41 customer tidak aktif > 90 hari. Kirim email comeback dengan diskon 15%.', tone: 'amber' },
              { t: 'Upsell Repeat Buyers', d: '78 customer repeat order. Tawarkan paket Premium dengan benefit eksklusif.', tone: 'violet' },
              { t: 'At Risk Win-Back', d: '14 customer at risk. Schedule personal check-in call dari Customer Success.', tone: 'red' },
              { t: 'Onboard New Leads', d: '56 lead baru. Setup automated nurture sequence 5 email.', tone: 'green' },
            ].map(c => (
              <div key={c.t} style={{ padding: 14, background: 'var(--elev)', borderRadius: 12, borderLeft: `3px solid var(--${c.tone})` }}>
                <div className="row between" style={{ marginBottom: 6 }}>
                  <b style={{ fontSize: 13.5, color: 'var(--text)' }}>{c.t}</b>
                  <StatusPill tone={c.tone}>Recommended</StatusPill>
                </div>
                <p style={{ fontSize: 12, color: 'var(--text2)' }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Smart Insights</h3><span className="status-pill indigo"><Icon name="sparkle" size={11} /> AI-powered</span></div>
        <div className="grid grid-3">
          {[
            { t: '+34% New Leads', d: 'Pertumbuhan lead segmen retail naik signifikan dari Jakarta dan Surabaya.', tone: 'green' },
            { t: 'Risk Alert', d: '14 customer Enterprise menunjukkan penurunan aktivitas 30 hari terakhir.', tone: 'red' },
            { t: 'Opportunity', d: '22 customer Support Heavy berpotensi upgrade ke paket Premium support.', tone: 'indigo' },
          ].map(i => (
            <div key={i.t} className="card flat" style={{ padding: 16 }}>
              <span className={`status-pill ${i.tone}`} style={{ marginBottom: 8 }}>{i.t}</span>
              <p style={{ fontSize: 12.5, color: 'var(--text2)' }}>{i.d}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Segments });