---
import PageShell from '../components/PageShell.astro';
import { faqs } from '../data/site.js';
---

<PageShell
  title="คำถามที่พบบ่อย | MoreminiMore"
  description="คำถามที่พบบ่อยเกี่ยวกับบริการ เว็บไซต์ การตลาด ระบบอัตโนมัติ AI ราคา และวิธีทำงานของ MoreminiMore"
>
  <section class="page-hero scene scene-light hero-oversized" data-scene="light">
    <p class="eyebrow">คำถามที่พบบ่อย</p>
    <h1>คำถามที่ควรถามก่อนเริ่มทำอะไรเพิ่ม</h1>
    <p class="hero-lead">
      ถ้ายังไม่แน่ใจว่าควรทำเว็บ ยิงแอด วางระบบ หรือใช้ AI ก่อน คำตอบเหล่านี้จะช่วยให้เห็นภาพเบื้องต้น
    </p>
  </section>

  <section class="page-section">
    <div class="faq-list">
      {faqs.map((item) => (
        <article class="faq-item liquid-glass liquidGlass-wrapper">
          <div class="liquidGlass-effect" aria-hidden="true"></div>
          <div class="liquidGlass-tint" aria-hidden="true"></div>
          <div class="liquidGlass-shine" aria-hidden="true"></div>
          <span>{item.category}</span>
          <h2>{item.question}</h2>
          <p>{item.answer}</p>
        </article>
      ))}
    </div>
  </section>

  <section class="final-cta">
    <div class="glass-panel liquid-glass liquidGlass-wrapper">
      <div class="liquidGlass-effect" aria-hidden="true"></div>
      <div class="liquidGlass-tint" aria-hidden="true"></div>
      <div class="liquidGlass-shine" aria-hidden="true"></div>
      <p class="eyebrow">ยังไม่แน่ใจ?</p>
      <h2>ถ้าคำถามของคุณไม่อยู่ในนี้ ส่งโจทย์มาให้เราดูได้</h2>
      <button class="button button-primary" type="button" data-open-lead>ส่งโจทย์ให้เราดู</button>
    </div>
  </section>
</PageShell>