/* global React, Section, Eyebrow, Icon */
// Faq.jsx — 12 · accordion

const QA = [
  { q: '¿Puedo visitar el hogar antes de decidir?', a: 'Sí. Recomendamos coordinar una visita para conocer los espacios, resolver dudas y conversar sobre las necesidades de tu familiar.' },
  { q: '¿Qué tipo de adultos mayores reciben?', a: 'Recibimos personas mayores autovalentes o con dependencia leve a moderada. Cada caso se evalúa de forma personalizada.' },
  { q: '¿La familia puede mantenerse en contacto?', a: 'Sí. Para nosotros la familia sigue siendo parte importante del proceso de cuidado y acompañamiento.' },
  { q: '¿El valor es igual para todos?', a: 'No necesariamente. Depende del nivel de apoyo y cuidado que requiera cada persona. Por eso es importante conversar cada caso.' },
  { q: '¿Dónde está ubicado Mi Refugio en el Campo?', a: 'Estamos en Lagunillas, Villa Alegre, Región del Maule, en un entorno tranquilo de campo.' },
];

function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" bg="cream" narrow>
      <div className="mr-sectionhead">
        <Eyebrow>Preguntas frecuentes</Eyebrow>
        <h2 className="mr-h2">Resolver tus dudas también es parte del cuidado</h2>
      </div>
      <div className="mr-faqlist">
        {QA.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} className={`mr-faq${isOpen ? ' is-open' : ''}`}>
              <button className="mr-faq__q" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                <span>{item.q}</span>
                <span className="mr-faq__chev"><Icon name={isOpen ? 'minus' : 'plus'} size={18} /></span>
              </button>
              <div className="mr-faq__a" style={{ maxHeight: isOpen ? 260 : 0 }}>
                <p className="mr-body mr-muted">{item.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

window.Faq = Faq;