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

@section('content')
    <!-- Blog Section -->
    <section class="py-10 lg:py-16 relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute -top-8 -left-8 w-32 h-32 bg-sky-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
            <div
                class="absolute bottom-0 right-0 w-24 h-24 bg-sky-300 rounded-full blur-3xl opacity-20 animate-pulse delay-1000">
            </div>
            <div
                class="absolute top-1/2 left-1/3 w-28 h-28 bg-sky-100 rounded-full blur-3xl opacity-25 animate-pulse delay-500">
            </div>
        </div>

        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-10 lg:mb-16">
                <span class="inline-block px-4 py-2 bg-sky-100 text-sky-800 rounded-full text-sm mb-4">Our Blog</span>
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">บทความน่าสนใจ</h2>
                <p class="text-gray-600 text-18 max-w-2xl mx-auto">อัพเดทความรู้ด้านบัญชีและภาษี
                    พร้อมเกร็ดความรู้ที่เป็นประโยชน์สำหรับธุรกิจของคุณ</p>
            </div>

            <!-- Blog Grid -->
            <div class="grid grid-cols-1 xs:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
                <!-- Blog Item 1 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?ixlib=rb-4.0.3"
                                alt="Blog 1"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">15 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                เทคนิคการจัดการบัญชีให้มีประสิทธิภาพ</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">เรียนรู้วิธีการจัดการบัญชีอย่างมืออาชีพ
                                เพื่อประสิทธิภาพสูงสุดในการดำเนินธุรกิจ การจัดการเอกสาร และการวางแผนการเงินอย่างเป็นระบบ</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Blog Item 2 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3"
                                alt="Blog 2"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">10 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้
                                พร้อมแนวทางการปรับตัวให้สอดคล้องกับข้อกำหนดใหม่</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Blog Item 3 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3"
                                alt="Blog 3"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">5 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                5
                                กลยุทธ์การเติบโตทางธุรกิจ</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">แนวทางการพัฒนาธุรกิจให้เติบโตอย่างยั่งยืนในยุคดิจิทัล
                                การปรับตัวให้ทันกับเทคโนโลยี และการสร้างความได้เปรียบในการแข่งขัน</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Blog Item 1 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?ixlib=rb-4.0.3"
                                alt="Blog 1"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">4 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                เทคนิคการจัดการบัญชีให้มีประสิทธิภาพ</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">เรียนรู้วิธีการจัดการบัญชีอย่างมืออาชีพ
                                เพื่อประสิทธิภาพสูงสุดในการดำเนินธุรกิจ การจัดการเอกสาร และการวางแผนการเงินอย่างเป็นระบบ</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Blog Item 2 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3"
                                alt="Blog 2"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">3 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้
                                พร้อมแนวทางการปรับตัวให้สอดคล้องกับข้อกำหนดใหม่</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Blog Item 3 -->
                <div
                    class="group bg-white rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-500 flex flex-col h-full">
                    <a href="/blog-detail">
                        <div class="relative overflow-hidden">
                            <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3"
                                alt="Blog 3"
                                class="w-full h-64 object-cover transform group-hover:scale-110 transition-transform duration-500">
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            </div>
                        </div>
                        <div class="p-8 flex flex-col flex-grow">
                            <div class="flex items-center mb-4">
                                <span class="text-gray-500 text-16">2 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-xl font-bold text-gray-900 mb-3 group-hover:text-sky-600 transition-colors line-clamp-1">
                                5
                                กลยุทธ์การเติบโตทางธุรกิจ</h3>
                            <p class="text-gray-600 mb-6 line-clamp-3">
                                แนวทางการพัฒนาธุรกิจให้เติบโตอย่างยั่งยืนในยุคดิจิทัล
                                การปรับตัวให้ทันกับเทคโนโลยี และการสร้างความได้เปรียบในการแข่งขัน</p>
                            <div class="mt-auto">
                                <a href="/blog-detail"
                                    class="inline-flex items-center text-sky-600 font-medium group-hover:text-sky-700">
                                    <span>อ่านเพิ่มเติม</span>
                                    <span
                                        class="icon-[tabler--arrow-right] ml-2 group-hover:translate-x-2 transition-transform"></span>
                                </a>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Pagination -->
    <div class="flex justify-center pb-10">
        <nav class="flex items-center gap-2">
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-300 hover:border-sky-600 hover:text-sky-600 transition-colors">
                <span class="icon-[tabler--chevron-left] size-5"></span>
            </a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-300 hover:border-sky-600 hover:text-sky-600 transition-colors">1</a>
            <a href="#" class="w-10 h-10 flex items-center justify-center rounded-lg bg-sky-600 text-white">2</a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-300 hover:border-sky-600 hover:text-sky-600 transition-colors">3</a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-300 hover:border-sky-600 hover:text-sky-600 transition-colors">4</a>
            <a href="#"
                class="w-10 h-10 flex items-center justify-center rounded-lg border border-gray-300 hover:border-sky-600 hover:text-sky-600 transition-colors">
                <span class="icon-[tabler--chevron-right] size-5"></span>
            </a>
        </nav>
    </div>
@endsection