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

<Layout title="เกี่ยวกับเรา | มอร์มินิมอร์ — บริษัท IT Services เพื่อ SMEs ไทย">
  <!-- Hero -->
  <section class="relative py-32 gradient-secondary text-white overflow-hidden">
    <div class="absolute inset-0 opacity-20">
      <img src="/images/hero/strategy-ai.png" alt="About มอร์มินิมอร์" 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">เราเชื่อ rằng SMEs ไทย deserve เว็บคุณภาพในราคาที่จ่ายได้</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="#services" 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>

  <!-- Our Story -->
  <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">จุดเริ่มต้นของเรา</h2>
      <div class="prose prose-lg max-w-none">
        <p class="text-xl text-gray-600 mb-8 text-center">
          มอร์มินิมอร์ เกิดขึ้นจากความตั้งใจที่จะลดช่องว่างระหว่างธุรกิจใหญ่และ SMEs ด้านเทคโนโลยี
        </p>
        
        <div class="bg-gray-light p-8 rounded-2xl my-12">
          <p class="text-lg text-gray-700 mb-6">
            หลังจากทำงานกับธุรกิจขนาดใหญ่มามาก เราพบว่า SMEs ไทยจำนวนมาก:
          </p>
          <ul class="space-y-4 text-gray-700">
            <li class="flex items-start gap-3">
              <span class="text-secondary text-2xl">❌</span>
              <span><strong>ไม่มีเว็บไซต์</strong> หรือมีเว็บเก่าล้าสมัย</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-secondary text-2xl">❌</span>
              <span><strong>งบทำเว็บจำกัด</strong> ไม่อยากจ่ายล่วงหน้าหลักหมื่น</span>
            </li>
            <li class="flex items-start gap-3">
              <span class="text-secondary text-2xl">❌</span>
              <span><strong>ต้องการระบบอัตโนมัติ</strong> แต่ไม่รู้ว่าเริ่มยังไง</span>
            </li>
          </ul>
        </div>

        <div class="text-center my-12">
          <h3 class="text-3xl font-bold mb-4 text-secondary">"ทำไมเว็บคุณภาพต้องแพง?"</h3>
          <p class="text-xl text-gray-600">
            คำถามนี้ทำให้เราตัดสินใจสร้าง มอร์มินิมอร์ ด้วยโมเดล <strong class="text-primary">"เว็บฟรี + จ่ายค่า Server รายปี"</strong> 
            เพื่อให้ SMEs เข้าถึงเทคโนโลยีได้ง่ายขึ้น
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Mission -->
  <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">พันธกิจของเรา</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-6xl mb-6">🎯</div>
          <h3 class="text-2xl font-bold mb-4">ทำให้เทคโนโลยีเข้าถึงได้</h3>
          <p class="text-gray-600">เราเชื่อว่าธุรกิจทุกขนาดควรมีโอกาสใช้เทคโนโลยีคุณภาพ ไม่จำกัดด้วยงบประมาณ</p>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <div class="text-6xl mb-6">⚡</div>
          <h3 class="text-2xl font-bold mb-4">ใช้ AI Agents ทำงานให้รวดเร็ว</h3>
          <p class="text-gray-600">มอร์มินิมอร์ ใช้ OpenClaw AI Agents ช่วยลดเวลาทำงาน เพิ่มความแม่นยำ ลดต้นทุน ส่งต่อประโยชน์ให้ลูกค้า</p>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <div class="text-6xl mb-6">🤝</div>
          <h3 class="text-2xl font-bold mb-4">เป็นพาร์ทเนอร์ที่ไว้ใจได้</h3>
          <p class="text-gray-600">เราไม่ใช่แค่ผู้รับจ้าง แต่เป็นพาร์ทเนอร์ที่ร่วมเติบโตไปกับธุรกิจคุณ</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Choose Us -->
  <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">อะไรที่ทำให้เราแตกต่าง?</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-left text-lg">เจ้าอื่น</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200">
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4"><span class="text-accent-green">✓</span> เว็บฟรี จ่ายค่า Server รายปี</td>
              <td class="px-6 py-4"><span class="text-red-500">✗</span> ค่าทำเว็บหลักหมื่นล่วงหน้า</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4"><span class="text-accent-green">✓</span> ใช้ AI Agents งานเร็ว คุณภาพสูง</td>
              <td class="px-6 py-4"><span class="text-red-500">✗</span> ทำงานแบบดั้งเดิม ใช้เวลานาน</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4"><span class="text-accent-green">✓</span> เข้าใจ SMEs ไทย</td>
              <td class="px-6 py-4"><span class="text-red-500">✗</span> เน้นลูกค้าใหญ่</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4"><span class="text-accent-green">✓</span> ราคาเข้าถึงได้</td>
              <td class="px-6 py-4"><span class="text-red-500">✗</span> ราคามาตรฐานตลาด</td>
            </tr>
            <tr class="hover:bg-gray-50">
              <td class="px-6 py-4"><span class="text-accent-green">✓</span> ดูแลระยะยาว</td>
              <td class="px-6 py-4"><span class="text-red-500">✗</span> จบงานแล้วจบกัน</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- Location -->
  <section class="py-20 bg-gray-light">
    <div class="container mx-auto px-4 max-w-4xl text-center">
      <h2 class="text-4xl font-bold mb-8">เราอยู่ที่ไหน?</h2>
      <div class="text-6xl mb-6">📍</div>
      <p class="text-2xl text-gray-700 mb-8"><strong>ประเทศไทย</strong></p>
      <p class="text-xl text-gray-600 mb-8">
        เราพร้อมให้บริการ SMEs ทั่วประเทศ ทั้งออนไลน์และออนไซต์ (ตามตกลง)
      </p>
      <a href="/contact-us" class="btn-secondary text-xl">ติดต่อเรา</a>
    </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">
        ถ้าคุณเป็นเจ้าของธุรกิจ SMEs ที่ต้องการเว็บไซต์คุณภาพในงบจำกัด 
        ระบบอัตโนมัติลดงานซ้ำซ้อน หรือที่ปรึกษา AI ที่เข้าใจธุรกิจคุณ
        <br /><strong class="text-primary">มอร์มินิมอร์ คือคำตอบ</strong>
      </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="/services" 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>
  </section>
</Layout>
