/* global React */
const { useState: fUseState } = React;

function FAQ() {
  const items = [
    { q: '¿En cuánto tiempo me atendéis?', a: 'En menos de 2 horas si nos llamas o escribes por WhatsApp en horario comercial. El presupuesto cerrado te lo entregamos en 24-48 h tras la visita.' },
    { q: '¿Cuánto cuesta reformar un piso en Málaga?', a: 'Cada reforma es distinta. Tras una visita gratuita y sin compromiso a tu vivienda, te damos un presupuesto cerrado en 24-48 h, sin letra pequeña ni sorpresas.' },
    { q: '¿Cuánto tarda una reforma?', a: 'Depende del alcance. Te entregamos un calendario por semanas con compromiso de plazos firmado antes de empezar la obra.' },
    { q: '¿Os encargáis de licencias y permisos?', a: 'Sí. Si la reforma requiere licencia de obra en el Ayuntamiento de Málaga, lo tramitamos nosotros. También memoria técnica si la comunidad lo pide.' },
    { q: '¿Cómo se paga la obra?', a: 'Por hitos acordados antes de firmar el presupuesto. Tú sabes exactamente cuándo y cuánto pagas en cada fase de la obra.' },
    { q: '¿Y si surge un imprevisto durante la obra?', a: 'Si al abrir una pared aparece algo que no estaba previsto (humedad oculta, instalación obsoleta), te lo enseñamos, te damos opciones y un coste cerrado. Tú decides. Sin sobrecostes silenciosos.' },
    { q: '¿En qué zonas trabajáis?', a: 'Málaga capital y toda la Costa del Sol: Torremolinos, Benalmádena, Fuengirola, Mijas, Rincón de la Victoria y zonas cercanas.' },
  ];
  const [open, setOpen] = fUseState(-1);
  return (
    <section id="faq">
      <SectionHead
        eyebrow="Dudas frecuentes"
        title="Lo que más nos preguntáis."
        subtitle="Si tu pregunta no está, escríbenos por WhatsApp."
      />
      <div className="container">
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={"faq-item " + (i === open ? 'open' : '')}>
              <button className="faq-q" onClick={() => setOpen(i === open ? -1 : i)}>
                <span>{it.q}</span>
                <span className="icon">+</span>
              </button>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FAQ = FAQ;