"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import type { Faq as FaqItem } from "@/lib/contentTypes";
import Reveal from "./ui/Reveal";
import PillButton from "./ui/PillButton";

/** Accordion FAQ dengan animasi buka-tutup halus. */
export default function Faq({ faqs }: { faqs: FaqItem[] }) {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <section id="faq" className="mx-auto max-w-6xl px-5 py-24 md:px-8 md:py-32">
      <div className="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:gap-16">
        {/* Kiri: judul + CTA */}
        <Reveal>
          <span className="inline-flex items-center gap-2 rounded-full border border-line bg-panel px-4 py-1.5 font-accent text-[11px] tracking-[0.18em] text-mist uppercase">
            <span className="size-1 rounded-full bg-fg" />
            FAQ
          </span>
          <h2 className="mt-5 text-3xl font-semibold tracking-tight text-fg md:text-4xl">
            Pertanyaan yang sering diajukan
          </h2>
          <p className="mt-4 text-sm leading-relaxed text-fog md:text-base">
            Tidak menemukan jawaban yang Anda cari? Tim kami siap membantu
            lewat diskusi gratis.
          </p>
          <div className="mt-7">
            <PillButton href="#kontak">Tanya Langsung</PillButton>
          </div>
        </Reveal>

        {/* Kanan: daftar accordion */}
        <Reveal delay={0.1}>
          <div className="divide-y divide-line border-y border-line">
            {faqs.map((faq, i) => {
              const isOpen = openIndex === i;
              return (
                <div key={faq.q}>
                  <button
                    onClick={() => setOpenIndex(isOpen ? null : i)}
                    className="flex w-full items-center justify-between gap-6 py-5 text-left"
                    aria-expanded={isOpen}
                  >
                    <span
                      className={`text-[15px] font-medium transition-colors ${
                        isOpen ? "text-fg" : "text-fog hover:text-fg"
                      }`}
                    >
                      {faq.q}
                    </span>
                    <span
                      className={`glow-border grid size-8 shrink-0 place-items-center rounded-full text-fg transition-transform duration-300 ${
                        isOpen ? "rotate-180" : ""
                      }`}
                    >
                      <ChevronDown size={14} />
                    </span>
                  </button>
                  <AnimatePresence initial={false}>
                    {isOpen && (
                      <motion.div
                        initial={{ height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={{ height: 0, opacity: 0 }}
                        transition={{ duration: 0.32, ease: "easeInOut" }}
                        className="overflow-hidden"
                      >
                        <p className="pr-12 pb-6 text-sm leading-relaxed text-fog">
                          {faq.a}
                        </p>
                      </motion.div>
                    )}
                  </AnimatePresence>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}