"use client"

import { useState } from "react"
import { faqs } from "@/lib/data"
import { cn } from "@/lib/utils"
import { ChevronDown, HelpCircle } from "lucide-react"

export function FAQSection() {
  const [openIndex, setOpenIndex] = useState<number | null>(0)

  return (
    <section className="pt-2 pb-8 sm:pt-4 sm:pb-10 bg-background text-foreground relative overflow-hidden">
      {/* Background Decorative Elements */}
      <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl -z-10" />
      <div className="absolute bottom-0 left-0 translate-y-1/4 -translate-x-1/4 w-96 h-96 bg-accent/5 rounded-full blur-3xl -z-10" />
      
      <div className="mx-auto max-w-4xl px-4 lg:px-8 relative">
        <div className="text-center mb-8 flex flex-col items-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-bold uppercase tracking-wider mb-4 border border-primary/20">
            <HelpCircle className="h-4 w-4" />
            {"FAQ's"}
          </div>
          <h2 className="text-2xl sm:text-3xl font-bold text-foreground text-balance tracking-tight">
            Common questions about CodeframeAI
          </h2>
          <p className="text-sm text-muted-foreground mt-2 max-w-2xl mx-auto">
            Everything you need to know about the platform. Can't find the answer? Feel free to contact us.
          </p>
        </div>

        <div className="space-y-2">
          {faqs.map((faq, index) => (
            <div
              key={index}
              className={cn(
                "rounded-xl border transition-all duration-300 overflow-hidden",
                openIndex === index 
                  ? "border-primary/30 bg-primary/5 shadow-lg shadow-primary/5" 
                  : "border-border bg-card hover:border-primary/20 hover:shadow-sm"
              )}
            >
              <button
                onClick={() => setOpenIndex(openIndex === index ? null : index)}
                className="flex w-full items-center justify-between px-4 py-3 text-left group"
              >
                <span className={cn(
                  "font-semibold pr-4 transition-colors text-sm sm:text-base",
                  openIndex === index ? "text-primary" : "text-foreground group-hover:text-primary"
                )}>
                  {faq.question}
                </span>
                <ChevronDown
                  className={cn(
                    "h-5 w-5 shrink-0 transition-all duration-300",
                    openIndex === index ? "rotate-180 text-primary" : "text-muted-foreground group-hover:text-primary"
                  )}
                />
              </button>
              <div
                className={cn(
                  "grid transition-all duration-300 ease-in-out",
                  openIndex === index ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                )}
              >
                <div className="overflow-hidden">
                  <p className="px-4 pb-3 text-muted-foreground leading-relaxed text-sm">
                    {faq.answer}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}