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

@section('content')
    {{-- <section class="relative bg-gray-50 py-10 lg:py-16">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto text-center">
                <h4 class="text-lg sm:text-xl md:text-2xl text-sky-600 font-medium mb-4">Professional Accounting Services
                </h4>
                <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
                    บริการด้านบัญชีครบวงจร<br>
                    <span
                        class="bg-gradient-to-r from-sky-600 to-sky-400 bg-clip-text text-transparent">เพื่อความสำเร็จของธุรกิจคุณ</span>
                </h1>
                <p class="text-base sm:text-lg text-gray-600 mb-8 leading-relaxed">
                    ด้วยทีมงานมืออาชีพที่มีประสบการณ์ เรายินดีให้คำปรึกษาและดูแลงานบัญชีของคุณอย่างครบถ้วน
                    เพื่อให้ธุรกิจของคุณเติบโตอย่างมั่นคง
                </p>

                <div class="flex flex-wrap justify-center gap-4">
                    <a href="#services"
                        class="group relative px-8 py-3 bg-white text-sky-500 text-lg rounded-lg border-2 border-sky-400 overflow-hidden shadow-md hover:shadow-xl transition-all duration-300">
                        <span class="relative z-10 group-hover:text-white transition-colors duration-300">ติดต่อเรา</span>
                        <div
                            class="absolute inset-0 bg-gradient-to-r from-sky-500 to-sky-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section> --}}


    <!-- Our Services Section -->
    <section class="py-10 lg:pt-16 bg-white">
        <div class="container 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">Service</span>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">บริการของเรา</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">เรามีบริการครบวงจรเพื่อช่วยให้ธุรกิจของคุณเติบโตอย่างมั่นคง</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div
                    class="group 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-[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-[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-[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-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>
                    </a>
                </div>

                <div
                    class="group 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-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>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- <!-- Call to Action 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">
            <div class="max-w-4xl mx-auto text-center">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">พร้อมให้คำปรึกษาธุรกิจของคุณ</h2>
                <p class="text-gray-600 text-xl mb-10">เรามีทีมผู้เชี่ยวชาญพร้อมช่วยเหลือคุณในทุกขั้นตอน
                    ตั้งแต่การวางแผนภาษีไปจนถึงการจัดการบัญชี</p>

                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="#"
                        class="group relative inline-flex items-center justify-center gap-2 px-8 py-4 overflow-hidden rounded-xl bg-gradient-to-r from-sky-600 to-sky-400">
                        <span
                            class="absolute inset-0 w-full h-full bg-gradient-to-r from-sky-400 to-sky-600 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></span>
                        <span class="icon-[tabler--phone-call] relative size-5 text-white"></span>
                        <span class="relative font-medium text-white text-lg">ปรึกษาฟรี</span>
                    </a>
                </div>
            </div>
        </div> --}}
    </section>
@endsection