const { SectionHeading, Accordion } = window.CerrajerosLaSaforDesignSystem_88370e;

const FAQS = [
  { q: '¿Cuánto tiempo tardan en llegar?', a: 'En la gran mayoría de casos llegamos en menos de 30 minutos. Cubrimos toda la comarca de La Safor y salimos en cuanto recibes tu llamada.' },
  { q: '¿Trabajan también de noche y en festivos?', a: 'Sí, estamos disponibles las 24 horas del día, los 365 días del año — incluyendo noches, fines de semana y festivos. Siempre hay alguien al teléfono.' },
  { q: '¿Me dáis el precio antes de empezar?', a: 'Siempre. Antes de tocar nada te damos el presupuesto exacto. Si no lo aceptas, no te cobramos nada. Sin letra pequeña ni sorpresas al final.' },
  { q: '¿Podéis abrir sin romper la cerradura?', a: 'En la mayoría de los casos sí. Usamos técnicas de apertura no destructiva que preservan tanto la cerradura como la puerta.' },
];

function SiteFaq() {
  return (
    <section 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={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 'var(--space-10)', alignItems: 'start' }} className="faq-grid">
          <SectionHeading eyebrow="FAQ" title={<span>Preguntas<br/>frecuentes</span>} size="md" />
          <Accordion items={FAQS} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteFaq });