"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { Reveal } from "@/components/motion/Reveal";

const faqs = [
  {
    q: "What does BhoFit sell?",
    a: "Everyday clothes for women, men, kids, and baby — tees, jeans, shirts, knits, outerwear, and homewear.",
  },
  {
    q: "Are sizes unisex?",
    a: "Many core styles (barrel pants, tees, oxfords) are unisex. Check the gender label and size guide on each product page.",
  },
  {
    q: "Do you ship worldwide?",
    a: "Yes. We ship across the United States and worldwide. Delivery charge and ETA are shown at checkout.",
  },
  {
    q: "How much does delivery cost?",
    a: "Standard delivery is $9, and free on orders over $99.",
  },
  {
    q: "Can I exchange an item?",
    a: "Yes. Most items can be exchanged within 7 days if unused and in original packaging.",
  },
  {
    q: "How do I track my order?",
    a: "Open Account → Orders after checkout to follow your shipment from confirmation to delivery.",
  },
];

/** Editorial FAQ — hairline rows, no card chrome. */
export function FaqAccordion() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <Reveal>
      <div className="border-t border-border">
        {faqs.map((item, index) => {
          const active = open === index;
          return (
            <div key={item.q} className="border-b border-border">
              <button
                type="button"
                onClick={() => setOpen(active ? null : index)}
                className="flex w-full items-center justify-between gap-3 py-3.5 text-left"
              >
                <span className="font-display text-lg leading-tight text-foreground">
                  {item.q}
                </span>
                <ChevronDown
                  className={`h-3.5 w-3.5 shrink-0 text-muted transition ${active ? "rotate-180" : ""}`}
                />
              </button>
              <AnimatePresence initial={false}>
                {active ? (
                  <motion.div
                    initial={{ height: 0, opacity: 0 }}
                    animate={{ height: "auto", opacity: 1 }}
                    exit={{ height: 0, opacity: 0 }}
                    transition={{ duration: 0.24 }}
                  >
                    <p className="pb-4 text-sm leading-relaxed text-muted">
                      {item.a}
                    </p>
                  </motion.div>
                ) : null}
              </AnimatePresence>
            </div>
          );
        })}
      </div>
    </Reveal>
  );
}