import { getLanguage, translations } from '../i18n';

function About() {
  const lang = getLanguage();
  const t = translations[lang].about;

  return (
    <section id="about" className="section">
      <div className="container" style={{ textAlign: 'center' }}>
        <h2>{t.title}</h2>
        <p style={{ fontSize: '1.2rem', maxWidth: '900px', margin: '2rem auto', color: 'var(--text-secondary)' }}>
          {t.description}
        </p>
        <div className="about-grid">
          <div>
            <h3 style={{ marginBottom: '1rem' }}>{t.expertise.title}</h3>
            <p>{t.expertise.text}</p>
          </div>
          <div>
            <h3 style={{ marginBottom: '1rem' }}>{t.security.title}</h3>
            <p>{t.security.text}</p>
          </div>
          <div>
            <h3 style={{ marginBottom: '1rem' }}>{t.sovereignty.title}</h3>
            <p>{t.sovereignty.text}</p>
          </div>
        </div>

        <div style={{ marginTop: '8rem' }}>
          <h2 style={{ marginBottom: '4rem' }}>{t.team.title}</h2>
          <div className="team-grid">
            {[t.team.member1, t.team.member2, t.team.member3].map((member, i) => (
              <div key={i} className="team-member">
                <div className="team-member-avatar" style={{ borderRadius: '50%' }}>
                  <span className="material-icons" style={{ fontSize: '4rem', opacity: 0.2 }}>person</span>
                </div>
                <h3 style={{ marginBottom: '0.5rem', fontSize: '1.3rem' }}>{member.name}</h3>
                <p style={{ color: 'var(--primary-color)', fontWeight: 'bold', marginBottom: '1rem', fontSize: '0.9rem', textTransform: 'uppercase' }}>{member.role}</p>
                <p style={{ fontSize: '0.95rem', maxWidth: '300px' }}>{member.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

export default About;