// 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 Métiers du Multimédia et de l'Internet (MMI), où j'ai acquis de solides bases en développement web et en communication digitale. J'ai ensuite intégré une licence MIAGE en alternance (Méthodes Informatiques Appliquées à la Gestion des Entreprises) pour approfondir mes compétences techniques et me préparer à concevoir et développer des systèmes d'information répondant aux besoins des entreprises." },
    { n: "02", q: "Mes projets récents ?", a: "Dans le cadre de mon alternance chez ARVALIS, je développe une application de gestion des commandes de semences. J'interviens sur l'ensemble du projet, conception de la base de données, développement du back-end et de l'interface, documentation et déploiement. J'échange avec les équipes pour concevoir un outil répondant à leurs besoins métiers." },
    { 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;