@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 max-w-4xl mx-auto">
                <h2 class="text-3xl font-bold text-gray-900 mb-6 leading-tight">บริการด้านการบัญชีมืออาชีพ</h2>
                <p class="text-gray-600 text-xl md:text-2xl leading-relaxed">
                    มั่นใจได้กับทีมผู้เชี่ยวชาญด้านบัญชีที่พร้อมดูแลธุรกิจของคุณ</p>
            </div>
        </div>
    </section>

    <section class="pb-16">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div class="space-y-8">
                    <div class="space-y-6">
                        <span class="text-sky-600 font-medium">บริการทางบัญชี</span>
                        <h2 class="text-3xl md:text-4xl font-bold text-gray-900">
                            บริการบัญชีครบวงจร<br>
                            <span class="relative">
                                เพื่อธุรกิจของคุณ
                                <svg class="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 300 8"
                                    fill="none">
                                    <path d="M1 5.5C71 1.5 143.5 1.5 299 5.5" stroke="#0EA5E9" stroke-width="4"
                                        stroke-linecap="round" />
                                </svg>
                            </span>
                        </h2>
                        <p class="text-lg text-gray-600 leading-relaxed">
                            ด้วยประสบการณ์มากกว่า 20 ปี เรามุ่งมั่นให้บริการทางบัญชีที่ครอบคลุม ถูกต้อง และทันเวลา
                            พร้อมทีมงานมืออาชีพที่คอยดูแลธุรกิจของคุณอย่างใกล้ชิด
                        </p>
                    </div>

                    <div class="flex flex-wrap gap-4">
                        <a href="#"
                            class="bg-sky-500 text-white px-8 py-3 rounded-full inline-flex items-center hover:bg-sky-600 transition-colors">
                            ติดต่อเรา
                        </a>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-6">
                    <div class="space-y-6">
                        <div class="bg-sky-50 p-8 rounded-2xl">
                            <span class="text-sky-600 text-xl mb-4 block">บริการจัดทำบัญชี</span>
                            <p class="text-gray-600">จัดทำงบการเงินและบันทึกรายการบัญชีอย่างเป็นระบบ</p>
                        </div>
                        <div class="bg-sky-50 p-8 rounded-2xl">
                            <span class="text-sky-600 text-xl mb-4 block">วางแผนภาษี</span>
                            <p class="text-gray-600">วางแผนและให้คำปรึกษาด้านภาษีอย่างครบวงจร</p>
                        </div>
                    </div>
                    <div class="space-y-6 mt-12">
                        <div class="bg-sky-50 p-8 rounded-2xl">
                            <span class="text-sky-600 text-xl mb-4 block">ที่ปรึกษาธุรกิจ</span>
                            <p class="text-gray-600">ให้คำปรึกษาเพื่อพัฒนาและเติบโตทางธุรกิจ</p>
                        </div>
                        <div class="bg-sky-50 p-8 rounded-2xl">
                            <span class="text-sky-600 text-xl mb-4 block">วิเคราะห์การเงิน</span>
                            <p class="text-gray-600">วิเคราะห์และวางแผนทางการเงินอย่างมืออาชีพ</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pb-16">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="splide" id="gallery-slider">
                <div class="splide__track">
                    <div class="splide__list">
                        <div class="splide__slide">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="aspect-[3/4] overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 1">
                                </div>
                                <div class="aspect-square overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 2">
                                </div>
                                <div class="aspect-[3/4] overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1497366811353-6870744d04b2"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 3">
                                </div>
                            </div>
                        </div>
                        <div class="splide__slide">
                            <div class="grid grid-cols-3 gap-4">
                                <div class="aspect-square overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 4">
                                </div>
                                <div class="aspect-[3/4] overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1497215842964-222b430dc094"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 5">
                                </div>
                                <div class="aspect-square overflow-hidden rounded-xl">
                                    <img src="https://images.unsplash.com/photo-1497366216548-37526070297c"
                                        class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"
                                        alt="Office 6">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection