'use client'

import { useState } from 'react'

interface FAQItem {
  q: string
  a: string
}

interface FAQCategory {
  category: string
  questions: FAQItem[]
}

const faqs: FAQCategory[] = [
  {
    category: 'บริการ',
    questions: [
      {
        q: 'AI-Enhanced Website ต่างจากเว็บไซต์ทั่วไปอย่างไร?',
        a: 'AI-Enhanced Website จะผสาน AI Chatbot ที่ตอบคำถามลูกค้าอัตโนมัติ 24/7 พร้อมระบบ SEO ที่ช่วยให้เว็บติดอันดับ Google ได้ง่ายขึ้น และมีระบบวิเคราะห์พฤติกรรมผู้ใช้งานเพื่อปรับปรุงเว็บไซต์อย่างต่อเนื่อง'
      },
      {
        q: 'Marketing Automation ช่วยธุรกิจฉันได้อย่างไร?',
        a: 'ระบบจะช่วยให้คุณสื่อสารกับลูกค้าโดยอัตโนมัติ ผ่านหลายช่องทางเช่น LINE OA, Facebook Messenger, Email ช่วยลดงานซ้ำซ้อน เพิ่มการตอบสนองที่รวดเร็ว และติดตามผลการตลาดได้อย่างแม่นยำ'
      },
      {
        q: 'SEO + AI Content System ทำงานอย่างไร?',
        a: 'เราใช้ AI วิจัย Keyword ที่มีศักยภาพ สร้างคอนเทนต์คุณภาพที่ตรงใจกลุ่มเป้าหมาย และปรับแต่งให้ถูกใจ Google ช่วยให้เว็บติดอันดับการค้นหาอย่างยั่งยืน'
      },
      {
        q: 'Tech Consult จำเป็นสำหรับธุรกิจฉันไหม?',
        a: 'หากคุณกำลังวางแผนใช้เทคโนโลยีใหม่ ขยายระบบ หรือต้องการเลือกเครื่องมือที่เหมาะสมกับธุรกิจ การปรึกษาก่อนเริ่มโครงการจะช่วยประหยัดเวลาและงบประมาณได้มาก'
      }
    ]
  },
  {
    category: 'กระบวนการทำงาน',
    questions: [
      {
        q: 'เริ่มต้นใช้บริการอย่างไร?',
        a: 'ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราจะพูดคุยความต้องการ ธุรกิจ และเป้าหมายของคุณ จากนั้นจึงแนะนำโซลูชันที่เหมาะสมที่สุด'
      },
      {
        q: 'ใช้เวลานานแค่ไหนถึงจะเห็นผล?',
        a: 'ขึ้นอยู่กับบริการ: เว็บไซต์ใช้เวลา 2-6 สัปดาห์, Marketing Automation เห็นผลใน 1-3 เดือน, SEO ใช้เวลา 3-6 เดือนในการติดอันดับ'
      },
      {
        q: 'มีบริการหลังการขายไหม?',
        a: 'มี! เราดูแลหลังการติดตั้ง อบรมการใช้งาน และพร้อมให้คำปรึกษาเมื่อคุณต้องการ'
      },
      {
        q: 'ต้องมีความรู้ทางเทคนิคไหม?',
        a: 'ไม่จำเป็น! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ และอบรมทีมของคุณให้ใช้งานระบบได้อย่างมั่นใจ'
      }
    ]
  },
  {
    category: 'ราคาและการชำระเงิน',
    questions: [
      {
        q: 'มี Package ไหนบ้าง?',
        a: 'เรามีหลาย Package ตั้งแต่เริ่มต้นหลักพัน ไปจนถึงโครงการใหญ่ ขึ้นอยู่กับความต้องการและขอบเขตงาน นอกจากนี้ยังมีบริการที่คิดเป็นรายเดือน (ที่ปรึกษา) ที่จะช่วยพัฒนาระบบได้เรื่อย ๆ ไม่จำกัดด้วย โดยราคาจะขึ้นอยู่กับขอบเขตและความยากของงาน เหมาะสำหรับลูกค้าที่มีความต้องการเปลี่ยนแปลงตลอดเวลา'
      },
      {
        q: 'มีบริการแบบรายเดือนไหม?',
        a: 'มี! บริการบางอย่างเช่น SEO, Marketing Automation มีแบบรายเดือน ซึ่งรวมถึงการดูแลอย่างต่อเนื่องและปรับปรุงระบบ'
      },
      {
        q: 'ชำระเงินได้อย่างไร?',
        a: 'รับชำระเงินผ่านการโอนเงินธนาคาร บริษัทออกใบเสร็จและใบกำกับภาษีให้ได้'
      }
    ]
  },
  {
    category: 'เทคนิคและการรองรับ',
    questions: [
      {
        q: 'เว็บไซต์รองรับมือถือไหม?',
        a: 'รองรับ 100%! ทุกเว็บไซต์ที่เราทำเป็น Responsive Design แสดงผลสวยงามทั้งบนมือถือ แท็บเล็ต และคอมพิวเตอร์'
      },
      {
        q: 'มี Warranty ไหม?',
        a: 'มี! เราให้ Warranty สำหรับ bug และ error ที่เกิดจากระบบของเรา ตลอดอายุสัญญา'
      },
      {
        q: 'ถ้ามีปัญหาต้องทำอย่างไร?',
        a: 'ติดต่อเราได้หลายช่องทาง: โทรศัพท์, LINE, Email เราจะตอบกลับภายใน 24 ชั่วโมงทำการ'
      }
    ]
  }
]

