"use client"

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

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">
        <PublicPageHeader
          align="center"
          eyebrow="FAQs"
          title="Frequently asked questions"
          description="Everything you need to know about our vending machine services."
          className="mb-12 md:mb-16"
        />

        <PublicSurface className="space-y-4 p-4 md:p-5">
          <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-white/95
                  border border-border/60
                  rounded-[1.5rem]
                  shadow-[0_10px_28px_rgba(15,23,42,0.06)]
                  hover:border-primary/30
                  transition-all duration-300
                  hover:bg-muted/30
                  data-[state=open]:bg-muted/30
                  data-[state=open]:border-primary/30
                  data-[state=open]:shadow-[0_16px_38px_rgba(15,23,42,0.08)]
                  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-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-white/95
                  border-x border-b border-border/60
                  rounded-b-[1.5rem]
                  border-t-0
                  shadow-[0_10px_28px_rgba(15,23,42,0.06)]
                  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>
        </PublicSurface>

        {/* Footer CTA */}
        <div className="mt-12 text-center">
          <p className="text-muted-foreground mb-4">Still have questions?</p>
          <Button
            asChild
            size="lg"
            className="rounded-full font-semibold shadow-lg transition-all duration-300 hover:scale-[1.02] hover:shadow-xl"
          >
            <Link href="/contact-us" className="inline-flex items-center gap-2">
              Contact Us
              <ArrowRight className="w-4 h-4" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  )
}