moreminimore-redesign/src/app/(frontend)/services/web-development/page.tsx

'use client'

import { useEffect } from 'react'

export default function WebDevelopmentPage() {
  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 (
    <>
      {/* Schema.org Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "LocalBusiness",
            "name": "MoreminiMore Co.,Ltd.",
            "description": "บริการรับทำเว็บไซต์สำหรับ SME ไทย",
            "telephone": "+668****5945",
            "email": "contact@moreminimore.com",
            "url": "https://www.moreminimore.com/services/web-development",
            "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": ["Web Development", "AI Integration", "SEO Optimization", "GEO Optimization", "Server Hosting"]
          })
        }}
      />

      {/* GEO FAQ Schema */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "FAQPage",
            "mainEntity": [
              {
                "@type": "Question",
                "name": "แก้ไขเว็บเองยากไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค"
                }
              },
              {
                "@type": "Question",
                "name": "มีค่าใช้จ่ายอะไรเพิ่มเติมไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น"
                }
              },
              {
                "@type": "Question",
                "name": "Server ดูแลให้ไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม"
                }
              },
              {
                "@type": "Question",
                "name": "ทำเว็บขายของ (E-commerce) ได้ไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร"
                }
              },
              {
                "@type": "Question",
                "name": "ต้องมีความรู้ทางเทคนิคไหม?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "ไม่จำเป็นเลย เราดูแลทุกอย่างตั้งแต่ต้นจนจบ ตั้งแต่การออกแบบ พัฒนา ไปจนถึงการติดตั้งและส่งมอบ พร้อมทั้งอบรมการใช้งานให้ทีมของคุณสามารถใช้งานระบบได้อย่างมั่นใจ"
                }
              },
              {
                "@type": "Question",
                "name": "GEO คืออะไร?",
                "acceptedAnswer": {
                  "@type": "Answer",
                  "text": "GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย"
                }
              }
            ]
          })
        }}
      />

      {/* Hero Section - Orange Theme */}
      <section id="hero" class="relative overflow-hidden min-h-[50vh] flex items-center">
        <div class="absolute inset-0 bg-gradient-to-br from-orange-300 via-orange-400 to-orange-500">
          <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-orange-200/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-orange-100/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-4xl mx-auto text-center">
            <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-green-400 rounded-full animate-pulse"></span>
              <span class="text-sm font-medium text-white/90">บริการรับทำเว็บไซต์สำหรับ SME ไทย</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">เปลี่ยนแปลงเองได้</span><br/>
              ด้วย AI
            </h1>
            
            <p class="text-lg md:text-xl text-white mb-10 max-w-2xl mx-auto leading-relaxed animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
              เว็บไซต์ที่คุณแก้ไขเองได้ง่าย ๆ ไม่ต้องรอเราทุกครั้ง<br/>
              พร้อม AI ช่วยสร้างเนื้อหาใหม่ ๆ ให้ทันที<br/>
              <span class="text-purple-100 font-medium">+ GEO ติด ChatGPT, Perplexity, AI Search</span>
            </p>
            
            <div class="flex flex-col sm:flex-row gap-4 justify-center 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/20 backdrop-blur-sm text-white border-2 border-white/30 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 gap-6 text-white/80 text-sm">
                <span class="flex items-center gap-2">
                  <svg class="w-4 h-4 text-green-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-green-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-green-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>
      </section>

      {/* Why Choose Us */}
      <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">
            เราสร้างเว็บไซต์ให้คุณสามารถจัดการเองได้ ไม่ต้องพึ่งเราทุกครั้ง
          </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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">แก้ไขเองได้ง่าย</h3>
              <p class="text-gray-600">
                ระบบหลังบ้านใช้งานง่าย เปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเอง ไม่ต้องมีความรู้เทคนิค
              </p>
            </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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">AI ช่วยสร้างเนื้อหา</h3>
              <p class="text-gray-600">
                สั่ง AI ให้เขียนบทความ แก้ไขเนื้อหา เพิ่มสินค้าใหม่ ได้ทันที ไม่ต้องรอคนช่วย
              </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-2 border-purple-200">
              <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 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">GEO ติด AI Search</h3>
              <p class="text-gray-600">
                เว็บไซต์ถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews นอกจากติด Google ยังติด AI ด้วย
              </p>
            </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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">Server คุณภาพสูง</h3>
              <p class="text-gray-600">
                เราดูแล Server ให้ เว็บไซต์โหลดเร็ว ปลอดภัย มีปัญหาน้อย ส่งผลดีต่อ SEO
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* What's Included */}
      <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">
            ทุกเว็บไซต์มาพร้อมให้ครบ ไม่ต้องจ่ายเพิ่ม
          </p>
          
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-gray-50 rounded-xl p-6 text-center">
              <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
                </svg>
              </div>
              <h3 class="font-bold text-gray-900 mb-1">เว็บไซต์</h3>
              <p class="text-sm text-gray-600">พร้อมใช้งาน</p>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 text-center">
              <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                </svg>
              </div>
              <h3 class="font-bold text-gray-900 mb-1">SSL ฟรี</h3>
              <p class="text-sm text-gray-600">ปลอดภัยทุกการเข้าชม</p>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 text-center">
              <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0 3-4.03 3-9s-1.343-9-3-9m-9 9a9 9 0 019-9"></path>
                </svg>
              </div>
              <h3 class="font-bold text-gray-900 mb-1">โดเมน</h3>
              <p class="text-sm text-gray-600">จดให้ได้เลย</p>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 text-center">
              <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="w-6 h-6 text-black" 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="font-bold text-gray-900 mb-1">Analytics</h3>
              <p class="text-sm text-gray-600">ติดตามผู้เข้าชม</p>
            </div>
          </div>
        </div>
      </section>

      {/* Services */}
      <section class="reveal py-20 bg-gray-50">
        <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">
            พัฒนาเว็บไซต์ครบวงจรตามความต้องการ
          </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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">Landing Page</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• ราคาเริ่มต้น 10,000 บาท</li>
                <li>• ดีไซน์ตามสั่ง</li>
                <li>• รองรับ Mobile</li>
                <li>• SEO พื้นฐาน</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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">Corporate Website</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• เว็บแนะนำบริษัท</li>
                <li>• ระบบหลังบ้าน</li>
                <li>• อัปเดตเนื้อหาได้</li>
                <li>• รองรับ AI Content</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-yellow-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
              </div>
              <h3 class="text-xl font-bold mb-3 text-gray-900">E-commerce</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• ตะกร้าสินค้า</li>
                <li>• ชำระเงิน</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 border-2 border-purple-200">
              <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-indigo-600 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">AI Chatbot</h3>
              <ul class="text-gray-600 text-sm space-y-2">
                <li>• ตอบคำถามลูกค้า 24/7</li>
                <li>• เชื่อมต่อกับเว็บไซต์</li>
                <li>• AI อัจฉริยะ</li>
                <li>• วิเคราะห์ข้อมูล</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Target Audience */}
      <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-3 gap-6">
            <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6 text-center border border-orange-200">
              <div class="w-16 h-16 bg-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
              </div>
              <h3 class="text-lg font-bold text-gray-900 mb-2">SME / ธุรกิจขนาดเล็ก</h3>
              <p class="text-sm text-gray-600">ธุรกิจท้องถิ่น ร้านค้าปลีก บริการต่าง ๆ ที่ต้องการเว็บไซต์ในราคาที่เข้าถึงได้</p>
            </div>

            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6 text-center border border-green-200">
              <div class="w-16 h-16 bg-green-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                </svg>
              </div>
              <h3 class="text-lg font-bold text-gray-900 mb-2">ร้านค้าออนไลน์</h3>
              <p class="text-sm text-gray-600">ธุรกิจ E-commerce ที่ต้องการขายสินค้าออนไลน์ พร้อมระบบตะกร้าและชำระเงินครบวงจร</p>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6 text-center border border-blue-200">
              <div class="w-16 h-16 bg-blue-500 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                </svg>
              </div>
              <h3 class="text-lg font-bold text-gray-900 mb-2">บริษัท / องค์กร</h3>
              <p class="text-sm text-gray-600">บริษัทที่ต้องการเว็บไซต์องค์กร เว็บไซต์แนะนำบริษัท หรือเว็บไซต์ในระบบ Intranet</p>
            </div>
          </div>
        </div>
      </section>

      {/* GEO Section */}
      <section class="reveal py-20 bg-gradient-to-r from-purple-500 to-indigo-600">
        <div class="container mx-auto px-4 max-w-5xl">
          <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 class="text-2xl md:text-3xl font-bold mb-4 text-white">
                GEO ติด AI Search - เว็บถูกอ้างอิงโดย ChatGPT, Perplexity, Google AI Overviews
              </h2>
              <p class="text-white/80 mb-6 leading-relaxed">
                GEO (Generative Engine Optimization) คือการปรับแต่งเนื้อหาและโครงสร้างเว็บไซต์ให้ถูกอ้างอิงโดย AI Search Engine 
                ทำให้ธุรกิจของคุณปรากฏในคำตอบของ AI นอกจากจะติด Google ปกติแล้ว ยังติด AI Search อีกด้วย
              </p>
              <ul class="space-y-3 text-white/90">
                <li class="flex items-center gap-3">
                  <svg class="w-5 h-5 text-purple-300 flex-shrink-0" 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>
                  Schema markup ครบ
                </li>
                <li class="flex items-center gap-3">
                  <svg class="w-5 h-5 text-purple-300 flex-shrink-0" 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>
                  เนื้อหาคุณภาพสูง
                </li>
                <li class="flex items-center gap-3">
                  <svg class="w-5 h-5 text-purple-300 flex-shrink-0" 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>
                  ติดทั้ง Google และ AI Search
                </li>
              </ul>
            </div>
            <div>
              <img 
                src="/images/illustrations/geo-ai-search.jpg" 
                alt="GEO ติด AI Search - ChatGPT, Perplexity, Google AI Overviews"
                class="w-full h-auto rounded-2xl shadow-xl"
                loading="lazy"
              />
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <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">แก้ไขเว็บเองยากไหม?</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>ไม่ยากเลย สำหรับ Astro การแก้ไขเนื้อหาจะเน้นการคุยกับ AI ให้ช่วยสร้างและปรับแต่งเนื้อหา ส่วน WordPress มาพร้อมระบบหลังบ้านที่มีหน้าตาการใช้งานง่าย คุณสามารถเปลี่ยนข้อความ รูปภาพ สินค้า ได้ด้วยตัวเองโดยไม่ต้องมีความรู้ทางเทคนิค</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>ค่าบริการ Server และโดเมนจะฟรีในปีแรก และจะมีค่าใช้จ่ายในปีถัดไป ค่าบริการ Server จะขึ้นอยู่กับความซับซ้อนของเว็บไซต์และจำนวนผู้เข้าชม หากเว็บไซต์มีผู้เข้าชมเกิน 100,000 คนต่อเดือน ค่าบริการ Server จะปรับเพิ่มขึ้น</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">Server ดูแลให้ไหม?</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>เราดูแลเรื่อง Server ให้ครบวงจร รวมถึงการปรับจูนระบบให้มีประสิทธิภาพสูงสุด ลูกค้าจะจ่ายค่า Server เพิ่มเฉพาะกรณีที่มีผู้เข้าเว็บใช้งานสูงมาก ระดับ 100,000 คนต่อเดือนขึ้นไป หรือต้องการติดตั้งแอปพิเศษเพิ่มเติม</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">ทำเว็บขายของ (E-commerce) ได้ไหม?</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>ทำได้แน่นอน เราใช้ WordPress เป็นพื้นฐานในการพัฒนาเว็บไซต์ E-commerce พร้อมระบบตะกร้าสินค้า ชำระเงิน ติดตามสินค้า และระบบหลังบ้านจัดการสินค้าครบวงจร</p>
                </div>
              </details>
            </div>

            <div class="bg-white rounded-xl shadow-sm overflow-hidden border-2 border-purple-100">
              <details class="group">
                <summary class="flex items-center justify-between p-6 cursor-pointer list-none">
                  <span class="font-semibold text-gray-900">GEO คืออะไร? ต่างจาก SEO อย่างไร?</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>GEO (Generative Engine Optimization)</strong> คือการปรับแต่งเนื้อหาให้ถูกอ้างอิงโดย AI Search Engine เช่น ChatGPT, Perplexity, Google AI Overviews<br/>
                  <strong>SEO</strong> ทำให้ติด Google ปกติ<br/>
                  <strong>GEO</strong> ทำให้ปรากฏในคำตอบของ AI<br/>
                  เราทำทั้งสองอย่างคู่กัน — เนื้อหาที่เขียนดีด้วย AI จะได้ทั้ง Google และ AI Search</p>
                </div>
              </details>
            </div>
          </div>
        </div>
      </section>

      {/* Related Services */}
      <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 inline-flex items-center gap-2">
              <svg class="w-5 h-5 text-green-600" 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>
              Marketing Automation
            </a>
            <a href="/services/ai-automation" class="bg-white text-gray-700 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition shadow-md inline-flex items-center gap-2">
              <svg class="w-5 h-5 text-purple-600" 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>
              AI Automation
            </a>
          </div>
        </div>
      </section>

      {/* CTA Section - Yellow */}
      <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">
            พร้อมสร้างเว็บไซต์แล้วหรือยัง?
          </h2>
          <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-800">
            ติดต่อเราเพื่อปรึกษาฟรี! เราพร้อมช่วยคุณสร้างเว็บไซต์ที่ตอบโจทย์
          </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: 'web-development' }
  ]
}