---
import Base from '../layouts/Base.astro';
import Navigation from '../components/Navigation.astro';
import Hero from '../components/Hero.astro';
import Footer from '../components/Footer.astro';

const faqItems = [
  {
    category: "บริการ",
    questions: [
      {
        q: "MoreminiMore ให้บริการอะไรบ้าง?",
        a: "เราให้บริการ 4 ประเภทหลัก: พัฒนาเว็บไซต์, Marketing Automation, AI Automation และ Tech Consult สำหรับธุรกิจไทย"
      },
      {
        q: "สามารถสั่งทำเว็บไซต์เฉพาะประเภทได้ไหม?",
        a: "ได้ เราสามารถพัฒนาเว็บไซต์ได้ทุกประเภท ไม่ว่าจะเป็นเว็บบริษัท เว็บขายของ เว็บ Landing Page หรือระบบ Web Application"
      },
      {
        q: "AI Chatbot สามารถทำอะไรได้บ้าง?",
        a: "AI Chatbot ของเราสามารถตอบคำถามลูกค้า รับออร์เดอร์ นัดหมาย และเชื่อมต่อกับระบบ CRM หรือร้านค้าออนไลน์ได้"
      }
    ]
  },
  {
    category: "ราคา",
    questions: [
      {
        q: "ราคาเริ่มต้นของการทำเว็บไซต์เท่าไหร่?",
        a: "ราคาเริ่มต้นอยู่ที่ 15,000 บาท ขึ้นอยู่กับความซับซ้อนและฟีเจอร์ที่ต้องการ เราจะประเมินและเสนอราคาหลังจากการปรึกษาฟรี"
      },
      {
        q: "มี包月 หรือรายปีไหม?",
        a: "มี เรามีแพ็คเกจรายเดือนสำหรับบริการดูแลเว็บไซต์และ Marketing Automation ที่เริ่มต้นที่ 2,500 บาท/เดือน"
      },
      {
        q: "ชำระเงินแบบไหนได้บ้าง?",
        a: "เรารองรับการชำระเงินผ่าน PromptPay และโอนเงินผ่านธนาคาร สำหรับโปรเจกต์ใหญ่สามารถผ่อนชำระได้"
      }
    ]
  },
  {
    category: "ระยะเวลา",
    questions: [
      {
        q: "ใช้เวลาสร้างเว็บไซต์นานแค่ไหน?",
        a: "เว็บไซต์ทั่วไปใช้เวลา 2-4 สัปดาห์ ระบบที่ซับซ้อนอาจใช้เวลา 1-2 เดือน ขึ้นอยู่กับความต้องการและขนาดของโปรเจกต์"
      },
      {
        q: "เริ่มต้นทำงานได้เร็วแค่ไหน?",
        a: "หลังจากตกลงรายละเอียดและชำระเงินมัดจำแล้ว เราสามารถเริ่มงานได้ภายใน 3-5 วันทำการ"
      }
    ]
  },
  {
    category: "การสนับสนุน",
    questions: [
      {
        q: "หลังสร้างเว็บเสร็จแล้ว มีบริการดูแลไหม?",
        a: "มี เรามีทีมดูแลที่พร้อมช่วยเหลือทั้งการแก้ไขปัญหา อัปเดตเนื้อหา และปรับปรุงระบบตามต้องการ"
      },
      {
        q: "ถ้าเว็บมีปัญหา ติดต่อได้อย่างไร?",
        a: "สามารถติดต่อเราผ่าน LINE, โทรศัพท์ 080-995-5945 หรืออีเมล contact@moreminimore.com เรามีทีมพร้อมรับมือกับปัญหาฉุกเฉิน"
      },
      {
        q: "มีการรับประกันผลงานไหม?",
        a: "เรารับประกันงาน 30 วันหลังส่งมอบ หากมีปัญหาจากการทำงานของเรา เราจะแก้ไขให้ฟรี"
      }
    ]
  }
];
---

