"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Container } from "@/components/common/Container";
import { SectionHeading } from "@/components/common/SectionHeading";
import { AccordionItem } from "@/components/common/Accordion";
import { Reveal } from "@/components/motion/Reveal";
import { FAQS } from "@/data/faqs";
import { useTranslation } from "@/hooks/useTranslation";

export function HomeFaq() {
  const { t, dir } = useTranslation();
  const previewed = FAQS.slice(0, 6);

  return (
    <section className="section">
      <Container>
        <div className="grid gap-12 lg:grid-cols-[1fr_1.5fr]">
          <div>
            <SectionHeading
              eyebrow={t("faq.eyebrow")}
              title={t("faq.title")}
              subtitle={t("faq.subtitle")}
              align="left"
            />
            <Reveal delay={0.15}>
              <Link
                href="/faq"
                className="group mt-6 inline-flex items-center gap-2 text-sm font-bold text-brand-600 transition-colors hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300"
              >
                {t("faq.viewAll")}
                <ArrowRight
                  className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-0.5"
                  style={{ transform: dir === "rtl" ? "scaleX(-1)" : undefined }}
                />
              </Link>
            </Reveal>
          </div>

          <div className="space-y-3">
            {previewed.map((faq, idx) => (
              <Reveal key={faq.id} delay={(idx % 3) * 0.05}>
                <AccordionItem title={t(faq.questionKey)} defaultOpen={idx === 0}>
                  <p>{t(faq.answerKey)}</p>
                </AccordionItem>
              </Reveal>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}