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

@section('content')
    <!-- About Us Section -->
    <section class="pt-[120px] pb-10 lg:pb-16 relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0">
            <div
                class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1519972064555-542444e71b54')] bg-cover bg-fixed opacity-5">
            </div>
        </div>

        <div class="container mx-auto px-4 relative">
            <div class="text-center mb-16">
                <div class="text-center mb-10">
                    <h2 class="text-4xl font-bold text-[#bb9555]">เมนูอาหาร</h2>
                    <div class="w-24 h-0.5 bg-[#bb9555] mx-auto mt-4"></div>
                </div>
            </div>
        </div>

        <div class="container max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 tn:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <!-- Card 1 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food1.jpg') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                พรีเมี่ยมบีฟ เนื้อบดเบอร์เกอร์ 200 กรัม</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">เนื้อวัวคัดพิเศษ 100%
                                หมักด้วยเครื่องเทศลับเฉพาะ เสิร์ฟพร้อมชีสและผักสดกรอบ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿259</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 2 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food2.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                พิซซ่าซีฟู้ด</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">อาหารทะเลสดใหม่ กุ้ง หอย ปู ปลา
                                บนแป้งบางกรอบ ราดด้วยซอสสูตรพิเศษ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿399</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 3 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food3.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                ซูชิพรีเมียม</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">ปลาแซลมอนสดจากญี่ปุ่น
                                คัดพิเศษเกรดพรีเมียม หอมนุ่มละมุนลิ้น</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿459</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 4 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food4.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                สเต็กเนื้อวากิว</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">เนื้อวากิวเกรด A5
                                นำเข้าจากญี่ปุ่น
                                ย่างในอุณหภูมิที่เหมาะสม เสิร์ฟพร้อมซอสพิเศษ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿1,299</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 1 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food1.jpg') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                พรีเมี่ยมบีฟ เนื้อบดเบอร์เกอร์ 200 กรัม</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">เนื้อวัวคัดพิเศษ 100%
                                หมักด้วยเครื่องเทศลับเฉพาะ เสิร์ฟพร้อมชีสและผักสดกรอบ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿259</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 2 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food2.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                พิซซ่าซีฟู้ด</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">อาหารทะเลสดใหม่ กุ้ง หอย ปู ปลา
                                บนแป้งบางกรอบ ราดด้วยซอสสูตรพิเศษ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿399</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 3 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food3.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                ซูชิพรีเมียม</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">ปลาแซลมอนสดจากญี่ปุ่น
                                คัดพิเศษเกรดพรีเมียม หอมนุ่มละมุนลิ้น</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿459</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>

                <!-- Card 4 -->
                <a href="product-detail">
                    <div
                        class="group relative bg-white border border-gray-100 hover:border-[#bb9555] transition-colors duration-300 flex flex-col h-full">
                        <div class="h-64 overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/food4.png') }}"
                                class="w-full h-full object-contain transform transition-all duration-700">
                        </div>
                        <div class="p-6 flex flex-col flex-1">
                            <h3
                                class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-[#bb9555] transition-colors truncate">
                                สเต็กเนื้อวากิว</h3>
                            <p class="text-14 sm:text-base text-gray-600 line-clamp-2 pt-3">เนื้อวากิวเกรด A5
                                นำเข้าจากญี่ปุ่น
                                ย่างในอุณหภูมิที่เหมาะสม เสิร์ฟพร้อมซอสพิเศษ</p>
                            <div class="mt-auto pt-4">
                                <div class="flex items-end gap-2 mb-4">
                                    <span class="text-lg sm:text-xl font-bold text-[#bb9555]">฿1,299</span>
                                </div>
                                <button
                                    class="w-full py-3 bg-[#bb9555] text-white transition-all duration-300 flex items-center justify-center gap-2 group/btn">
                                    <span class="text-base">สั่งเลย</span>
                                    <span
                                        class="icon-[tabler--arrow-right] size-5 transform group-hover/btn:translate-x-1 transition-transform"></span>
                                </button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>


        <!-- Pagination Section -->
        <div class="container mx-auto px-4 mt-12 relative z-10">
            <div class="flex justify-center">
                <nav class="flex items-center gap-2">
                    <a href="#" class="px-4 py-2 border border-[#bb9555] bg-[#bb9555] text-white">1</a>
                    <a href="#"
                        class="px-4 py-2 border border-gray-200 hover:border-[#bb9555] hover:text-[#bb9555] transition-colors">2</a>
                    <a href="#"
                        class="px-4 py-2 border border-gray-200 hover:border-[#bb9555] hover:text-[#bb9555] transition-colors">3</a>
                </nav>
            </div>
        </div>
    </section>
@endsection