---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import FloatingContact from '../components/FloatingContact.astro';
import { productCategories } from '../data/site-config';

// Featured products
const featuredProducts = productCategories.filter(p => 
  ['ppr-elephant', 'hdpe', 'poloplast', 'syler', 'xylent'].includes(p.id)
).slice(0, 6);
---

<BaseLayout title="หน้าแรก" description="บริษัท ดีล พลัส เทค จำกัด - ผู้เชี่ยวชาญด้านระบบท่อและ HVAC">
  <Fragment slot="header">
    <Header />
  </Fragment>
  
  <main>
    <!-- Hero Section -->
    <section class="relative h-[70vh] min-h-[500px] bg-secondary-900">
      <div class="absolute inset-0 bg-gradient-to-r from-secondary-900 via-secondary-900/90 to-secondary-900/60 z-10" />
      <img
        src="/images/2021/03/hdpe_pipe_main.jpg"
        alt="ท่อคุณภาพสูง"
        class="absolute inset-0 w-full h-full object-cover opacity-50"
        loading="eager"
      />
      <div class="relative z-20 container mx-auto px-4 h-full flex items-center">
        <div class="max-w-2xl">
          <span class="inline-block px-4 py-2 bg-primary-600 text-white font-semibold mb-4 rounded">
            ผู้เชี่ยวชาญด้านระบบท่อและ HVAC
          </span>
          <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight">
            วัสดุท่อ อุปกรณ์ HVAC
            <span class="text-primary-400 block">และฉนวนหุ้มท่อ</span>
          </h1>
          <p class="text-lg md:text-xl text-white mb-8">
            จำหน่ายท่อพีพีอาร์ ท่อ HDPE ท่อเหล็ก และอุปกรณ์ระบบท่อคุณภาพสูง
          </p>
          <div class="flex flex-wrap gap-4">
            <a href="/products/" class="btn-primary">ดูสินค้าทั้งหมด</a>
            <a href="/contact-us/" class="btn-outline">ติดต่อเรา</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Featured Products -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="section-title">สินค้าแนะนำ</h2>
          <p class="section-subtitle">คุณภาพมาตรฐานสากล ราคาแข่งขันได้</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {featuredProducts.map((product) => (
            <div class="card">
              <a href={`/products/${product.slug}/`} class="block">
                <div class="aspect-video bg-secondary-100 flex items-center justify-center p-8">
                  <img
                    src="/images/2021/03/hdpe001.jpg"
                    alt={product.name}
                    class="max-h-full max-w-full object-contain"
                    loading="lazy"
                  />
                </div>
                <div class="p-6">
                  <h3 class="text-xl font-bold text-secondary-900 mb-2">{product.name}</h3>
                  <p class="text-secondary-600 text-sm mb-4 line-clamp-2">{product.description}</p>
                  <span class="btn-outline text-sm">ดูรายละเอียด</span>
                </div>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
  
  <Fragment slot="footer">
    <Footer />
  </Fragment>
  
  <FloatingContact />
</BaseLayout>