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

<Layout title="AI Automation | MoreminiMore">
  <!-- Hero -->
  <section class="relative py-32 bg-gradient-ai text-white overflow-hidden">
    <div class="absolute inset-0 opacity-30">
      <img src="/images/hero/chatbot-ai.png" alt="AI Automation" class="w-full h-full object-cover" loading="eager" />
    </div>
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <div class="text-8xl mb-6">🤖</div>
        <h1 class="text-5xl md:text-7xl font-bold mb-8">AI Automation</h1>
        <p class="text-2xl text-gray-100 mb-10">บริการให้คำปรึกษาในการปรับองค์กร AI และวางระบบแชทบอท โดยใช้ AI ที่เหมาะสม Partner กับระบบบอทที่สามารถปิดการขายได้ด้วยตัวเอง</p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">📞 080-995-5945</a>
          <a href="https://line.me/" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">💬 เพิ่ม Line</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Overview -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-5xl">
      <h2 class="text-4xl font-bold mb-8 text-center text-secondary">บริการ AI Automation ครบวงจร</h2>
      <div class="prose prose-lg max-w-none">
        <p class="text-xl text-gray-600 mb-8">
          บริการให้คำปรึกษาในการปรับองค์กรให้มีการใช้เทคโนโลยี AI มากขึ้น และวางระบบแชทบอท โดยการแนะนำแชทบอทที่เหมาะสมกับลูกค้า นอกจากนี้ เรายังมี Partner กับระบบบอทที่สามารถปิดการขายและชำระเงินได้ด้วยตัวเอง
        </p>
        
        <div class="grid md:grid-cols-2 gap-8 my-12">
          <div class="bg-gray-light p-8 rounded-2xl">
            <div class="text-5xl mb-4">🏢</div>
            <h3 class="text-2xl font-bold mb-4">AI Transformation</h3>
            <ul class="space-y-3 text-gray-600">
              <li>• ปรับองค์กรใช้เทคโนโลยี AI</li>
              <li>• ได้ข้อมูลอย่างเป็นระบบ</li>
              <li>• นำข้อมูลมาใช้บริหาร</li>
              <li>• ทันต่อยุคสมัย</li>
            </ul>
          </div>
          <div class="bg-gray-light p-8 rounded-2xl">
            <div class="text-5xl mb-4">💬</div>
            <h3 class="text-2xl font-bold mb-4">Chatbot System</h3>
            <ul class="space-y-3 text-gray-600">
              <li>• แชทบอทที่เหมาะสม</li>
              <li>• ปิดการขายอัตโนมัติ</li>
              <li>• ชำระเงินได้เอง</li>
              <li>• ลดงานบริการลูกค้า</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Benefits -->
  <section class="py-20 bg-gray-light">
    <div class="container mx-auto px-4 max-w-6xl">
      <h2 class="text-4xl font-bold mb-12 text-center text-secondary">ประโยชน์ที่คุณจะได้รับ</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <div class="text-5xl mb-4">⏱️</div>
          <h3 class="text-xl font-bold mb-3">ประหยัดเวลา</h3>
          <p class="text-gray-600">อัตโนมัติงานซ้ำซ้อน ลดเวลาการทำงาน</p>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <div class="text-5xl mb-4">💰</div>
          <h3 class="text-xl font-bold mb-3">ลดต้นทุน</h3>
          <p class="text-gray-600">ลดค่าใช้จ่ายด้านบุคลากร</p>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <div class="text-5xl mb-4">📈</div>
          <h3 class="text-xl font-bold mb-3">เพิ่มยอดขาย</h3>
          <p class="text-gray-600">ปิดการขายได้ตลอด 24/7</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Use Cases -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <h2 class="text-4xl font-bold mb-12 text-center text-secondary">กรณีศึกษา</h2>
      <div class="grid md:grid-cols-2 gap-8">
        <div class="bg-gray-light p-8 rounded-2xl">
          <h3 class="text-2xl font-bold mb-4 text-accent-blue">E-Commerce</h3>
          <p class="text-gray-600 mb-4">แชทบอทแนะนำสินค้า ตอบคำถาม และปิดการขายอัตโนมัติ</p>
          <ul class="space-y-2 text-gray-600">
            <li>• แนะนำสินค้าตามความต้องการ</li>
            <li>• ตอบคำถามสินค้า สต็อก ราคา</li>
            <li>• ปิดการขายและชำระเงิน</li>
            <li>• ติดตามออเดอร์</li>
          </ul>
        </div>
        <div class="bg-gray-light p-8 rounded-2xl">
          <h3 class="text-2xl font-bold mb-4 text-accent-blue">บริการลูกค้า</h3>
          <p class="text-gray-600 mb-4">ลดงานบริการลูกค้าด้วยแชทบอท</p>
          <ul class="space-y-2 text-gray-600">
            <li>• ตอบคำถามที่พบบ่อย</li>
            <li>• นัดหมายอัตโนมัติ</li>
            <li>• รับเรื่องร้องเรียน</li>
            <li>• ส่งต่อให้คนเมื่อจำเป็น</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Process -->
  <section class="py-20 bg-gray-light">
    <div class="container mx-auto px-4 max-w-6xl">
      <h2 class="text-4xl font-bold mb-12 text-center text-secondary">กระบวนการทำงาน</h2>
      <div class="grid md:grid-cols-4 gap-8">
        <div class="text-center">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white">1</div>
          <h3 class="text-xl font-bold mb-2">วิเคราะห์</h3>
          <p class="text-gray-600">ประเมินความพร้อม</p>
        </div>
        <div class="text-center">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white">2</div>
          <h3 class="text-xl font-bold mb-2">แนะนำ</h3>
          <p class="text-gray-600">เลือก AI/Chatbot ที่เหมาะ</p>
        </div>
        <div class="text-center">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white">3</div>
          <h3 class="text-xl font-bold mb-2">ติดตั้ง</h3>
          <p class="text-gray-600">วางระบบและฝึกสอน</p>
        </div>
        <div class="text-center">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white">4</div>
          <h3 class="text-xl font-bold mb-2">สนับสนุน</h3>
          <p class="text-gray-600">ติดตามและปรับปรุง</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-4xl">
      <h2 class="text-4xl font-bold mb-12 text-center text-secondary">คำถามที่พบบ่อย</h2>
      <div class="space-y-4">
        <details class="group bg-gray-light rounded-2xl overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-100 transition">
            <span>AI Automation คืออะไร?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">AI Automation คือการใช้ปัญญาประดิษฐ์เพื่อ自动化กระบวนการทำงาน ลดงานซ้ำซ้อน และเพิ่มประสิทธิภาพ</div>
        </details>
        <details class="group bg-gray-light rounded-2xl overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-100 transition">
            <span>แชทบอทปิดการขายได้จริงหรือ?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">ได้จริง! Partner ของเรามีระบบที่สามารถแนะนำสินค้า ปิดการขาย และชำระเงินได้เองทั้งหมด</div>
        </details>
        <details class="group bg-gray-light rounded-2xl overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-100 transition">
            <span>ใช้เวลานานแค่ไหน?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">โดยทั่วไป 2-4 สัปดาห์ ขึ้นอยู่กับความซับซ้อนของระบบ</div>
        </details>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-20 gradient-ai text-white">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-4xl font-bold mb-6">พร้อมเปลี่ยนองค์กรด้วย AI?</h2>
      <p class="text-xl text-gray-100 mb-10">ปรึกษาฟรี เราพร้อมช่วยคุณ</p>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="tel:0809955945" class="bg-white text-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">📞 080-995-5945</a>
        <a href="https://line.me/" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">💬 เพิ่ม Line</a>
      </div>
    </div>
  </section>
</Layout>
