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

<Layout title="คำถามที่พบบ่อย" description="คำตอบสำหรับคำถามที่พบบ่อยเกี่ยวกับบริการของ MoreminiMore">
  <section class="page-header">
    <div class="container">
      <h1>คำถามที่พบบ่อย</h1>
    </div>
  </section>

  <section class="content">
    <div class="container">
      <details>
        <summary>ทำไมต้องมีเว็บไซต์?</summary>
        <p>เว็บไซต์คือหน้าบ้านของธุรกิจในยุคดิจิทัล ลูกค้าจำนวนมากค้นหาข้อ��ูลออนไลน์ก่อนตัดสินใจซื้อ</p>
      </details>
      <details>
        <summary>ระบบอัตโนมัติทางการตลาดคืออะไร?</summary>
        <p>คือระบบที่ช่วยทำงานทางการตลาดโดยอัตโนมัติ เช่น ส่งอีเมล ตอบ LINE ดูแล Social Media</p>
      </details>
      <details>
        <summary>AI ช่วยธุรกิจได้อย่างไร?</summary>
        <p>AI ช่วยตอบลูกค้า วิเคราะห์ข้อมูล สร้างเนื้อหา และทำงานซ้ำๆ แทนคน</p>
      </details>
    </div>
  </section>
</Layout>

<style>
  .page-header {
    background: var(--color-primary);
    padding: 4rem 0;
    text-align: center;
  }

  .content {
    padding: 4rem 0;
    max-width: 800px;
    margin: 0 auto;
  }

  details {
    margin-bottom: 1rem;
    border: 1px solid var(--color-light-gray);
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
  }

  summary {
    font-weight: 600;
  }

  details p {
    margin-top: 1rem;
    line-height: 1.6;
  }
</style>