// Managed IT — dark section providing visual variety. Emphasizes enterprise
// scale + 17yr experience. Talks SLA, dedicated team, monthly reporting.

const MANAGED_COPY = {
  tr: {
    eyebrow: 'Büyük Kurumlar İçin Yönetilen IT',
    title:   'Kurumunuzun iç IT departmanı gibi çalışıyoruz.',
    sub:     'Çok lokasyonlu ve büyük ölçekli kurumlar için dedike teknik destek ekibi, SLA tabanlı yanıt süreleri ve aylık bakım anlaşmaları sunuyoruz. Sunucu, firewall ve son kullanıcı cihazları kapsam içindedir.',
    pillars: [
      { n: '7/24', l: 'Destek hattı + nöbetçi mühendis' },
      { n: '4 sa.', l: 'Kritik olaylarda SLA yanıt' },
      { n: 'Aylık', l: 'Sağlık raporu & yönetici özeti' },
      { n: '17 yıl', l: 'Sakarya kurumsal IT tecrübesi' },
    ],
    coverTitle: 'Sözleşme kapsamı',
    cover: [
      'Sunucu, depolama ve sanallaştırma',
      'Güvenlik duvarı & ağ ekipmanı',
      'Endpoint (Windows, macOS, Linux)',
      'Mail sunucusu & kurumsal e-posta',
      'Yedekleme & felaket kurtarma',
      'Lisans yönetimi (Bitdefender, WatchGuard...)',
      'Kullanıcı talepleri & on-boarding',
      'Dönemsel güvenlik denetimi',
    ],
    cta: 'Bakım anlaşması için görüşelim',
  },
  en: {
    eyebrow: 'Managed IT for Enterprises',
    title:   'We operate as your internal IT department.',
    sub:     'For multi-site and large organizations: a dedicated technical team, SLA-backed response times and monthly maintenance contracts. Servers, firewalls and end-user devices all in scope.',
    pillars: [
      { n: '24/7',  l: 'Helpdesk + on-call engineer' },
      { n: '4 hr',  l: 'SLA response for critical incidents' },
      { n: 'Monthly', l: 'Health report & exec summary' },
      { n: '17 yrs', l: 'Sakarya enterprise IT experience' },
    ],
    coverTitle: 'Contract scope',
    cover: [
      'Servers, storage & virtualization',
      'Firewall & network equipment',
      'Endpoints (Windows, macOS, Linux)',
      'Mail server & corporate email',
      'Backup & disaster recovery',
      'License management (Bitdefender, WatchGuard...)',
      'User requests & on-boarding',
      'Periodic security audit',
    ],
    cta: 'Let\'s talk maintenance',
  },
};

const Managed = () => {
  const { lang } = useLang();
  const t = pick(MANAGED_COPY, lang);
  return (
    <section id="yonetilen" className="section section-dark" style={{
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Faint grid texture */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage:
          'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),' +
          'linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%)',
        pointerEvents: 'none',
      }} />

      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 820, marginBottom: 48 }}>
          <div className="eyebrow" style={{
            color: '#6FA8FF', marginBottom: 14,
          }}>{t.eyebrow}</div>
          <h2 className="h-section" style={{ color: '#fff' }}>{t.title}</h2>
          <p className="body-lg" style={{ marginTop: 18, color: 'rgba(255,255,255,0.78)' }}>{t.sub}</p>
        </div>

        {/* Pillars row */}
        <div className="grid-4" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 'var(--r-md)',
          overflow: 'hidden',
          marginBottom: 36,
        }}>
          {t.pillars.map((p, i, arr) => (
            <div key={p.l} style={{
              padding: '28px 24px',
              borderRight: i < arr.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none',
            }}>
              <div style={{
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 'clamp(28px, 2.8vw, 36px)',
                color: '#6FA8FF', letterSpacing: '-0.02em', lineHeight: 1,
                marginBottom: 8,
              }}>{p.n}</div>
              <div style={{
                fontFamily: 'var(--sans)', fontWeight: 500, fontSize: 14,
                color: 'rgba(255,255,255,0.78)', lineHeight: 1.45,
              }}>{p.l}</div>
            </div>
          ))}
        </div>

        {/* Contract scope */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: 'var(--r-md)',
          padding: 28,
        }}>
          <div style={{
            fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.05em', color: '#6FA8FF',
            marginBottom: 14, textTransform: 'uppercase',
          }}>{t.coverTitle}</div>
          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0,
          }} className="grid-2">
            {t.cover.map((c, i) => (
              <li key={c} style={{
                padding: '12px 0', borderTop: i < 2 ? 'none' : '1px solid rgba(255,255,255,0.08)',
                fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500,
                color: 'rgba(255,255,255,0.92)',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <span aria-hidden style={{
                  width: 16, height: 16, borderRadius: 999, flex: '0 0 16px',
                  background: 'var(--brand)', color: '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 800, fontSize: 10,
                }}>✓</span>
                {c}
              </li>
            ))}
          </ul>

          <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <a href={`tel:${DK_CONTACT.phoneIntl}`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 999,
              background: 'var(--brand)', color: '#fff',
              fontFamily: 'var(--display)', fontWeight: 800, fontSize: 14.5,
              textDecoration: 'none',
            }}>
              <PhoneIcon size={16} /> {t.cta} · {DK_CONTACT.phone}
            </a>
            <a href={`mailto:${DK_CONTACT.email}`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 999,
              background: 'transparent', color: '#fff',
              border: '1px solid rgba(255,255,255,0.3)',
              fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14.5,
              textDecoration: 'none',
            }}>
              <MailIcon size={16} /> {DK_CONTACT.email}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Managed });