// Team section – replaces the founder-only voice block.
// Per Anastasia: каждый член команды со своей прямой речью, своей геолокацией,
// своей специализацией и своей колонкой.

function TeamSection({ lang, setRoute }) {
  const team = window.MIGRONIS_DATA.team;
  return (
    <section className="section" id="team">
      <div className="container-wide">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap', marginBottom: 56 }}>
          <div style={{ maxWidth: 720 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>
              {lang === 'ru' ? '– Команда' : '– The team'}
            </div>
            <h2 className="display h-2" style={{ margin: 0 }}>
              {lang === 'ru'
                ? <>О команде <em>Migronis</em></>
                : <>The <em>Migronis</em> team</>}
            </h2>
            <p style={{ color: 'var(--fg-muted)', fontSize: 16, marginTop: 18, maxWidth: 560, lineHeight: 1.55 }}>
              {lang === 'ru'
                ? 'Наши специалисты живут в разных странах мира. За 14 лет работы мы протестировали большинство направлений, в которые помогаем переезжать, на себе.'
                : 'Our specialists live across multiple countries. Over 14 years we have personally tested most of the destinations we help clients move to.'}
            </p>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => setRoute({ name: 'about' })}>
            {lang === 'ru' ? 'Вся команда' : 'Full team'} →
          </button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: '1px solid var(--border-strong)' }}>
          {team.map((m, i) => (
            <article key={m.name} style={{
              padding: '28px 24px',
              borderRight: i < team.length - 1 ? '1px solid var(--border)' : '0',
              borderBottom: '1px solid var(--border-strong)',
              display: 'flex', flexDirection: 'column', gap: 18,
              background: 'var(--bg)',
              minHeight: 460,
            }}>
              {/* Header */}
              <header style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="img-ph" data-label={m.name.split(' ')[0]}
                     style={{ width: '100%', aspectRatio: '1', borderRadius: 0 }} />
                <div>
                  <div style={{ fontFamily: 'var(--f-sans)', fontWeight: 600, fontSize: 17, letterSpacing: '-0.015em' }}>
                    {lang === 'ru' && m.nameRu ? m.nameRu : m.name}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--fg-muted)', marginTop: 4, lineHeight: 1.4 }}>
                    {m.role[lang]}
                  </div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-dim)', marginTop: 8, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
                    ↳ {m.basedIn[lang]}
                  </div>
                </div>
              </header>

              {/* Direct quote */}
              <blockquote style={{
                margin: 0,
                fontFamily: 'var(--f-display)',
                fontStyle: 'italic',
                fontSize: 16, lineHeight: 1.4,
                color: 'var(--fg)',
                fontWeight: 400,
                flex: 1,
              }}>
                {m.quote[lang]}
              </blockquote>

              {/* Column + socials (real links per Nastya 11.06) */}
              <footer style={{
                paddingTop: 16, borderTop: '1px solid var(--border)',
                display: 'flex', flexDirection: 'column', gap: 10,
              }}>
                {m.column && (
                  <div className="mono" style={{ fontSize: 10, color: 'var(--fg-muted)', letterSpacing: '0.02em' }}>
                    {m.column[lang]} →
                  </div>
                )}
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  {(m.socials || []).map((s) => (
                    <a key={s.label}
                       href={lang === 'en' && s.urlEn ? s.urlEn : s.url}
                       target="_blank" rel="noopener noreferrer"
                       className="chip" style={{ fontSize: 10, height: 22 }}>{s.label}</a>
                  ))}
                </div>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.TeamSection = TeamSection;