function Insurers() {
  const D = (window.SITE && window.SITE.insurers) || {};
  const insurers = D.items || [];

  return (
    <section id="seguradoras" style={{ background: 'var(--bg)' }}>
      <div className="container">
        <div className="section-head" style={{ textAlign: 'center', alignItems: 'center' }}>
          <span className="eyebrow">{D.eyebrow}</span>
          <h2>{D.title} <span style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{D.titleAccent}</span></h2>
          <p style={{ fontSize: 17, maxWidth: 640, textAlign: 'center', margin: '0 auto' }}>
            {D.subtitle}
          </p>
        </div>

        <div className="insurers-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0,
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          background: 'var(--surface)',
        }}>
          {insurers.map((s, i) => (
            <div key={s.name} style={{
              padding: '40px 24px',
              borderRight: ((i + 1) % 4 !== 0) ? '1px solid var(--line)' : 'none',
              borderBottom: i < 4 ? '1px solid var(--line)' : 'none',
              display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center',
              gap: 6,
              minHeight: 130,
              transition: 'background .18s ease',
              cursor: 'default',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--bg)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>
              <span style={{
                fontFamily: s.font === 'serif' ? 'var(--serif)' : 'var(--sans)',
                fontSize: 28,
                fontWeight: s.weight,
                color: s.color,
                fontStyle: s.italic ? 'italic' : 'normal',
                letterSpacing: s.font === 'sans' ? '-0.01em' : '0',
                lineHeight: 1,
              }}>{s.name}</span>
              {s.sub && (
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 10.5,
                  letterSpacing: '.08em', textTransform: 'uppercase',
                  color: 'var(--muted)',
                }}>{s.sub}</span>
              )}
            </div>
          ))}
        </div>

        <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 16, textAlign: 'center', fontFamily: 'var(--mono)' }}>
          {D.footnote}
        </p>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .insurers-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .insurers-grid > div {
            border-right: 1px solid var(--line) !important;
            border-bottom: 1px solid var(--line) !important;
          }
          .insurers-grid > div:nth-child(2n) { border-right: none !important; }
          .insurers-grid > div:nth-last-child(-n+2) { border-bottom: none !important; }
        }
        @media (max-width: 500px) {
          .insurers-grid { grid-template-columns: 1fr !important; }
          .insurers-grid > div { border-right: none !important; }
          .insurers-grid > div:last-child { border-bottom: none !important; }
        }
      `}</style>
    </section>
  );
}

window.Insurers = Insurers;