"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { Plus, Minus } from "lucide-react";
import { SectionHeader } from "@/app/components/ui/section-header";
import { Badge } from "@/app/components/ui/badge";

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-gray-100 last:border-0">
      <button
        className="w-full flex items-center justify-between py-5 text-left group"
        onClick={() => setOpen((v) => !v)}
      >
        <span className="font-serif text-lg text-[var(--color-moy-dark)] group-hover:text-[var(--color-moy-gold-dark)] transition-colors pr-4">
          {q}
        </span>
        <span className="shrink-0 w-7 h-7 border border-gray-200 group-hover:border-[var(--color-moy-gold)] flex items-center justify-center transition-colors">
          {open
            ? <Minus size={14} className="text-[var(--color-moy-gold)]" />
            : <Plus size={14} className="text-gray-400 group-hover:text-[var(--color-moy-gold)] transition-colors" />
          }
        </span>
      </button>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
            className="overflow-hidden"
          >
            <p className="text-gray-500 text-sm leading-relaxed pb-5">{a}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

export default function SSSClient({ lang, dict }: { lang: string; dict: any }) {
  const t = dict.faq;

  const FAQS = [
    {
      category: t.categories.accommodation,
      variant: "blue" as const,
      items: [
        { q: t.q1, a: t.a1 },
        { q: t.q2, a: t.a2 },
        { q: t.q3, a: t.a3 },
      ],
    },
    {
      category: t.categories.kitesurf,
      variant: "green" as const,
      items: [
        { q: t.q4, a: t.a4 },
        { q: t.q5, a: t.a5 },
        { q: t.q6, a: t.a6 },
      ],
    },
    {
      category: t.categories.reservation,
      variant: "gold" as const,
      items: [
        { q: t.q7, a: t.a7 },
        { q: t.q8, a: t.a8 },
        { q: t.q9, a: t.a9 },
      ],
    },
  ];

  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <div className="bg-[var(--color-moy-dark)] pt-40 pb-20">
        <div className="max-w-3xl mx-auto px-6 text-center">
          <p className="text-[10px] uppercase tracking-[0.28em] text-[var(--color-moy-gold)] mb-4">{t.eyebrow}</p>
          <h1 className="text-5xl md:text-6xl font-serif text-white mb-6">{t.title}</h1>
          <p className="text-gray-400 text-base max-w-lg mx-auto leading-relaxed">
            {t.subtitle}
          </p>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-4 sm:px-6 py-24 space-y-14">
        {FAQS.map((group) => (
          <div key={group.category}>
            <div className="flex items-center gap-3 mb-6">
              <Badge variant={group.variant}>{group.category}</Badge>
            </div>
            <div className="bg-[var(--color-moy-light)] px-6">
              {group.items.map((item) => (
                <FaqItem key={item.q} q={item.q} a={item.a} />
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}