// Comparison table — shopping with vs without Myrrae
function Compare() {
  const rows = [
    {
      q: 'Voir comment ça te va',
      no: { icon: '✕', txt: 'Sur un mannequin de 1m78. Et toi alors ?' },
      yes: { icon: '✓', txt: 'Sur ta photo. Ta morpho. Ton teint.' },
    },
    {
      q: 'Trouver la bonne taille',
      no: { icon: '✕', txt: 'Commander 2 ou 3 tailles, comparer, renvoyer.' },
      yes: { icon: '✓', txt: 'Recommandation pertinente selon ta morphologie.' },
    },
    {
      q: "Décider d'une tenue",
      no: { icon: '✕', txt: 'Quinze onglets ouverts, deux heures plus tard, rien.' },
      yes: { icon: '✓', txt: 'Décris l\'occasion. Reçois trois options à essayer.' },
    },
    {
      q: 'Découvrir des marques',
      no: { icon: '✕', txt: 'Toujours les mêmes 3 sites. Toujours les mêmes 3 styles.' },
      yes: { icon: '✓', txt: 'Un catalogue multimarque. La bonne recommandation, pas la plus visible.' },
    },
    {
      q: "Acheter avec confiance",
      no: { icon: '✕', txt: 'Doute, regret, retour. Et le délai bancaire.' },
      yes: { icon: '✓', txt: "Tu sais que ça te va avant de payer." },
    },
    {
      q: 'Coût pour toi',
      no: { icon: '€', txt: 'Frais de retour. Pièces gardées par défaut.' },
      yes: { icon: '€', txt: 'Gratuit. Achat direct chez la marque.' },
    },
  ];

  return (
    <section className="compare">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>vi</em></div>
          <div className="section-label">Avant / Après<span className="dot"></span>Une autre manière de shopper</div>
        </div>

        <h2>
          Shopper <em>autrement</em>.
          <br />
          Sans renoncer à rien.
        </h2>

        <div className="compare-table">
          <div className="compare-cell head">Le moment</div>
          <div className="compare-cell head">Sans Myrrae</div>
          <div className="compare-cell head brand">
            <span className="ital">avec Myrrae</span>
          </div>

          {rows.map((r, i) => (
            <React.Fragment key={i}>
              <div className="compare-cell label">{r.q}</div>
              <div className="compare-cell bad">
                <span className="icon">{r.no.icon}</span>
                {r.no.txt}
              </div>
              <div className="compare-cell good">
                <span className="icon">{r.yes.icon}</span>
                {r.yes.txt}
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Compare = Compare;