---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/starwind/accordion";

export interface FAQItem {
  question: string;
  answer: string;
}

interface Props extends HTMLAttributes<"section"> {
  title?: string;
  description?: string;
  items?: FAQItem[];
}

const faqStyles = tv({
  base: "@container mx-auto w-full max-w-4xl px-4 py-24",
});

const faqs = [
  {
    question: "¿Qué es Resuely?",
    answer:
      "Resuely es una marca paraguas de aplicaciones web gratuitas diseñadas para usuarios venezolanos. Nuestra misión es proporcionar herramientas útiles sin costo alguno, sin anuncios intrusivos y sin necesidad de registro.",
  },
  {
    question: "¿Son realmente gratuitas las apps?",
    answer:
      "Sí, absolutamente todas nuestras aplicaciones son 100% gratuitas. No cobramos por usar ninguna de nuestras herramientas, no tienes que registrarte para acceder a ellas, y no mostramos anuncios mientras las usas.",
  },
  {
    question: "¿Necesito registrarme?",
    answer:
      "No, no necesitas crear una cuenta ni registrarte para usar ninguna de nuestras aplicaciones. Creemos que tu privacidad es importante y que deberías poder usar herramientas útiles sin compartir tus datos personales.",
  },
  {
    question: "¿Dónde están alojados mis datos?",
    answer:
      "Todas nuestras aplicaciones funcionan entirely en tu navegador. Esto significa que ningún dato se envía a nuestros servidores ni se almacena externamente. Tu información permanece en tu dispositivo y desaparece cuando cierras la aplicación.",
  },
  {
    question: "¿Tienen más apps en desarrollo?",
    answer:
      "Sí, estamos trabajando constantemente en nuevas herramientas. Puedes seguir nuestras actualizaciones en nuestras redes sociales.",
  },
  {
    question: "¿Cómo puedo sugerir una nueva herramienta?",
    answer:
      "Nos encanta recibir sugerencias. Puedes contactarnos a través de nuestras redes sociales o correo electrónico.",
  },
];

const {
  title = "Preguntas frecuentes",
  description = "Todo lo que necesitas saber sobre Resuely y nuestras herramientas gratuitas.",
  items = faqs,
  class: className,
  ...rest
} = Astro.props;
---

<section class={faqStyles({ class: className })} {...rest}>
  <div class="mb-12 text-center">
    <h2 class="font-heading mb-4 text-3xl font-semibold tracking-tight text-foreground @xl:text-4xl @3xl:text-5xl">
      {title}
    </h2>
    <p class="text-muted-foreground mx-auto max-w-2xl text-pretty @lg:text-lg">
      {description}
    </p>
  </div>

  <Accordion type="single" defaultValue="item-1">
    {items.map((item, index) => (
      <AccordionItem value={`item-${index + 1}`}>
        <AccordionTrigger>{item.question}</AccordionTrigger>
        <AccordionContent>{item.answer}</AccordionContent>
      </AccordionItem>
    ))}
  </Accordion>
</section>
