@extends('layout.front.master')

@section('content')

<div role="main" class="main px-3 px-lg-5">

    {{-- Main Slider --}}
    <div class="owl-carousel owl-carousel-light owl-carousel-light-init-fadeIn owl-theme manual nav-style-1 nav-arrows-thin nav-inside nav-inside-plus nav-dark nav-lg nav-font-size-lg rounded-nav nav-borders show-nav-hover mb-0" data-plugin-options="{'autoplay': true, 'autoplayTimeout': 7000}" data-dynamic-height="['750px','750px','750px','750px','750px']" style="height: 750px;">
        <div class="owl-stage-outer">
            <div class="owl-stage">
                @forelse($carouselImages as $index => $image)
                    @if($index == 0)
                        {{-- Carousel Slide 1 --}}
                        <div class="owl-item p-relative overflow-hidden">
                            <div class="bg-primary border-radius-2 p-relative z-index-1 overflow-hidden">
                                <div class="custom-el-2 custom-pos-1">
                                    <img class="img-fluid opacity-2 opacity-hover-2" src="{{ asset('cd-project/img/demos/accounting-1/svg/waves.svg') }}" alt="">
                                </div>
                                <div class="container">
                                    <div class="row justify-content-center align-items-center mh-750px py-5">
                                        <div class="col-lg-5 text-center text-lg-start px-4">
                                            <h4 class="text-5 text-lg-6 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                                <img width="29" height="29" src="{{ asset('cd-project/img/demos/accounting-1/icons/icon-7.svg') }}" class="w-auto d-inline-flex p-relative bottom-2" alt=""> {{ __('Streamline Your Finances') }}
                                            </h4>
                                            <h1 class="text-10 text-lg-12 font-weight-semibold line-height-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ __('Trusted Financial Guidance for Your Business Success.') }}</h1>
                                            <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                                <p class="text-4 text-lg-5 pe-lg-5 line-height-5 text-dark opacity-7 mb-2 mb-lg-4">{{ __('Your Partner in Achieving Financial Stability and Growth.') }}</p>
                                            </div>
                                            <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="600">
                                                <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="0" class="btn btn-light btn-effect-2 transition-3ms border-0 btn-rounded btn-xl text-3 py-4 btn-with-arrow-solid mt-3">
                                                    <strong class="d-inline-flex text-dark font-weight-medium text-3-5 text-lg-4 me-3 px-3">{{ __('Get Started') }}</strong>
                                                    <span class="bg-transparent box-shadow-6"><i class="fa-solid fa-arrow-right text-dark"></i></span>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="col-8 col-lg-7 mt-3 px-md-5 ps-xl-5 pe-xxl-0 mt-lg-0">
                                            <div class="p-relative">
                                                <div class="custom-mask-img custom-mask-img-1">
                                                    <img class="img-fluid" src="{{ $image->image_path ?? asset('cd-project/img/demos/accounting-1/generic/generic-1.jpg') }}" loading="lazy" alt="">
                                                </div>
                                                <div class="p-absolute bg-dark custom-stamp-1 appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="800">
                                                    <div class="rotate-animation">
                                                        <svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                                            <path id="curvedText1" fill="none" stroke="none" d="M 32.550491,148.48008 A -108.15144,-108.15144 0 0 1 140.70194,40.328644 -108.15144,-108.15144 0 0 1 248.85338,148.48008 -108.15144,-108.15144 0 0 1 140.70194,256.63153 -108.15144,-108.15144 0 0 1 32.550491,148.48008 Z" />
                                                            <text font-size="20" fill="#FFF" letter-spacing="0" font-family="Poppins, Arial, sans-serif" font-weight="semibold">
                                                                <textPath xlink:href="#curvedText1">{{ config('site.name', 'GLOBAL ACCOUNTING COMPANY') }} - {{ __('TAX ADVISOR') }} - {{ config('site.location', 'NEW YORK BASED') }} - </textPath>
                                                            </text>
                                                        </svg>
                                                    </div>
                                                    <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                        <img width="58" height="58" src="{{ asset('cd-project/img/demos/accounting-1/icons/icon-shape-1.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary p-relative bottom-2 right-3'}" />
                                                    </div>
                                                </div>
                                                <div class="p-absolute text-end custom-el-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                                                    <p><mark class="text-dark mark mark-color mark-color-light mark-pos-2 mark-height-50 p-0">100%</mark></p>
                                                    <em class="d-block custom-font-tertiary"><mark class="text-dark mark mark-color mark-color-light mark-pos-2 mark-height-100 p-0">{{ __('guaranteed') }}</mark></em>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        {{-- Carousel Slide 2 --}}
                        <div class="owl-item p-relative border-radius-2 overflow-hidden">
                            <div class="background-image-wrapper p-absolute z-index-1 top-0 left-0 right-0 bottom-0 overlay overlay-color-dark overlay-show overlay-op-6" data-appear-animation="kenBurnsToLeft" data-appear-animation-duration="30s" data-carousel-onchange-show style="background-image: url({{ $image->image_path ?? asset('cd-project/img/demos/accounting-1/slides/slide-2.jpg') }}); background-size: cover; background-position: center;"></div>
                            <div class="container text-color-light p-relative z-index-2">
                                <div class="row justify-content-center align-items-center mh-750px py-5">
                                    <div class="col-lg-6 text-center">
                                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                                            <div class="rotate-animation">
                                                <img width="90" height="90" src="{{ asset('cd-project/img/demos/accounting-1/icons/icon-shape-1.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mb-4'}" />
                                            </div>
                                        </div>
                                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                            <h4 class="text-6 text-lg-7 text-color-light font-weight-regular mb-4"><span class="d-inline-flex p-relative top-7"><img width="34" height="34" src="{{ asset('cd-project/img/demos/accounting-1/icons/icon-7.svg') }}" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light d-inline-flex'}" alt=""></span> {{ __('Outstanding Outcomes') }}</h4>
                                        </div>
                                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="600">
                                            <h2 class="text-10 text-lg-12 font-weight-semibold text-color-light line-height-1">{{ __('We Transform Financial Strategies into Tangible Success') }}</h2>
                                        </div>
                                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="800">
                                            <a href="#start" data-hash data-hash-offset="0" data-hash-offset-lg="0" class="btn btn-light btn-effect-2 transition-3ms border-0 btn-rounded btn-xl text-3 py-4 btn-with-arrow-solid mt-3">
                                                <strong class="d-inline-flex text-dark font-weight-medium text-3-5 text-lg-4 me-3 px-3">{{ __('Get Started') }}</strong>
                                                <span class="bg-transparent box-shadow-6"><i class="fa-solid fa-arrow-right text-dark"></i></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @empty
                    {{-- Fallback slides si no hay imágenes --}}
                    <div class="owl-item p-relative overflow-hidden">
                        <div class="bg-primary border-radius-2 p-relative z-index-1 overflow-hidden">
                            <div class="custom-el-2 custom-pos-1">
                                <img class="img-fluid opacity-2 opacity-hover-2" src="{{ asset('cd-project/img/demos/accounting-1/svg/waves.svg') }}" alt="">
                            </div>
                            <div class="container">
                                <div class="row justify-content-center align-items-center mh-750px py-5">
                                    <div class="col-lg-5 text-center text-lg-start px-4">
                                        <h4 class="text-5 text-lg-6 font-weight-medium mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                                            <img width="29" height="29" src="{{ asset('cd-project/img/demos/accounting-1/icons/icon-7.svg') }}" class="w-auto d-inline-flex p-relative bottom-2" alt=""> {{ __('Streamline Your Finances') }}
                                        </h4>
                                        <h1 class="text-10 text-lg-12 font-weight-semibold line-height-1 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="200">{{ __('Trusted Financial Guidance for Your Business Success.') }}</h1>
                                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="400">
                                            <p class="text-4 text-lg-5 pe-lg-5 line-height-5 text-dark opacity-7 mb-2 mb-lg-4">{{ __('Your Partner in Achieving Financial Stability and Growth.') }}</p>
                                        </div>
                                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="600">
                                            <a href="{{ route('front.contact') }}" class="btn btn-light btn-effect-2 transition-3ms border-0 btn-rounded btn-xl text-3 py-4 btn-with-arrow-solid mt-3">
                                                <strong class="d-inline-flex text-dark font-weight-medium text-3-5 text-lg-4 me-3 px-3">{{ __('Get Started') }}</strong>
                                                <span class="bg-transparent box-shadow-6"><i class="fa-solid fa-arrow-right text-dark"></i></span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-8 col-lg-7 mt-3 px-md-5 ps-xl-5 pe-xxl-0 mt-lg-0">
                                        <div class="p-relative">
                                            <div class="custom-mask-img custom-mask-img-1">
                                                <img class="img-fluid" src="{{ asset('cd-project/img/demos/accounting-1/generic/generic-1.jpg') }}" loading="lazy" alt="">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
        <div class="owl-nav">
            <button type="button" role="presentation" class="owl-prev" aria-label="Previous"></button>
            <button type="button" role="presentation" class="owl-next" aria-label="Next"></button>
        </div>
    </div>



</div>

@endsection