"use client";

/**
 * FAQ accordion — accessible disclosure pattern.
 * - Real <button aria-expanded aria-controls> toggles each panel.
 * - Panel height animates via Motion (height auto), with a reduced-motion guard.
 * - Single-open behaviour; arrow rotates; keyboard + screen-reader friendly.
 * The full Q&A text is always in the DOM (good for AEO / FAQPage schema).
 */
import { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { faqs } from "../content";
import { EASE_DRAWER, EASE_OUT } from "./motion";

export default function Faq() {
  const [open, setOpen] = useState<number | null>(0);
  const reduce = useReducedMotion();

  return (
    <ul className="faq">
      {faqs.map((f, i) => {
        const isOpen = open === i;
        return (
          <li className={`faq__item ${isOpen ? "is-open" : ""}`} key={f.q}>
            <h3 className="faq__q">
              <button
                className="faq__btn"
                aria-expanded={isOpen}
                aria-controls={`faq-panel-${i}`}
                id={`faq-btn-${i}`}
                onClick={() => setOpen(isOpen ? null : i)}
              >
                <span>{f.q}</span>
                <span className="faq__icon" aria-hidden="true">
                  <span />
                  <span />
                </span>
              </button>
            </h3>
            <AnimatePresence initial={false}>
              {isOpen && (
                <motion.div
                  id={`faq-panel-${i}`}
                  role="region"
                  aria-labelledby={`faq-btn-${i}`}
                  className="faq__panel"
                  initial={reduce ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 }}
                  animate={{
                    height: "auto",
                    opacity: 1,
                    transition: { duration: 0.42, ease: EASE_DRAWER },
                  }}
                  exit={
                    reduce
                      ? { height: "auto", opacity: 1 }
                      : { height: 0, opacity: 0, transition: { duration: 0.28, ease: EASE_OUT } }
                  }
                >
                  <motion.p
                    className="faq__a"
                    initial={reduce ? false : { y: -6, opacity: 0 }}
                    animate={{ y: 0, opacity: 1, transition: { duration: 0.4, delay: 0.06, ease: EASE_OUT } }}
                    exit={reduce ? undefined : { opacity: 0, transition: { duration: 0.15 } }}
                  >
                    {f.a}
                  </motion.p>
                </motion.div>
              )}
            </AnimatePresence>
          </li>
        );
      })}
    </ul>
  );
}