// Datakor's OWN corporate IT services — distinct from the distributed
// security stack. These are the in-house deployment & ops capabilities:
//   1. Server installation (physical + virtual)
//   2. Mail server (Exchange / Zimbra)
//   3. Managed IT for large orgs
//   4. PDKS personnel attendance
//   5. CCTV & alarm systems
//   6. Backup planning (3-2-1 strategy)

const SERVICES_COPY = {
  tr: {
    eyebrow: 'Kurumsal IT Hizmetlerimiz',
    title:   '17 yıldır kurumsal bilişim altyapısı kuruyor, yönetiyor ve koruyoruz.',
    sub:     'Sakarya genelinde sunucu kurulumundan personel takip sistemine; kurumsal e-postadan fiziksel güvenliğe kadar tüm BT altyapı ihtiyaçlarınızı tek noktadan karşılıyoruz.',
    items: [
      {
        id: 'sunucu',
        title: 'Sunucu Kurulumu & Yönetimi',
        tag:   'Server Infrastructure',
        desc:  'Fiziksel ve sanal sunucu kurulumu, Active Directory, dosya & terminal sunucusu, Hyper-V ve VMware sanallaştırma ile yüksek erişilebilirlik.',
        feats: ['Windows Server / Linux', 'Hyper-V & VMware', 'Active Directory', 'Dosya & Terminal Server', 'Donanım seçimi'],
      },
      {
        id: 'mail',
        title: 'Mail Sunucu Kurulumu',
        tag:   'Exchange · Zimbra',
        desc:  'Microsoft Exchange, Zimbra ve hibrit mail sunucu kurulumu. DKIM/SPF/DMARC yapılandırması, spam ve phishing koruması, mail arşivleme.',
        feats: ['Microsoft Exchange', 'Zimbra Collaboration', 'DKIM · SPF · DMARC', 'Mail arşivleme', 'Spam & phishing filtreleri'],
      },
      {
        id: 'yonetilen',
        title: 'Yönetilen IT Desteği',
        tag:   '7/24 Managed IT',
        desc:  'Büyük ölçekli kurumlar için dedike teknik ekip, SLA tabanlı yanıt süreleri ve aylık bakım anlaşmaları. Sunucu, firewall ve son kullanıcı kapsamlı.',
        feats: ['7/24 destek hattı', 'SLA tabanlı yanıt', 'Yerinde teknisyen', 'Aylık bakım raporu', 'Sunucu & firewall takibi'],
      },
      {
        id: 'yedekleme',
        title: '3-2-1 Yedekleme & Felaket Kurtarma',
        tag:   'Backup · DR',
        desc:  'Narbulut yetkili çözüm ortağı olarak 3 kopya, 2 farklı medya, 1 saha dışı bulut prensibiyle kurumsal yedekleme ve felaket kurtarma planı.',
        feats: ['Narbulut bulut yedek', 'NAS depolama', 'M365 & SQL yedeği', 'Felaket kurtarma planı', 'RTO/RPO hedefleri'],
      },
      {
        id: 'pdks',
        title: 'PDKS — Personel Devam Kontrol',
        tag:   'Time-Attendance',
        desc:  'Parmak izi, yüz tanıma ve kartlı PDKS sistemleri. Bordro ve İK yazılımlarıyla entegrasyon, çoklu lokasyon raporlama, mobil onay.',
        feats: ['Parmak izi & yüz tanıma', 'Kart / RFID', 'Bordro entegrasyonu', 'Çoklu lokasyon', 'Mobil onay & rapor'],
      },
      {
        id: 'cctv',
        title: 'CCTV Kamera & Alarm Sistemleri',
        tag:   'Physical Security',
        desc:  'IP kamera sistemleri, NVR/DVR kurulumu, hırsızlık ve yangın alarmı. Uzaktan izleme, hareket tabanlı uyarı ve mobil bildirim.',
        feats: ['IP kamera & NVR', 'Hırsızlık alarmı', 'Yangın alarm sistemi', 'Uzaktan izleme', 'Mobil bildirim'],
      },
    ],
  },
  en: {
    eyebrow: 'Corporate IT Services',
    title:   'For 17 years we deploy, manage and secure enterprise IT infrastructure.',
    sub:     'From server deployment to personnel time-attendance; from corporate email to physical security — every IT need from a single, accountable partner across Sakarya.',
    items: [
      {
        id: 'sunucu',
        title: 'Server Installation & Management',
        tag:   'Server Infrastructure',
        desc:  'Physical and virtual server deployment, Active Directory, file & terminal servers, Hyper-V and VMware virtualization with high availability.',
        feats: ['Windows Server / Linux', 'Hyper-V & VMware', 'Active Directory', 'File & Terminal Server', 'Hardware selection'],
      },
      {
        id: 'mail',
        title: 'Mail Server Deployment',
        tag:   'Exchange · Zimbra',
        desc:  'Microsoft Exchange, Zimbra and hybrid mail server setup. DKIM/SPF/DMARC configuration, spam & phishing protection, mail archiving.',
        feats: ['Microsoft Exchange', 'Zimbra Collaboration', 'DKIM · SPF · DMARC', 'Mail archiving', 'Spam & phishing filters'],
      },
      {
        id: 'yonetilen',
        title: 'Managed IT Services',
        tag:   '24/7 Managed IT',
        desc:  'Dedicated technical team for large organizations, SLA-backed response times and monthly maintenance contracts. Servers, firewall and end-users covered.',
        feats: ['24/7 helpdesk', 'SLA-backed response', 'On-site engineer', 'Monthly maintenance report', 'Server & firewall monitoring'],
      },
      {
        id: 'yedekleme',
        title: '3-2-1 Backup & Disaster Recovery',
        tag:   'Backup · DR',
        desc:  'As authorized Narbulut partner we implement enterprise backup with 3 copies, 2 different media and 1 off-site cloud copy — paired with a tested DR plan.',
        feats: ['Narbulut cloud backup', 'NAS storage', 'M365 & SQL backup', 'Disaster recovery plan', 'RTO / RPO targets'],
      },
      {
        id: 'pdks',
        title: 'PDKS — Time & Attendance',
        tag:   'Time-Attendance',
        desc:  'Fingerprint, facial recognition and card-based attendance systems. Payroll & HR integration, multi-site reporting, mobile approvals.',
        feats: ['Fingerprint & face', 'Card / RFID', 'Payroll integration', 'Multi-site', 'Mobile approval & report'],
      },
      {
        id: 'cctv',
        title: 'CCTV & Alarm Systems',
        tag:   'Physical Security',
        desc:  'IP camera systems, NVR/DVR setup, burglar and fire alarms. Remote monitoring, motion-based alerts and mobile notification.',
        feats: ['IP cameras & NVR', 'Burglar alarm', 'Fire alarm', 'Remote monitoring', 'Mobile notification'],
      },
    ],
  },
};

