'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { ChevronDown } from 'lucide-react'
import { useState } from 'react'

export default function FAQs() {
  const [openItems, setOpenItems] = useState<number[]>([])

  const faqs = [
    {
      category: 'General Questions',
      items: [
        {
          q: 'Who is BCTCI?',
          a: 'Bangkok Corporate Training Centre International is a leading professional training provider with over 20 years of experience in corporate development, training, and consulting services across Southeast Asia and worldwide.'
        },
        {
          q: 'How long have you been in the training business?',
          a: 'We have been providing training and development services since 2004, serving thousands of professionals and organizations across the Asia-Pacific region and beyond.'
        },
        {
          q: 'What makes BCTCI different from other training providers?',
          a: 'Our unique approach combines experienced trainers, customized programs, practical applications, and measurable business results. We focus on transformational learning outcomes.'
        },
      ]
    },
    {
      category: 'Courses & Programs',
      items: [
        {
          q: 'What types of courses do you offer?',
          a: 'We offer 50+ courses across 16 categories including Leadership, Finance, HR, Operations, Strategy, and more. Programs are available in classroom, online, and blended formats.'
        },
        {
          q: 'Can courses be customized for my organization?',
          a: 'Yes, we specialize in bespoke training solutions tailored to your organization\'s specific needs, objectives, and industry challenges.'
        },
        {
          q: 'What is the typical duration of a course?',
          a: 'Course durations vary from 1-day workshops to multi-week programs. We offer flexible scheduling including evenings, weekends, and condensed formats.'
        },
        {
          q: 'Do you offer online courses?',
          a: 'Yes, we offer live online courses with interactive sessions, recordings, and support materials. Virtual training provides the same quality as our in-person programs.'
        },
      ]
    },
    {
      category: 'Registration & Enrollment',
      items: [
        {
          q: 'How do I register for a course?',
          a: 'You can register through our website, contact our client services team, or work with your organization\'s training coordinator for group enrollments.'
        },
        {
          q: 'What are your cancellation policies?',
          a: 'We offer flexible cancellation policies. Detailed terms are provided upon booking. Early cancellations may be eligible for refunds or rescheduling options.'
        },
        {
          q: 'Do you offer group discounts?',
          a: 'Yes, we provide competitive group rates for organizations enrolling 5 or more participants. Contact us for customized pricing.'
        },
        {
          q: 'Are there prerequisites for courses?',
          a: 'Most courses are open to participants with basic professional experience. Some specialized programs may have specific prerequisites, which are noted in course descriptions.'
        },
      ]
    },
    {
      category: 'Certification & Accreditation',
      items: [
        {
          q: 'Do courses provide certifications?',
          a: 'Most courses provide completion certificates. Some programs offer recognized professional certifications. Details are provided in individual course descriptions.'
        },
        {
          q: 'Are your programs accredited?',
          a: 'Yes, our programs are accredited under ISO 9001:2015 and ISO 29990:2011 standards, ensuring quality and recognition.'
        },
        {
          q: 'Is the certificate internationally recognized?',
          a: 'Our BCTCI certificates are recognized internationally, particularly across Asia-Pacific. Many programs align with international professional standards.'
        },
      ]
    },
    {
      category: 'Training Methods & Support',
      items: [
        {
          q: 'What is your teaching approach?',
          a: 'We use interactive, practical approaches combining theory with real-world case studies, exercises, and group discussions for maximum engagement and application.'
        },
        {
          q: 'What support is provided during the course?',
          a: 'We provide course materials, trainee workbooks, access to trainers during and after the program, and continued support for implementation.'
        },
        {
          q: 'Can I access course materials after completion?',
          a: 'Yes, participants receive digital materials and can access course resources through our online portal for a specified period post-course.'
        },
      ]
    },
  ]

  const toggleItem = (index: number) => {
    setOpenItems(openItems.includes(index) ? openItems.filter(i => i !== index) : [...openItems, index])
  }

  return (
    <main>
      <div className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="bg-primary text-primary-foreground py-20">
          <div className="container mx-auto px-4">
            <h1 className="text-4xl md:text-5xl font-bold mb-4">Frequently Asked Questions</h1>
            <p className="text-lg opacity-90">Find answers to common questions about our courses and services.</p>
          </div>
        </section>

        {/* FAQs */}
        <section className="py-16">
          <div className="container mx-auto px-4 max-w-3xl">
            <div className="space-y-8">
              {faqs.map((section, sectionIdx) => (
                <div key={sectionIdx}>
                  <h2 className="text-2xl font-bold mb-6 text-primary">{section.category}</h2>
                  <div className="space-y-3">
                    {section.items.map((faq, itemIdx) => {
                      const globalIdx = sectionIdx * 100 + itemIdx
                      return (
                        <Card key={globalIdx} className="cursor-pointer hover:shadow-md transition-shadow" onClick={() => toggleItem(globalIdx)}>
                          <CardHeader className="pb-3">
                            <div className="flex items-start justify-between gap-4">
                              <CardTitle className="text-lg">{faq.q}</CardTitle>
                              <ChevronDown className={`w-5 h-5 text-primary flex-shrink-0 transition-transform ${openItems.includes(globalIdx) ? 'rotate-180' : ''}`} />
                            </div>
                          </CardHeader>
                          {openItems.includes(globalIdx) && (
                            <CardContent>
                              <p className="text-muted-foreground">{faq.a}</p>
                            </CardContent>
                          )}
                        </Card>
                      )
                    })}
                  </div>
                </div>
              ))}
            </div>

            {/* Contact for More */}
            <Card className="mt-12 bg-primary/5 border-primary/20">
              <CardHeader>
                <CardTitle>Didn&apos;t find your answer?</CardTitle>
                <CardDescription>We&apos;re here to help</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="mb-4">If you have additional questions not covered here, please don&apos;t hesitate to contact our team.</p>
                <a href="/contact" className="inline-block px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                  Contact Us
                </a>
              </CardContent>
            </Card>
          </div>
        </section>
      </div>
    </main>
  )
}