// Team — Fatih Yılmaz (kurucu ortak) + Sefa Satı (güvenlik uzmanı)
// Light section, 2 cards, references corporate IT depth.

const TEAM_COPY = {
  tr: {
    eyebrow: 'Ekip',
    title:   'Sakarya\'da yerinde, sözünün arkasında duran bir ekip.',
    sub:     '17 yıllık kurumsal IT tecrübesi, üç markalı Bilgim Grup yapısının ortak teknik kadrosuyla; tek bir noktadan sözleşmeli destek.',
    members: [
      { name: 'Fatih Yılmaz', role: 'Kurucu Ortak · Datakor', focus: 'Kurumsal güvenlik mimarisi, sunucu altyapı planlaması, müşteri ilişkileri.' },
      { name: 'Sefa Satı',    role: 'Güvenlik Uzmanı',        focus: 'Bitdefender & WatchGuard kurulumu, log yönetimi, SIEM yapılandırması, KVKK uyum süreçleri.' },
    ],
    extras: [
      { l: 'Bilgim Grup ortak teknik kadrosundan ek mühendis desteği', i: '🔗' },
      { l: 'Yerinde teknik servis — Sakarya\'nın 16 ilçesinde',         i: '📍' },
      { l: 'Uzaktan destek (Rustdesk) — 7/24 erişilebilir',             i: '🖥️' },
    ],
  },
  en: {
    eyebrow: 'Team',
    title:   'A local team in Sakarya that stands behind its word.',
    sub:     '17 years of corporate IT experience, with the shared technical bench of the Bilgim Group — one accountable contract.',
    members: [
      { name: 'Fatih Yılmaz', role: 'Founding Partner · Datakor', focus: 'Enterprise security architecture, server infrastructure planning, key accounts.' },
      { name: 'Sefa Satı',    role: 'Security Engineer',          focus: 'Bitdefender & WatchGuard deployment, log management, SIEM configuration, KVKK compliance.' },
    ],
    extras: [
      { l: 'Additional engineers from the Bilgim Group shared bench', i: '🔗' },
      { l: 'On-site service across all 16 Sakarya districts',         i: '📍' },
      { l: 'Remote support (Rustdesk) — 24/7 reachable',              i: '🖥️' },
    ],
  },
};

const initials = (name) => name.split(' ').map(p => p[0]).slice(0, 2).join('');

const Team = () => {
  const { lang } = useLang();
  const t = pick(TEAM_COPY, lang);
  return (
    <section id="ekip" className="section" style={{ background: 'var(--bg)' }}>
      <div className="wrap">
        <div style={{ maxWidth: 800, marginBottom: 36 }}>
          <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>

        <div className="grid-2" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
        }}>
          {t.members.map(m => (
            <article key={m.name} className="card" style={{
              padding: 28, display: 'flex', gap: 20, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 64, height: 64, borderRadius: 999, flex: '0 0 64px',
                background: 'var(--brand-soft)', color: 'var(--brand)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22,
              }}>{initials(m.name)}</div>
              <div>
                <h3 style={{
                  fontFamily: 'var(--display)', fontWeight: 800, fontSize: 20,
                  letterSpacing: '-0.01em', color: 'var(--ink)',
                  margin: '4px 0 4px',
                }}>{m.name}</h3>
                <div className="mono-tag" style={{
                  color: 'var(--brand)', fontWeight: 600, marginBottom: 10,
                }}>{m.role}</div>
                <p style={{
                  fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-2)',
                  lineHeight: 1.55, margin: 0,
                }}>{m.focus}</p>
              </div>
            </article>
          ))}
        </div>

        {/* Capability extras */}
        <ul style={{
          listStyle: 'none', padding: 0, margin: '20px 0 0',
          display: 'flex', flexWrap: 'wrap', gap: 8,
        }}>
          {t.extras.map(x => (
            <li key={x.l} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '10px 16px', borderRadius: 999,
              background: 'var(--surface)', border: '1px solid var(--line)',
              fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink-2)',
            }}>
              <span aria-hidden style={{ fontSize: 14 }}>{x.i}</span>
              {x.l}
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
};

Object.assign(window, { Team });