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

<Layout title="โปรโมชั่น | moreminimore — เว็บไซต์ฟรี สำหรับ SMEs ไทย">
  <!-- Hero -->
  <section class="relative py-32 bg-gradient-to-br from-primary via-yellow-200 to-primary text-secondary overflow-hidden">
    <div class="absolute inset-0 opacity-20">
      <img src="/images/hero/homepage-ai.png" alt="Promotion" class="w-full h-full object-cover" loading="eager" />
    </div>
    <div class="container mx-auto px-4 relative z-10">
      <div class="max-w-5xl mx-auto text-center">
        <div class="inline-block bg-accent-green text-white px-6 py-2 rounded-full font-bold text-lg mb-6 animate-pulse">🎉 โปรโมชั่นพิเศษ</div>
        <h1 class="text-5xl md:text-7xl font-bold mb-8">เว็บไซต์ฟรี มีจริง!</h1>
        <p class="text-2xl md:text-3xl mb-10 max-w-3xl mx-auto font-bold">
          จ่ายแค่ค่า Server รายปี ก็เป็นเจ้าของเว็บคุณภาพได้
          <br />
          <span class="text-accent-green">พร้อม AI Agents ช่วยทำงานให้รวดเร็ว 10 เท่า</span>
        </p>
        <div class="flex flex-col sm:flex-row gap-5 justify-center">
          <a href="/contact-us" class="bg-secondary text-white px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-800 transition shadow-xl">ปรึกษาฟรีวันนี้</a>
          <a href="/website-development" class="bg-white text-secondary px-8 py-4 rounded-full font-bold text-xl hover:bg-gray-100 transition shadow-xl">ดูรายละเอียด</a>
        </div>
        <div class="mt-8 text-secondary text-base font-bold">✅ ใช้แล้ว 50+ ธุรกิจ</div>
      </div>
    </div>
  </section>

  <!-- What You Get -->
  <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">สิ่งที่คุณจะได้รับ</h2>
      <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
        <div class="text-center p-8 bg-gray-light rounded-2xl">
          <div class="text-6xl mb-6">🎁</div>
          <h3 class="text-2xl font-bold mb-4">ฟรีค่าทำเว็บ</h3>
          <p class="text-gray-600">ไม่เสียค่าทำเว็บล่วงหน้า หลักหมื่น!</p>
        </div>
        <div class="text-center p-8 bg-gray-light rounded-2xl">
          <div class="text-6xl mb-6">💰</div>
          <h3 class="text-2xl font-bold mb-4">จ่ายรายปีเท่านั้น</h3>
          <p class="text-gray-600">จ่ายเฉพาะค่า Server ปีละครั้ง</p>
        </div>
        <div class="text-center p-8 bg-gray-light rounded-2xl">
          <div class="text-6xl mb-6">⚡</div>
          <h3 class="text-2xl font-bold mb-4">ใช้ AI Agents</h3>
          <p class="text-gray-600">งานเร็ว คุณภาพสูง ลดต้นทุน</p>
        </div>
        <div class="text-center p-8 bg-gray-light rounded-2xl">
          <div class="text-6xl mb-6">🤝</div>
          <h3 class="text-2xl font-bold mb-4">ดูแลครบวงจร</h3>
          <p class="text-gray-600">Support หลังส่งมอบงาน</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <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">แพ็กเกจค่า Server</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <!-- Basic -->
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <h3 class="text-2xl font-bold mb-4">Basic</h3>
          <div class="text-5xl font-bold text-secondary mb-2">2,900</div>
          <div class="text-gray-600 mb-6">บาท/ปี</div>
          <ul class="space-y-3 text-gray-700 mb-8 text-left">
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> SSL Certificate</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Email 5 accounts</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Bandwidth 10GB/เดือน</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Support ทางอีเมล</li>
          </ul>
          <a href="/contact-us" class="btn-secondary inline-block">เลือกแพ็กเกจ</a>
        </div>

        <!-- Pro -->
        <div class="bg-white p-8 rounded-2xl shadow-xl text-center border-4 border-primary relative">
          <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-primary text-white px-6 py-2 rounded-full font-bold">แนะนำ</div>
          <h3 class="text-2xl font-bold mb-4">Pro</h3>
          <div class="text-5xl font-bold text-secondary mb-2">4,900</div>
          <div class="text-gray-600 mb-6">บาท/ปี</div>
          <ul class="space-y-3 text-gray-700 mb-8 text-left">
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> ทุกอย่างใน Basic</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Email 20 accounts</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Bandwidth 50GB/เดือน</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Priority Support</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Free Backup รายวัน</li>
          </ul>
          <a href="/contact-us" class="btn-accent inline-block">เลือกแพ็กเกจ</a>
        </div>

        <!-- Business -->
        <div class="bg-white p-8 rounded-2xl shadow-md text-center">
          <h3 class="text-2xl font-bold mb-4">Business</h3>
          <div class="text-5xl font-bold text-secondary mb-2">9,900</div>
          <div class="text-gray-600 mb-6">บาท/ปี</div>
          <ul class="space-y-3 text-gray-700 mb-8 text-left">
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> ทุกอย่างใน Pro</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Email Unlimited</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Bandwidth 100GB/เดือน</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> 24/7 Phone Support</li>
            <li class="flex items-start gap-3"><span class="text-accent-green text-xl">✓</span> Free SSL Wildcard</li>
          </ul>
          <a href="/contact-us" class="btn-secondary inline-block">เลือกแพ็กเกจ</a>
        </div>
      </div>
      <p class="text-center text-gray-600 mt-8 text-lg italic">*ทุกแพ็กเกจ ฟรีค่าทำเว็บ เว็บไซต์ WordPress มืออาชีพ</p>
    </div>
  </section>

  <!-- Why Free -->
  <section class="py-20 bg-white">
    <div class="container mx-auto px-4 max-w-5xl">
      <h2 class="text-4xl font-bold mb-12 text-center">ทำไมเราถึงให้เว็บฟรี?</h2>
      <div class="bg-gradient-to-br from-secondary to-accent-purple text-white p-12 rounded-2xl">
        <div class="prose prose-lg max-w-none text-center">
          <p class="text-xl mb-8">
            moreminimore เชื่อว่า <strong class="text-primary">SMEs ไทยทุกคนควรมีเว็บไซต์คุณภาพ</strong> 
            ไม่ควรให้งบประมาณเป็นอุปสรรคต่อการเติบโตของธุรกิจ
          </p>
          <p class="text-xl mb-8">
            เราใช้ <strong>AI Agents (OpenClaw)</strong> ช่วยพัฒนาเว็บ ทำให้ลดต้นทุนได้มาก 
            และส่งต่อประโยชน์นี้ให้ลูกค้าในรูปแบบ <strong>"เว็บฟรี จ่ายแค่ค่า Server รายปี"</strong>
          </p>
          <div class="grid md:grid-cols-3 gap-8 mt-12">
            <div>
              <div class="text-5xl mb-4">🎯</div>
              <h3 class="text-2xl font-bold mb-2">เข้าถึงได้</h3>
              <p class="text-gray-200">ทุกธุรกิจมีเว็บได้</p>
            </div>
            <div>
              <div class="text-5xl mb-4">⚡</div>
              <h3 class="text-2xl font-bold mb-2">รวดเร็ว</h3>
              <p class="text-gray-200">AI ช่วยทำงานเร็ว 10 เท่า</p>
            </div>
            <div>
              <div class="text-5xl mb-4">🤝</div>
              <h3 class="text-2xl font-bold mb-2">ยั่งยืน</h3>
              <p class="text-gray-200">โมเดลธุรกิจที่ยั่งยืนสำหรับทุกฝ่าย</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- How It Works -->
  <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">3 ขั้นตอนง่ายๆ ได้เว็บฟรี</h2>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="text-center p-8 bg-white rounded-2xl shadow-md">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full gradient-secondary flex items-center justify-center text-4xl font-bold text-white">1</div>
          <h3 class="text-2xl font-bold mb-4">ปรึกษาฟรี</h3>
          <p class="text-gray-600">บอกความต้องการ เราแนะนำโซลูชันที่เหมาะสม</p>
        </div>
        <div class="text-center p-8 bg-white rounded-2xl shadow-md">
          <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">2</div>
          <h3 class="text-2xl font-bold mb-4">พัฒนาเว็บ</h3>
          <p class="text-gray-600">ทีมงาน + AI Agents สร้างเว็บให้ใน 3-5 วัน</p>
        </div>
        <div class="text-center p-8 bg-white rounded-2xl shadow-md">
          <div class="w-20 h-20 mx-auto mb-6 rounded-full bg-accent-green flex items-center justify-center text-4xl font-bold text-white">3</div>
          <h3 class="text-2xl font-bold mb-4">จ่ายรายปี</h3>
          <p class="text-gray-600">จ่ายค่า Server ปีละครั้งเท่านั้น ฟรีค่าทำเว็บ!</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">พร้อมเริ่มหรือยัง?</h2>
      <p class="text-2xl text-gray-100 mb-10 max-w-3xl mx-auto">
        อย่าให้งบประมาณเป็นอุปสรรคต่อการเติบโตของธุรกิจคุณ
        <br />ปรึกษาฟรี ไม่มีค่าใช้จ่ายใดๆ ทั้งสิ้น
      </p>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="https://line.me/" class="bg-[#06C755] 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>
        <a href="tel:0809955945" class="bg-white text-secondary 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">📞 โทรเลย</a>
      </div>
    </div>
  </section>
</Layout>
