const { Card, Button, Icon, Badge, Select, Field, Tag, Alert } = window.SURASegurosDesignSystem_faeb0e; function Comparador({ go }) { const D = window.SURA_DATA; const cols = D.comparativo.columns; const rows = D.comparativo.rows; const [a, setA] = React.useState('1'); const [b, setB] = React.useState('3'); const [soloDif, setSoloDif] = React.useState(false); const ia = Number(a), ib = Number(b); const norm = (v) => (v === true ? 'Sí' : v === false ? '-' : v); const visibles = rows.filter((r) => !soloDif || norm(r.values[ia]) !== norm(r.values[ib])); const difs = rows.filter((r) => norm(r.values[ia]) !== norm(r.values[ib])).length; const opts = cols.map((c, i) => ({ value: String(i), label: c.family + ' · ' + c.label })); const Col = ({ i, tone }) => (
{cols[i].family}
{cols[i].label}
); return (
Comparador

Pon dos planes frente a frente

Elige dos planes y te muestro cobertura por cobertura en qué se parecen y en qué no. Los datos son del comparativo oficial SURA 2026.

setB(e.target.value)} options={opts} /> setSoloDif(!soloDif)}>Solo diferencias
{difs} de {rows.length} coberturas se comportan distinto {ia === ib ? Elegiste el mismo plan dos veces : null}
Cobertura
{visibles.map((r, k) => { const va = norm(r.values[ia]); const vb = norm(r.values[ib]); const dif = va !== vb; const cell = (v, side) => (
{v}
); return (
{dif ? : } {r.label}
{cell(va, 'a')} {cell(vb, 'b')}
); })}
{visibles.length === 0 ? (
Estos dos planes se comportan igual en todas las coberturas del comparativo.
) : null}
El punto amarillo marca las coberturas donde los dos planes difieren. “-” significa que la cobertura no está incluida.
En el directorio médico de SURA puedes verificar especialistas, urgencias, convenios de habitación individual y atención domiciliaria por ciudad y plan.{' '} Abrir el directorio
); } Object.assign(window, { Comparador });