const { SectionHeading, StatPill } = window.CerrajerosLaSaforDesignSystem_88370e;

const PILLARS = [
  { stat: '30 min', claim: 'Respuesta garantizada', detail: 'Llegamos a tu ubicación en menos de 30 minutos en toda la comarca de La Safor.' },
  { stat: 'Sin sorpresas', claim: 'Precio transparente', detail: 'Presupuesto cerrado antes de empezar. Nunca pagarás más de lo acordado.' },
  { stat: 'Certificados', claim: 'Técnicos oficiales', detail: 'Cerrajeros homologados que trabajan con las mejores marcas del sector.' },
  { stat: '24H · 365d', claim: 'Siempre disponibles', detail: 'Emergencias de madrugada, fines de semana o festivos. Siempre coge alguien.' },
];

function SiteWhyUs() {
  return (
    <section id="por-que" className="section-y" style={{ background: 'var(--stone)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ marginBottom: 'var(--space-8)' }}>
          <SectionHeading eyebrow="Por qué elegirnos" title={<span>Rápidos, honestos<br/>y siempre disponibles.</span>} size="lg" />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-8)' }} className="why-grid">
          {PILLARS.map((p) => <StatPill key={p.claim} {...p} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteWhyUs });