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

<Layout title="บริการของเรา | มอร์มินิมอร์ — Web Development, AI Automation, AI Consult">
  <!-- Hero -->
  <section class="relative py-32 gradient-secondary text-white overflow-hidden">
    <div class="absolute inset-0 opacity-20">
      <img src="/images/hero/homepage-ai.png" alt="Our Services" 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">
        <h1 class="text-5xl md:text-7xl font-bold mb-8">บริการของเรา</h1>
        <p class="text-2xl text-gray-100 mb-10">3 โซลูชัน ครบทุกความต้องการด้าน IT ของธุรกิจคุณ<br />มอร์มินิมอร์ มอบบริการ IT Solutions ที่ออกแบบมาเพื่อ SMEs โดยเฉพาะ</p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="/contact-us" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">ปรึกษาฟรี</a>
          <a href="#comparison" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">เปรียบเทียบแพ็กเกจ</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Service 1: Web Development -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <div class="text-7xl mb-6">🌐</div>
          <h2 class="text-4xl font-bold mb-6">Web Development</h2>
          <h3 class="text-2xl font-bold mb-6 text-secondary">รับทำเว็บไซต์ WordPress — ฟรี! จ่ายแค่ค่า Server รายปี</h3>
          <p class="text-lg text-gray-600 mb-8">เว็บไซต์คือหน้าร้านออนไลน์ของคุณ เราทำให้คุณมีเว็บคุณภาพในงบที่จ่ายได้</p>
          <a href="/website-development" class="btn-secondary text-xl">ดูรายละเอียด</a>
        </div>
        <div class="bg-gray-light p-8 rounded-2xl">
          <h4 class="text-2xl font-bold mb-6">สิ่งที่รวมในแพ็กเกจ</h4>
          <ul class="space-y-4 text-gray-700">
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> เว็บไซต์ WordPress มืออาชีพ</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ออกแบบ Responsive (รองรับทุกอุปกรณ์)</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> SEO-ready โครงสร้างพร้อมติด Google</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ความเร็วสูง โหลดเร็ว ไม่หลุดลูกค้า</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ปลอดภัย อัปเดตสม่ำเสมอ</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-primary">ฟรีค่าทำเว็บ</strong> — จ่ายเฉพาะค่า Server รายปี</li>
          </ul>
        </div>
      </div>
      
      <div class="mt-12 text-center">
        <h4 class="text-2xl font-bold mb-4">เหมาะสำหรับ</h4>
        <div class="flex flex-wrap justify-center gap-4">
          <span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">ธุรกิจที่ยังไม่มีเว็บไซต์</span>
          <span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">ธุรกิจที่มีเว็บเก่าล้าสมัย</span>
          <span class="px-6 py-3 bg-gray-light rounded-full text-gray-700">SMEs ที่ต้องการประหยัดงบทำเว็บ</span>
        </div>
      </div>
      
      <div class="mt-12 bg-gradient-to-r from-primary to-yellow-200 p-8 rounded-2xl text-center">
        <h4 class="text-2xl font-bold mb-4">โมเดลราคา</h4>
        <div class="text-4xl font-bold text-secondary mb-2">ค่าทำเว็บ: ฟรี!</div>
        <div class="text-xl text-gray-700">ค่า Server: เริ่มต้น 2,900 บาท/ปี</div>
        <p class="text-sm text-gray-600 mt-4">*แล้วแต่แพ็กเกจ</p>
      </div>
    </div>
  </section>

  <!-- Service 2: AI Automation -->
  <section class="py-20 bg-gray-light">
    <div class="container mx-auto px-4 max-w-6xl">
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div class="order-2 md:order-1">
          <div class="bg-white p-8 rounded-2xl shadow-lg">
            <h4 class="text-2xl font-bold mb-6">ผลลัพธ์ที่ลูกค้าได้รับ</h4>
            <ul class="space-y-4 text-gray-700">
              <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">⏱️</strong> ประหยัดเวลาทีม 30-50%</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">💰</strong> ลดต้นทุนดำเนินงาน</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">📈</strong> เพิ่มความพึงพอใจลูกค้า</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> <strong class="text-2xl">😌</strong> ทีมมีเวลาโฟกัสงานสำคัญ</li>
            </ul>
          </div>
        </div>
        <div class="order-1 md:order-2">
          <div class="text-7xl mb-6">🤖</div>
          <h2 class="text-4xl font-bold mb-6">AI Automation Setup</h2>
          <h3 class="text-2xl font-bold mb-6 text-secondary">ตั้งค่าระบบอัตโนมัติ ลดงานซ้ำซ้อน ประหยัดเวลาทีม</h3>
          <p class="text-lg text-gray-600 mb-8">ให้ AI ทำงานซ้ำๆ แทนคุณ ทีมได้โฟกัสงานที่สร้างมูลค่า</p>
          <a href="/ai-automation" class="btn-secondary text-xl">ดูรายละเอียด</a>
        </div>
      </div>
      
      <div class="mt-12">
        <h4 class="text-2xl font-bold mb-6 text-center">ตัวอย่างระบบที่ทำได้</h4>
        <div class="grid md:grid-cols-3 gap-6">
          <div class="bg-white p-6 rounded-xl shadow">
            <div class="text-4xl mb-4">📧</div>
            <h5 class="font-bold mb-2">Auto-respond Email</h5>
            <p class="text-gray-600 text-sm">ตอบอีเมลลูกค้าอัตโนมัติ</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow">
            <div class="text-4xl mb-4">💬</div>
            <h5 class="font-bold mb-2">Chatbot</h5>
            <p class="text-gray-600 text-sm">ตอบคำถามอัตโนมัติ</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow">
            <div class="text-4xl mb-4">📊</div>
            <h5 class="font-bold mb-2">รายงานอัตโนมัติ</h5>
            <p class="text-gray-600 text-sm">ดึงข้อมูล สร้างรายงาน</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow">
            <div class="text-4xl mb-4">📅</div>
            <h5 class="font-bold mb-2">นัดหมาย</h5>
            <p class="text-gray-600 text-sm">Auto-booking</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow">
            <div class="text-4xl mb-4">📝</div>
            <h5 class="font-bold mb-2">ย้ายข้อมูล</h5>
            <p class="text-gray-600 text-sm">กรอกฟอร์ม ย้ายข้อมูลข้ามระบบ</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Service 3: AI Consult -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <div class="grid md:grid-cols-2 gap-12 items-center">
        <div>
          <div class="text-7xl mb-6">💡</div>
          <h2 class="text-4xl font-bold mb-6">AI Consult & Implementation</h2>
          <h3 class="text-2xl font-bold mb-6 text-secondary">ที่ปรึกษา AI ช่วยคุณนำเทคโนโลยีไปใช้จริง ได้ผลลัพธ์จับต้องได้</h3>
          <p class="text-lg text-gray-600 mb-8">AI ไม่ใช่แค่คำเทรนด์ แต่คือเครื่องมือที่สร้างผลลัพธ์ได้ ถ้าใช้ถูกวิธี</p>
          <a href="/ai-consult" class="btn-secondary text-xl">ดูรายละเอียด</a>
        </div>
        <div class="bg-gray-light p-8 rounded-2xl">
          <h4 class="text-2xl font-bold mb-6">บริการปรึกษา</h4>
          <ul class="space-y-4 text-gray-700">
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> ประเมินความพร้อมธุรกิจคุณ</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> แนะนำ Use Cases ที่เหมาะสม</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> วางแผน Implementation เป็นขั้นตอน</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> คำนวณ ROI ที่คาดหวัง</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-2xl">✓</span> เลือก Tools ที่คุ้มค่า</li>
          </ul>
        </div>
      </div>
      
      <div class="mt-12">
        <h4 class="text-2xl font-bold mb-6 text-center">บริการ Implementation</h4>
        <div class="grid md:grid-cols-3 gap-6">
          <div class="bg-gray-light p-6 rounded-xl">
            <div class="text-4xl mb-4">⚙️</div>
            <h5 class="font-bold mb-2">ติดตั้งและตั้งค่า</h5>
            <p class="text-gray-600 text-sm">ติดตั้งระบบ AI และตั้งค่า</p>
          </div>
          <div class="bg-gray-light p-6 rounded-xl">
            <div class="text-4xl mb-4">🔗</div>
            <h5 class="font-bold mb-2">เชื่อมต่อกับระบบเดิม</h5>
            <p class="text-gray-600 text-sm">Integrate กับระบบที่มีอยู่</p>
          </div>
          <div class="bg-gray-light p-6 rounded-xl">
            <div class="text-4xl mb-4">📚</div>
            <h5 class="font-bold mb-2">อบรมทีมใช้งาน</h5>
            <p class="text-gray-600 text-sm">สอนทีม Support หลังติดตั้ง</p>
          </div>
        </div>
      </div>
      
      <div class="mt-12 bg-secondary text-white p-8 rounded-2xl">
        <h4 class="text-2xl font-bold mb-6 text-center">ทำไมต้องที่ปรึกษา AI?</h4>
        <div class="grid md:grid-cols-4 gap-6 text-center">
          <div>
            <div class="text-4xl mb-4">🎯</div>
            <h5 class="font-bold mb-2">ไม่เสียเวลาทดลองผิดถูก</h5>
          </div>
          <div>
            <div class="text-4xl mb-4">💡</div>
            <h5 class="font-bold mb-2">ได้โซลูชันที่เหมาะกับธุรกิจคุณ</h5>
          </div>
          <div>
            <div class="text-4xl mb-4">📊</div>
            <h5 class="font-bold mb-2">วัดผลได้ชัดเจน</h5>
          </div>
          <div>
            <div class="text-4xl mb-4">💰</div>
            <h5 class="font-bold mb-2">คุ้มค่าการลงทุน</h5>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Package Comparison -->
  <section id="comparison" 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">เปรียบเทียบแพ็กเกจ</h2>
      <div class="overflow-x-auto">
        <table class="w-full bg-white rounded-2xl shadow-lg overflow-hidden">
          <thead class="gradient-secondary text-white">
            <tr>
              <th class="px-6 py-4 text-left text-lg">บริการ</th>
              <th class="px-6 py-4 text-center text-lg">Web Dev</th>
              <th class="px-6 py-4 text-center text-lg">AI Automation</th>
              <th class="px-6 py-4 text-center text-lg">AI Consult</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-bold">ปรึกษาฟรี</td>
              <td class="px-6 py-4 text-center text-2xl">✅</td>
              <td class="px-6 py-4 text-center text-2xl">✅</td>
              <td class="px-6 py-4 text-center text-2xl">✅</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-bold">จ่ายล่วงหน้า</td>
              <td class="px-6 py-4 text-center text-lg text-accent-green font-bold">❌ (ฟรี)</td>
              <td class="px-6 py-4 text-center text-lg text-red-500 font-bold">✅</td>
              <td class="px-6 py-4 text-center text-lg text-red-500 font-bold">✅</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-bold">เหมาะกับ</td>
              <td class="px-6 py-4 text-center text-sm">ทุกธุรกิจ</td>
              <td class="px-6 py-4 text-center text-sm">มีงานซ้ำซ้อน</td>
              <td class="px-6 py-4 text-center text-sm">ต้องการวางแผน AI</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4 font-bold">เริ่มที่</td>
              <td class="px-6 py-4 text-center text-lg font-bold text-secondary">ค่า Server/ปี</td>
              <td class="px-6 py-4 text-center text-lg font-bold text-secondary">15,000 บาท</td>
              <td class="px-6 py-4 text-center text-lg font-bold text-secondary">5,000 บาท</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p class="text-center mt-8 text-gray-600 text-lg">
        <strong class="text-secondary">ต้องการมากกว่า 1 บริการ?</strong> ติดต่อเราสำหรับแพ็กเกจพิเศษ
      </p>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-20 gradient-cta text-white">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-4xl md:text-6xl font-bold mb-6">บริการไหนเหมาะกับคุณ?</h2>
      <p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">
        ไม่แน่ใจ? ปรึกษาฟรี เราช่วยวิเคราะห์และแนะนำโซลูชันที่เหมาะสม
      </p>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="tel:0809955945" class="bg-white text-secondary 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-[#06C755] 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>
