// Le Studio — formerly "L'atelier". Editorial section with Marseille banner,
// editorial quote, two founders portraits.

const Atelier = () => (
  <section className="atelier grain grain--dark" data-screen-label="07 Le studio">
    <div className="atelier__inner">

      <header className="atelier__head">
        <span className="b-marker b-marker--inv b-marker--amber">
          <span className="b-marker__br">[</span> 07 / Le studio <span className="b-marker__br">]</span>
        </span>
        <h2 className="atelier__title">
          Deux développeurs, un <em>atelier.</em>
        </h2>
      </header>

      <p className="atelier__quote">
        On préfère bien faire deux choses que mal en faire dix. Zéro sous-traitance : on code nous-mêmes chaque ligne, on configure nous-mêmes chaque agent, et on dit non aux projets qu’on ne saurait pas livrer.
      </p>

      <div className="atelier__founders">

        <article className="atelier__founder">
          <div className="atelier__founder-photo">
            <img src="/assets/portrait-antoine.jpeg" alt="Antoine" loading="lazy" />
            <span className="atelier__founder-tag">01 / fondateur</span>
          </div>
          <div className="atelier__founder-meta">
            <h3 className="atelier__founder-name">Antoine</h3>
            <span className="atelier__founder-role">Co-fondateur & Développeur</span>
            <p className="atelier__founder-bio">
              Architecte logiciel, spécialisé en IA appliquée. Il conçoit les architectures des applications sur-mesure et orchestre le déploiement des agents IA.
            </p>
            <div className="atelier__founder-skills">
              <span>React</span><span>Node.js</span><span>Architecture</span><span>Agents IA</span>
            </div>
          </div>
        </article>

        <article className="atelier__founder">
          <div className="atelier__founder-photo">
            <img src="/assets/portrait-adrien.jpeg" alt="Adrien" loading="lazy" />
            <span className="atelier__founder-tag">02 / fondateur</span>
          </div>
          <div className="atelier__founder-meta">
            <h3 className="atelier__founder-name">Adrien</h3>
            <span className="atelier__founder-role">Co-fondateur & Développeur</span>
            <p className="atelier__founder-bio">
              Développeur full-stack et DevOps. Il fait tourner les plateformes en production et garantit la fiabilité, la performance et l’hébergement européen.
            </p>
            <div className="atelier__founder-skills">
              <span>PostgreSQL</span><span>Cloud</span><span>CI/CD</span><span>DevOps</span>
            </div>
          </div>
        </article>

      </div>

    </div>
  </section>
);

window.Atelier = Atelier;