<script setup lang="ts">
import ProductCard from "~/components/ui/ProductCard.vue";

const products = [
  {
    title: "Minimal Chair",
    price: "$120",
    image:
      "https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop",
  },
  {
    title: "Modern Lamp",
    price: "$89",
    image:
      "https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?q=80&w=1200&auto=format&fit=crop",
  },
  {
    title: "Wood Table",
    price: "$250",
    image:
      "https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?q=80&w=1200&auto=format&fit=crop",
  },
];
</script>

<template>
  <div class="bg-gray-50 text-gray-900">

    <main>
      <section class="relative overflow-hidden">
        <div
          class="container mx-auto grid items-center gap-10 px-4 py-24 md:grid-cols-2"
        >
          <div>
            <span
              class="mb-4 inline-flex rounded-full border px-4 py-2 text-sm font-medium"
            >
              New Collection 2026
            </span>

            <h1 class="mb-6 text-5xl font-bold leading-tight md:text-6xl">
              Build Your Dream Shopping Experience
            </h1>

            <p class="mb-8 text-lg text-gray-600">
              Discover premium products with modern design and best quality for
              your lifestyle.
            </p>

            <div class="flex gap-4">
              <UButton size="xl"> Shop Now </UButton>

              <UButton size="xl" color="neutral" variant="outline">
                Learn More
              </UButton>
            </div>
          </div>

          <div class="relative">
            <img
              src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?q=80&w=1200&auto=format&fit=crop"
              alt="Hero"
              class="rounded-3xl shadow-2xl"
            />
          </div>
        </div>
      </section>

      <section id="products" class="container mx-auto px-4 py-24">
        <div class="mb-12 flex items-end justify-between">
          <div>
            <p
              class="mb-2 text-sm font-semibold uppercase tracking-widest text-primary"
            >
              Featured Products
            </p>

            <h2 class="text-4xl font-bold">Best Seller Products</h2>
          </div>

          <UButton color="neutral" variant="outline"> View All </UButton>
        </div>

        <div class="grid gap-8 md:grid-cols-3">
          <ProductCard
            v-for="(product, index) in products"
            :key="index"
            :title="product.title"
            :price="product.price"
            :image="product.image"
          />
        </div>
      </section>
    </main>

  </div>
</template>
