@extends('frontend::layouts.master')

@section('content')
    <section class="bg-gray-50">
        <div class="relative text-center py-10 lg:py-16 overflow-hidden">
            <h1 class="text-9xl font-black text-gray-100/10 tracking-wider z-10 relative">
                OUR PRODUCTS
            </h1>
            <div class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full z-10 relative">
                <h2 class="text-6xl font-bold text-primary-600">
                    Our Products
                </h2>
                <p class="mt-4 text-xl text-gray-600">
                    Discover Our Product Range
                </p>
            </div>
            <div
                class="absolute bottom-10 left-1/2 -translate-x-1/2 text-[120px] font-black text-white tracking-[0.2em] z-0">
                PRODUCTS
            </div>
        </div>

        <div class="pb-10 lg:pb-16">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 tn:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6">
                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1608248597279-f99d160bfcbc"
                        title="Essential Oils Bundle" detail="Pure therapeutic-grade essential oils for aromatherapy"
                        price="฿49.99" url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1598452963314-b09f397a5c48"
                        title="Herbal Tea Collection" detail="Organic herbal tea blend for relaxation and wellness"
                        price="฿39.99" url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19"
                        title="Natural Face Mask" detail="Clay-based facial mask with natural ingredients" price="฿29.99"
                        url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1620916566398-39f1143ab7be"
                        title="Wellness Starter Kit" detail="Complete wellness package for beginners" price="฿89.99"
                        url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1608248597279-f99d160bfcbc"
                        title="Essential Oils Bundle" detail="Pure therapeutic-grade essential oils for aromatherapy"
                        price="฿49.99" url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1598452963314-b09f397a5c48"
                        title="Herbal Tea Collection" detail="Organic herbal tea blend for relaxation and wellness"
                        price="฿39.99" url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1601049541289-9b1b7bbbfe19"
                        title="Natural Face Mask" detail="Clay-based facial mask with natural ingredients" price="฿29.99"
                        url="/product-detail">
                    </x-frontend::card.product_card>

                    <x-frontend::card.product_card img="https://images.unsplash.com/photo-1620916566398-39f1143ab7be"
                        title="Wellness Starter Kit" detail="Complete wellness package for beginners" price="฿89.99"
                        url="/product-detail">
                    </x-frontend::card.product_card>
                </div>
            </div>
            <div class="pt-10">
                <div class="flex justify-center">
                    <nav class="flex items-center gap-4">
                        <a href="#"
                            class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">
                            &#x2190;
                        </a>
                        <div class="flex items-center gap-2">
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-white bg-emerald-500 border-2 border-emerald-500 rounded-full">1</a>
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">2</a>
                            <a href="#"
                                class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">3</a>
                        </div>
                        <a href="#"
                            class="px-4 py-2 text-lg font-medium text-emerald-500 bg-white border-2 border-emerald-500 rounded-full hover:bg-emerald-500 hover:text-white transition duration-300 ease-in-out">
                            &#x2192;
                        </a>
                    </nav>
                </div>
            </div>
        </div>


    </section>
@endsection