"use client";

/**
 * ServiceFAQ - Client Component
 *
 * FAQ accordion with JSON-LD schema for SEO.
 * Same design as blog FAQ section.
 */

import { cn } from "@/lib/utils";
import { IconMinus, IconPlus } from "@tabler/icons-react";
import { AnimatePresence, motion } from "motion/react";
import { useState } from "react";
import type { ServiceFAQProps } from "./types";

export function ServiceFAQ({
  title = "Questions frequentes",
  subtitle,
  items,
}: ServiceFAQProps) {
  const [open, setOpen] = useState<string | null>(null);

  if (!items || items.length === 0) return null;

  // JSON-LD FAQPage schema for rich snippets
  const faqJsonLd = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    mainEntity: items.map((faq) => ({
      "@type": "Question",
      name: faq.question,
      acceptedAnswer: {
        "@type": "Answer",
        text: faq.answer,
      },
    })),
  };

  return (
    <section className="bg-gray-50 py-16 md:py-24 lg:py-32">
      <div className="mx-auto max-w-4xl px-4 md:px-8">
        {/* JSON-LD for SEO */}
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqJsonLd) }}
        />

        {/* Header */}
        <div className="mb-8 text-center md:mb-12">
          <h2 className="text-2xl font-bold capitalize tracking-tight bg-linear-to-b from-[rgba(255,167,86,1)] to-[rgba(238,96,44,1)] bg-clip-text text-transparent md:text-4xl lg:text-5xl">
            {title}
          </h2>
          {subtitle && (
            <p className="mt-4 text-base font-semibold text-gray-900 md:text-lg">
              {subtitle}
            </p>
          )}
        </div>

        {/* FAQ Items */}
        <div className="divide-y divide-gray-200 rounded-2xl bg-white p-6 shadow-sm md:p-8">
          {items.map((faq, index) => (
            <FAQItemComponent
              key={index}
              index={index}
              question={faq.question}
              answer={faq.answer}
              open={open}
              setOpen={setOpen}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItemComponent({
  question,
  answer,
  setOpen,
  open,
  index,
}: {
  question: string;
  answer: string;
  open: string | null;
  setOpen: (open: string | null) => void;
  index: number;
}) {
  const isOpen = open === question;
  const answerId = `faq-answer-${index}`;

  return (
    <div className="py-4">
      <button
        type="button"
        className="flex w-full cursor-pointer items-start text-left"
        onClick={() => setOpen(isOpen ? null : question)}
        aria-expanded={isOpen}
        aria-controls={answerId}
      >
        <span className="relative mr-4 mt-1 inline-flex size-6 shrink-0">
          <IconPlus
            aria-hidden="true"
            className={cn(
              "absolute inset-0 size-6 transform text-orange-500 transition-all duration-200",
              isOpen && "rotate-90 scale-0"
            )}
          />
          <IconMinus
            aria-hidden="true"
            className={cn(
              "absolute inset-0 size-6 rotate-90 scale-0 transform text-orange-500 transition-all duration-200",
              isOpen && "rotate-0 scale-100"
            )}
          />
        </span>
        <span className="flex-1 text-lg font-medium text-gray-800">
          {question}
        </span>
      </button>
      <AnimatePresence mode="wait">
        {isOpen && (
          <motion.div
            id={answerId}
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.2, ease: "easeOut" }}
            className="ml-10 overflow-hidden"
          >
            <p className="mt-2 text-gray-600">{answer}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}