@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">
                <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 class="container max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Blog Card 1 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog1.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            10 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            เคล็ดลับการทำอาหารให้อร่อยเหมือนเชฟมืออาชีพ
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            เรียนรู้เทคนิคการทำอาหารจากเชฟมืออาชีพ ที่จะช่วยยกระดับฝีมือการทำอาหารของคุณให้อร่อยน่าทานยิ่งขึ้น
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>
        
                <!-- Blog Card 2 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog2.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            5 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            สูตรอาหารยอดนิยมประจำเดือน
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            รวมสูตรอาหารยอดนิยมที่ลูกค้าชื่นชอบมากที่สุดในเดือนนี้ พร้อมวิธีทำที่ทำตามได้ง่ายๆ
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>
        
                <!-- Blog Card 3 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog3.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            1 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            เทรนด์อาหารมาแรงปี 2024
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            อัพเดทเทรนด์อาหารมาแรงที่กำลังเป็นที่นิยมในปี 2024 พร้อมแนะนำเมนูที่ไม่ควรพลาด
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>

                <!-- Blog Card 1 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog1.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            10 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            เคล็ดลับการทำอาหารให้อร่อยเหมือนเชฟมืออาชีพ
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            เรียนรู้เทคนิคการทำอาหารจากเชฟมืออาชีพ ที่จะช่วยยกระดับฝีมือการทำอาหารของคุณให้อร่อยน่าทานยิ่งขึ้น
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>
        
                <!-- Blog Card 2 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog2.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            5 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            สูตรอาหารยอดนิยมประจำเดือน
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            รวมสูตรอาหารยอดนิยมที่ลูกค้าชื่นชอบมากที่สุดในเดือนนี้ พร้อมวิธีทำที่ทำตามได้ง่ายๆ
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>
        
                <!-- Blog Card 3 -->
                <div class="relative group h-[400px] overflow-hidden">
                    <img src="{{ Module::asset('frontend:img/foodblog3.jpg') }}"
                        class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/50 to-transparent"></div>
                    <div class="absolute bottom-0 p-6 space-y-3">
                        <span class="inline-block px-3 py-1 bg-[#bb9555] text-white text-sm font-medium rounded-full">
                            1 มกราคม 2024
                        </span>
                        <h3 class="text-2xl font-bold text-white group-hover:text-[#bb9555] transition-colors line-clamp-1">
                            เทรนด์อาหารมาแรงปี 2024
                        </h3>
                        <p class="text-gray-300 line-clamp-2">
                            อัพเดทเทรนด์อาหารมาแรงที่กำลังเป็นที่นิยมในปี 2024 พร้อมแนะนำเมนูที่ไม่ควรพลาด
                        </p>
                        <a href="/blog-detail" class="inline-flex items-center text-[#bb9555] hover:text-[#bb9555] transition-colors">
                            <span>อ่านเพิ่มเติม</span>
                            <span class="icon-[tabler--arrow-right] size-5 ml-1 group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>
            </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