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

@section('content')
    <div class="full-carousel-wrapper ">
        <div class="full-carousel-banner group">
            <x-frontend::plugin.splidecarousel slideName='splide-demo'>
                <x-slot:slideList>
                    <x-frontend::plugin.splidecarousel.image
                        slideSource='https://www.docuphase.com/hubfs/paper-accounting.jpg' slideUrl='' slideDescription=''
                        class='full-screen-slide'>
                        </x-frontend>
                        <x-frontend::plugin.splidecarousel.video
                            slideSource='https://videos.pexels.com/video-files/3195444/3195444-uhd_2560_1440_25fps.mp4'
                            slideCover='https://cdn.corporatefinanceinstitute.com/assets/accounting.jpeg' slideDescription=''
                            class='full-screen-slide'>
                            </x-frontend>
                            <x-frontend::plugin.splidecarousel.youtube
                                slideSource='https://www.youtube.com/watch?v=Vs52kbeF090' slideDescription=''
                                class='full-screen-slide'>
                                </x-frontend>
                </x-slot>
                </x-frontend>
        </div>
    </div>

    <!-- Features Section with Floating Cards -->
    <section id="section-1"
        class="py-10 lg:py-16 relative overflow-hidden bg-gradient-to-br from-gray-50 via-white to-gray-50">
        <div class="container mx-auto px-4 relative">
            <!-- Section Header -->
            <div class="text-center mb-10" data-aos="zoom-in">
                <h1 class="text-5xl md:text-7xl font-bold text-gray-900 mb-8">
                    นวัตกรรมใหม่<br />
                    <span class="font-light">แห่งการให้บริการ</span>
                </h1>
                <p class="text-gray-600 text-xl max-w-3xl mx-auto">ยกระดับธุรกิจของคุณด้วยบริการที่ล้ำสมัย
                    พร้อมเทคโนโลยีที่ก้าวล้ำ</p>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div
                    class="group h-[310px] lg:h-[380px] flex flex-col p-6 bg-white border border-gray-100 rounded-lg hover:border-sky-100 hover:shadow-md transition-all duration-300">
                    <a href="/service-detail">
                        <div class="relative w-full aspect-[4/3] mb-6 overflow-hidden rounded-lg">
                            <img src="https://images.unsplash.com/photo-1556155092-490a1ba16284?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="บริการจัดทำบัญชี"
                                class="w-full h-full 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>
                            <span
                                class="icon-[tabler--calculator] absolute bottom-4 right-4 text-white size-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                            จัดทำบัญชี</h3>
                        <p class="text-gray-600 mb-4">บริการจัดทำบัญชีครบวงจร ถูกต้องตามมาตรฐานการบัญชี</p>
                        <div class="mt-auto">
                            <a href="/service-detail"
                                class="inline-flex items-center gap-2 text-sky-600 hover:text-sky-700 transition-colors">
                                <span>ดูรายละเอียด</span>
                                <span
                                    class="icon-[tabler--arrow-right] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                            </a>
                        </div>
                    </a>
                </div>

                <div
                    class="group h-[310px] lg:h-[380px]  flex flex-col p-6 bg-white border border-gray-100 rounded-lg hover:border-sky-100 hover:shadow-md transition-all duration-300">
                    <a href="/service-detail">
                        <div class="relative w-full aspect-[4/3] mb-6 overflow-hidden rounded-lg">
                            <img src="https://images.unsplash.com/photo-1709715357696-3c80fde2948d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mjl8fGFjY291bnRpbmd8ZW58MHwwfDB8fHwy"
                                alt="บริการวางแผนภาษี"
                                class="w-full h-full 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>
                            <span
                                class="icon-[tabler--chart-pie] absolute bottom-4 right-4 text-white size-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                            วางแผนภาษี</h3>
                        <p class="text-gray-600 mb-4">วางแผนภาษีอย่างมืออาชีพ เพื่อประโยชน์สูงสุดของธุรกิจ</p>
                        <div class="mt-auto">
                            <a href="/service-detail"
                                class="inline-flex items-center gap-2 text-sky-600 hover:text-sky-700 transition-colors">
                                <span>ดูรายละเอียด</span>
                                <span
                                    class="icon-[tabler--arrow-right] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                            </a>
                        </div>
                    </a>
                </div>

                <div
                    class="group h-[310px] lg:h-[380px]  flex flex-col p-6 bg-white border border-gray-100 rounded-lg hover:border-sky-100 hover:shadow-md transition-all duration-300">
                    <a href="/service-detail">
                        <div class="relative w-full aspect-[4/3] mb-6 overflow-hidden rounded-lg">
                            <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&h=600"
                                alt="บริการที่ปรึกษาธุรกิจ"
                                class="w-full h-full 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>
                            <span
                                class="icon-[tabler--users] absolute bottom-4 right-4 text-white size-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                            ที่ปรึกษาธุรกิจ</h3>
                        <p class="text-gray-600 mb-4">ให้คำปรึกษาด้านการวางแผนธุรกิจและกลยุทธ์การพัฒนา</p>
                        <div class="mt-auto">
                            <a href="/service-detail"
                                class="inline-flex items-center gap-2 text-sky-600 hover:text-sky-700 transition-colors">
                                <span>ดูรายละเอียด</span>
                                <span
                                    class="icon-[tabler--arrow-right] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                            </a>
                        </div>
                    </a>
                </div>

                {{-- <div
                    class="group h-[310px] lg:h-[380px]  flex flex-col p-6 bg-white border border-gray-100 rounded-lg hover:border-sky-100 hover:shadow-md transition-all duration-300">
                    <div class="relative w-full aspect-[4/3] mb-6 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?q=80&w=800&h=600"
                            alt="บริการวางแผนการเงิน"
                            class="w-full h-full 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>
                        <span
                            class="icon-[tabler--chart-dots] absolute bottom-4 right-4 text-white size-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                        วางแผนการเงิน</h3>
                    <p class="text-gray-600 mb-4">บริการวางแผนการเงินและการลงทุนอย่างมืออาชีพ เพื่อการเติบโตที่ยั่งยืน</p>
                    <div class="mt-auto">
                        <a href="/service-detail"
                            class="inline-flex items-center gap-2 text-sky-600 hover:text-sky-700 transition-colors">
                            <span>ดูรายละเอียด</span>
                            <span
                                class="icon-[tabler--arrow-right] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div>

                <div
                    class="group h-[310px] lg:h-[380px]  flex flex-col p-6 bg-white border border-gray-100 rounded-lg hover:border-sky-100 hover:shadow-md transition-all duration-300">
                    <div class="relative w-full aspect-[4/3] mb-6 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=800&h=600"
                            alt="บริการจดทะเบียนธุรกิจ"
                            class="w-full h-full 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>
                        <span
                            class="icon-[tabler--building] absolute bottom-4 right-4 text-white size-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-sky-600 transition-colors">
                        จดทะเบียนธุรกิจ</h3>
                    <p class="text-gray-600 mb-4">บริการจดทะเบียนธุรกิจทุกประเภทแบบครบวงจร</p>
                    <div class="mt-auto">
                        <a href="/service-detail"
                            class="inline-flex items-center gap-2 text-sky-600 hover:text-sky-700 transition-colors">
                            <span>ดูรายละเอียด</span>
                            <span
                                class="icon-[tabler--arrow-right] size-5 transform group-hover:translate-x-1 transition-transform"></span>
                        </a>
                    </div>
                </div> --}}
            </div>
            <div class="text-center mt-12">
                <a href="/service"
                    class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-gradient-to-r from-sky-600 to-sky-400 text-white font-medium hover:shadow-lg hover:shadow-sky-200/50 transition-all">
                    <span>ดูบริการเพิ่มเติม</span>
                    <span class="icon-[tabler--arrow-right]"></span>
                </a>
            </div>
        </div>
    </section>




    <section class="py-10 lg:py-16 relative overflow-hidden">
        <div class="container mx-auto px-4 relative">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <!-- Left Content -->
                <div class="space-y-8">
                    <div>
                        <h2 class="text-4xl font-bold text-gray-900 mb-6">บริการครบวงจร<br>เพื่อธุรกิจของคุณ</h2>
                        <p class="text-gray-600 text-18">เรามุ่งมั่นให้บริการด้านบัญชีและภาษีที่ครอบคลุมทุกความต้องการ
                            พร้อมระบบที่ทันสมัยและทีมงานมืออาชีพ</p>
                    </div>

                    <div class="space-y-6">
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--chart-pie-filled] text-sky-500 size-6 mt-1"></span>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">วิเคราะห์ธุรกิจเชิงลึก</h3>
                                <p class="text-gray-600 text-18">วิเคราะห์ข้อมูลทางการเงินเพื่อช่วยในการตัดสินใจทางธุรกิจ
                                </p>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--report-money] text-sky-500 size-6 mt-1"></span>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">รายงานทางการเงิน</h3>
                                <p class="text-gray-600 text-18">จัดทำรายงานที่ถูกต้อง ครบถ้วน ตามมาตรฐานบัญชี</p>
                            </div>
                        </div>

                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--tax] text-sky-500 size-6 mt-1"></span>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-900 mb-2">วางแผนภาษี</h3>
                                <p class="text-gray-600 text-18">วางแผนภาษีอย่างมีประสิทธิภาพ ถูกต้องตามกฎหมาย</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Image -->
                <div class="relative">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="group relative bg-white rounded-2xl shadow-md overflow-hidden">
                            <div class="aspect-w-16 aspect-h-9">
                                <img src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c"
                                    alt="Accounting Service" class="object-cover w-full h-full">
                            </div>
                            <div
                                class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class="absolute bottom-0 p-6 text-white">
                                    <h3 class="text-2xl font-bold mb-2">บริการบัญชี</h3>
                                    <p class="text-gray-200 text-18">ครบวงจรด้านการทำบัญชี การเงิน และภาษี
                                        พร้อมให้คำปรึกษาธุรกิจ</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>




    <!-- 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">
                <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-2xl 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-2xl 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-2xl 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 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"> มกราคม 2024</span>
                            </div>
                            <h3
                                class="text-2xl 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>

            <!-- View All Button -->
            <div class="text-center mt-12">
                <a href="/blog"
                    class="inline-flex items-center gap-2 px-8 py-3 rounded-xl bg-gradient-to-r from-sky-600 to-sky-400 text-white font-medium hover:shadow-lg hover:shadow-sky-200/50 transition-all">
                    <span>ดูบทความทั้งหมด</span>
                    <span class="icon-[tabler--arrow-right]"></span>
                </a>
            </div>
        </div>
    </section>
@endsection