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

<Layout title="ขั้นตอนการทำงาน | moreminimore — 3 ขั้นตอนง่ายๆ ได้เว็บพร้อมใช้">
  <!-- 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="Process" 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 ขั้นตอน ง่ายๆ ได้เว็บพร้อมใช้<br />เราทำให้กระบวนการทำเว็บเป็นเรื่องง่าย โปร่งใส และรวดเร็ว</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="#step1" 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>

  <!-- Step 1 -->
  <section id="step1" 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="w-24 h-24 rounded-full gradient-secondary flex items-center justify-center text-5xl font-bold text-white mb-8">1</div>
          <h2 class="text-4xl font-bold mb-6">📞 ขั้นตอนที่ 1: ปรึกษาฟรี</h2>
          <h3 class="text-2xl font-bold mb-6 text-secondary">เราคุยกันก่อน เริ่มงานทีหลัง</h3>
          <p class="text-lg text-gray-600 mb-6">ไม่มีการขายกดดัน ไม่มีการบังคับเซ็นสัญญา</p>
        </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> โซลูชันที่เหมาะสมกับธุรกิจคุณ</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>
          </ul>
        </div>
      </div>
      
      <div class="mt-20">
        <h3 class="text-3xl font-bold mb-8 text-center">สิ่งที่เกิดขึ้น</h3>
        <div class="grid md:grid-cols-5 gap-6">
          <div class="text-center p-6 bg-gray-light rounded-xl">
            <div class="text-4xl mb-4">1️⃣</div>
            <h4 class="font-bold mb-2">ติดต่อเรา</h4>
            <p class="text-sm text-gray-600">ผ่าน Line, โทรศัพท์ หรือแบบฟอร์ม</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-xl">
            <div class="text-4xl mb-4">2️⃣</div>
            <h4 class="font-bold mb-2">นัดคุย</h4>
            <p class="text-sm text-gray-600">จัดเวลาคุย (ออนไลน์หรือออนไซต์)</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-xl">
            <div class="text-4xl mb-4">3️⃣</div>
            <h4 class="font-bold mb-2">เข้าใจความต้องการ</h4>
            <p class="text-sm text-gray-600">คุณบอกเราว่าอยากได้อะไร</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-xl">
            <div class="text-4xl mb-4">4️⃣</div>
            <h4 class="font-bold mb-2">แนะนำโซลูชัน</h4>
            <p class="text-sm text-gray-600">เราแนะนำสิ่งที่เหมาะกับคุณ</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-xl">
            <div class="text-4xl mb-4">5️⃣</div>
            <h4 class="font-bold mb-2">ตกลงกัน</h4>
            <p class="text-sm text-gray-600">ถ้าทั้งสองฝ่ายโอเค ก็เริ่มงาน</p>
          </div>
        </div>
      </div>
      
      <div class="mt-12 bg-gray-light p-8 rounded-2xl">
        <h4 class="text-2xl font-bold mb-6">คำถามที่เราจะถาม</h4>
        <ul class="grid md:grid-cols-2 gap-4 text-gray-700">
          <li class="flex items-start gap-3"><span class="text-secondary">•</span> ธุรกิจคุณทำอะไร?</li>
          <li class="flex items-start gap-3"><span class="text-secondary">•</span> กลุ่มลูกค้าคือใคร?</li>
          <li class="flex items-start gap-3"><span class="text-secondary">•</span> มีเว็บเดิมไหม? (ถ้ามี)</li>
          <li class="flex items-start gap-3"><span class="text-secondary">•</span> ต้องการฟีเจอร์อะไรบ้าง?</li>
          <li class="flex items-start gap-3"><span class="text-secondary">•</span> งบประมาณที่คาดหวัง?</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Step 2 -->
  <section id="step2" 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="w-24 h-24 rounded-full gradient-primary flex items-center justify-center text-5xl font-bold text-white mb-8">2</div>
          <h2 class="text-4xl font-bold mb-6">⚡ ขั้นตอนที่ 2: พัฒนาเว็บ</h2>
          <h3 class="text-2xl font-bold mb-6 text-secondary">ทีมงาน + AI Agents สร้างเว็บให้คุณ</h3>
          <p class="text-lg text-gray-600 mb-6">moreminimore ใช้ OpenClaw AI Agents ช่วยทำงาน ทำให้เร็วขึ้น คุณภาพสูงขึ้น</p>
        </div>
        <div class="order-1 md:order-2 bg-white p-8 rounded-2xl shadow-lg">
          <h4 class="text-2xl font-bold mb-6">ระยะเวลา</h4>
          <table class="w-full">
            <thead>
              <tr class="bg-secondary text-white">
                <th class="px-4 py-3 text-left">ประเภทเว็บ</th>
                <th class="px-4 py-3 text-left">ระยะเวลา</th>
              </tr>
            </thead>
            <tbody class="divide-y">
              <tr><td class="px-4 py-3">เว็บพื้นฐาน</td><td class="px-4 py-3">3-5 วันทำการ</td></tr>
              <tr><td class="px-4 py-3">เว็บมีฟีเจอร์เพิ่ม</td><td class="px-4 py-3">7-14 วันทำการ</td></tr>
              <tr><td class="px-4 py-3">เว็บ E-commerce</td><td class="px-4 py-3">14-21 วันทำการ</td></tr>
            </tbody>
          </table>
          <p class="text-sm text-gray-500 mt-4 italic">*หมายเหตุ: ระยะเวลาขึ้นอยู่กับความซับซ้อนและเนื้อหาที่เตรียมไว้</p>
        </div>
      </div>
      
      <div class="mt-20">
        <h3 class="text-3xl font-bold mb-8 text-center">กระบวนการพัฒนา</h3>
        <div class="grid md:grid-cols-6 gap-4">
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">📝</div>
            <h4 class="font-bold mb-2">1. เก็บ Requirement</h4>
          </div>
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">🏗️</div>
            <h4 class="font-bold mb-2">2. ออกแบบโครงสร้าง</h4>
          </div>
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">💻</div>
            <h4 class="font-bold mb-2">3. พัฒนาเว็บ</h4>
          </div>
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">📄</div>
            <h4 class="font-bold mb-2">4. ใส่เนื้อหา</h4>
          </div>
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">✅</div>
            <h4 class="font-bold mb-2">5. ทดสอบ</h4>
          </div>
          <div class="text-center p-4 bg-white rounded-xl shadow">
            <div class="text-3xl mb-2">🔧</div>
            <h4 class="font-bold mb-2">6. แก้ไข</h4>
          </div>
        </div>
      </div>
      
      <div class="mt-12 bg-white p-8 rounded-2xl shadow-lg">
        <h4 class="text-2xl font-bold mb-6 text-center">คุณต้องเตรียมอะไร?</h4>
        <div class="grid md:grid-cols-2 gap-6">
          <div>
            <h5 class="font-bold mb-4 text-lg">สิ่งที่ควรมี</h5>
            <ul class="space-y-3 text-gray-700">
              <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> โลโก้ (ถ้ามี)</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> เนื้อหาเกี่ยวกับธุรกิจ</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> รูปภาพ (หรือเราช่วยหาได้)</li>
              <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> ข้อมูลติดต่อ</li>
            </ul>
          </div>
          <div class="bg-gray-light p-6 rounded-xl">
            <p class="text-gray-700 italic text-center">
              <strong class="text-secondary">ถ้าไม่มีอะไรเลย?</strong><br />
              เรายินดีช่วยแนะนำและจัดหาให้
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Step 3 -->
  <section id="step3" class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-6xl">
      <div class="text-center mb-12">
        <div class="w-24 h-24 mx-auto rounded-full bg-accent-green flex items-center justify-center text-5xl font-bold text-white mb-8">3</div>
        <h2 class="text-4xl font-bold mb-6">🚀 ขั้นตอนที่ 3: ใช้งานจริง</h2>
        <h3 class="text-2xl font-bold mb-6 text-secondary">เว็บพร้อม คุณพร้อม ธุรกิจพร้อมเติบโต</h3>
        <p class="text-lg text-gray-600">เมื่อเว็บเสร็จ คุณไม่ได้ทิ้งเราไป เรายังอยู่ดูแล</p>
      </div>
      
      <div class="grid md:grid-cols-4 gap-6 mb-20">
        <div class="text-center p-6 bg-gray-light rounded-xl">
          <div class="text-4xl mb-4">📦</div>
          <h4 class="font-bold mb-2">1. ส่งมอบงาน</h4>
          <p class="text-sm text-gray-600">เราส่งเว็บให้คุณตรวจสอบ</p>
        </div>
        <div class="text-center p-6 bg-gray-light rounded-xl">
          <div class="text-4xl mb-4">📚</div>
          <h4 class="font-bold mb-2">2. อบรมใช้งาน</h4>
          <p class="text-sm text-gray-600">สอนคุณหรือทีมจัดการเว็บพื้นฐาน</p>
        </div>
        <div class="text-center p-6 bg-gray-light rounded-xl">
          <div class="text-4xl mb-4">🎉</div>
          <h4 class="font-bold mb-2">3. Launch</h4>
          <p class="text-sm text-gray-600">เปิดเว็บอย่างเป็นทางการ</p>
        </div>
        <div class="text-center p-6 bg-gray-light rounded-xl">
          <div class="text-4xl mb-4">🤝</div>
          <h4 class="font-bold mb-2">4. Support</h4>
          <p class="text-sm text-gray-600">เราพร้อมช่วยเหลือหลังเปิดเว็บ</p>
        </div>
      </div>
      
      <div class="bg-gray-light p-8 rounded-2xl mb-12">
        <h4 class="text-2xl font-bold mb-6 text-center">สิ่งที่รวมหลังส่งมอบ</h4>
        <div class="grid md:grid-cols-2 gap-6">
          <ul class="space-y-3 text-gray-700">
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Support ทางเทคนิค (ตามแพ็กเกจ)</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> แนะนำการอัปเดตเนื้อหา</li>
          </ul>
          <ul class="space-y-3 text-gray-700">
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> คำปรึกษา SEO เบื้องต้น</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> แจ้งเตือนอัปเดตความปลอดภัย</li>
          </ul>
        </div>
      </div>
      
      <div class="text-center">
        <h4 class="text-2xl font-bold mb-6">แล้วหลังจากนั้น?</h4>
        <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
          <div class="text-center p-6 bg-white rounded-xl shadow">
            <div class="text-4xl mb-4">📈</div>
            <h5 class="font-bold mb-2">คุณโฟกัสทำธุรกิจ</h5>
          </div>
          <div class="text-center p-6 bg-white rounded-xl shadow">
            <div class="text-4xl mb-4">🌐</div>
            <h5 class="font-bold mb-2">เว็บทำงานเป็นหน้าร้าน</h5>
          </div>
          <div class="text-center p-6 bg-white rounded-xl shadow">
            <div class="text-4xl mb-4">🤝</div>
            <h5 class="font-bold mb-2">เราพร้อมช่วยเหลือ</h5>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Why Our Process Works -->
  <section class="py-20 bg-secondary text-white">
    <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-4 gap-8">
        <div class="text-center">
          <div class="text-6xl mb-4">🎯</div>
          <h3 class="text-xl font-bold mb-2">โปร่งใส</h3>
          <p class="text-gray-200">คุณรู้ทุกขั้นตอน ไม่มีอะไรซ่อน</p>
        </div>
        <div class="text-center">
          <div class="text-6xl mb-4">⚡</div>
          <h3 class="text-xl font-bold mb-2">รวดเร็ว</h3>
          <p class="text-gray-200">AI Agents ช่วยลดเวลาทำงาน</p>
        </div>
        <div class="text-center">
          <div class="text-6xl mb-4">💰</div>
          <h3 class="text-xl font-bold mb-2">คุ้มค่า</h3>
          <p class="text-gray-200">เว็บฟรี จ่ายแค่ค่า Server รายปี</p>
        </div>
        <div class="text-center">
          <div class="text-6xl mb-4">🤝</div>
          <h3 class="text-xl font-bold mb-2">เป็นพาร์ทเนอร์</h3>
          <p class="text-gray-200">เราอยู่ด้วยตลอด ไม่ใช่ทำแล้วหายไป</p>
        </div>
      </div>
    </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">พร้อมเริ่มขั้นตอนที่ 1 หรือยัง?</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="/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="tel:0809955945" class="bg-accent-green text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl">📞 080-995-5945</a>
      </div>
    </div>
  </section>
</Layout>
