// Product page mockup primitives — Kanban, Chat, Table, Chart, Flow, Form…
// Tất cả là JSX render placeholder visual, không data thật. Style match brand
// pink/cyan + neutral cream, layered inside MockFrame.

// Helper: small pill
const _Pill = ({ bg, color, children, size = 'sm' }) => (
  <span style={{
    display: 'inline-block',
    padding: size === 'sm' ? '2px 8px' : '4px 10px',
    borderRadius: 99,
    background: bg, color,
    fontFamily: 'Inter, sans-serif',
    fontSize: size === 'sm' ? 10 : 11,
    fontWeight: 600,
    letterSpacing: '0.04em',
  }}>{children}</span>
);

// Helper: avatar circle with initials
const _Avatar = ({ initials, color = PINK[400], size = 22 }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: size, height: size, borderRadius: '50%',
    background: color, color: '#fff',
    fontFamily: 'Inter, sans-serif', fontSize: size * 0.4, fontWeight: 700,
    flexShrink: 0,
  }}>{initials}</span>
);

// ─── KANBAN BOARD MOCKUP ────────────────────────────────────────────────
const MockKanban = () => {
  const cols = [
    { title: 'Lead mới', count: 14, accent: '#94A3B8', cards: [
      { name: 'NHC Group', value: '120tr', tags: ['F&B'], owner: 'NL' },
      { name: 'Phú Long Real', value: '450tr', tags: ['BĐS', 'Hot'], owner: 'PT' },
      { name: 'Vinashop SaaS', value: '85tr', tags: ['Retail'], owner: 'KH' },
    ]},
    { title: 'Đang tư vấn', count: 8, accent: '#3B82F6', cards: [
      { name: 'GreenLab Pharma', value: '220tr', tags: ['Y tế'], owner: 'PT' },
      { name: 'Vạn Hưng F&B', value: '64tr', tags: ['F&B'], owner: 'NL' },
    ]},
    { title: 'Báo giá', count: 5, accent: '#F59E0B', cards: [
      { name: 'KIDU Media', value: '180tr', tags: ['Hot'], owner: 'KH' },
      { name: 'Thuy Mộc', value: '95tr', tags: ['Beauty'], owner: 'NL' },
    ]},
    { title: 'Đã chốt', count: 3, accent: '#10B981', cards: [
      { name: 'Mai Lan Coffee', value: '320tr', tags: ['F&B', 'VIP'], owner: 'PT' },
    ]},
  ];
  return (
    <div style={{ background: '#fff', padding: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, minHeight: 360 }}>
      {cols.map((c, i) => (
        <div key={i} style={{ background: '#F8FAFC', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: c.accent }}/>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: '#0F172A' }}>{c.title}</span>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: '#64748B', marginLeft: 'auto' }}>{c.count}</span>
          </div>
          {c.cards.map((card, j) => (
            <div key={j} style={{ background: '#fff', borderRadius: 8, padding: 10, border: '1px solid rgba(15,23,42,0.06)', boxShadow: '0 1px 2px rgba(15,23,42,0.04)' }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 700, color: '#0F172A', marginBottom: 4, lineHeight: 1.3 }}>{card.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 800, color: PINK[600], marginBottom: 6 }}>{card.value}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
                {card.tags.map((t, k) => (
                  <_Pill key={k} bg={t === 'Hot' ? '#FEE2E2' : t === 'VIP' ? '#FEF3C7' : '#E0E7FF'} color={t === 'Hot' ? '#B91C1C' : t === 'VIP' ? '#92400E' : '#3730A3'}>{t}</_Pill>
                ))}
                <_Avatar initials={card.owner} size={18} color={PINK[400]} />
              </div>
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

// ─── CHAT INBOX MOCKUP (multi-channel) ──────────────────────────────────
const MockChatInbox = () => {
  const threads = [
    { name: 'Khách hàng Linh', channel: 'zalo', last: 'Cho mình hỏi gói 5 user...', time: '2p', unread: 2, pinned: true },
    { name: 'Anh Tuấn (NHC)', channel: 'fb', last: 'Demo lúc 3h chiều nhé', time: '12p', unread: 0 },
    { name: 'Phú Long Real', channel: 'zalo', last: 'Cảm ơn anh đã hỗ trợ!', time: '1h', unread: 0 },
    { name: 'GreenLab', channel: 'web', last: 'AI đã reply: Bạn cần...', time: '3h', unread: 0, ai: true },
  ];
  const messages = [
    { from: 'them', text: 'Mình đang muốn dùng CNV Work cho team 25 người, có gói nào phù hợp không ạ?', time: '14:32' },
    { from: 'ai', text: '👋 Mình là CNV Bot. Với team 25 user, gói All-in-one On-Cloud là phù hợp — 60.000đ/user/tháng, có ưu đãi 20% nếu thuê năm.', time: '14:32' },
    { from: 'them', text: 'Có tích hợp Zalo OA không?', time: '14:33' },
    { from: 'me', text: 'Em có tích hợp Zalo OA chính chủ + Mini App. Em đặt lịch demo 30p cho anh nhé?', time: '14:35' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr', minHeight: 360, background: '#fff' }}>
      <div style={{ borderRight: '1px solid rgba(15,23,42,0.08)', padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B', padding: '6px 8px' }}>HỘP THƯ ĐA KÊNH</div>
        {threads.map((t, i) => (
          <div key={i} style={{ padding: 8, borderRadius: 6, background: i === 0 ? `${PINK[400]}15` : 'transparent', border: i === 0 ? `1px solid ${PINK[400]}40` : '1px solid transparent', cursor: 'pointer' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
              <span style={{ width: 14, height: 14, borderRadius: 3, background: t.channel === 'zalo' ? '#0068FF' : t.channel === 'fb' ? '#0866FF' : '#10B981', flexShrink: 0 }}/>
              <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: '#0F172A', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.name}</span>
              {t.unread > 0 && <span style={{ background: PINK[500], color: '#fff', fontSize: 9, fontWeight: 700, padding: '1px 5px', borderRadius: 99 }}>{t.unread}</span>}
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, color: '#64748B', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.ai && '🤖 '}{t.last}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '10px 14px', borderBottom: '1px solid rgba(15,23,42,0.08)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <_Avatar initials="L" color={PINK[400]} size={28}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, color: '#0F172A' }}>Khách hàng Linh</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: '#64748B' }}>Zalo OA · Đang gõ…</div>
          </div>
          <_Pill bg="#DCFCE7" color="#166534">SLA: 4p</_Pill>
        </div>
        <div style={{ flex: 1, padding: 14, display: 'flex', flexDirection: 'column', gap: 8, background: '#FAFAFA' }}>
          {messages.map((m, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: m.from === 'them' ? 'flex-start' : 'flex-end' }}>
              <div style={{
                maxWidth: '75%',
                background: m.from === 'them' ? '#fff' : m.from === 'ai' ? `linear-gradient(135deg, ${PINK[400]}22, #00D9FF22)` : PINK[400],
                color: m.from === 'me' ? '#fff' : '#0F172A',
                padding: '8px 12px',
                borderRadius: 12,
                border: m.from === 'them' ? '1px solid rgba(15,23,42,0.06)' : m.from === 'ai' ? `1px solid ${PINK[400]}40` : 'none',
                fontFamily: 'Inter, sans-serif', fontSize: 11.5, lineHeight: 1.45,
              }}>
                {m.from === 'ai' && <div style={{ fontSize: 9, fontWeight: 700, color: PINK[600], letterSpacing: '0.08em', marginBottom: 3 }}>🤖 AI ASSISTANT</div>}
                {m.text}
                <div style={{ fontSize: 9, opacity: 0.6, marginTop: 3, textAlign: m.from === 'me' ? 'right' : 'left' }}>{m.time}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ padding: 10, borderTop: '1px solid rgba(15,23,42,0.08)', display: 'flex', gap: 8 }}>
          <input placeholder="Nhập tin nhắn… (/ai để gọi AI)" disabled style={{ flex: 1, padding: '8px 10px', border: '1px solid rgba(15,23,42,0.12)', borderRadius: 6, fontFamily: 'Inter, sans-serif', fontSize: 11, background: '#fff', color: '#0F172A' }}/>
          <button disabled style={{ background: PINK[400], color: '#fff', border: 'none', padding: '8px 14px', borderRadius: 6, fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, cursor: 'pointer' }}>Gửi</button>
        </div>
      </div>
    </div>
  );
};

// ─── DATA TABLE MOCKUP (invoice/order) ──────────────────────────────────
const MockTable = ({ title = 'Hoá đơn', cols = ['Mã', 'Khách hàng', 'Giá trị', 'Trạng thái'], rows }) => {
  const defaultRows = rows || [
    ['INV-2026-0421', 'NHC Group', '120,000,000đ', { type: 'success', label: 'Đã thanh toán' }],
    ['INV-2026-0422', 'Phú Long Real', '450,000,000đ', { type: 'warning', label: 'Chờ thanh toán' }],
    ['INV-2026-0423', 'GreenLab Pharma', '220,000,000đ', { type: 'pink', label: 'Đã chốt' }],
    ['INV-2026-0424', 'Mai Lan Coffee', '320,000,000đ', { type: 'success', label: 'Đã thanh toán' }],
    ['INV-2026-0425', 'Vinashop SaaS', '85,000,000đ', { type: 'gray', label: 'Nháp' }],
  ];
  return (
    <div style={{ background: '#fff', padding: 16 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
        <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 800, color: '#0F172A' }}>{title}</span>
        <_Pill bg="#E0E7FF" color="#3730A3">{defaultRows.length} bản ghi</_Pill>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols.length}, 1fr)`, gap: 0, fontSize: 10.5 }}>
        {cols.map((c, i) => (
          <div key={i} style={{ fontFamily: 'Inter, sans-serif', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#64748B', padding: '8px 10px', borderBottom: '1px solid rgba(15,23,42,0.08)' }}>{c}</div>
        ))}
        {defaultRows.map((row, i) => row.map((cell, j) => (
          <div key={`${i}-${j}`} style={{ padding: '10px 10px', borderBottom: i === defaultRows.length - 1 ? 'none' : '1px solid rgba(15,23,42,0.04)', fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#0F172A', fontWeight: j === 0 ? 600 : 500 }}>
            {typeof cell === 'object' && cell !== null && cell.type ? (
              <_Pill
                bg={cell.type === 'success' ? '#DCFCE7' : cell.type === 'warning' ? '#FEF3C7' : cell.type === 'pink' ? '#FFE2EA' : '#E5E7EB'}
                color={cell.type === 'success' ? '#166534' : cell.type === 'warning' ? '#92400E' : cell.type === 'pink' ? '#B91C5C' : '#374151'}>
                {cell.label}
              </_Pill>
            ) : cell}
          </div>
        )))}
      </div>
    </div>
  );
};

// ─── BAR CHART MOCKUP ───────────────────────────────────────────────────
const MockChart = ({ title = 'Doanh thu 6 tháng', kpi = '4.82 tỷ', delta = '+18%' }) => {
  const bars = [50, 72, 60, 88, 95, 100];
  const labels = ['T1', 'T2', 'T3', 'T4', 'T5', 'T6'];
  return (
    <div style={{ background: '#fff', padding: 18 }}>
      <div style={{ marginBottom: 12 }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B', marginBottom: 4 }}>{title}</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 28, fontWeight: 800, color: '#0F172A', letterSpacing: '-0.025em' }}>{kpi}</span>
          <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, color: '#10B981' }}>{delta}</span>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8, alignItems: 'end', height: 140 }}>
        {bars.map((h, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
            <div style={{
              width: '100%',
              height: `${h}%`,
              background: i === bars.length - 1 ? `linear-gradient(180deg, ${PINK[400]}, ${PINK[600]})` : `linear-gradient(180deg, ${PINK[300]}, ${PINK[400]})`,
              borderRadius: '4px 4px 0 0',
              opacity: i === bars.length - 1 ? 1 : 0.7,
            }}/>
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, color: '#64748B' }}>{labels[i]}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── FUNNEL CHART MOCKUP ────────────────────────────────────────────────
const MockFunnel = () => {
  const stages = [
    { name: 'Lead', count: 240, color: PINK[200] },
    { name: 'Đang tư vấn', count: 142, color: PINK[300] },
    { name: 'Báo giá', count: 86, color: PINK[400] },
    { name: 'Đã chốt', count: 41, color: PINK[600] },
  ];
  const max = stages[0].count;
  return (
    <div style={{ background: '#fff', padding: 18 }}>
      <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B', marginBottom: 14 }}>PHỄU CHUYỂN ĐỔI 30 NGÀY</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {stages.map((s, i) => {
          const pct = (s.count / max) * 100;
          const conversionFromPrev = i === 0 ? null : Math.round((s.count / stages[i-1].count) * 100);
          return (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 80, fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600, color: '#0F172A', flexShrink: 0 }}>{s.name}</div>
              <div style={{ flex: 1, height: 28, background: '#F1F5F9', borderRadius: 6, overflow: 'hidden', position: 'relative' }}>
                <div style={{ height: '100%', width: `${pct}%`, background: s.color, borderRadius: 6, display: 'flex', alignItems: 'center', paddingLeft: 10, fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: i >= 2 ? '#fff' : '#0F172A' }}>
                  {s.count}
                </div>
              </div>
              {conversionFromPrev !== null && (
                <div style={{ width: 50, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, color: PINK[600], textAlign: 'right' }}>{conversionFromPrev}%</div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ─── AUTOMATION FLOW MOCKUP (visual) ────────────────────────────────────
const MockFlowEditor = () => {
  const nodes = [
    { x: 20, y: 30, w: 130, h: 50, type: 'trigger', label: 'Lead mới', sub: 'Trigger · Form' },
    { x: 195, y: 30, w: 130, h: 50, type: 'action', label: 'Gán sales', sub: 'Round-robin' },
    { x: 195, y: 110, w: 130, h: 50, type: 'condition', label: 'Giá trị > 100tr?', sub: 'Điều kiện' },
    { x: 20, y: 190, w: 130, h: 50, type: 'action', label: 'Gửi ZNS', sub: 'Zalo OA' },
    { x: 195, y: 190, w: 130, h: 50, type: 'action', label: 'Tạo task', sub: 'Sales lead' },
  ];
  const edges = [
    { from: 0, to: 1 },
    { from: 1, to: 2 },
    { from: 2, to: 3 },
    { from: 2, to: 4 },
  ];
  const nodeColor = (t) => t === 'trigger' ? '#10B981' : t === 'condition' ? '#F59E0B' : PINK[500];
  return (
    <div style={{ background: '#FAFAFA', backgroundImage: 'radial-gradient(circle, #E2E8F0 1px, transparent 1px)', backgroundSize: '14px 14px', padding: 0, minHeight: 290, position: 'relative' }}>
      <svg width="100%" height="280" style={{ display: 'block' }}>
        {edges.map((e, i) => {
          const a = nodes[e.from];
          const b = nodes[e.to];
          const x1 = a.x + a.w / 2;
          const y1 = a.y + a.h;
          const x2 = b.x + b.w / 2;
          const y2 = b.y;
          return (
            <path key={i}
              d={`M ${x1} ${y1} C ${x1} ${(y1+y2)/2}, ${x2} ${(y1+y2)/2}, ${x2} ${y2}`}
              stroke={PINK[400]}
              strokeWidth="2"
              fill="none"
              strokeDasharray={e.from === 2 ? '0' : '0'}
            />
          );
        })}
        {nodes.map((n, i) => (
          <g key={i}>
            <rect x={n.x} y={n.y} width={n.w} height={n.h} rx="8"
              fill={i === 0 ? '#fff' : 'rgba(255,255,255,0.95)'}
              stroke={nodeColor(n.type)} strokeWidth="2"/>
            <circle cx={n.x + 10} cy={n.y + 12} r="3" fill={nodeColor(n.type)}/>
            <text x={n.x + 18} y={n.y + 16} fontFamily="Inter, sans-serif" fontSize="9" fontWeight="700" fill={nodeColor(n.type)} textAnchor="start">{n.sub.toUpperCase()}</text>
            <text x={n.x + 12} y={n.y + 36} fontFamily="Inter, sans-serif" fontSize="12" fontWeight="700" fill="#0F172A" textAnchor="start">{n.label}</text>
          </g>
        ))}
      </svg>
    </div>
  );
};

// ─── APPROVAL CARD MOCKUP ───────────────────────────────────────────────
const MockApproval = () => {
  const steps = [
    { name: 'Phòng KD', person: 'Linh — Sales lead', status: 'approved', time: '08:14' },
    { name: 'Phòng TC', person: 'Khoa — CFO', status: 'approved', time: '09:02' },
    { name: 'CEO', person: 'Phú — CEO', status: 'pending', time: 'Đang chờ' },
  ];
  return (
    <div style={{ background: '#fff', padding: 20 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B', marginBottom: 3 }}>YÊU CẦU PHÊ DUYỆT · APV-2026-1042</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, color: '#0F172A', letterSpacing: '-0.015em' }}>Hợp đồng NHC Group · 120tr</div>
        </div>
        <_Pill bg="#FEF3C7" color="#92400E" size="md">Đang xử lý</_Pill>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {steps.map((s, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: i === steps.length - 1 ? 'none' : '1px solid rgba(15,23,42,0.06)' }}>
            <div style={{
              width: 28, height: 28, borderRadius: '50%',
              background: s.status === 'approved' ? '#10B981' : s.status === 'pending' ? '#FEF3C7' : '#F1F5F9',
              border: s.status === 'pending' ? '2px solid #F59E0B' : 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              {s.status === 'approved' ? (
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-10" stroke="#fff" strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              ) : (
                <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700, color: '#92400E' }}>{i + 1}</span>
              )}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700, color: '#0F172A' }}>{s.name}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: '#64748B' }}>{s.person}</div>
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: s.status === 'approved' ? '#10B981' : '#92400E', fontWeight: 600 }}>{s.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── ATTENDANCE MAP / GEOFENCE MOCKUP ──────────────────────────────────
const MockGeofence = () => (
  <div style={{ background: '#fff', padding: 16 }}>
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
      <div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B' }}>CHECK-IN HÔM NAY</div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 22, fontWeight: 800, color: '#0F172A', marginTop: 3 }}>54/56 nhân viên</div>
      </div>
      <_Pill bg="#DCFCE7" color="#166534" size="md">96% đúng giờ</_Pill>
    </div>
    <div style={{
      position: 'relative',
      borderRadius: 10, overflow: 'hidden',
      background: 'linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 50%, #93C5FD 100%)',
      height: 200,
    }}>
      {/* fake map streets */}
      <div style={{ position: 'absolute', inset: 0, opacity: 0.3 }}>
        <svg width="100%" height="100%" preserveAspectRatio="none">
          <path d="M 0 60 L 400 90" stroke="#fff" strokeWidth="3" opacity="0.5"/>
          <path d="M 0 130 L 400 100" stroke="#fff" strokeWidth="3" opacity="0.5"/>
          <path d="M 80 0 L 100 250" stroke="#fff" strokeWidth="3" opacity="0.5"/>
          <path d="M 220 0 L 240 250" stroke="#fff" strokeWidth="3" opacity="0.5"/>
        </svg>
      </div>
      {/* Geofence circle */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 140, height: 140, borderRadius: '50%',
        background: `${PINK[400]}30`, border: `2px dashed ${PINK[500]}`,
      }}/>
      {/* Pin */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -100%)',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
      }}>
        <div style={{ background: PINK[500], color: '#fff', padding: '4px 10px', borderRadius: 99, fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, marginBottom: 4 }}>VP HCM · 200m</div>
        <svg width="22" height="28" viewBox="0 0 24 24" fill={PINK[600]}><path d="M12 2C7.6 2 4 5.6 4 10c0 5.5 8 12 8 12s8-6.5 8-12c0-4.4-3.6-8-8-8z"/></svg>
      </div>
    </div>
    <div style={{ display: 'flex', gap: 12, marginTop: 14 }}>
      <_Pill bg="#FEE2E2" color="#B91C1C">2 vắng</_Pill>
      <_Pill bg="#FEF3C7" color="#92400E">3 đi trễ</_Pill>
      <_Pill bg="#DCFCE7" color="#166534">51 đúng giờ</_Pill>
    </div>
  </div>
);

// ─── KPI BANNER MOCKUP ──────────────────────────────────────────────────
const MockKPIs = () => {
  const kpis = [
    { label: 'MRR', value: '482tr', delta: '+12%', up: true },
    { label: 'Lead mới', value: '128', delta: '+24%', up: true },
    { label: 'Tỉ lệ chốt', value: '24.5%', delta: '+3pt', up: true },
    { label: 'TB chu kỳ', value: '11 ngày', delta: '−2', up: true },
  ];
  return (
    <div style={{ background: '#fff', padding: 16, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
      {kpis.map((k, i) => (
        <div key={i} style={{ background: '#F8FAFC', borderRadius: 10, padding: '14px 12px' }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#64748B', marginBottom: 4 }}>{k.label}</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 800, color: '#0F172A', letterSpacing: '-0.02em', marginBottom: 2 }}>{k.value}</div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 10, fontWeight: 700, color: k.up ? '#10B981' : '#EF4444' }}>{k.delta}</div>
        </div>
      ))}
    </div>
  );
};

Object.assign(window, {
  MockKanban, MockChatInbox, MockTable, MockChart, MockFunnel,
  MockFlowEditor, MockApproval, MockGeofence, MockKPIs,
});