// 8 brand cards — the full vendor catalog Datakor distributes in Sakarya.

const BRANDS_DATA = [
  {
    id: 'bitdefender', name: 'Bitdefender',
    cat: { tr: 'Uç Nokta Güvenliği', en: 'Endpoint Security' },
    descTr: '100+ ülkede 500M+ ağı koruyan dünya lideri endpoint güvenlik markası. GravityZone ile sunucu, masaüstü ve mobil cihazlarda EDR ve XDR.',
    descEn: 'World-leading endpoint security protecting 500M+ networks across 100+ countries. GravityZone delivers EDR & XDR for servers, desktops and mobile.',
    capabilities: ['GravityZone', 'Antivirüs · EDR · XDR', 'Patch Management', 'Sanallaştırma'],
  },
  {
    id: 'watchguard', name: 'WatchGuard',
    cat: { tr: 'Güvenlik Duvarı · UTM', en: 'Firewall · UTM' },
    descTr: 'Firebox güvenlik duvarı ailesi ile birleşik tehdit yönetimi (UTM), kurumsal VPN, AuthPoint MFA ve güvenli kurumsal WiFi.',
    descEn: 'Firebox firewall family delivers unified threat management (UTM), corporate VPN, AuthPoint MFA and secure enterprise WiFi.',
    capabilities: ['Firebox UTM', 'Corporate VPN', 'AuthPoint MFA', 'Secure WiFi'],
  },
  {
    id: 'narbulut', name: 'Narbulut',
    cat: { tr: 'Bulut Yedekleme', en: 'Cloud Backup' },
    descTr: 'Yerli bulut tabanlı yedekleme platformu. Sunucu, sanal makine, NAS, Microsoft 365 ve SQL veritabanı yedekleme tek konsoldan.',
    descEn: 'Turkish-jurisdiction cloud backup platform. Servers, VMs, NAS, Microsoft 365 and SQL — all managed from a single console.',
    capabilities: ['Cloud Backup', 'M365 Backup', 'SQL & VM Backup', 'Disaster Recovery'],
  },
  {
    id: 'netwrix', name: 'Netwrix',
    cat: { tr: 'DLP · Veri Sızıntısı Önleme', en: 'DLP · Data Audit' },
    descTr: 'Donanım, sanal sunucu ve bulutta çalışan kapsamlı Veri Kaybı Önleme (DLP) ve kullanıcı aktivite izleme çözümü.',
    descEn: 'Comprehensive data loss prevention (DLP) and user-activity auditing — runs on hardware, VMs and cloud.',
    capabilities: ['Data Loss Prevention', 'User Activity Audit', 'Sensitive Data Discovery', 'Compliance Reporting'],
  },
  {
    id: 'logalarm', name: 'LogAlarm SIEM+',
    cat: { tr: 'SIEM · Log Yönetimi', en: 'SIEM · Log Mgmt' },
    descTr: 'Kurumlar için tasarlanmış, yerel altyapıyla çalışan merkezi log yönetimi ve siber güvenlik (SIEM) çözümü. KVKK ve 5651 uyumlu.',
    descEn: 'Enterprise-grade SIEM with on-premise central log management and cybersecurity correlation. Compliant with Turkish data laws.',
    capabilities: ['SIEM', 'Log Collection & Correlation', 'KVKK · 5651 Compliance', 'Incident Alerting'],
  },
  {
    id: 'gaterzone', name: 'Gaterzone',
    cat: { tr: 'PAM · Ayrıcalıklı Erişim', en: 'PAM · Privileged Access' },
    descTr: 'Yönetici hesaplarının ve özel erişim haklarının oluşturulması, yetkilendirilmesi, izlenmesi ve zamansız erişimlere kapatılması.',
    descEn: 'Manage how privileged accounts are created, authorized, used and revoked — close uncontrolled access paths.',
    capabilities: ['Privileged Access Mgmt', 'Session Recording', 'Just-in-Time Access', 'Audit Trail'],
  },
  {
    id: 'logtin', name: 'Logtin',
    cat: { tr: 'MFA · Kimlik Doğrulama', en: 'MFA · Authentication' },
    descTr: 'Çok faktörlü kimlik doğrulama (MFA) ve güçlü oturum güvenliği. Kurumsal uygulamalarınıza ikinci faktör koruma.',
    descEn: 'Multi-factor authentication (MFA) and strong session security. Adds a second-factor shield to your corporate apps.',
    capabilities: ['MFA / 2FA', 'SSO entegrasyonu', 'Adaptive Risk', 'Push & OTP'],
  },
  {
    id: 'transferchain', name: 'TransferChain Pass',
    cat: { tr: 'Şifrelenmiş Paylaşım & Kasa', en: 'Encrypted Share · Vault' },
    descTr: 'Blockchain tabanlı şifrelenmiş dosya paylaşımı ve kurumsal parola kasası. Uçtan uca şifreli, KVKK uyumlu.',
    descEn: 'Blockchain-backed encrypted file sharing and enterprise password vault. End-to-end encrypted, KVKK-aligned.',
    capabilities: ['Encrypted File Share', 'Password Vault', 'End-to-End Encryption', 'KVKK Aligned'],
  },
];

