// 3-2-1 backup strategy deep-dive — Datakor's signature differentiator.
// Visual: 3 large cards (3 copies, 2 media, 1 off-site) with Narbulut anchor.

const BACKUP_COPY = {
  tr: {
    eyebrow: '3-2-1 Yedekleme Stratejisi',
    title:   'Verinizin geri dönüşü yoksa, yedek yoktur.',
    sub:     'Datakor, Narbulut yetkili çözüm ortağı olarak kurumsal yedekleme yatırımınızı uluslararası 3-2-1 prensibi üzerine kurar. Her adım test edilir, RTO ve RPO hedefleri sözleşmede tanımlanır.',
    rules: [
      { idx: '3', title: 'Kopya',         desc: 'Üretim verisi + iki bağımsız yedek.' },
      { idx: '2', title: 'Farklı medya', desc: 'NAS / disk + bulut — tek arıza tek yedeği bozar.' },
      { idx: '1', title: 'Saha dışı',    desc: 'Yangın, hırsızlık, ransomware: bir kopya hep dışarıda.' },
    ],
    coversTitle: 'Yedeklenen sistemler',
    covers: ['Windows / Linux Sunucu', 'Hyper-V & VMware VM', 'NAS depolama', 'Microsoft 365 (mail/sharepoint)', 'SQL veritabanı', 'Dosya & klasör', 'Workstation imajı'],
    drTitle: 'Felaket kurtarma (DR) planı',
    drBullets: [
      'RTO (Recovery Time Objective) hedefi sözleşmede',
      'RPO (Recovery Point Objective) saatlik tanım',
      'Yıllık DR tatbikatı + raporlama',
      'Ransomware koruması: immutable snapshot',
    ],
    cta: 'Yedekleme planı için arayın',
  },
  en: {
    eyebrow: '3-2-1 Backup Strategy',
    title:   'If data does not come back, it was not a backup.',
    sub:     'As authorized Narbulut partner, Datakor builds your enterprise backup investment on the global 3-2-1 principle. Each tier is tested, and RTO/RPO targets are written into the contract.',
    rules: [
      { idx: '3', title: 'Copies',        desc: 'Production data + two independent backups.' },
      { idx: '2', title: 'Different media', desc: 'NAS / disk + cloud — one failure does not break both.' },
      { idx: '1', title: 'Off-site',     desc: 'Fire, theft, ransomware: one copy always lives elsewhere.' },
    ],
    coversTitle: 'Systems covered',
    covers: ['Windows / Linux Server', 'Hyper-V & VMware VMs', 'NAS storage', 'Microsoft 365 (mail/sharepoint)', 'SQL databases', 'Files & folders', 'Workstation images'],
    drTitle: 'Disaster Recovery plan',
    drBullets: [
      'RTO (Recovery Time Objective) defined in contract',
      'RPO (Recovery Point Objective) per hour',
      'Annual DR drill + report',
      'Ransomware protection: immutable snapshots',
    ],
    cta: 'Call for a backup plan',
  },
};

const Backup = () => {
  const { lang } = useLang();
  const t = pick(BACKUP_COPY, lang);
  return (
    <section id="yedekleme" className="section reveal" style={{
      background: 'var(--brand-soft)',
      borderTop: '1px solid var(--brand-line)',
      borderBottom: '1px solid var(--brand-line)',
    }}>
      <div className="wrap">
        <div style={{ maxWidth: 820, marginBottom: 48 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
          <h2 className="h-section">{t.title}</h2>
          <p className="body-lg" style={{ marginTop: 18 }}>{t.sub}</p>
        </div>

        {/* 3-2-1 numerical breakdown */}
        <div className="grid-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 36,
        }}>
          {t.rules.map((r, i) => (
            <div key={r.idx} style={{
              background: 'var(--surface)', borderRadius: 'var(--r-md)',
              border: '1px solid var(--brand-line)',
              padding: 32, display: 'flex', flexDirection: 'column', gap: 12,
              boxShadow: 'var(--shadow-1)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div aria-hidden style={{
                position: 'absolute', top: -20, right: -20,
                fontSize: 200, fontWeight: 800, fontFamily: 'var(--display)',
                color: 'var(--brand-soft)', lineHeight: 1, opacity: 0.7,
                letterSpacing: '-0.05em',
              }}>{r.idx}</div>
              <div style={{
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 64, color: 'var(--brand)',
                letterSpacing: '-0.04em', lineHeight: 1,
                position: 'relative',
              }}>{r.idx}</div>
              <h3 style={{
                fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22,
                color: 'var(--ink)', margin: 0, position: 'relative',
              }}>{r.title}</h3>
              <p style={{
                fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-2)',
                lineHeight: 1.55, margin: 0, position: 'relative',
              }}>{r.desc}</p>
            </div>
          ))}
        </div>

        {/* Detailed coverage + DR plan */}
        <div className="grid-2" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          <div style={{
            background: 'var(--surface)', borderRadius: 'var(--r-md)',
            border: '1px solid var(--brand-line)', padding: 28,
          }}>
            <div className="mono-tag" style={{ fontWeight: 700, color: 'var(--brand)', marginBottom: 14 }}>
              {t.coversTitle}
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {t.covers.map(c => (
                <li key={c} style={{
                  padding: '8px 14px', borderRadius: 999,
                  background: 'var(--brand-soft)', color: 'var(--brand)',
                  fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 13.5,
                  border: '1px solid var(--brand-line)',
                }}>{c}</li>
              ))}
            </ul>
          </div>
          <div style={{
            background: 'var(--navy)', color: '#fff',
            borderRadius: 'var(--r-md)', padding: 28,
          }}>
            <div style={{
              fontFamily: 'var(--mono)', fontSize: 12, fontWeight: 700,
              letterSpacing: '0.04em', color: 'rgba(255,255,255,0.6)',
              marginBottom: 14, textTransform: 'uppercase',
            }}>{t.drTitle}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {t.drBullets.map(b => (
                <li key={b} style={{
                  fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 500,
                  color: 'rgba(255,255,255,0.92)', lineHeight: 1.5,
                  display: 'flex', alignItems: 'flex-start', gap: 10,
                }}>
                  <span aria-hidden style={{
                    width: 18, height: 18, borderRadius: 999, flex: '0 0 18px',
                    background: 'rgba(30,111,224,0.5)', color: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 11, fontWeight: 800, marginTop: 1,
                  }}>✓</span>
                  {b}
                </li>
              ))}
            </ul>
            <a href={`tel:${DK_CONTACT.phoneIntl}`} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              marginTop: 22, padding: '12px 18px', borderRadius: 999,
              background: 'var(--brand)', color: '#fff',
              fontFamily: 'var(--display)', fontWeight: 800, fontSize: 14.5,
              textDecoration: 'none', letterSpacing: '0.01em',
            }}>
              <PhoneIcon size={16} /> {t.cta} · {DK_CONTACT.phone}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Backup });