/* About — portrait + prose + facts. Curriculum and Skills render after. */

function About() {
  const t = window.t;
  return (
    <>
    <section className="section" id="about">
      <div className="container">

        <div className="section-label reveal">
          <span className="num">01</span>
          <span>{t('about.label')}</span>
          <span className="bar" />
          <span>{t('about.tagline')}</span>
        </div>

        <div className="about-grid">
          <div className="about-portrait reveal">
            <img src="/assets/Meeee.JPG" alt="Alexis Bonnard" className="about-portrait-img" />
            <div className="about-portrait-tag">
              <span>Alexis Bonnard</span>
              <span>{t('about.city')}</span>
            </div>
          </div>

          <div className="about-prose">
            <p className="reveal">{t('about.p1')}</p>
            <p className="reveal delay-1">{t('about.p2')}</p>
            <p className="reveal delay-2">{t('about.p3')}</p>

            <div className="about-facts reveal delay-3">
              <div className="about-fact">
                <span className="about-fact-label">{t('about.facts.basedInLabel')}</span>
                <span className="about-fact-value">{t('about.facts.basedInValue')}</span>
              </div>
              <div className="about-fact">
                <span className="about-fact-label">{t('about.facts.languagesLabel')}</span>
                <span className="about-fact-value">{t('about.facts.languagesValue')}</span>
              </div>
              <div className="about-fact">
                <span className="about-fact-label">{t('about.facts.workingAsLabel')}</span>
                <span className="about-fact-value">{t('about.facts.workingAsValue')}</span>
              </div>
              <div className="about-fact">
                <span className="about-fact-label">{t('about.facts.openToLabel')}</span>
                <span className="about-fact-value">{t('about.facts.openToValue')}</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
    <window.Curriculum />
    <window.Skills />
    </>
  );
}

window.About = About;