@php
    $locale = app()->getLocale();
    $homeUrl = route('home', ['locale' => $locale]);

    $address = $locale === 'ar'
        ? config('services.savex_links.address_ar')
        : config('services.savex_links.address_en');
@endphp

<footer class="footer-savex">
    <div class="container">

        {{-- Desktop Footer --}}
        <div class="footer-box d-none d-lg-block">
            <div class="row g-5">
                <div class="col-lg-4">
                    <a href="{{ $homeUrl }}" class="d-inline-flex align-items-center mb-3">
                        <img
                            src="{{ asset('assets/images/logo.webp') }}"
                            alt="SavEX"
                            class="footer-logo"
                        >
                    </a>

                    <p class="text-muted-custom mb-4">
                        {{ __('The first mobile app of its kind in the world for solidarity shopping. Join draws, auctions, rewards, and offers in a simple and secure way.') }}
                    </p>

                    <div class="d-flex gap-2 flex-wrap">
                        <a
                            href="{{ config('services.savex_links.facebook') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="Facebook"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.2-1.5 1.5-1.5h1.7V4.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.3H7.6V14h2.7v8h3.2z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.instagram') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="Instagram"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm0 2C5.7 4 4 5.7 4 7.8v8.4C4 18.3 5.7 20 7.8 20h8.4c2.1 0 3.8-1.7 3.8-3.8V7.8C20 5.7 18.3 4 16.2 4H7.8zm4.2 3.3A4.7 4.7 0 1 1 12 16.7 4.7 4.7 0 0 1 12 7.3zm0 2A2.7 2.7 0 1 0 12 14.7 2.7 2.7 0 0 0 12 9.3zM17.1 6.6a1.1 1.1 0 1 1-1.1 1.1 1.1 1.1 0 0 1 1.1-1.1z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.youtube') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="YouTube"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M21.6 7.2s-.2-1.6-.8-2.3c-.8-.8-1.7-.8-2.1-.9C15.8 3.8 12 3.8 12 3.8s-3.8 0-6.7.2c-.4 0-1.3.1-2.1.9-.6.7-.8 2.3-.8 2.3S2.2 9.1 2.2 11v1.8c0 1.9.2 3.8.2 3.8s.2 1.6.8 2.3c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4 0 1.3-.1 2.1-.9.6-.7.8-2.3.8-2.3s.2-1.9.2-3.8V11c0-1.9-.2-3.8-.2-3.8zM10.1 14.8V8.9l5.2 3-5.2 2.9z"/>
                            </svg>
                        </a>

                        <a
                            href="{{ config('services.savex_links.tiktok') }}"
                            target="_blank"
                            rel="noopener"
                            class="social-link"
                            aria-label="TikTok"
                        >
                            <svg viewBox="0 0 24 24" aria-hidden="true">
                                <path d="M16.6 2c.3 2.3 1.6 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.8-1.1v6.2c0 4-2.7 6.8-6.5 6.8-3.5 0-6.3-2.7-6.3-6.2 0-3.7 3-6.4 6.8-6.1v3.3c-1.8-.3-3.3.8-3.3 2.7 0 1.7 1.2 2.8 2.8 2.8 1.8 0 2.9-1.1 2.9-3.3V2h3.5z"/>
                            </svg>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <h6 class="footer-title">{{ __('Quick Links') }}</h6>

                    <ul class="footer-links">
                        <li>
                            <a href="{{ route('home', ['locale' => $locale]) }}">
                                {{ __('Home') }}
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('about', ['locale' => $locale]) }}">
                                {{ __('About Us') }}
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('app.info', ['locale' => $locale]) }}">
                                {{ __('App Information') }}
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('offers', ['locale' => $locale]) }}">
                                {{ __('Latest Offers') }}
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('terms', ['locale' => $locale]) }}">
                                {{ __('Terms & Conditions') }}
                            </a>
                        </li>

                        <li>
                            <a href="{{ route('contact', ['locale' => $locale]) }}">
                                {{ __('Contact Us') }}
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-2">
                    <h6 class="footer-title">{{ __('Contact') }}</h6>

                    <ul class="footer-links">
                        <li>
                            <a href="mailto:{{ config('services.savex_links.email') }}">
                                {{ config('services.savex_links.email') }}
                            </a>
                        </li>

                        <li>
                            <a href="tel:{{ config('services.savex_links.phone') }}">
                                {{ config('services.savex_links.phone') }}
                            </a>
                        </li>

                        <li>
                            <span>{{ $address }}</span>
                        </li>
                    </ul>
                </div>

                <div class="col-lg-4">
                    <h6 class="footer-title">{{ __('Download the app') }}</h6>

                    <p class="text-muted-custom mb-3">
                        {{ __('Start your SavEX journey and explore a complete solidarity shopping experience.') }}
                    </p>

                    <div class="d-flex flex-column flex-sm-row gap-2">
                        <a
                            href="{{ config('services.savex_links.play_store') }}"
                            target="_blank"
                            rel="noopener"
                            class="store-btn"
                        >
                            {{ __('Google Play') }}
                        </a>

                        <a
                            href="{{ config('services.savex_links.app_store') }}"
                            target="_blank"
                            rel="noopener"
                            class="store-btn"
                        >
                            {{ __('App Store') }}
                        </a>
                    </div>
                </div>
            </div>

            <hr class="footer-line">

            <div class="d-flex justify-content-between gap-3">
                <small class="text-muted-custom">
                    © {{ date('Y') }} SavEX. {{ __('All rights reserved.') }}
                </small>

                <small class="text-muted-custom">
                    {{ __('Designed for a simpler, more diverse, and more valuable solidarity shopping experience.') }}
                </small>
            </div>
        </div>

        {{-- Mobile Footer --}}
        <div class="footer-box d-lg-none text-center">
            <a href="{{ $homeUrl }}" class="d-inline-flex align-items-center justify-content-center mb-3">
                <img
                    src="{{ asset('assets/images/logo.webp') }}"
                    alt="SavEX"
                    class="footer-logo"
                >
            </a>

            <p class="text-muted-custom mb-4">
                {{ __('Start your SavEX journey and explore a complete solidarity shopping experience.') }}
            </p>

            <div class="d-grid gap-2 mb-4">
                <a
                    href="{{ config('services.savex_links.play_store') }}"
                    target="_blank"
                    rel="noopener"
                    class="store-btn"
                >
                    {{ __('Google Play') }}
                </a>

                <a
                    href="{{ config('services.savex_links.app_store') }}"
                    target="_blank"
                    rel="noopener"
                    class="store-btn"
                >
                    {{ __('App Store') }}
                </a>
            </div>

            <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
                <a
                    href="{{ route('home', ['locale' => $locale]) }}"
                    class="text-decoration-none fw-bold text-muted-custom"
                >
                    {{ __('Home') }}
                </a>

                <a
                    href="{{ route('about', ['locale' => $locale]) }}"
                    class="text-decoration-none fw-bold text-muted-custom"
                >
                    {{ __('About Us') }}
                </a>

                <a
                    href="{{ route('offers', ['locale' => $locale]) }}"
                    class="text-decoration-none fw-bold text-muted-custom"
                >
                    {{ __('Latest Offers') }}
                </a>

                <a
                    href="{{ route('contact', ['locale' => $locale]) }}"
                    class="text-decoration-none fw-bold text-muted-custom"
                >
                    {{ __('Contact Us') }}
                </a>
            </div>

            <div class="d-flex justify-content-center gap-2 mb-4">
                <a
                    href="{{ config('services.savex_links.facebook') }}"
                    target="_blank"
                    rel="noopener"
                    class="social-link"
                    aria-label="Facebook"
                >
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M13.5 22v-8h2.7l.4-3.1h-3.1V8.9c0-.9.2-1.5 1.5-1.5h1.7V4.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v2.3H7.6V14h2.7v8h3.2z"/>
                    </svg>
                </a>

                <a
                    href="{{ config('services.savex_links.instagram') }}"
                    target="_blank"
                    rel="noopener"
                    class="social-link"
                    aria-label="Instagram"
                >
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm0 2C5.7 4 4 5.7 4 7.8v8.4C4 18.3 5.7 20 7.8 20h8.4c2.1 0 3.8-1.7 3.8-3.8V7.8C20 5.7 18.3 4 16.2 4H7.8zm4.2 3.3A4.7 4.7 0 1 1 12 16.7 4.7 4.7 0 0 1 12 7.3zm0 2A2.7 2.7 0 1 0 12 14.7 2.7 2.7 0 0 0 12 9.3zM17.1 6.6a1.1 1.1 0 1 1-1.1 1.1 1.1 1.1 0 0 1 1.1-1.1z"/>
                    </svg>
                </a>

                <a
                    href="{{ config('services.savex_links.youtube') }}"
                    target="_blank"
                    rel="noopener"
                    class="social-link"
                    aria-label="YouTube"
                >
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M21.6 7.2s-.2-1.6-.8-2.3c-.8-.8-1.7-.8-2.1-.9C15.8 3.8 12 3.8 12 3.8s-3.8 0-6.7.2c-.4 0-1.3.1-2.1.9-.6.7-.8 2.3-.8 2.3S2.2 9.1 2.2 11v1.8c0 1.9.2 3.8.2 3.8s.2 1.6.8 2.3c.8.8 1.9.8 2.4.9 1.7.2 6.4.2 6.4.2s3.8 0 6.7-.2c.4 0 1.3-.1 2.1-.9.6-.7.8-2.3.8-2.3s.2-1.9.2-3.8V11c0-1.9-.2-3.8-.2-3.8zM10.1 14.8V8.9l5.2 3-5.2 2.9z"/>
                    </svg>
                </a>

                <a
                    href="{{ config('services.savex_links.tiktok') }}"
                    target="_blank"
                    rel="noopener"
                    class="social-link"
                    aria-label="TikTok"
                >
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M16.6 2c.3 2.3 1.6 3.7 3.9 3.9v3.2c-1.4.1-2.7-.3-3.8-1.1v6.2c0 4-2.7 6.8-6.5 6.8-3.5 0-6.3-2.7-6.3-6.2 0-3.7 3-6.4 6.8-6.1v3.3c-1.8-.3-3.3.8-3.3 2.7 0 1.7 1.2 2.8 2.8 2.8 1.8 0 2.9-1.1 2.9-3.3V2h3.5z"/>
                    </svg>
                </a>
            </div>

            <small class="text-muted-custom d-block">
                © {{ date('Y') }} SavEX. {{ __('All rights reserved.') }}
            </small>
        </div>
    </div>
</footer>