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

<Layout title="พัฒนาเว็บไซต์ | มอร์มินิมอร์">
  <!-- Hero -->
  <section class="relative py-32 bg-gradient-hero overflow-hidden">
    <div class="absolute inset-0 opacity-20">
      <img src="/images/hero/training-ai.png" alt="Website Development" 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 text-secondary">พัฒนาเว็บไซต์</h1>
        <p class="text-2xl text-gray-600 mb-10">บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต</p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="tel:0809955945" class="btn-accent text-xl shadow-xl">📞 080-995-5945</a>
          <a href="https://line.me/" class="btn-secondary text-xl shadow-xl">💬 เพิ่ม 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">เว็บไซต์มืออาชีพ เพื่อธุรกิจของคุณ</h2>
      <div class="prose prose-lg max-w-none">
        <p class="text-xl text-gray-600 mb-8">
          บริการพัฒนาเว็บไซต์ E-Commerce สำหรับธุรกิจ โดยคำนึงถึง UX/UI และการเชื่อมต่อกับเทคโนโลยีในอนาคต เช่น การเชื่อมข้อมูลสินค้าและยอดขายกับระบบบัญชี เป็นต้น
        </p>
        
        <div class="grid md:grid-cols-3 gap-8 my-12">
          <div class="text-center p-6 bg-gray-light rounded-2xl">
            <div class="text-5xl mb-4">🎨</div>
            <h3 class="text-xl font-bold mb-2">UX/UI Design</h3>
            <p class="text-gray-600">ออกแบบให้ใช้งานง่าย สวยงาม</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-2xl">
            <div class="text-5xl mb-4">⚡</div>
            <h3 class="text-xl font-bold mb-2">Performance</h3>
            <p class="text-gray-600">โหลดเร็ว SEO-ready</p>
          </div>
          <div class="text-center p-6 bg-gray-light rounded-2xl">
            <div class="text-5xl mb-4">🔗</div>
            <h3 class="text-xl font-bold mb-2">Integration</h3>
            <p class="text-gray-600">เชื่อมระบบบัญชี SAP ฯลฯ</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->
  <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-2 gap-8">
        <div class="bg-white p-8 rounded-2xl shadow-md">
          <h3 class="text-2xl font-bold mb-4 text-accent-blue">E-Commerce</h3>
          <ul class="space-y-3 text-gray-600">
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> ระบบตระกร้าสินค้า</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> ชำระเงินออนไลน์</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> จัดการออเดอร์</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> ระบบสมาชิก</li>
          </ul>
        </div>
        <div class="bg-white p-8 rounded-2xl shadow-md">
          <h3 class="text-2xl font-bold mb-4 text-accent-blue">Technical</h3>
          <ul class="space-y-3 text-gray-600">
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> Responsive Design</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> SSL Security</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> SEO Optimization</li>
            <li class="flex items-start gap-3"><span class="text-primary text-xl">✓</span> Fast Loading</li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <!-- Process -->
  <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-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">UX/UI Design</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">Coding & Testing</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">Launch & Support</p>
        </div>
      </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">สนใจพัฒนาเว็บไซต์?</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>
