@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">
            <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-4">บริการของเรา</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-18">
                    เรามีบริการครบวงจรเพื่อช่วยให้ธุรกิจของคุณเติบโตอย่างมั่นคง</p>
            </div>

            <div class="grid grid-cols-1 tn:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                <!-- Card 1 -->
                <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                data-aos="fade-up" data-aos-duration="1000" data-aos-delay="50">
                <div class="h-full relative">
                    <img src="{{ Module::asset('frontend:img/banner3.jpg') }}" alt="Accounting Service"
                        class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                    <div class="p-6 absolute bottom-0 w-full flex flex-col justify-between">
                        <div>
                            <h3 class="text-2xl font-bold text-white mb-4">บริการจัดทำบัญชี</h3>
                            <p class="text-gray-200 mb-6 line-clamp-3">
                                ให้บริการจัดทำบัญชีอย่างครบวงจร ด้วยทีมงานมืออาชีพที่มีประสบการณ์
                                ครอบคลุมทั้งการจัดทำงบการเงินประจำปี การบันทึกรายการบัญชี การจัดทำรายงานภาษี
                                และการให้คำปรึกษาด้านบัญชี เพื่อให้ธุรกิจของคุณดำเนินไปอย่างราบรื่น
                            </p>
                            <a href="/service-detail"
                                class="text-white font-medium inline-flex items-center transition-all duration-500">
                                <span>ดูรายละเอียด</span>
                                <span
                                    class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                data-aos="fade-up" data-aos-duration="1000" data-aos-delay="150">
                <div class="h-full relative">
                    <img src="{{ Module::asset('frontend:img/banner1.jpg') }}" alt="Tax Planning"
                        class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                    <div class="p-6 absolute bottom-0 w-full">
                        <h3 class="text-2xl font-bold text-white mb-4">วางแผนภาษี</h3>
                        <p class="text-gray-200 mb-6 line-clamp-3">
                            บริการให้คำปรึกษาและวางแผนภาษีอย่างมืออาชีพ
                            วิเคราะห์โครงสร้างภาษีให้เหมาะสมกับธุรกิจของคุณ พร้อมวางแผนการจ่ายภาษีอย่างมีประสิทธิภาพ
                            เพื่อประโยชน์สูงสุดทางภาษีภายใต้กรอบของกฎหมาย
                        </p>
                        <a href="/service-detail"
                            class="text-white font-medium inline-flex items-center transition-all duration-500">
                            <span>ดูรายละเอียด</span>
                            <span
                                class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300">
                <div class="h-full relative">
                    <img src="{{ Module::asset('frontend:img/banner2.webp') }}" alt="Business Consulting"
                        class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                    <div class="p-6 absolute bottom-0 w-full">
                        <h3 class="text-2xl font-bold text-white mb-4">ที่ปรึกษาธุรกิจ</h3>
                        <p class="text-gray-200 mb-6 line-clamp-3">
                            บริการให้คำปรึกษาทางธุรกิจแบบครบวงจร ตั้งแต่การวางแผนธุรกิจ การวิเคราะห์ต้นทุน
                            ไปจนถึงการพัฒนาระบบบัญชี ด้วยประสบการณ์ที่สั่งสมมายาวนาน
                            เราพร้อมช่วยให้ธุรกิจของคุณเติบโตอย่างยั่งยืน
                        </p>
                        <a href="/service-detail"
                            class="text-white font-medium inline-flex items-center transition-all duration-500">
                            <span>ดูรายละเอียด</span>
                            <span
                                class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Card 4 -->
            <div class="group relative bg-white rounded-2xl border border-gray-100 overflow-hidden h-[400px]"
                data-aos="fade-up" data-aos-duration="1000" data-aos-delay="450">
                <div class="h-full relative">
                    <img src="{{ Module::asset('frontend:img/photo1.jpg') }}"
                        alt="Financial Analysis"
                        class="object-cover w-full h-full transition-transform duration-700 group-hover:scale-110">
                    <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-gray-900/20"></div>
                    <div class="p-6 absolute bottom-0 w-full">
                        <h3 class="text-2xl font-bold text-white mb-4">วิเคราะห์การเงิน</h3>
                        <p class="text-gray-200 mb-6 line-clamp-3">
                            บริการวิเคราะห์ทางการเงินอย่างมืออาชีพ ครอบคลุมการวิเคราะห์งบการเงิน การวางแผนการลงทุน
                            และการบริหารความเสี่ยง พร้อมให้คำแนะนำที่เป็นประโยชน์เพื่อการตัดสินใจทางธุรกิจที่แม่นยำ
                        </p>
                        <a href="/service-detail"
                            class="text-white font-medium inline-flex items-center transition-all duration-500">
                            <span>ดูรายละเอียด</span>
                            <span
                                class="icon-[tabler--arrow-right] ml-2 transition-transform duration-300 group-hover:translate-x-1"></span>
                        </a>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </section>
@endsection