// About — kraft paper section with layered photos and dashed-block journal entries
function About() {
  const blocks = [
    { n: "01", q: "Mon parcours ?", a: "D'abord diplômé d'un BUT MMI, ou j'y ai acquis de solides bases en développement web et en communication digitale. J'ai ensuite choisi de poursuivre en licence MIAGE en alternance (Méthodes Informatiques Appliquées à la Gestion des Entreprises) afin d'approfondir mes compétences techniques dans un environnement d'entreprise." },
    { n: "02", q: "Mes projets récents ?", a: "Je développe actuellement une application de gestion des commandes de semences. De la base de données à l'interface jusqu'à la documentation : un POC devenu une vraie application en production." },
    { n: "03", q: "Mes passions ?", a: "Amoureux de la nature et surtout de la montagne. Mes randonnées me détache des écrans et me fait prendre de la hauteur. Ma prochaine destination le lac des Corbeaux dans les Vosges." },
  ];

  return (
    <section className="vm-about" id="apropos" data-screen-label="02 À propos">
      <div className="vm-section-head">
        <div className="vm-section-km"><span className="vm-section-num">01</span>KM 01 · ÉTAPE 1 / 04</div>
        <div className="vm-section-meta">
          <span>SECTION A PROPOS</span>
          <span>CARNET 01 · PAGE 02</span>
          <span>14:32 · TEMPS CLAIR</span>
        </div>
      </div>

      <h2 className="vm-section-title">A PROPOS<em>.</em></h2>

      <div className="vm-about-grid">
        <div className="vm-about-photos" aria-hidden="true">
          <img className="vm-photo-1" src="assets/nature.jpg" alt="" />
          <video
            className="vm-photo-2"
            src="assets/IMG_6322.mp4"
            autoPlay
            loop
            muted
            playsInline
          />
          <div className="vm-photo-stamp">VU LE 12.10.25</div>
        </div>

        <div className="vm-about-text">
          <p className="vm-about-lead">
          Je m'appelle <strong>Vincent</strong>, développeur Full Stack avec 4 ans d'expérience. Chaque jour en tant que développeur,
          <em>je découvre, j'apprends et je crée </em>pour transformer un problème en une solution, pour le quotidien
          de ceux qui l'utilisent.
          </p>
          <div className="vm-about-blocks">
            {blocks.map(b => (
              <div className="vm-about-block" key={b.n}>
                <div className="vm-about-num">{b.n}</div>
                <div>
                  <h4>{b.q}</h4>
                  <p>{b.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.About = About;