Rocky_Mountain_Vending/components/faq-section.tsx

'use client'

import * as React from "react"
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { HelpCircle, ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"
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-background", 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-secondary/10 mb-6">
            <HelpCircle className="w-8 h-8 text-secondary" />
          </div>
          <h2 className="text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl mb-4 text-balance text-foreground">
            Frequently Asked Questions
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty leading-relaxed">
            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/50
                  rounded-xl
                  shadow-sm
                  hover:shadow-md
                  hover:border-secondary/50
                  transition-all duration-300
                  hover:bg-muted/30
                  data-[state=open]:bg-muted/30
                  data-[state=open]:border-secondary/50
                  data-[state=open]:shadow-lg
                  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-secondary/10
                      flex items-center justify-center
                      group-hover:bg-secondary/20
                      transition-all duration-300
                      group-data-[state=open]:bg-secondary/20
                    ">
                      <span className="text-sm font-bold text-secondary">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                    </div>
                    <span className="
                      text-base md:text-lg
                      font-semibold
                      text-foreground
                      group-hover:text-secondary
                      transition-colors duration-300
                      group-data-[state=open]:text-secondary
                    ">
                      {faq.question}
                    </span>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="
                  px-6 py-4
                  text-muted-foreground
                  leading-relaxed
                  bg-card
                  border-x border-b border-border/50
                  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-secondary hover:prose-a:text-secondary 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>
          <Button asChild size="lg" className="bg-secondary hover:bg-secondary/90 text-secondary-foreground font-semibold shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-300">
            <Link href="/contact-us" className="inline-flex items-center gap-2">
              Contact Us
              <ArrowRight className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}