"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { cn } from "@/vendor/ui/cn";
import brand from "@/brand.config";

const FAQS = [
  {
    q: "What is an eSIM?",
    a: "An eSIM is a digital SIM. You scan a QR code — no plastic card, no store visit. Your phone is online in about 30 seconds.",
  },
  {
    q: "Which devices are compatible?",
    a: "iPhone XS and later, recent Google Pixels, Samsung Galaxy S21 and newer, and most modern iPads. If your phone can add a cellular plan in Settings, you are set.",
  },
  {
    q: "How fast is activation?",
    a: "The QR code arrives by email as soon as payment clears. Scan it before you fly or after you land.",
  },
  {
    q: "What happens when data runs low?",
    a: "You get a warning, then you can top up or buy another plan from the dashboard. We do not cut you off without telling you.",
  },
  {
    q: "Can I use one plan in several countries?",
    a: "Regional and nomad plans cover more than one country. The card lists coverage before you pay.",
  },
];

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-sand-200 dark:border-sand-800">
      <button
        className="flex w-full items-center justify-between py-4 text-left text-sand-900 transition-colors hover:text-[var(--brand-accent)] dark:text-sand-50"
        onClick={() => setOpen((o) => !o)}
      >
        <span className="font-medium">{q}</span>
        <span className={cn("ml-4 shrink-0 text-[var(--brand-accent)] transition-transform", open && "rotate-45")}>
          +
        </span>
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2 }}
            className="overflow-hidden"
          >
            <p className="pb-4 text-sm leading-relaxed text-sand-600 dark:text-sand-400">{a}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export function FaqSection() {
  return (
    <section className="px-4 py-20">
      <div className="mx-auto max-w-2xl">
        <h2 className="mb-10 text-center text-3xl font-semibold tracking-tight text-sand-900 dark:text-sand-50">
          Questions, answered
        </h2>
        {FAQS.map((faq) => (
          <FaqItem key={faq.q} q={faq.q} a={faq.a} />
        ))}
        <p className="mt-8 text-center text-sm text-sand-500">
          Still stuck? WhatsApp {brand.name} — real humans, 24/7.
        </p>
      </div>
    </section>
  );
}