---
import Layout from '../layouts/Layout.astro';
import Header from '../components/layout/Header';
import Footer from '../components/layout/Footer';
import ProductCard from '../components/product/ProductCard.astro';
import CartDrawer from '../components/cart/CartDrawer';
import CartBadge from '../components/cart/CartBadge';

// Fetch featured products
const response = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/products?select=*&featured=eq.true&status=eq.active&limit=8`, {
  headers: {
    'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
  }
});
const featuredProducts = await response.json();

// Fetch categories
const categoriesRes = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/categories?select=*&isnull=parent_id&order=name.asc`, {
  headers: {
    'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
  }
});
const categories = await categoriesRes.json();

// Fetch new arrivals
const newArrivalsRes = await fetch(`${import.meta.env.PUBLIC_SUPABASE_URL}/rest/v1/products?select=*&status=eq.active&order=created_at.desc&limit=8`, {
  headers: {
    'apikey': import.meta.env.PUBLIC_SUPABASE_ANON_KEY
  }
});
const newArrivals = await newArrivalsRes.json();
---

<Layout title="ยินดีต้อนรับสู่ร้านของเรา">
  <Header />
  
  <!-- Hero Section -->
  <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
    <div class="container mx-auto px-4 text-center">
      <h1 class="text-4xl md:text-5xl font-bold mb-4">
        สินค้าคุณภาพดี ราคาถูกใจ
      </h1>
      <p class="text-xl mb-8 text-blue-100 max-w-2xl mx-auto">
        รวบรวมสินค้าดีๆ จากร้านค้าทั่วประเทศไทย พร้อมจัดส่งฟรี!
      </p>
      <div class="flex gap-4 justify-center">
        <a href="/products" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
          ช้อปเลย
        </a>
        <a href="/vendors" class="border-2 border-white text-white px-8 py-3 rounded-lg font-medium hover:bg-white/10 transition-colors">
          ดูร้านค้า
        </a>
      </div>
    </div>
  </section>

  <!-- Categories -->
  {categories.length > 0 && (
    <section class="py-12 bg-white">
      <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold mb-8 text-center">หมวดหมู่สินค้า</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
          {categories.map(category => (
            <a href={`/products?category=${category.id}`} class="bg-gray-50 rounded-xl p-4 text-center hover:shadow-lg hover:bg-blue-50 transition-all duration-300">
              <div class="w-16 h-16 mx-auto mb-3 bg-blue-100 rounded-full flex items-center justify-center">
                <span class="text-2xl">{category.icon || '📦'}</span>
              </div>
              <p class="font-medium text-gray-800">{category.name}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- Featured Products -->
  {featuredProducts.length > 0 && (
    <section class="py-12">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h2 class="text-2xl font-bold">สินค้าแนะนำ</h2>
          <a href="/products" class="text-blue-600 hover:text-blue-800 font-medium">
            ดูทั้งหมด →
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {featuredProducts.map((product, index) => (
            <ProductCard product={product} index={index} />
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- New Arrivals -->
  {newArrivals.length > 0 && (
    <section class="py-12 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="flex justify-between items-center mb-8">
          <h2 class="text-2xl font-bold">สินค้าใหม่ล่าสุด</h2>
          <a href="/products?sort=newest" class="text-blue-600 hover:text-blue-800 font-medium">
            ดูทั้งหมด →
          </a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {newArrivals.map((product, index) => (
            <ProductCard product={product} index={index} />
          ))}
        </div>
      </div>
    </section>
  )}

  <!-- Features -->
  <section class="py-16 bg-white">
    <div class="container mx-auto px-4">
      <div class="grid md:grid-cols-3 gap-8 text-center">
        <div class="p-6">
          <div class="w-20 h-20 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-2">จัดส่งฟรี</h3>
          <p class="text-gray-600">สั่งซื้อตั้งแต่ 500 บาท จัดส่งฟรีทั่วประเทศ</p>
        </div>
        <div class="p-6">
          <div class="w-20 h-20 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-green-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 mb-2">สินค้าคุณภาพ</h3>
          <p class="text-gray-600">ตรวจสอบคุณภาพก่อนส่งทุกชิ้น ให้คุณมั่นใจในสินค้าที่ได้รับ</p>
        </div>
        <div class="p-6">
          <div class="w-20 h-20 mx-auto mb-4 bg-purple-100 rounded-full flex items-center justify-center">
            <svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
            </svg>
          </div>
          <h3 class="text-xl font-bold mb-2">ติดต่อง่าย</h3>
          <p class="text-gray-600">พร้อมตอบคำถาม 24 ชั่วโมง ผ่านแชทและโทรศัพท์</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
    <div class="container mx-auto px-4 text-center">
      <h2 class="text-3xl font-bold mb-4">พร้อมเริ่มช้อปออนไลน์หรือยัง?</h2>
      <p class="text-xl mb-8 text-blue-100">สมัครสมาชิกวันนี้ รับส่วนลดพิเศษ 10% สำหรับสั่งซื้อครั้งแรก!</p>
      <a href="/register" class="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors">
        สมัครสมาชิกฟรี
      </a>
    </div>
  </section>

  <Footer />
  <CartDrawer client:load />
  <CartBadge client:load />
</Layout>