FAQ Two Column

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
 
interface FAQItem {
  id: string;
  question: string;
  answer: string;
}
 
interface FAQTwoColumnProps {
  title?: string;
  description?: string;
  faqs: FAQItem[];
  className?: string;
}
 
export function FAQTwoColumn({
  title = "Frequently Asked Questions",
  description = "Everything you need to know about our product and services",
  faqs,
  className = "",
}: FAQTwoColumnProps) {
  // Split FAQs into two columns
  const midpoint = Math.ceil(faqs.length / 2);
  const leftColumn = faqs.slice(0, midpoint);
  const rightColumn = faqs.slice(midpoint);
 
  return (
    <section className={`w-full bg-black py-20 ${className} rounded`}>
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <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>
 
        {/* Two Column Layout */}
        <div className="grid gap-8 lg:grid-cols-2">
          {/* Left Column */}
          <div>
            <Accordion type="single" collapsible className="space-y-4">
              {leftColumn.map((faq) => (
                <AccordionItem
                  key={faq.id}
                  value={faq.id}
                  className="rounded-xl border border-zinc-800 bg-zinc-950 px-6 data-[state=open]:border-orange-500/50"
                >
                  <AccordionTrigger className="text-left text-base font-semibold text-white hover:text-orange-500 hover:no-underline">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-zinc-400">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
 
          {/* Right Column */}
          <div>
            <Accordion type="single" collapsible className="space-y-4">
              {rightColumn.map((faq) => (
                <AccordionItem
                  key={faq.id}
                  value={faq.id}
                  className="rounded-xl border border-zinc-800 bg-zinc-950 px-6 data-[state=open]:border-orange-500/50"
                >
                  <AccordionTrigger className="text-left text-base font-semibold text-white hover:text-orange-500 hover:no-underline">
                    {faq.question}
                  </AccordionTrigger>
                  <AccordionContent className="text-zinc-400">
                    {faq.answer}
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
          </div>
        </div>
 
        {/* CTA */}
        <div className="mt-16 text-center">
          <p className="mb-4 text-zinc-400">Still have questions?</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>
  );
}