const { Button, PlanCard, Accordion } = window.SURASegurosDesignSystem_faeb0e;

function Planes({ go }) {
  const D = window.SURA_DATA;
  return (
    <div>
      <Section tone="roto" style={{ paddingBottom: 'var(--space-12)' }}>
        <SectionHead overline="Comparar planes" title="Elige por lo que vas a usar, no por el nombre" lead="Revisa cada plan y haz clic para ver sus coberturas completas." />
        <Button size="sm" variant="ghost" onClick={() => go('comparador')}>Comparador uno a uno</Button>
      </Section>

      <Section style={{ paddingTop: 'var(--space-10)' }}>
        <div className="r-grid-plans" style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(D.planes.length, 4)},minmax(0,1fr))`, gap: 'var(--space-5)' }}>
          {D.planes.map((p) => (
            <PlanCard key={p.id} name={p.nombre} description={p.resumen}
              price={p.precio} priceNote={p.nota} featured={p.destacado}
              benefits={p.beneficios} ctaLabel="Ver coberturas y tarifa"
              badge={p.etiqueta}
              basePath={IC} onSelect={() => go('detalle', p.id)} />
          ))}
        </div>
      </Section>

      <Section>
        <div id="preguntas-frecuentes" className="r-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 0.6fr', gap: 'var(--space-12)', alignItems: 'center', scrollMarginTop: 100 }}>
          <div style={{ maxWidth: '70ch' }}>
            <SectionHead overline="Preguntas frecuentes" title="Lo que más me preguntan" />
            <Accordion defaultOpen={0} items={D.faq.map((f) => ({
              title: f.q,
              content: Array.isArray(f.a)
                ? <div style={{ display: 'grid', gap: 'var(--space-3)' }}>{f.a.map((parrafo, i) => <p key={i} style={{ margin: 0 }}>{parrafo}</p>)}</div>
                : <p style={{ margin: 0 }}>{f.a}</p>
            }))} />
          </div>
          <div className="faq-illustration">
            <img src="./assets/illustrations/faq-dudas.png" alt="Persona con dudas sobre su plan de salud" />
            <span className="faq-question-mark">?</span>
          </div>
        </div>
      </Section>
    </div>
  );
}

Object.assign(window, { Planes });