function CustomerDetail({ ctx }) {
  const c = CUSTOMERS[0];
  const [tab, setTab] = React.useState('overview');
  return (
    <div className="stack">
      <div className="row" style={{ gap: 8, marginBottom: -8 }}>
        <button className="link-btn" onClick={() => ctx.go('customers')}>← Database Customer</button>
        <span style={{ color: 'var(--muted)' }}>/</span>
        <span style={{ color: 'var(--text2)', fontSize: 13 }}>{c.company}</span>
      </div>

      <div className="detail-hero">
        <div className="hero-logo">{c.company[0]}</div>
        <div style={{ flex: 1 }}>
          <h2>{c.company}</h2>
          <p>{c.role} · {c.contact} · {c.city}, Indonesia · Customer sejak Maret 2024</p>
          <div className="hero-stats">
            <div className="hero-stat"><span>Lifecycle</span><b>{c.lifecycle}</b></div>
            <div className="hero-stat"><span>Deal Value</span><b>{fmtShort(c.deal)}</b></div>
            <div className="hero-stat"><span>Customer Score</span><b>{c.score}/100</b></div>
            <div className="hero-stat"><span>Owner</span><b>{c.owner}</b></div>
          </div>
        </div>
        <div className="hero-actions">
          <button className="btn"><Icon name="phone" size={14} /> Call</button>
          <button className="btn"><Icon name="mail" size={14} /> Email</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Buat Deal</button>
        </div>
      </div>

      <div className="detail-tabs">
        {['overview', 'activity', 'deals', 'notes', 'tickets', 'files'].map(t => (
          <button key={t} className={`detail-tab ${tab === t ? 'active' : ''}`} onClick={() => setTab(t)}>{t.charAt(0).toUpperCase() + t.slice(1)}</button>
        ))}
      </div>

      <div className="split-2-1">
        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Activity Timeline</h3><button className="link-btn">Lihat semua</button></div>
            <div className="timeline">
              {ACTIVITIES.slice(0, 5).map((a, i) => (
                <div key={i} className="timeline-item">
                  <span className={`tl-icon ${a.tone}`}><ChannelIcon ch={a.type} /></span>
                  <div className="tl-body">
                    <div className="tl-title"><b>{a.who}</b> · {a.desc}</div>
                    <div className="tl-meta">{a.when}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Histori Komunikasi</h3><button className="link-btn" onClick={() => ctx.go('communications')}>Inbox →</button></div>
            <div className="stack" style={{ gap: 6 }}>
              {COMMUNICATIONS.slice(0, 3).map(m => (
                <div key={m.id} className="timeline-item">
                  <span className={`tl-icon ${m.channel === 'email' ? 'indigo' : m.channel === 'wa' ? 'green' : 'blue'}`}><ChannelIcon ch={m.channel} /></span>
                  <div className="tl-body">
                    <div className="tl-title"><b>{m.subject}</b></div>
                    <div className="tl-meta">{m.preview}</div>
                  </div>
                  <span className="msg-time">{m.when}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Open Deals</h3></div>
            <table className="table" style={{ border: 0 }}>
              <thead><tr><th>Deal</th><th>Stage</th><th>Value</th><th>Close Date</th></tr></thead>
              <tbody>
                <tr><td><b>Integrasi POS Q3 2026</b></td><td><StatusPill tone="indigo">Proposal</StatusPill></td><td><b>{fmtShort(480000000)}</b></td><td>15 Jul 2026</td></tr>
                <tr><td><b>Add-on modul analytics</b></td><td><StatusPill tone="cyan">Qualified</StatusPill></td><td><b>{fmtShort(95000000)}</b></td><td>30 Agu 2026</td></tr>
                <tr><td><b>Renewal 2026 SaaS license</b></td><td><StatusPill tone="amber">Negotiation</StatusPill></td><td><b>{fmtShort(620000000)}</b></td><td>1 Sep 2026</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Contact Info</h3><button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="edit" size={14} /></button></div>
            <div className="info-grid">
              <div className="info-row"><span>Email</span><b>{c.email}</b></div>
              <div className="info-row"><span>Phone</span><b>{c.phone}</b></div>
              <div className="info-row"><span>Industri</span><b>Retail & Distribusi</b></div>
              <div className="info-row"><span>Employees</span><b>520+</b></div>
              <div className="info-row"><span>Website</span><b>sinarretail.co.id</b></div>
              <div className="info-row"><span>NPWP</span><b>01.234.567.8-901.000</b></div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Related Contacts</h3><button className="link-btn">+ Tambah</button></div>
            <div className="stack" style={{ gap: 10 }}>
              {[['Bayu Saputra', 'Head of Procurement', 'indigo'], ['Lisa Marwati', 'IT Manager', 'cyan'], ['Pak Slamet', 'CFO', 'amber'], ['Tania R.', 'Operations Lead', 'pink']].map(([n, r, t]) => (
                <div key={n} className="row" style={{ gap: 10 }}>
                  <Avatar name={n} tone={t} />
                  <div style={{ flex: 1 }}>
                    <b style={{ fontSize: 13, color: 'var(--text)' }}>{n}</b>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{r}</div>
                  </div>
                  <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="mail" size={13} /></button>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Open Tickets</h3><button className="link-btn" onClick={() => ctx.go('tickets')}>Lihat →</button></div>
            <div className="stack" style={{ gap: 10 }}>
              {TICKETS.filter(t => t.company === c.company || t.company === 'PT Sinar Retail').slice(0, 2).map(t => (
                <div key={t.id} style={{ padding: 12, background: 'var(--elev)', borderRadius: 10 }}>
                  <div className="row between"><small style={{ color: 'var(--muted)' }}>{t.id}</small><StatusPill tone={t.priority === 'High' ? 'red' : 'amber'}>{t.priority}</StatusPill></div>
                  <b style={{ display: 'block', fontSize: 13, marginTop: 6 }}>{t.subject}</b>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 4 }}>SLA: {t.sla} · {t.agent}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Notes & Tasks</h3><button className="link-btn">+ Note</button></div>
            <div className="stack" style={{ gap: 8 }}>
              <div style={{ padding: 12, background: 'var(--warning-soft)', borderRadius: 10, fontSize: 12.5, color: 'var(--text2)' }}>
                <b style={{ color: 'var(--text)', display: 'block', marginBottom: 4 }}>📌 Decision pending dari board</b>
                Klien menunggu approval CFO untuk PO senilai Rp 480jt. Target signing minggu depan.
              </div>
              <div style={{ padding: 12, background: 'var(--elev)', borderRadius: 10, fontSize: 12.5, color: 'var(--text2)' }}>
                <b style={{ color: 'var(--text)', display: 'block', marginBottom: 4 }}>Task: Kirim case study retail</b>
                Due: Kamis 28 Mei · Owner: Rina W.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { CustomerDetail });