export default function FAQPage() {
  const [openItems, setOpenItems] = useState<Record<string, boolean>>({})

  const toggleItem = (category: string, index: number) => {
    const key = `${category}-${index}`
    setOpenItems(prev => ({
      ...prev,
      [key]: !prev[key]
    }))
  }

  return (
    <main className="flex-grow">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-purple-800 relative overflow-hidden">
        {/* Floating Shapes */}
        <div className="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
        <div className="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
        <div className="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
        
        {/* Grid Pattern */}
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
        
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight">
              คำถามที่พบบ่อย
            </h1>
            <p className="text-lg md:text-xl text-white/80 max-w-2xl mx-auto">
              รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
            </p>
          </div>
        </div>
      </section>

      {/* FAQ Content */}
      <section className="py-20 bg-gradient-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4">
          {faqs.map((category) => (
            <div key={category.category} className="max-w-4xl mx-auto mb-12">
              <h2 className="text-2xl font-bold mb-6 text-purple-700 flex items-center gap-3">
                <span className="w-2 h-8 bg-purple-600 rounded-full"></span>
                {category.category}
              </h2>
              <div className="space-y-4">
                {category.questions.map((faq, index) => {
                  const key = `${category.category}-${index}`
                  const isOpen = openItems[key]
                  return (
                    <div 
                      key={key}
                      className="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300"
                    >
                      <button
                        onClick={() => toggleItem(category.category, index)}
                        className="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-purple-50 transition w-full text-left"
                      >
                        <span>{faq.q}</span>
                        <svg 
                          className={`w-5 h-5 text-purple-700 transition transform ${isOpen ? 'rotate-45' : ''}`} 
                          fill="none" 
                          stroke="currentColor" 
                          viewBox="0 0 24 24"
                        >
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                      </button>
                      {isOpen && (
                        <div className="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100 pt-4">
                          {faq.a}
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>
            </div>
          ))}

          {/* CTA Section */}
          <div className="max-w-3xl mx-auto text-center mt-16 py-12 bg-primary rounded-2xl">
            <h2 className="text-2xl md:text-3xl font-bold mb-4 text-black">
              ยังมีคำถามอื่นอีก?
            </h2>
            <p className="text-lg text-gray-800 mb-8">
              ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <a href="tel:0809955945" className="bg-black text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-900 transition-colors inline-flex items-center justify-center">
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                </svg>
                080-995-5945
              </a>
              <a href="/contact-us" className="bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-colors inline-flex items-center justify-center">
                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
                </svg>
                ติดต่อเรา
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  )
}