// Yetkili iş ortaklarımız

const PARTNERS = [
  { name: 'Bitdefender', tag: 'Endpoint Güvenliği',  brand: 'Datakor' },
  { name: 'WatchGuard',  tag: 'Firewall & VPN',      brand: 'Datakor' },
  { name: 'Narbulut',    tag: 'Bulut Yedekleme',      brand: 'Datakor' },
  { name: 'Mikro',       tag: 'ERP Yazılımı',         brand: 'Bilgim Bilgisayar' },
  { name: 'Akınsoft',    tag: 'WOLVOX ERP',           brand: 'Bilgim Bilgisayar' },
  { name: 'Arksigner',   tag: 'E-İmza · 15 dk',       brand: 'Bilgim Bilgisayar' },
];

const Partners = () => (
  <section className="section reveal" style={{ paddingTop: 60, paddingBottom: 60 }}>
    <div className="wrap">
      <div style={{ textAlign: 'center', marginBottom: 36 }}>
        <div className="eyebrow" style={{ marginBottom: 10 }}>Yetkili İş Ortaklarımız</div>
        <h3 style={{
          fontFamily: 'var(--display)', fontWeight: 700,
          fontSize: 'clamp(22px, 2.4vw, 28px)',
          color: 'var(--ink-2)', margin: 0,
        }}>
          Sektörün lider güvenlik ve yazılım markalarıyla.
        </h3>
      </div>

      <div className="partners-grid" style={{
        display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
      }}>
        {PARTNERS.map(p => (
          <div key={p.name} className="card" style={{
            padding: '24px 24px', textAlign: 'center',
            display: 'flex', flexDirection: 'column', gap: 6,
          }}>
            <div style={{
              fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22,
              color: 'var(--ink)', letterSpacing: '-0.01em',
            }}>{p.name}</div>
            <div style={{
              fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 600,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--muted)',
            }}>{p.tag}</div>
            <div style={{
              marginTop: 4,
              fontFamily: 'var(--sans)', fontSize: 11, color: 'var(--faint)',
              letterSpacing: '0.04em',
            }}>via {p.brand}</div>
          </div>
        ))}
      </div>
    </div>

    <style>{`
      @media (max-width: 1000px) {
        .partners-grid { grid-template-columns: repeat(3, 1fr) !important; }
      }
      @media (max-width: 640px) {
        .partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
      }
    `}</style>
  </section>
);

Object.assign(window, { Partners, PARTNERS });