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

<Layout title="ที่ปรึกษาองค์กร AI | MoreminiMore - เพิ่มยอดขายด้วย AI Transformation">
  <!-- Hero Section -->
  <section class="relative py-32 bg-gradient-to-br from-yellow-50 via-blue-50 to-purple-50 overflow-hidden">
    <div class="absolute inset-0">
      <img src="/images/hero/homepage-ai.png" alt="AI Transformation" class="w-full h-full object-cover opacity-10" loading="eager" />
      <div class="absolute inset-0 bg-gradient-to-br from-yellow-50/80 via-blue-50/80 to-purple-50/80"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-5xl mx-auto text-center">
        <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold mb-8 text-secondary leading-tight">
          เปลี่ยนองค์กรของคุณด้วย<br />
          <span class="text-accent-blue">AI Transformation</span>
        </h1>
        <p class="text-2xl md:text-3xl text-gray-600 mb-10 max-w-3xl mx-auto">
          เพิ่มยอดขาย ลดต้นทุน และยกระดับธุรกิจด้วยกลยุทธ์ AI ที่วัดผลได้
        </p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="tel:0809955945" class="btn-accent text-xl shadow-xl">
            📞 ปรึกษาผู้เชี่ยวชาญ
          </a>
          <a href="#services" class="btn-secondary text-xl shadow-xl">
            ดูบริการของเรา
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Tech Stack Section -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">
          เทคโนโลยี AI ที่เรานำมาใช้
        </h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          เราคัดสรรเทคโนโลยี AI ที่ดีที่สุดในโลก
        </p>
      </div>
      
      <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-8">
        <!-- Tech 1-8 (same as before) -->
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">🤖</div>
          <h3 class="text-xl font-bold mb-2">Machine Learning</h3>
          <p class="text-gray-600">ทำนายแนวโน้ม วิเคราะห์ข้อมูลเชิงลึก</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">💬</div>
          <h3 class="text-xl font-bold mb-2">NLP / Chatbot</h3>
          <p class="text-gray-600">ประมวลผลภาษาธรรมชาติ ตอบคำถามอัตโนมัติ</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">📊</div>
          <h3 class="text-xl font-bold mb-2">Predictive Analytics</h3>
          <p class="text-gray-600">วิเคราะห์ล่วงหน้า วางแผนแม่นยำ</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">👁️</div>
          <h3 class="text-xl font-bold mb-2">Computer Vision</h3>
          <p class="text-gray-600">วิเคราะห์ภาพ ตรวจสอบอัตโนมัติ</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">🔄</div>
          <h3 class="text-xl font-bold mb-2">RPA</h3>
          <p class="text-gray-600">อัตโนมัติกระบวนการทำงาน</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">📈</div>
          <h3 class="text-xl font-bold mb-2">Business Intelligence</h3>
          <p class="text-gray-600">Dashboard แสดงผลแบบ Real-time</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">🌐</div>
          <h3 class="text-xl font-bold mb-2">Generative AI</h3>
          <p class="text-gray-600">สร้างเนื้อหา อัตโนมัติด้วย AI</p>
        </div>
        <div class="glass p-6 rounded-2xl card-hover text-center border border-gray-100 shadow-lg">
          <div class="text-5xl mb-4">☁️</div>
          <h3 class="text-xl font-bold mb-2">Cloud AI</h3>
          <p class="text-gray-600">บริการ AI บน Cloud ประสิทธิภาพสูง</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="py-20 bg-gray-light">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">
          บริการของเรา
        </h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          บริการครบวงจร ทั้ง AI และ Digital Services
        </p>
      </div>
      
      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- AI Services -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="relative h-64">
            <img src="/images/hero/strategy-ai.png" alt="AI Strategy" class="w-full h-full object-cover" loading="lazy" />
            <div class="absolute inset-0 gradient-ai opacity-90"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="text-8xl">🎯</div>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">AI Strategy Consulting</h3>
            <p class="text-gray-600 mb-4">วางกลยุทธ์ AI ที่สอดคล้องกับเป้าหมายธุรกิจ</p>
            <a href="/ai-strategy-consult" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
        
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="relative h-64">
            <img src="/images/hero/automation-ai.png" alt="AI Automation" class="w-full h-full object-cover" loading="lazy" />
            <div class="absolute inset-0 gradient-primary opacity-90"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="text-8xl">⚙️</div>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">AI Automation (รวม Chatbot)</h3>
            <p class="text-gray-600 mb-4">Chatbot, Workflow Automation ลดงานซ้ำซ้อน</p>
            <a href="/ai-automation" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
        
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="relative h-64">
            <img src="/images/hero/training-ai.png" alt="AI Training" class="w-full h-full object-cover" loading="lazy" />
            <div class="absolute inset-0 bg-accent-purple opacity-90"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="text-8xl">🎓</div>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">AI Training</h3>
            <p class="text-gray-600 mb-4">ฝึกอบรมทีม ใช้งาน AI Tools เป็น</p>
            <a href="/ai-training" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
        
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="relative h-64">
            <img src="/images/hero/analytics-ai.png" alt="AI Analytics" class="w-full h-full object-cover" loading="lazy" />
            <div class="absolute inset-0 bg-accent-teal opacity-90"></div>
            <div class="absolute inset-0 flex items-center justify-center">
              <div class="text-8xl">📊</div>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">AI Analytics</h3>
            <p class="text-gray-600 mb-4">ใช้ AI วิเคราะห์ข้อมูล เพิ่มยอดขาย</p>
            <a href="/ai-analytics" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
        
        <!-- Original Services (Restored) -->
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="h-64 gradient-ai flex items-center justify-center">
            <div class="text-8xl">💻</div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">พัฒนาเว็บไซต์</h3>
            <p class="text-gray-600 mb-4">เว็บไซต์มืออาชีพ SEO-ready โหลดเร็ว</p>
            <a href="/website-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
        
        <div class="bg-white rounded-2xl overflow-hidden shadow-xl card-hover">
          <div class="h-64 gradient-primary flex items-center justify-center">
            <div class="text-8xl">📱</div>
          </div>
          <div class="p-6">
            <h3 class="text-2xl font-bold mb-3">พัฒนาแอปพลิเคชัน</h3>
            <p class="text-gray-600 mb-4">แอปมือถือ iOS และ Android ใช้งานง่าย</p>
            <a href="/app-development" class="text-accent-blue font-medium hover:underline flex items-center gap-2">ดูรายละเอียด →</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Process Section (Fixed connector lines) -->
  <section id="process" class="py-20 bg-white">
    <div class="container mx-auto px-4">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">
          กระบวนการทำงาน
        </h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">
          4 ขั้นตอนง่ายๆ สู่การเป็นองค์กร AI
        </p>
      </div>
      
      <div class="grid md:grid-cols-4 gap-8">
        <!-- Step 1 -->
        <div class="text-center relative">
          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-primary flex items-center justify-center text-4xl font-bold text-white shadow-xl">
            1
          </div>
          <div class="hidden md:block process-step-connector"></div>
          <h3 class="text-2xl font-bold mb-3">วิเคราะห์</h3>
          <p class="text-gray-600">ศึกษาธุรกิจ วิเคราะห์ปัญหา หาโอกาสใช้ AI</p>
        </div>
        
        <!-- Step 2 -->
        <div class="text-center relative">
          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full gradient-ai flex items-center justify-center text-4xl font-bold text-white shadow-xl">
            2
          </div>
          <div class="hidden md:block process-step-connector"></div>
          <h3 class="text-2xl font-bold mb-3">วางแผน</h3>
          <p class="text-gray-600">ออกแบบกลยุทธ์ AI Roadmap ที่ชัดเจน</p>
        </div>
        
        <!-- Step 3 -->
        <div class="text-center relative">
          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-purple flex items-center justify-center text-4xl font-bold text-white shadow-xl">
            3
          </div>
          <div class="hidden md:block process-step-connector"></div>
          <h3 class="text-2xl font-bold mb-3">ดำเนินการ</h3>
          <p class="text-gray-600">ติดตั้งระบบ AI ฝึกอบรมทีม เริ่มใช้งาน</p>
        </div>
        
        <!-- Step 4 -->
        <div class="text-center">
          <div class="process-step-number w-24 h-24 mx-auto mb-6 rounded-full bg-accent-teal flex items-center justify-center text-4xl font-bold text-white shadow-xl">
            4
          </div>
          <h3 class="text-2xl font-bold mb-3">วัดผล</h3>
          <p class="text-gray-600">ติดตามผล ปรับปรุงอย่างต่อเนื่อง</p>
        </div>
      </div>
    </div>
  </section>

  <!-- FAQ Section -->
  <section class="py-20 bg-gray-light">
    <div class="container mx-auto px-4 max-w-5xl">
      <div class="text-center mb-16">
        <h2 class="text-4xl md:text-5xl font-bold mb-4 text-secondary">
          คำถามที่พบบ่อย
        </h2>
      </div>
      <!-- FAQ items (same as before) -->
      <div class="space-y-4">
        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
            <span>AI Transformation คืออะไร?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">AI Transformation คือกระบวนการเปลี่ยนแปลงองค์กร โดยการนำ AI มาใช้ในทุกด้าน</div>
        </details>
        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
            <span>ธุรกิจของฉันพร้อมสำหรับ AI หรือยัง?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">ธุรกิจส่วนใหญ่พร้อมใช้ AI แล้ว! เราช่วยวิเคราะห์ความพร้อม</div>
        </details>
        <details class="group bg-white rounded-2xl shadow-md overflow-hidden">
          <summary class="flex justify-between items-center cursor-pointer p-6 font-bold text-lg hover:bg-gray-50 transition">
            <span>ใช้เวลานานแค่ไหนที่จะเห็นผล?</span>
            <span class="text-2xl group-open:rotate-45 transition">+</span>
          </summary>
          <div class="px-6 pb-6 text-gray-600">โดยทั่วไปจะเริ่มเห็นผลภายใน 1-3 เดือน</div>
        </details>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="py-20 gradient-ai text-white">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-4xl md:text-6xl font-bold mb-6">
        พร้อมเปลี่ยนองค์กรด้วย AI หรือยัง?
      </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-accent-blue px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl inline-flex items-center justify-center gap-2">
          📞 080-995-5945
        </a>
        <a href="https://line.me/" target="_blank" rel="noopener noreferrer" class="bg-green-500 text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-green-600 transition shadow-xl inline-flex items-center justify-center gap-2">
          💬 เพิ่ม Line
        </a>
      </div>
    </div>
  </section>
</Layout>
