@php

$siteSetting = \App\Models\SiteSetting::first();
@endphp

<!-- Footer Start Here -->
<footer class="footer bg-black position-relative z-1 mt-auto tw-pt-16 overflow-hidden">
    <!-- Footer Top Start -->
    <div class="container">
        <div class="d-flex align-items-center tw-gap-505">
            <div class="flex-grow-1">
                <div
                    class="d-flex align-items-center flex-lg-nowrap flex-wrap tw-gap-100-px tw-pb-13 border-bottom border-neutral-700">
                    <div class="max-w-514-px w-100 d-flex align-items-center tw-gap-505" data-aos="fade-up"
                        data-aos-anchor-placement="top-bottom" data-aos-duration="600">
                        <h3
                            class="h1 text-white tw-mb-0 fw-medium d-inline-flex align-items-center tw-gap-4 flex-shrink-0">
                            <img src="{{asset('assets/images/icons/arrow-up-main.svg')}}" alt="img" />
                            88%
                        </h3>
                        <p class="text-neutral-300 max-w-194-px">
                            Average revenue growth for per
                            successful clients
                        </p>
                    </div>
                    <div class="max-w-514-px w-100 d-flex align-items-center tw-gap-505" data-aos="fade-up"
                        data-aos-anchor-placement="top-bottom" data-aos-duration="600">
                        <h3
                            class="h1 text-white tw-mb-0 fw-medium d-inline-flex align-items-center tw-gap-4 flex-shrink-0">
                            1.3m
                        </h3>
                        <div class="d-flex align-items-center tw-gap-2">
                            <p class="text-neutral-300 max-w-194-px">
                                Average revenue growth for per
                                successful clients
                            </p>
                        </div>
                    </div>
                </div>
                <div class="tw-pt-8 d-flex align-items-center tw-gap-8 flex-wrap">
                    <ul class="d-flex align-items-center tw-gap-8 flex-wrap">
                        <li class="d-flex align-items-center tw-gap-3" data-aos="fade-up"
                            data-aos-anchor-placement="top-bottom" data-aos-duration="600">
                            <span
                                class="tw-w-5 tw-h-5 bg-main-600 text-white d-flex justify-content-center align-items-center tw-text-xs rounded-circle">
                                <i class="ph ph-check"></i>
                            </span>
                            <p class="text-white fw-medium">
                                Various analysis options.
                            </p>
                        </li>
                        <li class="d-flex align-items-center tw-gap-3" data-aos="fade-up"
                            data-aos-anchor-placement="top-bottom" data-aos-duration="600">
                            <span
                                class="tw-w-5 tw-h-5 bg-main-600 text-white d-flex justify-content-center align-items-center tw-text-xs rounded-circle">
                                <i class="ph ph-check"></i>
                            </span>
                            <p class="text-white fw-medium">
                                Page Load (time, size, number of
                                requests).
                            </p>
                        </li>
                    </ul>
                    <div class="d-flex align-items-center justify-content-center tw-gap-405">
                        <div class="" data-aos="fade-up" data-aos-anchor-placement="top-bottom"
                            data-aos-duration="800">
                            <!-- <a href="https://play.google.com/store/apps"
                                class="hover--translate-y-1 active--translate-y-scale-9">
                                <img src="{{asset('assets/images/icons/store1.png')}}" alt="img" />
                            </a> -->
                        </div>
                        <div class="" data-aos="fade-up" data-aos-anchor-placement="top-bottom"
                            data-aos-duration="800">
                            <!-- <a href="https://www.apple.com/app-store"
                                class="hover--translate-y-1 active--translate-y-scale-9">
                                <img src="{{asset('assets/images/icons/store2.png')}}" alt="img" />
                            </a> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-shrink-0 gradient-overlay d-md-block d-none">
                <img src="{{asset('assets/images/thumbs/footer-img.png')}}" alt="img" />
            </div>
        </div>
    </div>
    <!-- Footer Top End -->

    <div class="py-120">
        <div class="container container-two">
            <div class="row g-5">
                <div class="col-lg-5 col-sm-6 col-xs-6" data-aos="fade-up" data-aos-duration="600">
                    <div class="">
                        <a href="{{route('home')}}" class="link hover--translate-y-1 active--translate-y-scale-9 tw-mb-10">
                            <img src="{{asset('storage/'.$siteSetting->logo_dark)}}" alt="img" />
                        </a>


                    </div>
                </div>
                <div class="col-lg-2 col-sm-6 col-xs-6" data-aos="fade-up" data-aos-duration="800">
                    <div class="">
                        <h5 class="fw-medium text--white tw-mb-8">
                            Quick Links
                        </h5>
                        <ul class="d-flex flex-column tw-gap-4">
                            <!-- <li>
                                <a href="javascript:void(0)"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">Forum
                                    Support</a>
                            </li> -->
                            <li>
                                <a href="{{route('faq')}}"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">Help
                                    & FAQ</a>
                            </li>
                            <li>
                                <a href="{{route('contact')}}"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">Contact
                                    Us</a>
                            </li>
                            <!-- <li>
                                <a href="{{route('pricing')}}"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">Pricing
                                    and plans</a>
                            </li> -->
                            <li class="mb-0">
                                <a href="{{ route('policy.privacy') }}"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">Privacy &
                                    Policy</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-2 col-sm-6 col-xs-6" data-aos="fade-up" data-aos-duration="1000">
                    <div class="">
                        <h5 class="fw-medium text--white tw-mb-8">
                            Service
                        </h5>
                        <ul class="d-flex flex-column tw-gap-4">
                            @foreach (App\Models\Service::where('status', true)->get() as $s )
<li>
                                <a href="{{route('services.show', $s->id)}}"
                                    class="hover-arrow-start text--white hover-text-white hover-underline hover--translate-y-1 active--translate-y-scale-9">It
                                    {{ $s->title }}
                                </a>
                            </li>
                            @endforeach


                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-6" data-aos="fade-up" data-aos-duration="1200">
                    <div class="">
                        <h5 class="fw-medium text--white tw-mb-8">
                            Locations
                        </h5>
                        <div class="d-flex align-items-center tw-gap-5">
                            <span class="d-flex tw-text-3xl text-main-600">
                                <img src="{{asset('assets/images/icons/map.svg')}}" alt="img" />
                            </span>
                            <div class="">
                                <p class="text-neutral-400 d-block mb-1">
                                    {{ $siteSetting->address }}
                                </p>
                            </div>
                        </div>

                        <h5 class="fw-medium text--white tw-mt-10 tw-mb-6">
                            Contact
                        </h5>
                        <a href="mailto:{{ $siteSetting->email }}"
                            class="text-neutral-400 hover--translate-y-1 active--translate-y-scale-9">{{ $siteSetting->email }}</a>
                        <div class="d-flex align-items-center tw-gap-5 tw-mt-2">
                            <span class="d-flex tw-text-3xl text-main-600">
                                <img src="{{asset('assets/images/icons/phone.svg')}}" alt="img" />
                            </span>
                            <div class="">
                                <a href="tel:+880(123)45688"
                                    class="d-block mb-1 tw-text-2xl text-white hover-text-main-600 hover--translate-y-1 active--translate-y-scale-9">{{ $siteSetting->phone }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <!-- bottom Footer -->
        <div class="border-top border-dashed border-neutral-600 border-0 tw-py-8">
            <div class="container container-two">
                <div class="d-flex align-items-center justify-content-between tw-gap-4 flex-wrap">
                    <p class="text--white text-line-1 fw-normal">
                        &copy; 2025
                        <a href="https://themeforest.net/user/wowtheme7"
                            class="fw-medium hover-underline hover--translate-y-1 active--translate-y-scale-9">WowTheme7</a>
                        - IT Services. All rights reserved.
                    </p>
                    <ul class="d-flex align-items-center tw-gap-6">
                        <li>
                            <a href="https://www.facebook.com"
                                class="text--white tw-text-2xl hover--translate-y-1 active--translate-y-scale-9 d-flex align-items-center tw-gap-205 hover-text-white">
                                <span class="text-main-600 d-flex">
                                    <i class="ph-fill ph-facebook-logo"></i>
                                </span>
                                <span class="tw-text-base">Facebook</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.twitter.com"
                                class="text--white tw-text-2xl hover--translate-y-1 active--translate-y-scale-9 d-flex align-items-center tw-gap-205 hover-text-white">
                                <span class="text-main-600 d-flex">
                                    <i class="ph-fill ph-twitter-logo"></i>
                                </span>
                                <span class="tw-text-base">Twitter</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.linkedin.com"
                                class="text--white tw-text-2xl hover--translate-y-1 active--translate-y-scale-9 d-flex align-items-center tw-gap-205 hover-text-white">
                                <span class="text-main-600 d-flex">
                                    <i class="ph-fill ph-instagram-logo"></i>
                                </span>
                                <span class="tw-text-base">Instagram</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.pinterest.com"
                                class="text--white tw-text-2xl hover--translate-y-1 active--translate-y-scale-9 d-flex align-items-center tw-gap-205 hover-text-white">
                                <span class="text-main-600 d-flex">
                                    <i class="ph-fill ph-pinterest-logo"></i>
                                </span>
                                <span class="tw-text-base">Pinterest</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- Footer End Here -->