---
import Layout from '../layouts/Layout.astro'

const faqs = [
  {
    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 ชั่วโมงทำการ'
      }
    ]
  }
]
---

<Layout title="คำถามที่พบบ่อย | MoreminiMore - รับทำเว็บไซต์ SEO AI Chatbot">
  
  <!-- Hero Section - Purple/Blue Theme -->
  <section id="hero" class="reveal relative overflow-hidden min-h-[40vh] flex items-center">
    <!-- Animated Background - Purple/Blue for FAQ -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 via-indigo-600 to-purple-800">
      <!-- Floating Shapes -->
      <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
      <div class="absolute bottom-20 right-10 w-96 h-96 bg-purple-300/20 rounded-full blur-3xl animate-float-2"></div>
      <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
      <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-indigo-200/20 rounded-full blur-2xl animate-float-1" style="animation-delay: 1.5s;"></div>
    </div>
    
    <!-- Floating dots -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
      <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
      <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
      <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style="animation-delay: 2s;"></div>
    </div>
    
    <!-- Grid Pattern -->
    <div class="absolute inset-0 opacity-[0.03]" style="background-image: linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px); background-size: 50px 50px;"></div>
    
    <div class="container mx-auto px-4 relative z-10 py-16">
      <div class="max-w-4xl mx-auto text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up">
          คำถามที่พบบ่อย
        </h1>
        <p class="text-lg md:text-xl text-white/80 max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
          รวบรวมคำถามที่ลูกค้าถามบ่อย พร้อมคำตอบที่ชัดเจน
        </p>
      </div>
    </div>
  </section>

  <!-- FAQ Content Section -->
  <section id="faq" class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
    <div class="container mx-auto px-4">
      {faqs.map((category, catIndex) => (
        <div class="reveal max-w-4xl mx-auto mb-12">
          <h2 class="text-2xl font-bold mb-6 text-purple-700 flex items-center gap-3">
            <span class="w-2 h-8 bg-purple-600 rounded-full"></span>
            {category.category}
          </h2>
          <div class="space-y-4">
            {category.questions.map((faq, index) => (
              <details class="group bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-all duration-300">
                <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg text-gray-900 hover:bg-purple-50 transition">
                  <span>{faq.q}</span>
                  <svg class="w-5 h-5 text-purple-700 group-open:rotate-45 transition transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                  </svg>
                </summary>
                <div class="px-6 pb-6 text-gray-700 leading-relaxed border-t border-gray-100">
                  {faq.a}
                </div>
              </details>
            ))}
          </div>
        </div>
      ))}

      <!-- CTA Section - Yellow with proper contrast -->
      <div id="cta" class="reveal max-w-3xl mx-auto text-center mt-16 py-12 bg-primary rounded-2xl">
        <h2 class="text-2xl md:text-3xl font-bold mb-4 text-black">
          ยังมีคำถามอื่นอีก?
        </h2>
        <p class="text-lg text-gray-800 mb-8">
          ติดต่อเรามาได้เลย ยินดีให้คำปรึกษาฟรี!
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="tel:0809955945" class="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 class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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" class="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 class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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>
</Layout>
