/* global React */
// Faq — sección sencilla de preguntas frecuentes justo antes del contacto.

const FAQ_ITEMS = [
  {
    question: '¿Qué pasa si surge un error después del lanzamiento?',
    answer: 'Todos los desarrollos incluyen 30 días de garantía absoluta después de publicar tu sistema. Durante ese primer mes, cualquier ajuste o corrección sobre el alcance acordado se resuelve a costo cero y de forma prioritaria.',
  },
  {
    question: '¿Qué incluye el servicio de Mantenimiento y Evolución?',
    answer: 'Nos encargamos del monitoreo de servidores, backups automáticos de base de datos, parches de seguridad y optimización de velocidad. En nuestros planes evolutivos, también disponés de horas de desarrollo mensuales para sumar nuevas funcionalidades o adaptar el sistema a medida que tu negocio escala.',
  },
  {
    question: '¿Cómo se abonan los proyectos y cuál es el tiempo de entrega?',
    answer: 'Trabajamos con un esquema de 50% de anticipo para iniciar el desarrollo y 50% cuando el sistema esté funcionando y aprobado. Los tiempos de entrega van de 2 a 5 semanas según la complejidad del proyecto.',
  },
];

function Faq() {
  return (
    <section id="faq" className="relative py-20 lg:py-24">
      <div className="mx-auto max-w-[820px] px-4 lg:px-10">
        <header className="mb-10">
          <p className="chip mb-4 reveal">/ FAQ</p>
          <h2 className="font-display tracking-tight leading-[1] text-[32px] lg:text-[48px] font-medium reveal">
            Antes de escribirnos.
          </h2>
        </header>

        <div className="flex flex-col gap-3">
          {FAQ_ITEMS.map((item, i) => (
            <details key={i} className="neo-card reveal rounded-xl p-5 group">
              <summary className="cursor-pointer list-none flex items-center justify-between gap-4 font-display text-[16px] lg:text-[18px] font-medium">
                <span>{item.question}</span>
                <span aria-hidden="true" className="shrink-0 text-inkMute transition-transform duration-200 group-open:rotate-45">+</span>
              </summary>
              <p className="mt-3 text-[14px] leading-[1.6] text-inkMute">{item.answer}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Faq });