FAQ Categorized

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
interface FAQItem {
  id: string;
  question: string;
  answer: string;
}
 
interface FAQCategory {
  id: string;
  title: string;
  description?: string;
  color: "orange" | "blue" | "green" | "purple" | "pink" | "yellow";
  faqs: FAQItem[];
}
 
interface FAQCategorizedProps {
  title?: string;
  description?: string;
  categories: FAQCategory[];
  className?: string;
}
 
const colorClasses = {
  orange: {
    border: "border-orange-500/20",
    borderHover: "hover:border-orange-500/40",
    borderOpen: "data-[state=open]:border-orange-500/50",
    text: "text-orange-500",
    bg: "bg-orange-500/10",
    icon: "bg-orange-600",
  },
  blue: {
    border: "border-blue-500/20",
    borderHover: "hover:border-blue-500/40",
    borderOpen: "data-[state=open]:border-blue-500/50",
    text: "text-blue-500",
    bg: "bg-blue-500/10",
    icon: "bg-blue-600",
  },
  green: {
    border: "border-green-500/20",
    borderHover: "hover:border-green-500/40",
    borderOpen: "data-[state=open]:border-green-500/50",
    text: "text-green-500",
    bg: "bg-green-500/10",
    icon: "bg-green-600",
  },
  purple: {
    border: "border-purple-500/20",
    borderHover: "hover:border-purple-500/40",
    borderOpen: "data-[state=open]:border-purple-500/50",
    text: "text-purple-500",
    bg: "bg-purple-500/10",
    icon: "bg-purple-600",
  },
  pink: {
    border: "border-pink-500/20",
    borderHover: "hover:border-pink-500/40",
    borderOpen: "data-[state=open]:border-pink-500/50",
    text: "text-pink-500",
    bg: "bg-pink-500/10",
    icon: "bg-pink-600",
  },
  yellow: {
    border: "border-yellow-500/20",
    borderHover: "hover:border-yellow-500/40",
    borderOpen: "data-[state=open]:border-yellow-500/50",
    text: "text-yellow-500",
    bg: "bg-yellow-500/10",
    icon: "bg-yellow-600",
  },
};
 
export function FAQCategorized({
  title = "Frequently Asked Questions",
  description = "Browse questions by category to find what you're looking for",
  categories,
  className = "",
}: FAQCategorizedProps) {
  return (
    <section className={`w-full bg-black py-20 ${className}`}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mx-auto mb-16 max-w-3xl text-center">
          <h2 className="mb-4 text-4xl font-bold text-white sm:text-5xl">
            {title}
          </h2>
          <p className="text-lg text-zinc-400">{description}</p>
        </div>
 
        {/* Categories */}
        <div className="space-y-12">
          {categories.map((category) => {
            const colors = colorClasses[category.color];
            return (
              <div key={category.id}>
                {/* Category Header */}
                <div className="mb-6 flex items-center gap-4">
                  <div className={`h-12 w-12 rounded-lg ${colors.icon}`} />
                  <div>
                    <h3 className="text-2xl font-bold text-white">
                      {category.title}
                    </h3>
                    {category.description && (
                      <p className="text-sm text-zinc-500">
                        {category.description}
                      </p>
                    )}
                  </div>
                </div>
 
                {/* FAQs */}
                <Accordion type="single" collapsible className="space-y-3">
                  {category.faqs.map((faq) => (
                    <AccordionItem
                      key={faq.id}
                      value={faq.id}
                      className={`rounded-xl border ${colors.border} ${colors.borderOpen} bg-zinc-950 px-6 transition-colors ${colors.borderHover}`}
                    >
                      <AccordionTrigger
                        className={`text-left text-base font-semibold text-white hover:no-underline hover:${colors.text}`}
                      >
                        {faq.question}
                      </AccordionTrigger>
                      <AccordionContent className="text-zinc-400">
                        {faq.answer}
                      </AccordionContent>
                    </AccordionItem>
                  ))}
                </Accordion>
              </div>
            );
          })}
        </div>
 
        {/* CTA */}
        <div className="mt-16 rounded-2xl border border-zinc-800 bg-zinc-950 p-8 text-center">
          <h3 className="mb-2 text-2xl font-bold text-white">
            Still have questions?
          </h3>
          <p className="mb-6 text-zinc-400">
            Can't find the answer you're looking for? Our support team is here
            to help.
          </p>
          <a
            href="#contact"
            className="inline-flex items-center gap-2 rounded-lg bg-orange-600 px-6 py-3 font-semibold text-white transition-all hover:bg-orange-700"
          >
            Contact Support
          </a>
        </div>
      </div>
    </section>
  );
}