// Two voies — 01 (tools) and 02 (agents). Huge indices, asymmetric.

const TwoVoies = () => (
  <section className="voies" data-screen-label="02 Two voies">
    <div className="voies__head">
      <span className="b-marker"><span className="b-marker__br">[</span> 01 / Deux voies <span className="b-marker__br">]</span></span>
      <h2 className="voies__title">
        Deux <em>voies</em> qui se croisent.
      </h2>
    </div>

    <div className="voies__grid">

      <div className="voie voie--left">
        <header className="voie__head">
          <div className="voie__numwrap">
            <span className="voie__num">01</span>
            <span className="voie__num-rule" aria-hidden="true"></span>
            <span className="voie__lbl">Outils sur-mesure</span>
          </div>
          <h3 className="voie__title">On construit vos outils.</h3>
        </header>
        <p className="voie__desc">Sites vitrines, SaaS, applications métier. Architecture pensée pour durer, code écrit à quatre mains, scalable dès le premier jour — sans dépendance à un no-code.</p>
        <div className="voie__tags">
          <span className="voie__tag">SaaS</span>
          <span className="voie__tag">Sites vitrines</span>
          <span className="voie__tag">Apps mobiles</span>
          <span className="voie__tag">Outils internes</span>
          <span className="voie__tag">E-commerce</span>
        </div>
        <span className="voie__cta">Voir nos réalisations</span>
      </div>

      <div className="voie voie--right">
        <header className="voie__head">
          <div className="voie__numwrap">
            <span className="voie__num">02</span>
            <span className="voie__num-rule" aria-hidden="true"></span>
            <span className="voie__lbl">Agents IA</span>
          </div>
          <h3 className="voie__title">On déploie vos agents.</h3>
        </header>
        <p className="voie__desc">Des agents IA qui accueillent, vendent, relancent et organisent — en autonomie. Branchés à vos outils, déployés sur vos canaux, formés sur votre métier en trois semaines.</p>
        <div className="voie__tags">
          <span className="voie__tag">WhatsApp</span>
          <span className="voie__tag">Telegram</span>
          <span className="voie__tag">Slack</span>
          <span className="voie__tag">Email</span>
          <span className="voie__tag">Webchat</span>
          <span className="voie__tag">SMS</span>
        </div>
        <span className="voie__cta">Découvrir les agents</span>
      </div>

    </div>
  </section>
);

window.TwoVoies = TwoVoies;