"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";

const FAQS = [
  {
    q: "What exactly is included in Pro?",
    a: "All 124 premium components across five visual systems, full Figma source files, CLI access, unlimited personal and client projects, and lifetime updates.",
  },
  {
    q: "Can I use Velynkit in commercial projects?",
    a: "Yes. Pro includes unlimited commercial use under your own brand. The only restriction is reselling components or templates as a standalone product.",
  },
  {
    q: "Which tech stack does it target?",
    a: "Next.js 15 with the App Router, React 19, Tailwind v4 and Motion. TypeScript throughout. Components themselves work in any React project.",
  },
  {
    q: "How does the CLI work?",
    a: "Same model as shadcn — `npx velynkit add hero-editorial` writes the component into your `components/` folder. You own the source.",
  },
];

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

  return (
    <section className="bg-[#FAFAF8] text-[#111111] py-20 px-8">
      <div className="max-w-2xl mx-auto">
        <span className="inline-block font-mono text-[11px] uppercase tracking-[0.14em] text-[#6B6B66] mb-4">
          Frequently asked
        </span>
        <h2
          className="font-normal italic leading-[0.98] tracking-[-0.02em] mb-12"
          style={{
            fontSize: "clamp(36px, 5vw, 56px)",
            fontFamily: "'Instrument Serif', Georgia, serif",
          }}
        >
          Asked &amp; answered.
        </h2>

        <div className="divide-y divide-[#1111111A] border-t border-b border-[#1111111A]">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={f.q}>
                <button
                  type="button"
                  onClick={() => setOpen(isOpen ? null : i)}
                  aria-expanded={isOpen}
                  className="w-full py-5 flex items-center justify-between text-left hover:opacity-80 transition-opacity"
                >
                  <span className="text-[16px] font-medium pr-4">{f.q}</span>
                  <motion.span
                    animate={{ rotate: isOpen ? 45 : 0 }}
                    transition={{ duration: 0.3, ease: [0.2, 0.7, 0.2, 1] }}
                    className="text-[#6B6B66] text-[22px] leading-none font-light shrink-0"
                  >
                    +
                  </motion.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.35, ease: [0.2, 0.7, 0.2, 1] }}
                      className="overflow-hidden"
                    >
                      <p className="pb-5 text-[15px] leading-[1.55] text-[#6B6B66] max-w-[58ch]">
                        {f.a}
                      </p>
                    </motion.div>
                  )}
                </AnimatePresence>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
Animated FAQ Accordion

Asked & answered.

Dependencies
