// 5 security solution categories, each with its brand(s) + feature list.

const SOLUTIONS_COPY = {
  tr: {
    eyebrow: 'Güvenlik Çözüm Alanlarımız',
    title:   '8 markada yetkili çözüm ortağı olarak, 5 ana güvenlik disiplininde Sakarya\'da kuruyoruz.',
    sub:     'Lisans satışı, kurulum, yapılandırma, eğitim ve sözleşmeli destek — tüm güvenlik yatırımınızı tek noktadan yönetiyoruz.',
    items: [
      {
        id: 'uc-nokta',
        idx: '01',
        title: 'Uç Nokta ve Ağ Güvenliği',
        intro: 'Sunucu, masaüstü, mobil cihaz ve ağ trafiğinin uçtan uca korunması.',
        feats: ['Antivirüs · EDR · XDR', 'Uç Nokta Koruması (Endpoint)', 'Güvenlik Duvarı (Firewall) / UTM', 'Ağ Güvenliği & Tehdit Önleme'],
        brands: [
          { name: 'Bitdefender', tag: 'Endpoint · EDR · XDR' },
          { name: 'WatchGuard',  tag: 'Firewall · UTM · VPN' },
        ],
      },
      {
        id: 'veri-koruma',
        idx: '02',
        title: 'Veri Koruma ve Yedekleme',
        intro: 'Verilerinizin yedeklenmesi, geri yüklenmesi ve sızıntıya karşı korunması.',
        feats: ['Yedekleme & Veri Kurtarma', 'Veri Kaybı Önleme (DLP)', 'Kullanıcı Aktiviteleri İzleme', '3-2-1 Yedekleme Stratejisi'],
        brands: [
          { name: 'Narbulut', tag: 'Cloud Backup' },
          { name: 'Netwrix',  tag: 'DLP · Auditing' },
        ],
      },
      {
        id: 'kimlik',
        idx: '03',
        title: 'Kimlik ve Erişim Yönetimi',
        intro: 'Doğru kişinin, doğru kaynağa, doğru zamanda erişmesi.',
        feats: ['Çok Faktörlü Kimlik Doğrulama (MFA)', 'Ayrıcalıklı Erişim Yönetimi (PAM)', 'Oturum Kayıt & İzleme', 'Sıfır-Güven Erişim Politikaları'],
        brands: [
          { name: 'Logtin',    tag: 'Kimlik Doğrulama · MFA' },
          { name: 'Gaterzone', tag: 'PAM — Privileged Access' },
        ],
      },
      {
        id: 'sifre',
        idx: '04',
        title: 'Şifre Güvenliği & Şifreli Paylaşım',
        intro: 'Kurum içi parola yönetimi ve şifrelenmiş dosya paylaşımı.',
        feats: ['Şifrelenmiş Dosya Paylaşımı', 'Kurumsal Parola Kasası', 'Uçtan Uca Veri Güvenliği', 'KVKK Uyum Süreci'],
        brands: [
          { name: 'TransferChain Pass', tag: 'Encrypted Share · Vault' },
        ],
      },
      {
        id: 'siem',
        idx: '05',
        title: 'SIEM ve Log Yönetimi',
        intro: 'Tüm sistemlerinizden gelen logların merkezi olarak toplanması, ilişkilendirilmesi ve uyum süreçleri.',
        feats: ['SIEM — Güvenlik Bilgi & Olay Yönetimi', 'Merkezi Log Toplama & Analiz', 'Olay Korelasyonu & Uyarı', 'KVKK & 5651 Uyum Logu'],
        brands: [
          { name: 'LogAlarm SIEM+', tag: 'SIEM · Log Management' },
        ],
      },
    ],
  },
  en: {
    eyebrow: 'Security Solution Areas',
    title:   'Authorized partner for 8 vendors across 5 core security disciplines in Sakarya.',
    sub:     'Licensing, deployment, configuration, training and SLA-backed support — we manage your full security investment from a single point.',
    items: [
      {
        id: 'uc-nokta',
        idx: '01',
        title: 'Endpoint & Network Security',
        intro: 'End-to-end protection for servers, desktops, mobile devices and network traffic.',
        feats: ['Antivirus · EDR · XDR', 'Endpoint Protection', 'Firewall / UTM', 'Network Security & Threat Prevention'],
        brands: [
          { name: 'Bitdefender', tag: 'Endpoint · EDR · XDR' },
          { name: 'WatchGuard',  tag: 'Firewall · UTM · VPN' },
        ],
      },
      {
        id: 'veri-koruma',
        idx: '02',
        title: 'Data Protection & Backup',
        intro: 'Backup, recovery and data-loss prevention for your most critical data.',
        feats: ['Backup & Recovery', 'Data Loss Prevention (DLP)', 'User Activity Monitoring', '3-2-1 Backup Strategy'],
        brands: [
          { name: 'Narbulut', tag: 'Cloud Backup' },
          { name: 'Netwrix',  tag: 'DLP · Auditing' },
        ],
      },
      {
        id: 'kimlik',
        idx: '03',
        title: 'Identity & Access Management',
        intro: 'The right person, accessing the right resource, at the right time.',
        feats: ['Multi-Factor Authentication (MFA)', 'Privileged Access Management (PAM)', 'Session Recording & Auditing', 'Zero-Trust Access Policies'],
        brands: [
          { name: 'Logtin',    tag: 'Authentication · MFA' },
          { name: 'Gaterzone', tag: 'PAM — Privileged Access' },
        ],
      },
      {
        id: 'sifre',
        idx: '04',
        title: 'Password & Encrypted Sharing',
        intro: 'Enterprise password management and encrypted file sharing.',
        feats: ['Encrypted File Sharing', 'Enterprise Password Vault', 'End-to-End Data Security', 'KVKK Compliance Workflow'],
        brands: [
          { name: 'TransferChain Pass', tag: 'Encrypted Share · Vault' },
        ],
      },
      {
        id: 'siem',
        idx: '05',
        title: 'SIEM & Log Management',
        intro: 'Centralized log collection, correlation and regulatory compliance.',
        feats: ['SIEM — Security Info & Event Mgmt', 'Centralized Log Collection & Analysis', 'Event Correlation & Alerting', 'KVKK & Law-5651 Compliance Logs'],
        brands: [
          { name: 'LogAlarm SIEM+', tag: 'SIEM · Log Management' },
        ],
      },
    ],
  },
};

