{{-- Expert Tax Solutions Section --}}
<div class="container pt-5 mt-3">
    <div class="row">
        <div class="col text-center">
            <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.tax_solutions_badge', 'Expert Tax Solutions') }}</span>
            </span>
            <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">
                    {{ config('site.welcome.tax_solutions_title', 'We Handle Your Tax Concerns') }}
                </h2>
            </div>
            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                <p>{{ config('site.welcome.tax_solutions_description', 'We simplify tax compliance with accurate, timely, and strategic support tailored to your needs.') }}</p>
            </div>
        </div>
    </div>

    <div class="row mt-4">
        @php
            $taxServices = [
                [
                    'title' => 'Individual Taxation',
                    'description' => 'We provide personalized tax planning and filing services to maximize savings and ensure full compliance.',
                    'image' => 'generic-1.png',
                    'color' => 'quaternary',
                    'delay' => 0
                ],
                [
                    'title' => 'Corporate Taxation',
                    'description' => 'We provide personalized tax planning and filing services to maximize savings and ensure full compliance.',
                    'image' => 'generic-2.png',
                    'color' => 'primary',
                    'delay' => 300
                ],
                [
                    'title' => 'Estate Taxation',
                    'description' => 'We provide personalized tax planning and filing services to maximize savings and ensure full compliance.',
                    'image' => 'generic-3.png',
                    'color' => 'secondary',
                    'delay' => 600
                ]
            ];
        @endphp
        @foreach($taxServices as $service)
            <div class="col-lg-4 mb-4 mb-lg-0">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $service['delay'] }}">
                    <div class="card custom-card-1 border-radius-2 bg-color-light box-shadow-1 box-shadow-1-hover">
                        <div class="card-body overflow-hidden">
                            <div class="custom-card-1-curves">
                                <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/svg/curves-2.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-{{ $service['color'] }}'}" >
                            </div>
                            <span class="rounded-circle bg-color-{{ $service['color'] }} d-inline-block overflow-hidden">
                                <img src="{{ asset('template/img/demos/accounting-2/generic/' . $service['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" width="100" alt="">
                            </span>
                            <h4 class="my-2 text-5-5 pt-1 pb-2">{{ $service['title'] }}</h4>
                            <p class="card-text text-3-5">{{ $service['description'] }}</p>
                            <div class="d-grid pb-3">
                                @php
                                    $servicesUrl = Route::has('frontend.services.index') ? route('frontend.services.index') : '#';
                                @endphp
                                <a href="{{ $servicesUrl }}" class="btn btn-transparent border-0 text-start btn-xl btn-with-arrow-solid btn-with-arrow-sm p-0">
                                    <strong class="d-inline-flex font-weight-semibold text-primary text-decoration-underline me-3 text-2-5">{{ __('Learn More') }}</strong>
                                    <span class="bg-primary box-shadow-6 right-0"><i class="fa-solid fa-arrow-right text-light text-1"></i></span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Counters --}}
    <div class="row counters justify-content-center m-5">
        @php
            $counters = [
                ['value' => '95', 'label' => 'Client Satisfaction', 'delay' => 0],
                ['value' => '99', 'label' => 'On-Time Reporting', 'delay' => 200],
                ['value' => '87', 'label' => 'Referral Growth', 'delay' => 400]
            ];
        @endphp
        @foreach($counters as $counter)
            <div class="col-md-6 col-lg-4 mb-4 mb-lg-0 text-center">
                <div class="d-flex flex-column pt-2 pb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $counter['delay'] }}">
                    <p class="d-inline-block mb-0 font-weight-bold line-height-1 counter d-flex justify-content-center">
                        <img src="{{ asset('template/img/demos/accounting-2/icons/icon-7.svg') }}" width="50" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-2'}" />
                        <span class="text-dark text-13 n-ls-5 p-0 me-4" data-to="{{ $counter['value'] }}" data-append="%"></span>
                    </p>
                    <span class="text-4 n-ls-1 pt-2">{{ $counter['label'] }}</span>
                </div>
            </div>
        @endforeach
    </div>
</div>