'use client'

import * as React from "react"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { HelpCircle, ArrowRight } from "lucide-react"
import { cn } from "@/lib/utils"
import Link from "next/link"

interface FAQItem {
  question: string
  answer: string
}

interface FAQSectionProps {
  faqs: FAQItem[]
  className?: string
}

export function FAQSection({ faqs, className }: FAQSectionProps) {
  if (!faqs || faqs.length === 0) {
    return null
  }

  return (
    <section className={cn("py-16 md:py-24 bg-gradient-to-b from-background via-background to-muted/20", className)}>
      <div className="container mx-auto px-4 max-w-4xl">
        {/* Header */}
        <div className="text-center mb-12 md:mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gradient-to-br from-primary to-secondary mb-6 shadow-lg animate-pulse">
            <HelpCircle className="w-8 h-8 text-primary-foreground" />
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-foreground via-foreground to-foreground/70 bg-clip-text text-transparent">
            Frequently Asked Questions
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Everything you need to know about our vending machine services
          </p>
        </div>

        {/* FAQ Accordion */}
        <div className="space-y-4">
          <Accordion type="single" collapsible className="w-full space-y-4">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="group border-none"
              >
                <AccordionTrigger className="
                  relative
                  px-6 py-5
                  text-left
                  bg-card
                  border border-border
                  rounded-xl
                  shadow-sm
                  hover:shadow-md
                  hover:border-primary/50
                  transition-all duration-300
                  hover:bg-accent/50
                  data-[state=open]:bg-accent/50
                  data-[state=open]:border-primary
                  data-[state=open]:shadow-lg
                  data-[state=open]:shadow-primary/10
                  no-underline
                ">
                  <div className="flex items-start gap-4 flex-1 pr-8">
                    <div className="
                      flex-shrink-0
                      w-10 h-10
                      rounded-lg
                      bg-gradient-to-br from-primary/10 to-secondary/10
                      flex items-center justify-center
                      group-hover:from-primary/20 group-hover:to-secondary/20
                      transition-all duration-300
                      group-data-[state=open]:from-primary/20 group-data-[state=open]:to-secondary/20
                    ">
                      <span className="text-sm font-bold text-primary">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                    </div>
                    <span className="
                      text-base md:text-lg
                      font-semibold
                      text-foreground
                      group-hover:text-primary
                      transition-colors duration-300
                      group-data-[state=open]:text-primary
                    ">
                      {faq.question}
                    </span>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="
                  px-6 py-4
                  text-muted-foreground
                  leading-relaxed
                  bg-card
                  border-x border-b border-border
                  rounded-b-xl
                  border-t-0
                  shadow-sm
                  mt-[-1px]
                ">
                  <div 
                    className="prose prose-sm max-w-none prose-headings:text-foreground prose-a:text-primary prose-strong:text-foreground prose-ul:list-disc prose-ol:list-decimal prose-li:my-2"
                    dangerouslySetInnerHTML={{ __html: faq.answer }}
                  />
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>

        {/* Footer CTA */}
        <div className="mt-12 text-center">
          <p className="text-muted-foreground mb-4">
            Still have questions?
          </p>
          <Link
            href="/contact-us"
            className="
              inline-flex
              items-center
              gap-2
              px-6 py-3
              rounded-lg
              bg-gradient-to-r from-primary to-secondary
              text-primary-foreground
              font-semibold
              shadow-lg
              hover:shadow-xl
              hover:scale-105
              transition-all duration-300
            "
          >
            Contact Us
            <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </section>
  )
}