import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { guideFaq } from "@/lib/vpn-data";

export function GuideFAQ() {
  return (
    <section id="faq" className="border-t border-border/60 bg-white py-14 md:py-20">
      <Container>
        <SectionHeading eyebrow="Questions" title="Mac VPN FAQ" />

        <Reveal className="mx-auto mt-9 max-w-[720px]">
          <div className="rounded-[18px] border border-border/80 bg-white px-6 py-2 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.04)]">
            {guideFaq.map((item, i) => (
              <details key={item.question} className="group" {...(i === 0 ? { open: true } : {})}>
                <summary
                  className={`flex cursor-pointer select-none list-none items-center justify-between gap-3 rounded-sm px-1 py-4 text-[0.95rem] font-bold hover:text-brand [&::-webkit-details-marker]:hidden ${
                    i < guideFaq.length - 1 ? "border-b border-border/60 group-open:border-b-0" : ""
                  }`}
                >
                  <span>{item.question}</span>
                  <span className="inline-block shrink-0 text-xl font-bold leading-none text-brand transition-transform duration-300 group-open:rotate-45">
                    +
                  </span>
                </summary>
                <div
                  className={`px-1 pb-4 text-[0.9rem] leading-relaxed text-muted ${
                    i < guideFaq.length - 1 ? "border-b border-border/60" : ""
                  }`}
                >
                  {item.answer}
                </div>
              </details>
            ))}
          </div>
        </Reveal>
      </Container>
    </section>
  );
}