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

const categories = [
  { name: 'ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/ppr-pipe_000C.jpg' },
  { name: 'ท่อ PPR ตราช้าง', slug: '/ท่อพีพีอาร์ตราช้าง', image: '/images/products-cropped/ppr-scg.jpg' },
  { name: 'PP-R Poloplast', slug: '/pp-r-pp-rct-poloplast', image: '/images/poloplast/POLOPLAST_001.png' },
  { name: 'ท่อ HDPE', slug: '/ท่อhdpe', image: '/images/products-cropped/hdpe001.png' },
  { name: 'ท่อ UPVC', slug: '/ท่อ-upvc', image: '/images/products-cropped/upvc-pipe_000C.jpg' },
  { name: 'ท่อ Syler', slug: '/ท่อไซเลอร์', image: '/images/products-cropped/syler-pipe-cold-water.jpg' },
  { name: 'ท่อ PVC', slug: '/ท่อและข้อต่อpvc', image: '/images/products-cropped/pvc-standard-01.jpg' },
  { name: 'ท่อ XYLENT', slug: '/ท่อระบายน้ำ-3-ชั้น-ไซเลนท', image: '/images/products-cropped/XYLENT_001.png' },
  { name: 'เครื่องเชื่อม HDPE', slug: '/เครื่องเชื่อม-hdpe', image: '/images/HDPE-welding-crop.jpg' },
  { name: 'เครื่องเชื่อม PPR', slug: '/เครื่องเชื่อมท่อพีพีอา', image: '/images/products-misc/ppr-welding-machine-main.jpg' },
  { name: 'Pipe Coupling', slug: '/pipe-coupling', image: '/images/pipe-coupling/BG-SMC02.png' },
  { name: 'DUKELARRSEN', slug: '/dukelarrsen', image: '/images/dukelarrsen/dukelarrsen-43.jpg' },
  { name: 'เม็กกรู๊ฟ คับปลิ้ง', slug: '/เม็กกรู๊ฟ-คับปลิ้ง', image: '/images/products-misc/MECH_001.jpg' },
  { name: 'วาล์ว', slug: '/วาล์ว-valve', image: '/images/products-cropped/valve_000C.jpg' },
  { name: 'ปั๊มน้ำ', slug: '/water-pump', image: '/images/products-cropped/water-pump_000C.jpg' },
  { name: 'ระบบกรองน้ำ', slug: '/water-treatment', image: '/images/products-cropped/water-treatment_000C.jpg' },
  { name: 'หัวจ่ายแอร์', slug: '/หัวจ่ายแอร์-ball-jet', image: '/images/products-raw/ball-jet/main-ball-jet.jpg' },
  { name: 'กริลแอร์', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg' },
  { name: 'DURGO วาล์วเติมอากาศ', slug: '/durgo-avvs', image: '/images/products-cropped/durgo_000C.jpg' },
  { name: 'อุปกรณ์ดับเพลิง', slug: '/อุปกรณ์ดับเพลิง', image: '/images/products-cropped/extinguishers_000C.jpg' },
  { name: 'Realflex', slug: '/realflex', image: '/images/products-cropped/realflex_000C.jpg' },
  { name: 'ฉนวนหุ้มท่อ', slug: '/ฉนวนหุ้มท่อ-pipe-insulation', image: '/images/thermobreak/thermobreak-solarblock.png' },
  { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/thermobreak/thermobreak-solarblock.png' },
  { name: 'รั้วเทวดา', slug: '/รั้วเทวดา', image: '/images/products-raw/tevada/TEVADA_001-987x1024.png' },
  { name: 'ระบบรั้วไวน์แมน', slug: '/ระบบรั้วไวน์แมน-vineman-2', image: '/images/products-cropped/vineman_000C.jpg' },
];

const featuredProducts = [
  { name: 'ไทยพีพีอาร์', slug: '/ท่อ-ppr-thai-ppr', image: '/images/products-cropped/ppr-pipe_000C.jpg', description: 'ท่อ PPR คุณภาพสูง มาตรฐาน สำหรับงานประปาและอุตสาหกรรม' },
  { name: 'กริลแอร์', slug: '/grilles', image: '/images/products-cropped/grilles_000C.jpg', description: 'กริลแอร์พลาสติก ระบายอากาศดี ทนทาน เหมาะสำหรับงานระบบปรับอากาศ' },
  { name: 'เทอร์โมเบรค', slug: '/เทอร์โมเบรค-thermobreak', image: '/images/thermobreak/thermobreak-solarblock.png', description: 'ฉนวนหุ้มท่อกันความร้อน ประหยัดพลังงาน' },
];
---

<BaseLayout title="หน้าแรก">
  <Header slot="header" />
  
  <!-- Hero Section with AI-Generated Industrial Image -->
  <section class="relative min-h-[600px] lg:min-h-[700px] flex items-center overflow-hidden">
    <!-- Background Image -->
    <div class="absolute inset-0 z-0">
      <img 
        src="/images/hero-industrial-1.jpg" 
        alt="Modern Industrial Warehouse" 
        class="w-full h-full object-cover"
        loading="eager"
        fetchpriority="high"
      />
      <!-- Dark Overlay for Text Readability -->
      <div class="absolute inset-0 bg-gradient-to-r from-steel-900/90 via-steel-900/70 to-steel-900/50"></div>
      <!-- Industrial Pattern Overlay -->
      <div class="absolute inset-0 opacity-10" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;0.4&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
    </div>
    
    <!-- Hero Content -->
    <div class="container-custom relative z-10 py-16">
      <div class="max-w-3xl">
        <div class="stagger-container">
          <div class="stagger-item" data-delay="1">
            <span class="inline-flex items-center gap-2 px-4 py-1.5 bg-accent-500/90 text-white rounded-full text-sm font-medium mb-6">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="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" />
              </svg>
              ผู้เชี่ยวชาญระบบน้ำ
            </span>
          </div>
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight stagger-item" data-delay="2">
            ระบบน้ำ คุณภาพสูง<br/>
            <span class="text-accent-400">ราคาโรงงาน</span>
          </h1>
          <p class="text-lg sm:text-xl text-white/90 mb-8 leading-relaxed max-w-2xl stagger-item" data-delay="3">
            บริษัท ดีล พลัส เทค จำกัด เราเป็นผู้เชี่ยวชาญด้านระบบน้ำ ให้คำแนะนำและจำหน่ายท่อ PPR ตราช้าง ท่อพีพีอาร์ ท่อ HDPE รั้วตาข่าย คุณภาพสูง ราคาถูก
          </p>
          <div class="flex flex-wrap gap-4 stagger-item" data-delay="4">
            <a href="/all-products" class="inline-flex items-center gap-2 bg-accent-500 hover:bg-accent-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5">
              ดูสินค้าทั้งหมด
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </a>
            <a href="/contact-us" class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-200 border border-white/30 backdrop-blur-sm">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
              ติดต่อเรา
            </a>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
      <svg class="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
      </svg>
    </div>
  </section>
  
  <section class="bg-gray-100 py-12">
    <div class="container-custom">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 text-center">
        <div>
          <div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">10+</div>
          <div class="text-sm sm:text-base text-steel-600 uppercase tracking-wider mt-2">ปีประสบการณ์</div>
        </div>
        <div>
          <div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">1000+</div>
          <div class="text-sm sm:text-base text-steel-600 uppercase tracking-wider mt-2">โปรเจคต์สำเร็จ</div>
        </div>
        <div>
          <div class="text-4xl sm:text-5xl font-bold text-primary-600 tracking-tight">500+</div>
          <div class="text-sm sm:text-base text-steel-600 uppercase tracking-wider mt-2">สินค้าในคลัง</div>
        </div>
      </div>
    </div>
  </section>
  
  <section class="section bg-white">
    <div class="container-custom">
      <div class="text-center mb-12">
        <span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
          สินค้าแนะนำ
        </span>
        <h2 class="section-title">สินค้ายอดนิยม</h2>
        <p class="section-subtitle mx-auto mt-4">สินค้าคุณภาพสูงจาก ดีล พลัส เทค</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 stagger-container">
        {featuredProducts.map((product, index) => (
          <a href={product.slug} class="card-hover group overflow-hidden block stagger-item" data-delay={index + 1}>
            <div class="relative h-72 overflow-hidden img-zoom">
              <img src={product.image} alt={product.name} class="w-full h-full object-cover" width="400" height="288" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
              <div class="absolute inset-0 bg-gradient-to-t from-steel-900/80 via-transparent to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-6">
                <h3 class="text-lg font-bold text-white">{product.name}</h3>
              </div>
            </div>
            <div class="p-6">
              <p class="text-steel-600 mb-4">{product.description}</p>
              <span class="inline-flex items-center text-primary-600 font-semibold group-hover:text-primary-700 link-animate">
                ดูรายละเอียด
                <svg class="w-4 h-4 ml-2 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
              </span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
  
  <section class="section gradient-mesh">
    <div class="container-custom">
      <div class="text-center mb-12">
        <span class="inline-block px-4 py-1.5 bg-primary-100 text-primary-700 rounded-full text-sm font-medium mb-4">
          หมวดหมู่สินค้า
        </span>
        <h2 class="section-title">สินค้าทั้งหมด</h2>
        <p class="section-subtitle mx-auto mt-4">เราจำหน่ายสินค้าระบบน้ำคุณภาพสูง ครบวงจร</p>
      </div>
      
      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6 stagger-container">
        {categories.map((cat, index) => (
          <a href={cat.slug} class="product-card group stagger-item" data-delay={((index % 8) + 1)}>
            <div class="product-card-image">
              <img src={cat.image} alt={cat.name} width="300" height="300" loading="lazy" decoding="async" onerror="this.src='/images/logo/dealplustech-logo.png'" />
            </div>
            <div class="p-4">
              <h3 class="text-base font-bold text-steel-800 group-hover:text-primary-600 transition-colors text-center">{cat.name}</h3>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
  
  <section class="section-dark">
    <div class="container-custom">
      <div class="text-center mb-12">
        <span class="inline-block px-4 py-1.5 bg-white/20 text-white rounded-full text-sm font-medium mb-4">
          ทำไมเลือกเรา
        </span>
        <h2 class="section-title text-white">ความมุ่งมั่นของเรา</h2>
        <p class="section-subtitle mx-auto mt-4 text-white/70">ต่อคุณภาพและบริการที่ดีที่สุด</p>
      </div>
      
      <div class="grid md:grid-cols-3 gap-8 stagger-container">
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="1">
          <div class="w-16 h-16 bg-white 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-xl font-bold text-white mb-4">คุณภาพสูง</h3>
          <p class="text-white/80">สินค้าคุณภาพมาตรฐาน มั่นใจได้ในความทนทาน</p>
        </div>
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="2">
          <div class="w-16 h-16 bg-white 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-xl font-bold text-white mb-4">ราคาโรงงาน</h3>
          <p class="text-white/80">ราคาแข่งขันได้ คุ้มค่าต่อการลงทุน</p>
        </div>
        <div class="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center border border-white/20 stagger-item" data-delay="3">
          <div class="w-16 h-16 bg-white 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-xl font-bold text-white mb-4">จัดส่งรวดเร็ว</h3>
          <p class="text-white/80">จัดส่งทันใจ ส่งฟรี กทม. ปริมณฑล</p>
        </div>
      </div>
    </div>
  </section>
  
  <section class="cta-gradient py-20">
    <div class="container-custom text-center">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
        พร้อมให้คำปรึกษาฟรี
      </h2>
      <p class="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
        ติดต่อเราวันนี้เพื่อรับคำแนะนำเกี่ยวกับระบบน้ำที่เหมาะสมกับโปรเจคต์ของคุณ
      </p>
      <div class="flex flex-wrap justify-center gap-4">
        <a href="tel:0905551415" class="btn-white">
          โทร 090-555-1415
        </a>
        <a href="https://line.me/ti/p/~JPPSELECTION" target="_blank" class="btn-white flex items-center gap-2">
          <span>แชท</span>
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.344.282-.629.627-.629h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.629.63-.629.345 0 .63.284.63.629v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.629.627-.629.349 0 .631.284.631.629v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.629.63-.629.348 0 .63.284.63.629v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
        </a>
      </div>
    </div>
  </section>
  
  <Footer slot="footer" />
</BaseLayout>