function Compare() {
  const rows = [
    { label: 'Respuesta < 2 min, 24/7', human: 'no', bot: 'yes', joi: 'yes' },
    { label: 'Español mexicano natural', human: 'yes', bot: 'no', joi: 'yes' },
    { label: 'Maneja objeciones reales', human: 'mid', bot: 'no', joi: 'yes' },
    { label: 'Califica con tus criterios', human: 'mid', bot: 'no', joi: 'yes' },
    { label: 'Agenda directo en calendario', human: 'mid', bot: 'no', joi: 'yes' },
    { label: 'Indistinguible de un humano', human: 'yes', bot: 'no', joi: 'yes' },
  ];
  const Mark = ({ v }) => {
    if (v === 'yes') return <span className="cmp-mark yes">✓</span>;
    if (v === 'no')  return <span className="cmp-mark no">×</span>;
    if (v === 'mid') return <span className="cmp-mark mid">~</span>;
    return null;
  };
  return (
    <section className="compare section" data-screen-label="05 Comparación">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">La comparación</span>
          <h2 className="title">
            <span className="line">Mejor que un humano.</span>
            <span className="line accent-text">Más humano que un bot.</span>
          </h2>
        </div>
        <div className="cmp-table">
          <div className="cmp-row">
            <div className="cmp-cell head label"></div>
            <div className="cmp-cell head">Vendedor humano</div>
            <div className="cmp-cell head">Chatbot tradicional</div>
            <div className="cmp-cell head col-joi">Joi</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="cmp-row">
              <div className="cmp-cell label">{r.label}</div>
              <div className="cmp-cell"><Mark v={r.human} /></div>
              <div className="cmp-cell"><Mark v={r.bot} /></div>
              <div className="cmp-cell col-joi"><Mark v={r.joi} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Compare = Compare;