moreminimore-redesign/src/app/(frontend)/services/ai-automation/page.tsx

'use client'

import { useEffect } from 'react'

export default function AIAutomationPage() {
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add('visible')
          }
        })
      },
      { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }
    )

    document.querySelectorAll('.reveal, .reveal-left, .reveal-right').forEach((el) => {
      observer.observe(el)
    })

    return () => observer.disconnect()
  }, [])

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "LocalBusiness",
            "name": "MoreminiMore Co.,Ltd.",
            "description": "บริการ AI Automation สำหรับ SME ไทย ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร",
            "telephone": "+668****5945",
            "email": "contact@moreminimore.com",
            "url": "https://www.moreminimore.com/services/ai-automation",
            "address": {
              "@type": "PostalAddress",
              "streetAddress": "53 หมู่ 1 ต.บ้านแพ้ว",
              "addressLocality": "บ้านแพ้ว",
              "addressRegion": "สมุทรสาคร",
              "postalCode": "74120",
              "addressCountry": "TH"
            },
            "geo": {
              "@type": "GeoCoordinates",
              "latitude": 13.5497,
              "longitude": 100.4167
            },
            "openingHours": "Mo-Fr 09:00-18:00",
            "priceRange": "$$",
            "serviceType": ["AI Automation", "Data Integration", "AI Analytics", "Enterprise Chatbot"]
          })
        }}
      />

      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
              {
                "@type": "Question",
                "name": "AI Automation ต่างจาก Marketing Automation อย่างไร?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "AI Automation เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน Marketing Automation เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email"
                }
              },
              {
                "@type": "Question",
                "name": "สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล"
                }
              },
              {
                "@type": "Question",
                "name": "ต้องมีความรู้ด้านเทคนิคไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ไม่ต้องมีความรู้ด้านเทคนิคเลย! เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ"
                }
              },
              {
                "@type": "Question",
                "name": "ใช้เวลาพัฒนานานเท่าไหร่?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น"
                }
              }
            ]
          })
        }}
      />

      <section id="hero" class="relative overflow-hidden min-h-[60vh] flex items-center">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-purple-600 to-purple-800">
          <div class="absolute top-20 left-10 w-72 h-72 bg-white/20 rounded-full blur-3xl animate-float-1"></div>
          <div class="absolute bottom-20 right-10 w-96 h-96 bg-indigo-300/20 rounded-full blur-3xl animate-float-2"></div>
          <div class="absolute top-1/3 left-1/4 w-48 h-48 bg-white/10 rounded-full blur-2xl animate-float-3"></div>
          <div class="absolute bottom-1/3 right-1/4 w-64 h-64 bg-purple-200/20 rounded-full blur-2xl animate-float-1" style={{ animationDelay: '0.75s' }}></div>
        </div>
        
        <div class="absolute inset-0 overflow-hidden pointer-events-none">
          <div class="absolute top-1/4 left-[10%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-1"></div>
          <div class="absolute top-1/3 left-[80%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2"></div>
          <div class="absolute top-2/3 left-[20%] w-4 h-4 bg-white/20 rounded-full animate-float-dot-3"></div>
          <div class="absolute bottom-1/4 left-[70%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-1" style={{ animationDelay: '1s' }}></div>
          <div class="absolute top-1/2 left-[40%] w-2 h-2 bg-white/20 rounded-full animate-float-dot-2" style={{ animationDelay: '0.5s' }}></div>
          <div class="absolute bottom-1/3 left-[85%] w-3 h-3 bg-white/20 rounded-full animate-float-dot-3" style={{ animationDelay: '1.5s' }}></div>
        </div>
        
        <div class="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(white 1px, transparent 1px), linear-gradient(90deg, white 1px, transparent 1px)', backgroundSize: '50px 50px' }}></div>
        
        <div class="container mx-auto px-4 relative z-10 py-16">
          <div class="max-w-6xl mx-auto">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
              <div class="text-center lg:text-left">
                <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full mb-6 animate-fade-in">
                  <span class="w-2 h-2 bg-indigo-300 rounded-full animate-pulse"></span>
                  <span class="text-sm font-medium text-white">ระบบเชื่อมข้อมูลและวิเคราะห์ด้วย AI</span>
                </div>
                
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white leading-tight animate-fade-in-up" style={{ animationDelay: '0.1s' }}>
                  เชื่อมข้อมูล<br/>
                  <span class="text-white">วิเคราะห์ด้วย AI</span><br/>
                  สร้างรายงานอัตโนมัติ
                </h1>
                
                <p class="text-lg md:text-xl text-white/90 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
                  ระบบเชื่อมข้อมูลจากหลายแอปเข้าด้วยกัน วิเคราะห์ข้อมูล<br/>
                  สร้างรายงาน แจ้งเตือนอัตโนมัติ พร้อม Chatbot ภายในองค์กร
                </p>
                
                <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center animate-fade-in-up" style={{ animationDelay: '0.3s' }}>
                  <a href="tel:0809955945" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
                    <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
                      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
                    </svg>
                    โทรหาเรา
                  </a>
                  <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-black/30 backdrop-blur-sm text-white border-2 border-white/40 px-8 py-4 rounded-full font-bold text-lg hover:bg-white hover:text-black transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl flex items-center gap-3">
                    <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
                    สอบถามรายละเอียด
                  </a>
                </div>
                
                <div class="mt-10 pt-6 border-t border-white/20 animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
                  <div class="flex flex-wrap justify-center lg:justify-start gap-6 text-white text-sm">
                    <span class="flex items-center gap-2">
                      <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                      ปรึกษาฟรี
                    </span>
                    <span class="flex items-center gap-2">
                      <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                      เชื่อมทุกระบบ
                    </span>
                    <span class="flex items-center gap-2">
                      <svg class="w-4 h-4 text-indigo-300" fill="currentColor" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                      วิเคราะห์อัจฉริยะ
                    </span>
                  </div>
                </div>
              </div>
              
              <div class="reveal scale">
                <img 
                  src="/images/hero/ai-automation-hero.jpg" 
                  alt="ระบบ AI Automation สำหรับธุรกิจ - เชื่อมข้อมูลและวิเคราะห์ด้วย AI"
                  class="w-full h-auto rounded-2xl shadow-2xl"
                  loading="eager"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-20 bg-gradient-to-b from-gray-50 to-white">
        <div class="container mx-auto px-4 max-w-6xl">
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
            บริการของเรา
          </h2>
          <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
            AI Automation ครบวงจรสำหรับธุรกิจไทย
          </p>
          
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">เขียนแอป AI เฉพาะ</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• พัฒนา Application ตามความต้องการ</li>
                <li>• ระบบ AI เฉพาะทางธุรกิจ</li>
                <li>• รวม AI เข้ากับระบบเดิม</li>
              </ul>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมข้อมูลหลายแอป</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• รวมข้อมูลจากทุกแพลตฟอร์ม</li>
                <li>• Sync ข้อมูลอัตโนมัติ</li>
                <li>• รวมศูนย์ข้อมูลองค์กร</li>
              </ul>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์ → รายงาน</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• AI วิเคราะห์ข้อมูลอัจฉริยะ</li>
                <li>• สร้างรายงานอัตโนมัติ</li>
                <li>• แจ้งเตือนและส่งต่อข้อมูล</li>
              </ul>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">Chatbot ภายในองค์กร</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• ตอบคำถามพนักงาน 24/7</li>
                <li>• ค้นหาข้อมูลจากเอกสาร</li>
                <li>• ช่วยงานฝ่าย HR และ IT</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-20 bg-white">
        <div class="container mx-auto px-4 max-w-6xl">
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
            ทำไมต้องเลือกเรา?
          </h2>
          <p class="text-lg text-gray-600 text-center mb-16 max-w-2xl mx-auto">
            เรามีความเชี่ยวชาญในการเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI
          </p>
          
          <div class="grid md:grid-cols-3 gap-8">
            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">เชื่อมต่อทุกระบบ</h3>
              <p class="text-gray-600">
                เชื่อมข้อมูลจากทุกแอปที่คุณใช้ ไม่ว่าจะเป็น ERP, CRM, ระบบบัญชี, POS หรือโปรแกรมอื่น ๆ เข้าด้วยกัน
              </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">วิเคราะห์อัจฉริยะ</h3>
              <p class="text-gray-600">
                AI วิเคราะห์ข้อมูลทั้งหมดและหา insights ที่เป็นประโยชน์ต่อธุรกิจ พร้อมแนะนำวิธีปรับปรุง
              </p>
            </div>

            <div class="group bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100">
              <div class="w-16 h-16 bg-indigo-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">แจ้งเตือนอัตโนมัติ</h3>
              <p class="text-gray-600">
                ระบบแจ้งเตือนอัตโนมัติเมื่อมีสิ่งสำคัญ เช่น ยอดขายต่ำกว่ากำหนด สินค้าใกล้หมด หรือต้องติดตามลูกค้า
              </p>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-20 bg-gray-50">
        <div class="container mx-auto px-4 max-w-4xl">
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
            ตัวอย่างการใช้งาน
          </h2>
          <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
            กรณีศึกษาการใช้ AI Automation ในธุรกิจจริง
          </p>
          
          <div class="grid md:grid-cols-2 gap-6">
            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูลจาก Shopee, Lazada, JD สร้างรายงานยอดขายรวม วิเคราะห์สินค้าขายดี แจ้งเตือนเมื่อสินค้าใกล้หมด พร้อม Chatbot ตอบคำถามลูกค้า</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">โรงพยาบาล/คลินิก</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล HIS, LIS, RIS วิเคราะห์ผลตรวจแลป สร้างรายงานสรุปสำหรับแพทย์ แจ้งเตือนผลผิดปกติ และนัดหมายซ้ำอัตโนมัติ</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">ร้านอาหาร/เชน</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล POS ทุกสาขา รวมยอดขายอัตโนมัติ วิเคราะห์ยอดขายแต่ละเมนู สั่งซื้อวัตถุดิบอัตโนมัติตามคลัง</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">บริษัทขนส่ง</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล Tracking, Fleet Management, Billing วิเคราะห์เส้นทางที่ดีที่สุด คำนวณค่าใช้จ่ายอัตโนมัติ แจ้งเตือนรถซ่อม</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">บริษัทประกัน</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูลเคลม, การขาย, CRM วิเคราะห์ความเสี่ยง สร้างรายงานประจำเดือน แจ้งเตือนต่ออายุกรมชีนิ</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">โรงแรม/รีสอร์ท</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล Booking, PMS, POS วิเคราะห์อัตราการเข้าพัก รายได้ต่อห้อง แจ้งเตือนรีวิวลบ และติดตามลูกค้า VIP</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">บริษัทก่อสร้าง</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูลประมูลงาน, ค่าใช้จ่ายโครงการ, การจ่ายเงิน วิเคราะห์กำไรขาดทุนแต่ละโครงการ แจ้งเตือนการจ่ายเงิน</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">สถาบันการศึกษา</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูลนักเรียน, ค่าเทอม, การเรียน วิเคราะห์อัตราการคงอยู่ สร้างรายงานผลการเรียน แจ้งเตือนนักเรียนหยุดเรียน</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">ธุรกิจอสังหาริมทรัพย์</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล Lead, การดูโปรเจกต์, การปิดการขาย วิเคราะห์ Lead Scoring แจ้งเตือนติดตามลูกค้า สร้างรายงานประจำเดือน</p>
            </div>

            <div class="bg-white rounded-xl p-6 shadow-md">
              <h3 class="font-bold text-gray-900 mb-2">โรงงานผลิต</h3>
              <p class="text-gray-600 text-sm">เชื่อมข้อมูล ERP, MES, QC วิเคราะห์ประสิทธิภาพการผลิต ตรวจสอบคุณภาพอัตโนมัติ แจ้งเตือนเมื่อเครื่องจักรผิดปกติ</p>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-20 bg-white">
        <div class="container mx-auto px-4 max-w-4xl">
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
            ขั้นตอนการทำงาน
          </h2>
          <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
            กระบวนการทำงานที่ชัดเจน
          </p>
          
          <div class="grid md:grid-cols-4 gap-4">
            <div class="text-center">
              <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">1</div>
              <h3 class="font-bold text-gray-900 mb-2">วิเคราะห์</h3>
              <p class="text-sm text-gray-600">วิเคราะห์ระบบที่มีและความต้องการ</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">2</div>
              <h3 class="font-bold text-gray-900 mb-2">ออกแบบ</h3>
              <p class="text-sm text-gray-600">ออกแบบ Flow และระบบเชื่อมต่อ</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">3</div>
              <h3 class="font-bold text-gray-900 mb-2">พัฒนา</h3>
              <p class="text-sm text-gray-600">พัฒนาและเชื่อมต่อระบบ</p>
            </div>
            <div class="text-center">
              <div class="w-16 h-16 bg-indigo-500 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold text-white">4</div>
              <h3 class="font-bold text-gray-900 mb-2">ส่งมอบ</h3>
              <p class="text-sm text-gray-600">สอนการใช้งานและดูแลต่อเนื่อง</p>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-20 bg-gray-50">
        <div class="container mx-auto px-4 max-w-4xl">
          <h2 class="text-3xl md:text-4xl font-bold mb-4 text-center text-gray-900">
            คำถามที่พบบ่อย
          </h2>
          <p class="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
            คำถามที่ลูกค้ามักถามเกี่ยวกับบริการ
          </p>
          
          <div class="space-y-4">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <details class="group">
                <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
                  <span class="font-semibold text-gray-900">AI Automation ต่างจาก Marketing Automation อย่างไร?</span>
                  <span class="transition group-open:rotate-180">
                    <svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                  </span>
                </summary>
                <div class="text-gray-600 px-6 pb-6">
                  <p><strong>AI Automation</strong> เน้นการทำ automation ภายในองค์กร เช่น เชื่อมข้อมูล, วิเคราะห์, รายงาน, Chatbot ภายใน<br/>
                  <strong>Marketing Automation</strong> เน้นการทำ automation ภายนอกองค์กร เช่น การตลาดผ่าน Website, Social Media, Ads, Email</p>
                </div>
              </details>
            </div>

            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <details class="group">
                <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
                  <span class="font-semibold text-gray-900">สามารถเชื่อมต่อกับระบบที่มีอยู่แล้วได้ไหม?</span>
                  <span class="transition group-open:rotate-180">
                    <svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                  </span>
                </summary>
                <div class="text-gray-600 px-6 pb-6">
                  <p>ได้! เราสามารถเชื่อมต่อกับระบบที่คุณมีอยู่แล้ว เช่น ERP, CRM, POS, ระบบบัญชี หรือโปรแกรมอื่น ๆ ผ่าน API หรือการสกัดข้อมูล</p>
                </div>
              </details>
            </div>

            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <details class="group">
                <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
                  <span class="font-semibold text-gray-900">ต้องมีความรู้ด้านเทคนิคไหม?</span>
                  <span class="transition group-open:rotate-180">
                    <svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                  </span>
                </summary>
                <div class="text-gray-600 px-6 pb-6">
                  <p><strong>ไม่ต้องมีความรู้ด้านเทคนิคเลย!</strong> เราดูแลทุกอย่างตั้งแต่ต้นจนจบ คุณเพียงแค่ใช้งานระบบตามปกติ</p>
                </div>
              </details>
            </div>

            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <details class="group">
                <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
                  <span class="font-semibold text-gray-900">ใช้เวลาพัฒนานานเท่าไหร่?</span>
                  <span class="transition group-open:rotate-180">
                    <svg fill="none" height="24" shapeRendering="geometricPrecision" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                  </span>
                </summary>
                <div class="text-gray-600 px-6 pb-6">
                  <p>ระยะเวลาขึ้นอยู่กับความซับซ้อนของระบบ ตั้งแต่ 2-4 สัปดาห์สำหรับระบบพื้นฐาน ไปจนถึง 2-3 เดือนสำหรับระบบที่ซับซ้อน เราจะแจ้งระยะเวลาที่ชัดเจนตั้งแต่เริ่มต้น</p>
                </div>
              </details>
            </div>
          </div>
        </div>
      </section>

      <section class="reveal py-12 bg-white border-t border-gray-100">
        <div class="container mx-auto px-4 max-w-4xl text-center">
          <h3 class="text-lg font-bold mb-6 text-gray-900">บริการที่เกี่ยวข้อง</h3>
          <div class="flex flex-wrap justify-center gap-4">
            <a href="/services/marketing-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Marketing Automation</a>
            <a href="/services/web-development" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">พัฒนาเว็บไซต์</a>
            <a href="/services/tech-consult" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md">Tech Consult</a>
          </div>
        </div>
      </section>

      <section id="cta" class="reveal py-20 bg-[#fed400]">
        <div class="container mx-auto px-4 text-center">
          <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black">
            พร้อมเชื่อมระบบและวิเคราะห์ข้อมูลด้วย AI แล้วหรือยัง?
          </h2>
          <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
            ติดต่อเราเพื่อคุยกันและให้คำปรึกษาฟรี! เราพร้อมช่วยคุณสร้างระบบ AI Automation ที่ตอบโจทย์
          </p>
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="tel:0809955945" class="group bg-black text-[#fed400] px-8 py-4 rounded-full font-bold text-lg hover:bg-black/80 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
              <svg class="w-5 h-5 group-hover:animate-bounce" fill="currentColor" viewBox="0 0 24 24">
                <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
              </svg>
              080-995-5945
            </a>
            <a href="https://line.me/ti/p/~@539hdlul" target="_blank" rel="noopener noreferrer" class="group bg-white text-black px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition-all duration-300 hover:scale-105 shadow-2xl hover:shadow-3xl inline-flex items-center justify-center gap-3">
              <img src="/icons/social/line.svg" alt="LINE" class="w-5 h-5 group-hover:animate-bounce" />
              สอบถามรายละเอียด
            </a>
          </div>
        </div>
      </section>
    </>
  )
}

export function generateStaticParams() {
  return [
    { slug: 'ai-automation' }
  ]
}