const BrandCard = ({ b, lang }) => (
  <article className="reveal" style={{
    background: 'var(--surface)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--r-md)',
    padding: 26, display: 'flex', flexDirection: 'column', gap: 12,
    boxShadow: 'var(--shadow-1)',
    transition: 'all 220ms var(--ease)',
  }}
    onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-2)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
    onMouseLeave={e => { e.currentTarget.style.boxShadow = 'var(--shadow-1)'; e.currentTarget.style.transform = 'translateY(0)'; }}
  >
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '4px 10px', borderRadius: 999,
        background: 'var(--brand-soft)', color: 'var(--brand)',
        fontFamily: 'var(--sans)', fontWeight: 800, fontSize: 10.5,
        letterSpacing: '0.12em', textTransform: 'uppercase',
      }}>
        <span aria-hidden style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--brand)' }}/>
        {lang === 'tr' ? 'Yetkili Çözüm Ortağı' : 'Authorized Partner'}
      </span>
    </div>

    <h3 style={{
      fontFamily: 'var(--display)', fontWeight: 800, fontSize: 26,
      letterSpacing: '-0.018em', color: 'var(--ink)', margin: '6px 0 0', lineHeight: 1.05,
    }}>{b.name}</h3>

    <div className="mono-tag" style={{ color: 'var(--brand)', fontWeight: 600 }}>
      {b.cat[lang] || b.cat.tr}
    </div>

    <p style={{
      fontFamily: 'var(--sans)', fontSize: 14, color: 'var(--ink-2)',
      lineHeight: 1.6, margin: '4px 0 0',
    }}>{lang === 'tr' ? b.descTr : b.descEn}</p>

    <div style={{
      marginTop: 'auto', paddingTop: 16, borderTop: '1px solid var(--line)',
      display: 'flex', flexWrap: 'wrap', gap: 6,
    }}>
      {b.capabilities.map(c => (
        <span key={c} style={{
          fontFamily: 'var(--sans)', fontSize: 11.5, fontWeight: 600,
          padding: '4px 10px', borderRadius: 999,
          background: 'var(--bg)', color: 'var(--ink-2)',
          border: '1px solid var(--line)',
        }}>{c}</span>
      ))}
    </div>
  </article>
);

const BRANDS_COPY = {
  tr: {
    eyebrow: 'Yetkili Markalarımız',
    title:   '8 lider güvenlik markasında yetkili çözüm ortağıyız.',
    sub:     'Lisanslama, kurulum, yapılandırma ve destek — tek kapıdan, sözleşmeli olarak.',
  },
  en: {
    eyebrow: 'Authorized Brands',
    title:   'Authorized solution partner for 8 leading security brands.',
    sub:     'Licensing, deployment, configuration and support — one door, one contract.',
  },
};

const Brands = () => {
  const { lang } = useLang();
  const t = pick(BRANDS_COPY, lang);
  return (
    <section id="markalar" className="section" style={{
      background: 'var(--bg)',
      borderTop: '1px solid var(--line)',
    }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          alignItems: 'end', marginBottom: 36,
        }} className="grid-2">
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
            <h2 className="h-section">{t.title}</h2>
          </div>
          <p className="body-lg" style={{ margin: 0 }}>{t.sub}</p>
        </div>

        <div className="grid-4" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
        }}>
          {BRANDS_DATA.map(b => <BrandCard key={b.id} b={b} lang={lang} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Brands, BRANDS_DATA });