const SolutionRow = ({ item, flip }) => (
  <article className="reveal" style={{
    display: 'grid', gridTemplateColumns: flip ? '1fr 1.4fr' : '1.4fr 1fr',
    gap: 32, padding: '36px 0', borderTop: '1px solid var(--line)',
    alignItems: 'start',
  }}>
    <div style={{ order: flip ? 2 : 1 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
        <span className="mono-tag" style={{ fontSize: 14, fontWeight: 700, color: 'var(--brand)' }}>{item.idx}</span>
        <h3 className="h-card" style={{
          fontSize: 28, lineHeight: 1.15, margin: 0,
          letterSpacing: '-0.015em',
        }}>{item.title}</h3>
      </div>
      <p className="body-lg" style={{ margin: '0 0 18px', maxWidth: 580 }}>{item.intro}</p>

      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 8,
      }}>
        {item.brands.map(b => (
          <span key={b.name} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: 'var(--brand-soft)', border: '1px solid var(--brand-line)',
            fontFamily: 'var(--display)', fontWeight: 800, fontSize: 13.5,
            color: 'var(--brand)',
          }}>
            {b.name}
            <span style={{ fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 12, color: 'var(--ink-2)' }}>· {b.tag}</span>
          </span>
        ))}
      </div>
    </div>

    <ul style={{
      order: flip ? 1 : 2,
      listStyle: 'none', padding: 0, margin: 0,
      display: 'flex', flexDirection: 'column', gap: 0,
      background: 'var(--surface)', border: '1px solid var(--line)',
      borderRadius: 'var(--r-md)', overflow: 'hidden',
    }}>
      {item.feats.map((f, i) => (
        <li key={f} style={{
          padding: '14px 18px',
          borderTop: i === 0 ? 'none' : '1px solid var(--line)',
          fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 14.5,
          color: 'var(--ink)', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <span aria-hidden style={{
            width: 18, height: 18, borderRadius: 999, flex: '0 0 18px',
            background: 'var(--brand-soft)', color: 'var(--brand)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 800, fontSize: 11,
          }}>✓</span>
          {f}
        </li>
      ))}
    </ul>
  </article>
);

const Solutions = () => {
  const { lang } = useLang();
  const t = pick(SOLUTIONS_COPY, lang);
  return (
    <section id="cozumler" className="section" style={{ background: 'var(--surface)' }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          alignItems: 'end', marginBottom: 24,
        }} 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>
          {t.items.map((it, i) => <SolutionRow key={it.id} item={it} flip={i % 2 === 1} />)}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          #cozumler article {
            grid-template-columns: 1fr !important;
            gap: 18px !important;
          }
          #cozumler article > * { order: unset !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Solutions });