"use client";

import { useTranslations } from "next-intl";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { cn } from "@/lib/utils";

import { SectionReveal } from "./SectionReveal";

export interface FAQProps {
  className?: string;
}

const FAQ_IDS = ["q0","q1","q2","q3","q4","q5","q6","q7"] as const;

export function FAQ({ className }: FAQProps) {
  const t = useTranslations("faq");

  const items = FAQ_IDS.map((id) => ({
    id,
    question: t(id),
    answer: t(id.replace("q", "a") as Parameters<typeof t>[0]),
  }));

  const columns = [items.slice(0, 4), items.slice(4, 8)];

  return (
    <section className={cn("w-full bg-white py-20 sm:py-28", className)}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionReveal>
          <h2 className="text-center font-heading text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl">
            {t("heading")}
          </h2>
          <p className="mx-auto mt-4 max-w-2xl text-center text-neutral-600">
            {t("subtitle")}
          </p>
        </SectionReveal>

        <SectionReveal className="mt-12 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12">
          {columns.map((column, columnIndex) => (
            <Accordion
              key={columnIndex}
              type="single"
              collapsible
              className="w-full"
            >
              {column.map((item) => (
                <AccordionItem key={item.id} value={item.id}>
                  <AccordionTrigger>{item.question}</AccordionTrigger>
                  <AccordionContent>{item.answer}</AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          ))}
        </SectionReveal>
      </div>
    </section>
  );
}
