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

@section('content')
    <section class="relative py-20 mt-12 bg-white">
        <div class="container max-w-7xl mx-auto px-4">
            <!-- 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">บล็อก</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-6">บทความน่าสนใจ</h2>
                <p class="text-gray-600 text-18 max-w-2xl mx-auto">อัพเดทความรู้ด้านบัญชีและภาษี
                    พร้อมเกร็ดความรู้ที่เป็นประโยชน์สำหรับธุรกิจของคุณ</p>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <!-- Blog Cards (Left) -->
                <div class="space-y-6">
                    <!-- Blog Card 1 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner3.jpg') }}"
                                alt="Blog 1" class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">10 มกราคม 2024</span>
                                <span class="text-gray-400">•</span>
                                <span class="text-gray-600 text-sm">ภาษี</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 2 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/photo1.jpg') }}" alt="Blog 2"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">5 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การวางแผนภาษีธุรกิจอย่างชาญฉลาด</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                แนวทางการวางแผนภาษีที่มีประสิทธิภาพสำหรับธุรกิจทุกขนาด</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 3 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Blog 3"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">1 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การบริหารการเงินในยุคดิจิทัล</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                เทคนิคการบริหารการเงินสมัยใหม่สำหรับธุรกิจยุคดิจิทัล</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Vertical Blog Cards (Right) -->
                <div class="space-y-6">
                    <!-- Blog Card 1 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner3.jpg') }}"
                                alt="Blog 1" class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">10 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                อัพเดทกฎหมายภาษีใหม่ปี 2024</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                สรุปการเปลี่ยนแปลงกฎหมายภาษีที่สำคัญที่ผู้ประกอบการควรรู้</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 2 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/photo1.jpg') }}" alt="Blog 2"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">5 มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การวางแผนภาษีธุรกิจอย่างชาญฉลาด</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                แนวทางการวางแผนภาษีที่มีประสิทธิภาพสำหรับธุรกิจทุกขนาด</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>

                    <!-- Blog Card 3 -->
                    <div class="group bg-white rounded-xl overflow-hidden flex transition-all duration-300"
                        data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="w-1/3 relative overflow-hidden">
                            <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Blog 3"
                                class="w-full h-full object-cover">
                            <div
                                class="absolute inset-0 bg-gradient-to-r from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                        </div>
                        <div class="w-2/3 p-6">
                            <div class="flex items-center gap-4 mb-2">
                                <span class="text-sky-600 text-sm font-medium">1 มกราคม 2024</span>
                                <span class="text-gray-400">•</span>
                                <span class="text-gray-600 text-sm">การเงิน</span>
                            </div>
                            <h3
                                class="text-16 lg:text-[19px] xl:text-xl font-bold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                                การบริหารการเงินในยุคดิจิทัล</h3>
                            <p class="text-gray-600 text-14 lg:text-[15px] xl:text-base line-clamp-2 mb-4">
                                เทคนิคการบริหารการเงินสมัยใหม่สำหรับธุรกิจยุคดิจิทัล</p>
                                <a href="/blog-detail"
                                class="inline-flex items-center text-sky-600 font-medium text-14 lg:text-[15px] xl:text-base">
                                อ่านเพิ่มเติม
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform group-hover:translate-x-2"></span>
                            </a>
                        </div>
                    </div>
                </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