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

@section('content')
    <section class="py-16 bg-gradient-to-br from-sky-50 via-white to-sky-50 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="text-center max-w-3xl mx-auto">
                <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">บริการ</h1>
                <p class="text-gray-600 text-xl">พร้อมให้คำปรึกษาและบริการคุณด้วยทีมงานมืออาชีพ</p>
            </div>
        </div>
    </section>

    <!-- Service Detail Section -->
    <section class="py-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <!-- Service Image Carousel -->
                <div class="relative">
                    <div class="">
                        @php
                            $slideDatas = [
                                [
                                    'type' => 'image',
                                    'src' => 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?crop=entropy&cs=tinysrgb&fit=crop&h=800&w=800',
                                    'alt' => 'บริการบัญชี',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image', 
                                    'src' => 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?crop=entropy&cs=tinysrgb&fit=crop&h=800&w=800',
                                    'alt' => 'บริการบัญชี',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' => 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?crop=entropy&cs=tinysrgb&fit=crop&h=800&w=800',
                                    'alt' => 'บริการบัญชี',
                                    'url' => '#',
                                ],
                                [
                                    'type' => 'image',
                                    'src' => 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?crop=entropy&cs=tinysrgb&fit=crop&h=800&w=800',
                                    'alt' => 'บริการบัญชี',
                                    'url' => '#',
                                ],
                            ];
                        @endphp
                        <div class="com-carousel-thumbnail pb-6 md:sticky top-[70px]">
                            <section class="splide no-drag relative" id="main-carousel">
                                <div class="splide__track rounded-3xl">
                                    <ul class="splide__list">
                                        @if (!empty($slideDatas))
                                            @foreach ($slideDatas as $item)
                                                <li class="splide__slide">
                                                    <img class="starting-image rounded-3xl" src="{{ $item['src'] ?? '' }}"
                                                                alt="{{ $item['alt'] ?? '' }}">
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>
                                    <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                                </div>
                            </section>
                            <section class="splide mt-2" id="thumbnail-carousel">
                                <div class="splide__track">
                                    <ul class="splide__list">
                                        @if (!empty($slideDatas))
                                            @foreach ($slideDatas as $item)
                                                <li class="splide__slide overflow-hidden flex items-center">
                                                    <img class="rounded-xl w-full h-full object-contain object-center" src="{{ $item['src'] ?? '' }}"
                                                            alt="{{ $item['alt'] ?? '' }}">
                                                </li>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                                <ul class="splide__pagination --prevent-on-load-init" role="tablist"></ul>
                            </section>
                        </div>
                    </div>
                </div>

                <!-- Service Description -->
                <div class="space-y-8">
                    <div>
                        <h2 class="text-3xl font-bold text-gray-900 mb-6">บริการด้านการบัญชี</h2>
                        <p class="text-gray-600 text-lg leading-relaxed mb-6">
                            เรามีบริการด้านการบัญชีที่ครอบคลุมทุกความต้องการของธุรกิจ ด้วยทีมงานมืออาชีพที่มีประสบการณ์และความเชี่ยวชาญ พร้อมให้คำปรึกษาและดูแลงานบัญชีของคุณอย่างมีประสิทธิภาพ
                        </p>
                    </div>

                    <!-- Service Features -->
                    <div class="space-y-4">
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-sky-500 mt-1"></span>
                            <p class="text-gray-600">จัดทำบัญชีและงบการเงินตามมาตรฐานการบัญชี</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-sky-500 mt-1"></span>
                            <p class="text-gray-600">วิเคราะห์และวางแผนภาษีอย่างมีประสิทธิภาพ</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-sky-500 mt-1"></span>
                            <p class="text-gray-600">ให้คำปรึกษาด้านการบัญชีและภาษีอากร</p>
                        </div>
                        <div class="flex items-start gap-4">
                            <span class="icon-[tabler--circle-check] text-sky-500 mt-1"></span>
                            <p class="text-gray-600">จัดทำรายงานทางการเงินเพื่อการบริหาร</p>
                        </div>
                    </div>

                    <!-- Contact Button -->
                    <div class="pt-6">
                        <a href="{{ route('contact') }}" class="group relative inline-flex items-center justify-center px-8 py-4 bg-gradient-to-r from-sky-600 to-sky-400 text-white font-medium rounded-xl overflow-hidden transition-all hover:shadow-lg">
                            <div class="absolute inset-0 bg-gradient-to-r from-sky-400 to-sky-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <span class="relative flex items-center gap-2">
                                ติดต่อเรา
                                <span class="icon-[tabler--arrow-right]"></span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection