// Brand-accurate logos for the 10 integrations.
// Sized to a unified 32px box; pass `size` to scale.

const _Logo = ({ size = 32, children, bg = '#fff', radius = 8, padding = 6, border = 'rgba(10,14,26,0.08)' }) => (
  <div style={{
    width: size, height: size, borderRadius: radius,
    background: bg, padding, boxSizing: 'border-box',
    border: `1px solid ${border}`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  }}>{children}</div>
);

const _LogoImg = ({ src, alt, contain = true }) => (
  <img src={src} alt={alt} style={{
    width: '100%', height: '100%',
    objectFit: contain ? 'contain' : 'cover', display: 'block',
  }}/>
);

// Mattermost — official mark
const LogoMattermost = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/Mattermost.png" alt="Mattermost"/>
  </_Logo>
);

// Google Drive — official tri-color
const LogoGDrive = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/Google_Drive_logo.png" alt="Google Drive"/>
  </_Logo>
);

// Google Docs — official blue page
const LogoGDocs = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/google-docs.svg" alt="Google Docs"/>
  </_Logo>
);

// Fireflies.ai — official mark
const LogoFireflies = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/firefile.jpeg" alt="Fireflies.ai"/>
  </_Logo>
);

// Zalo OA — official Zalo logo (no badge)
const LogoZaloOA = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/zalo.svg" alt="Zalo"/>
  </_Logo>
);

// Zalo cá nhân — official Zalo logo (giống OA)
const LogoZaloPersonal = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/zalo.svg" alt="Zalo"/>
  </_Logo>
);

// Facebook — official mark
const LogoFacebook = ({ size = 32 }) => (
  <_Logo size={size} padding={0}>
    <_LogoImg src="/img/partner/facebook.svg" alt="Facebook"/>
  </_Logo>
);

// Call Center / VOIP — phone icon
const LogoCallCenter = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/phone-call.png" alt="Call Center"/>
  </_Logo>
);

// CNV CDP — official Convertise logo (pink heart + wordmark, dark bg for contrast)
const LogoCNVCdp = ({ size = 32 }) => (
  <_Logo size={size} bg="#0A0E1A" border="rgba(255,255,255,0.12)" padding={4}>
    <_LogoImg src="/img/partner/cnv-cdp.svg" alt="CNV CDP"/>
  </_Logo>
);

// Mini App on Zalo — official logo
const LogoMiniApp = ({ size = 32 }) => (
  <_Logo size={size}>
    <_LogoImg src="/img/partner/zalo mini app.svg" alt="Zalo Mini App"/>
  </_Logo>
);

// Registry: id → { name, desc, Logo, group }
const INTEGRATIONS = [
  { id: 'mattermost',     name: 'Mattermost',         desc: 'Hệ thống chat nội bộ — đồng bộ tin nhắn, kênh team vào CRM.',                       Logo: LogoMattermost,    group: 'Communication' },
  { id: 'gdrive',         name: 'Google Drive',       desc: 'Quản lý toàn bộ data công ty trên Drive — truy cập ngay trong CRM.',                Logo: LogoGDrive,        group: 'Productivity' },
  { id: 'gdocs',          name: 'Google Docs',        desc: 'Tạo hợp đồng tự động bằng Docs — soạn thảo, chỉnh sửa nhanh chóng.',                Logo: LogoGDocs,         group: 'Productivity' },
  { id: 'fireflies',      name: 'Fireflies.ai',       desc: 'Ghi âm và tóm tắt cuộc họp tự động — log thẳng vào lịch sử CRM.',                   Logo: LogoFireflies,     group: 'Productivity' },
  { id: 'zalo-oa',        name: 'Zalo OA',            desc: 'Tích hợp Zalo Official Account doanh nghiệp — gửi ZNS, broadcast.',                 Logo: LogoZaloOA,        group: 'Communication' },
  { id: 'zalo-personal',  name: 'Zalo cá nhân',       desc: 'Chat cá nhân & nhóm — phù hợp doanh nghiệp dùng nick cá nhân chăm sóc khách.',      Logo: LogoZaloPersonal,  group: 'Communication' },
  { id: 'facebook',       name: 'Facebook',           desc: 'Tích hợp Facebook Messenger — chat đa fanpage tập trung 1 inbox.',                   Logo: LogoFacebook,      group: 'Communication' },
  { id: 'call-center',    name: 'Call Center',        desc: 'Tổng đài VOIP & Zalo Call qua Zalo OA — click-to-call, ghi âm tự động log.',        Logo: LogoCallCenter,    group: 'Communication' },
  { id: 'cnv-cdp',        name: 'CNV CDP',            desc: 'Automation chăm sóc khách hàng — phân nhóm, gửi tự động theo hành vi.',              Logo: LogoCNVCdp,        group: 'Marketing' },
  { id: 'mini-app',       name: 'Mini App Zalo',      desc: 'Chấm công, task, dự án, CRM ngay trên Zalo — không cần app riêng.',                 Logo: LogoMiniApp,       group: 'Productivity' },
];

Object.assign(window, {
  LogoMattermost, LogoGDrive, LogoGDocs, LogoFireflies, LogoZaloOA, LogoZaloPersonal,
  LogoFacebook, LogoCallCenter, LogoCNVCdp, LogoMiniApp,
  INTEGRATIONS,
});