const ServiceIcon = ({ id }) => {
  // Tiny inline SVG icons — purposely minimal stroke vocabulary for visual coherence
  const props = {
    width: 24, height: 24, viewBox: "0 0 24 24", fill: "none",
    stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true,
  };
  switch (id) {
    case 'sunucu': return (
      <svg {...props}>
        <rect x="3" y="4"  width="18" height="6" rx="1.5"/>
        <rect x="3" y="14" width="18" height="6" rx="1.5"/>
        <line x1="6.5" y1="7"  x2="6.5" y2="7"/>
        <line x1="6.5" y1="17" x2="6.5" y2="17"/>
      </svg>
    );
    case 'mail': return (
      <svg {...props}>
        <rect x="2.5" y="5" width="19" height="14" rx="2"/>
        <path d="M3 7l9 6 9-6"/>
      </svg>
    );
    case 'yonetilen': return (
      <svg {...props}>
        <circle cx="12" cy="12" r="9"/>
        <polyline points="12 7 12 12 15.5 14"/>
      </svg>
    );
    case 'yedekleme': return (
      <svg {...props}>
        <ellipse cx="12" cy="5.5" rx="7.5" ry="2.5"/>
        <path d="M4.5 5.5v6c0 1.4 3.4 2.5 7.5 2.5s7.5-1.1 7.5-2.5v-6"/>
        <path d="M4.5 11.5v6c0 1.4 3.4 2.5 7.5 2.5s7.5-1.1 7.5-2.5v-6"/>
      </svg>
    );
    case 'pdks': return (
      <svg {...props}>
        <circle cx="12" cy="8" r="3.5"/>
        <path d="M4.5 20c.8-3.5 4-5.5 7.5-5.5s6.7 2 7.5 5.5"/>
      </svg>
    );
    case 'cctv': return (
      <svg {...props}>
        <path d="M3 5h13l4 4v3a2 2 0 0 1-2 2H3z"/>
        <circle cx="9" cy="10.5" r="2"/>
        <path d="M12 14v6"/>
        <path d="M9 20h6"/>
      </svg>
    );
    default: return null;
  }
};

const ServiceCard = ({ s }) => (
  <article className="card reveal" style={{
    padding: 28, display: 'flex', flexDirection: 'column', gap: 14,
    background: 'var(--surface)',
    borderRadius: 'var(--r-md)',
    border: '1px solid var(--line)',
  }}>
    <div style={{
      width: 48, height: 48, borderRadius: 12,
      background: 'var(--brand-soft)', color: 'var(--brand)',
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <ServiceIcon id={s.id} />
    </div>
    <div className="mono-tag" style={{ color: 'var(--brand)', fontWeight: 600 }}>{s.tag}</div>
    <h3 className="h-card" style={{ fontSize: 22, lineHeight: 1.2, margin: 0 }}>{s.title}</h3>
    <p className="body" style={{ margin: 0, fontSize: 14.5 }}>{s.desc}</p>
    <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0', display: 'flex', flexDirection: 'column', gap: 0 }}>
      {s.feats.map(f => (
        <li key={f} style={{
          padding: '9px 0', borderTop: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)',
        }}>
          <span aria-hidden style={{
            width: 16, height: 16, borderRadius: 999, flex: '0 0 16px',
            background: 'var(--brand-soft)', color: 'var(--brand)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 800, fontSize: 10,
          }}>✓</span>
          {f}
        </li>
      ))}
    </ul>
  </article>
);

const Services = () => {
  const { lang } = useLang();
  const t = pick(SERVICES_COPY, lang);
  return (
    <section id="hizmetler" className="section" style={{ background: 'var(--bg)' }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48,
          alignItems: 'end', marginBottom: 48,
        }} 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-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20,
        }}>
          {t.items.map(s => <ServiceCard key={s.id} s={s} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });