"use client";
import * as React from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Plus } from "lucide-react";
import { cn } from "@/lib/utils";
import { Section, SectionHeading } from "./section";
import { Reveal } from "./reveal";
import { FAQ_ITEMS } from "./mock-data";

export function Faq() {
  const [open, setOpen] = React.useState<number | null>(0);
  const reduce = useReducedMotion();
  return (
    <Section id="faq" tone="subtle">
      <div className="grid gap-10 lg:grid-cols-12">
        <div className="lg:col-span-4">
          <SectionHeading eyebrow="FAQ" title="Questions, answered plainly" description="If yours isn't here, the privacy policy and terms are short and written for humans." />
        </div>
        <Reveal delay={0.1} className="lg:col-span-8">
          <ul className="divide-y divide-border rounded-xl border border-border bg-bg-elevated">
            {FAQ_ITEMS.map((item, i) => {
              const isOpen = open === i;
              const panelId = `faq-panel-${i}`;
              const btnId = `faq-button-${i}`;
              return (
                <li key={item.q}>
                  <h3>
                    <button
                      id={btnId}
                      type="button"
                      aria-expanded={isOpen}
                      aria-controls={panelId}
                      onClick={() => setOpen(isOpen ? null : i)}
                      className="flex w-full items-center justify-between gap-4 px-4 py-4 text-left text-[15px] font-medium transition-colors hover:bg-bg-subtle/60 sm:px-5"
                    >
                      <span>{item.q}</span>
                      <Plus className={cn("size-4 shrink-0 text-fg-subtle transition-transform duration-200", isOpen && "rotate-45")} aria-hidden />
                    </button>
                  </h3>
                  <AnimatePresence initial={false}>
                    {isOpen ? (
                      <motion.div
                        id={panelId}
                        role="region"
                        aria-labelledby={btnId}
                        key="panel"
                        initial={reduce ? false : { height: 0, opacity: 0 }}
                        animate={{ height: "auto", opacity: 1 }}
                        exit={reduce ? undefined : { height: 0, opacity: 0 }}
                        transition={{ duration: 0.24, ease: [0.16, 1, 0.3, 1] }}
                        className="overflow-hidden"
                      >
                        <p className="px-4 pb-5 text-[14.5px] leading-7 text-fg-muted sm:px-5">{item.a}</p>
                      </motion.div>
                    ) : null}
                  </AnimatePresence>
                </li>
              );
            })}
          </ul>
        </Reveal>
      </div>
    </Section>
  );
}