<Base title="คำถามที่พบบ่อย | MoreminiMore">
  <Navigation />

  <Hero
    title="คำถามที่พบบ่อย"
    subtitle="หาคำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของเรา"
    badge="FAQ"
    image="/images/hero/tech-consult.jpg"
    theme="yellow"
    showCTA={false}
    variant="centered"
    size="compact"
  />

  <main class="faq-page">

      <div class="faq-content">
        {faqItems.map((category, catIndex) => (
          <section class="faq-category">
            <h2 class="category-title">
              <span class="category-icon">
                {category.category === "บริการ" ? "🎯" :
                 category.category === "ราคา" ? "💰" :
                 category.category === "ระยะเวลา" ? "⏱️" : "💬"}
              </span>
              {category.category}
            </h2>
            <div class="faq-list">
              {category.questions.map((item, qIndex) => (
                <div class="faq-item" data-item={`${catIndex}-${qIndex}`}>
                  <button class="faq-question" aria-expanded="false">
                    <span class="question-text">{item.q}</span>
                    <span class="faq-icon">+</span>
                  </button>
                  <div class="faq-answer">
                    <p>{item.a}</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        ))}
      </div>

      <section class="faq-cta">
        <h3>ยังมีคำถามอื่น?</h3>
        <p>ติดต่อเราได้โดยตรง เราพร้อมตอบทุกคำถาม</p>
        <div class="cta-buttons">
          <a href="/contact" class="btn btn-primary">ติดต่อเรา</a>
          <a href="tel:0809955945" class="btn btn-secondary">080-995-5945</a>
        </div>
      </section>
    </div>
  </main>

  <Footer />
</Base>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const faqItems = document.querySelectorAll('.faq-item');

    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');
      const answer = item.querySelector('.faq-answer');
      const icon = item.querySelector('.faq-icon');

      question?.addEventListener('click', () => {
        const isOpen = item.classList.contains('open');

        // Close all
        faqItems.forEach(faq => {
          faq.classList.remove('open');
          const faqAnswer = faq.querySelector('.faq-answer');
          const faqIcon = faq.querySelector('.faq-icon');
          if (faqAnswer) faqAnswer.style.maxHeight = '0';
          if (faqIcon) faqIcon.textContent = '+';
          const faqQuestion = faq.querySelector('.faq-question');
          if (faqQuestion) faqQuestion.setAttribute('aria-expanded', 'false');
        });

        // Open clicked if it was closed
        if (!isOpen) {
          item.classList.add('open');
          if (answer) answer.style.maxHeight = answer.scrollHeight + 'px';
          if (icon) icon.textContent = '−';
          if (question) question.setAttribute('aria-expanded', 'true');
        }
      });
    });
  });
</script>

<style>
  .faq-page {
    padding: 120px 0 80px;
    min-height: 100vh;
  }

  .faq-header {
    text-align: center;
    margin-bottom: 60px;
  }

  .section-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-black);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }

  .faq-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 16px;
  }

  .faq-desc {
    font-size: 18px;
    color: var(--color-medium-gray);
    max-width: 500px;
    margin: 0 auto;
  }

  .faq-content {
    max-width: 900px;
    margin: 0 auto;
  }

  .faq-category {
    margin-bottom: 60px;
  }

  .category-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
  }

  .category-icon {
    font-size: 28px;
  }

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .faq-item {
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #eee;
    transition: all 0.3s ease;
  }

  .faq-item:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  .faq-item.open {
    border-color: var(--color-primary);
  }

  .faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-black);
  }

  .question-text {
    flex: 1;
    padding-right: 16px;
  }

  .faq-icon {
    font-size: 24px;
    color: var(--color-primary);
    font-weight: 300;
    transition: transform 0.3s;
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .faq-answer p {
    padding: 0 24px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
  }

  .faq-cta {
    text-align: center;
    padding: 60px;
    background: var(--color-light-gray);
    border-radius: 20px;
    margin-top: 60px;
  }

  .faq-cta h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
  }

  .faq-cta p {
    font-size: 16px;
    color: var(--color-medium-gray);
    margin-bottom: 24px;
  }

  .cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 640px) {
    .faq-question {
      padding: 16px 20px;
      font-size: 15px;
    }

    .faq-answer p {
      padding: 0 20px 20px;
    }

    .faq-cta {
      padding: 40px 24px;
    }

    .cta-buttons {
      flex-direction: column;
    }
  }
</style>