---
import BaseLayout from '@/layouts/BaseLayout.astro';
import Header from '@/components/common/Header.astro';
import Footer from '@/components/common/Footer.astro';
---

<BaseLayout title="หน้าแรก">
  <Header slot="header" />
  
  <!-- Hero Section -->
  <section class="relative gradient-bg section overflow-hidden">
    <div class="container-custom">
      <div class="grid lg:grid-cols-2 gap-12 items-center">
        <div class="animate-fade-in">
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-secondary-900 mb-6 leading-tight">
            ผู้เชี่ยวชาญระบบน้ำ<br/>
            <span class="gradient-text">คุณภาพสูง ราคาโรงงาน</span>
          </h1>
          <p class="text-xl text-secondary-600 mb-8 leading-relaxed">
            บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE Thai PPR รั้วตาข่าย คุณภาพสูง ราคาถูก
          </p>
          <div class="flex flex-wrap gap-4">
            <a href="/product" class="btn-primary text-lg px-8 py-4">ดูสินค้าทั้งหมด</a>
            <a href="/contact-us" class="btn-secondary text-lg px-8 py-4">ติดต่อเรา</a>
          </div>
          <div class="flex items-center space-x-8 mt-12">
            <div>
              <div class="text-3xl font-bold text-primary-600">10+</div>
              <div class="text-secondary-600 text-base">ปีประสบการณ์</div>
            </div>
            <div>
              <div class="text-3xl font-bold text-primary-600">1000+</div>
              <div class="text-secondary-600 text-base">โปรเจคต์</div>
            </div>
            <div>
              <div class="text-3xl font-bold text-primary-600">500+</div>
              <div class="text-secondary-600 text-base">สินค้า</div>
            </div>
          </div>
        </div>
        <div class="relative animate-slide-up">
          <div class="absolute inset-0 bg-gradient-to-br from-primary-500/20 to-accent-500/20 rounded-3xl blur-3xl"></div>
          <img src="/images/logo/logox2.png" alt="Deal Plus Tech Products" class="relative w-full h-auto rounded-3xl shadow-2xl" />
        </div>
      </div>
    </div>
  </section>
  
  <!-- Featured Categories -->
  <section class="section bg-white">
    <div class="container-custom">
      <div class="text-center mb-16">
        <h2 class="section-title">หมวดหมู่สินค้ายอดนิยม</h2>
        <p class="section-subtitle mx-auto">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
      </div>
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <a href="/ท่อ-ppr-thai-ppr" class="product-card group">
          <div class="product-card-image">
            <img src="/images/products/ppr-pipe/ppr0001.jpg" alt="ท่อ PPR" />
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PPR</h3>
            <p class="text-secondary-600 text-base mt-2">ท่อพีพีอาร์ ตราช้าง</p>
          </div>
        </a>
        <a href="/ท่อhdpe" class="product-card group">
          <div class="product-card-image">
            <img src="/images/products/hdpe-pipe/hdpe001.jpg" alt="ท่อ HDPE" />
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ HDPE</h3>
            <p class="text-secondary-600 text-base mt-2">ท่อโพลีเอทิลีน</p>
          </div>
        </a>
        <a href="/ท่อและข้อต่อpvc" class="product-card group">
          <div class="product-card-image">
            <img src="/images/products/pvc-pipe/pvc001.jpg" alt="ท่อ PVC" />
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">ท่อ PVC</h3>
            <p class="text-secondary-600 text-base mt-2">ท่อและข้อต่อพีวีซี</p>
          </div>
        </a>
        <a href="/วาล์ว-valve" class="product-card group">
          <div class="product-card-image">
            <img src="/images/products/valve/valve001.jpg" alt="วาล์ว" />
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-secondary-900 group-hover:text-primary-600 transition-colors">วาล์ว</h3>
            <p class="text-secondary-600 text-base mt-2">วาล์วน้ำทุกประเภท</p>
          </div>
        </a>
      </div>
    </div>
  </section>
  
  <!-- Why Choose Us -->
  <section class="section gradient-bg">
    <div class="container-custom">
      <div class="text-center mb-16">
        <h2 class="section-title">ทำไมต้องเลือกเรา</h2>
        <p class="section-subtitle mx-auto">ความมุ่งมั่นของเราต่อคุณภาพและบริการ</p>
      </div>
      <div class="grid md:grid-cols-3 gap-8">
        <div class="card p-8 text-center animate-on-scroll">
          <div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-secondary-900 mb-4">คุณภาพสูง</h3>
          <p class="text-secondary-600 text-base">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
        </div>
        <div class="card p-8 text-center animate-on-scroll">
          <div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-secondary-900 mb-4">ราคาโรงงาน</h3>
          <p class="text-secondary-600 text-base">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
        </div>
        <div class="card p-8 text-center animate-on-scroll">
          <div class="w-16 h-16 bg-primary-100 rounded-2xl flex items-center justify-center mx-auto mb-6">
            <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <h3 class="text-2xl font-bold text-secondary-900 mb-4">จัดส่งรวดเร็ว</h3>
          <p class="text-secondary-600 text-base">จัดส่งทันใจ ส่งฟรี กทม. และปริมณฑล</p>
        </div>
      </div>
    </div>
  </section>
  
  <Footer slot="footer" />
</BaseLayout>

<script>
  // Intersection Observer for scroll animations
  const observer = new IntersectionObserver(
    entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
        }
      });
    },
    { threshold: 0.1 }
  );
  
  document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
</script>
