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

<Layout title="About Us | MoreminiMore Co.,Ltd.">
  <section class="py-20 bg-gradient-to-br from-yellow-50 to-white">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl md:text-5xl font-bold text-center mb-8 text-secondary">
        เกี่ยวกับเรา
      </h1>
      <p class="text-xl text-center text-gray-600 max-w-3xl mx-auto mb-12">
        ระบบเบื้องหลังการทำงานของเรา ระบบของเราจะมี Server ประมวลผล 3 เครื่อง ในการดึงข้อมูลจากแหล่งต่าง ๆ
      </p>
      
      <div class="grid md:grid-cols-2 gap-12 items-center max-w-6xl mx-auto">
        <div>
          <img 
            src="https://www.moreminimore.com/wp-content/uploads/2022/01/Bright-Wisdom-Backgroud-service-2@2x.png" 
            alt="Our System" 
            class="rounded-lg shadow-xl w-full"
            width="500"
            height="500"
          />
        </div>
        <div>
          <h2 class="text-3xl font-bold mb-6 text-secondary">ระบบของเรา</h2>
          <div class="space-y-6">
            <div class="flex gap-4">
              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">1️⃣</div>
              <div>
                <h3 class="text-xl font-bold mb-2">Server ประมวลผลหลัก</h3>
                <p class="text-gray-600">ประมวลผลข้อมูลจากแหล่งต่าง ๆ อย่างรวดเร็วและมีประสิทธิภาพ</p>
              </div>
            </div>
            <div class="flex gap-4">
              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">2️⃣</div>
              <div>
                <h3 class="text-xl font-bold mb-2">Server วิเคราะห์ข้อมูล</h3>
                <p class="text-gray-600">วิเคราะห์ข้อมูลเชิงลึก เพื่อหาแนวทางที่เหมาะสม</p>
              </div>
            </div>
            <div class="flex gap-4">
              <div class="flex-shrink-0 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-2xl">3️⃣</div>
              <div>
                <h3 class="text-xl font-bold mb-2">Server จัดเก็บข้อมูล</h3>
                <p class="text-gray-600">จัดเก็บข้อมูลอย่างเป็นระบบ ปลอดภัย เข้าถึงได้ง่าย</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="max-w-4xl mx-auto">
        <h2 class="text-3xl font-bold text-center mb-12 text-secondary">วิสัยทัศน์ของเรา</h2>
        <div class="prose prose-lg mx-auto text-gray-600">
          <p class="mb-6">
            MoreminiMore มุ่งมั่นที่จะช่วยธุรกิจไทยเติบโตในยุคดิจิตอล ด้วยการใช้ข้อมูลเป็นพื้นฐานในการตัดสินใจ
            และพัฒนาศักยภาพของคนในองค์กรให้สามารถขับเคลื่อนธุรกิจได้อย่างยั่งยืน
          </p>
          <p class="mb-6">
            เราไม่เพียงแค่ให้คำแนะนำ แต่เรายังลงมือทำร่วมกับคุณ เพื่อให้มั่นใจว่ากลยุทธ์ที่วางไว้จะเกิดขึ้นจริง
            และวัดผลได้อย่างชัดเจน
          </p>
          <p>
            ด้วยประสบการณ์และทีมงานที่มีความเชี่ยวชาญ เราพร้อมที่จะเป็นพาร์ทเนอร์ในการเติบโตของธุรกิจคุณ
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="py-20 bg-gray-100">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl font-bold mb-8 text-secondary">พร้อมร่วมงานกับคุณ</h2>
      <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
        ให้เราช่วยคุณพัฒนาระบบและกลยุทธ์ที่ตอบโจทย์ธุรกิจ
      </p>
      <a href="/contact-us" class="bg-primary text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-primary-hover transition inline-block shadow-lg">
        ติดต่อเรา
      </a>
    </div>
  </section>
</Layout>
