{{-- Footer específico para demo-product-landing - Adaptado desde Radoc Bikes --}}
<footer id="footer" class="border-0 pt-4 mt-0">
    <div class="container py-5">
        <div class="row py-4">
            {{-- Columna 1: Acerca de Nosotros --}}
            <div class="col-lg-4 mb-5 mb-lg-0">
                <h5 class="text-transform-none font-weight-bold text-color-light text-5-5 mb-4">{{ __('footer_about_us_title') }}</h5>
                <p class="text-3-5">{{ config('site.footer.description', __('footer_description')) }}</p>
                <a href="{{ front_homepage_url() }}" class="text-decoration-none">
                    <img src="{{ site_asset_url('footer_logo', config('site.assets.main_logo')) }}" class="img-fluid" alt="{{ config('site.assets.main_logo_alt') }}" />
                </a>
            </div>

            {{-- Columna 2: Enlaces Útiles --}}
            <div class="col-lg-3 mb-5 mb-lg-0">
                <h5 class="text-transform-none font-weight-bold text-color-light text-5-5 mb-4">{{ __('footer_useful_links_title') }}</h5>
                <ul class="list list-unstyled text-3-5 mb-0">
                    @php
                        $footerNav = get_dynamic_navigation('footer');
                        // Excluir elementos que se muestran en otras secciones
                        $excludedKeys = ['products', 'gallery', 'services'];
                        $filteredNav = array_filter($footerNav, function($key) use ($excludedKeys) {
                            return !in_array($key, $excludedKeys);
                        }, ARRAY_FILTER_USE_KEY);
                        $footerNavLimited = array_slice($filteredNav, 0, 6, true);
                    @endphp
                    @foreach($footerNavLimited as $key => $item)
                        @if($item['active'])
                            <li class="mb-2">
                                <a href="{{ $item['url'] }}">{{ __($item['title']) }}</a>
                            </li>
                        @endif
                    @endforeach
                    {{-- Fallback si no hay navegación configurada --}}
                    @if(empty($footerNavLimited))
                        <li class="mb-2"><a href="{{ front_homepage_url() }}">{{ __('footer_base_pages_welcome_title') }}</a></li>
                        <li class="mb-2"><a href="{{ route('front.about') }}">{{ __('footer_base_pages_about_title') }}</a></li>
                        <li class="mb-2"><a href="{{ route('front.contact') }}">{{ __('footer_base_pages_contact_title') }}</a></li>
                        @if(is_module_active('blog'))
                            <li class="mb-2"><a href="{{ route('blog.index') }}">{{ __('footer_modules_blog_title') }}</a></li>
                        @endif
                        @if(is_module_active('faqs'))
                            <li class="mb-2"><a href="{{ route('faqs.index') }}">{{ __('footer_base_pages_faqs_title') }}</a></li>
                        @endif
                    @endif
                </ul>
            </div>

            {{-- Columna 3: Modelos (opcional - solo si existen rutas customizadas) --}}
            @if(Route::has('front.one-factory') || Route::has('front.one-select') || Route::has('front.one-ultra'))
                <div class="col-lg-2 mb-5 mb-lg-0">
                    <h5 class="text-transform-none font-weight-bold text-color-light text-5-5 mb-4">Modelos</h5>
                    <ul class="list list-unstyled text-3-5 mb-0">
                        @if(Route::has('front.one-factory'))
                            <li class="mb-2"><a href="{{ route('front.one-factory') }}">ONE Factory</a></li>
                        @endif
                        @if(Route::has('front.one-ultra'))
                            <li class="mb-2"><a href="{{ route('front.one-ultra') }}">ONE Ultra</a></li>
                        @endif
                        @if(Route::has('front.one-select'))
                            <li class="mb-2"><a href="{{ route('front.one-select') }}">ONE Select</a></li>
                        @endif
                    </ul>
                </div>
            @endif

            {{-- Columna 4: Contacto --}}
            <div class="col-lg-3">
                <h5 class="text-transform-none font-weight-bold text-color-light text-5-5 mb-4">{{ __('footer_contact_title') }}</h5>
                <ul class="list list-unstyled mb-4">
                    @if(config('site.contact.phone'))
                        <li>
                            <i class="icons icon-phone text-color-primary text-5-5 position-relative top-2 me-2"></i>
                            <a href="tel:{{ config('site.contact.phone') }}" class="text-color-light font-weight-bold text-decoration-none text-5">{{ config('site.contact.phone') }}</a>
                        </li>
                    @endif
                    @if(config('site.contact.email'))
                        <li class="mb-3">
                            <i class="icons icon-envelope text-color-primary text-6 position-relative top-6 me-2"></i>
                            <a href="mailto:{{ config('site.contact.email') }}" class="text-color-light text-decoration-none text-4">{{ config('site.contact.email') }}</a>
                        </li>
                    @endif
                </ul>
                <ul class="custom-social-icons-style-1 social-icons social-icons-clean">
                    @php
                        // Obtener solo las redes sociales activas
                        $activeSocialMedia = collect(config('site.social_media', []))
                            ->filter(function($social) {
                                return isset($social['active']) && $social['active'] === true;
                            });
                    @endphp

                    @foreach($activeSocialMedia as $key => $social)
                        @php
                            $isFirst = $loop->first;
                            $isLast = $loop->last;
                            $spacingClass = '';

                            // Aplicar espaciado dinámico
                            if (!$isFirst && !$isLast) {
                                $spacingClass = 'mx-2'; // Margen horizontal para redes del medio
                            } elseif (!$isFirst && $isLast) {
                                $spacingClass = 'ms-2'; // Solo margen izquierdo para la última
                            } elseif ($isFirst && !$isLast) {
                                $spacingClass = 'me-2'; // Solo margen derecho para la primera
                            }
                        @endphp

                        <li class="social-icons-{{ $key }} {{ $spacingClass }}">
                            <a href="{{ $social['url'] ?? '#' }}" class="no-footer-css" target="_blank" title="{{ $social['title'] ?? ucfirst($key) }}">
                                <i class="{{ $social['icon'] ?? 'fab fa-' . $key }}"></i>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-copyright py-0">
        <div class="container py-2">
            <div class="row">
                <div class="col">
                    <p class="text-center text-2 mb-0">
                        ©
                        <span id="copyright">
                            <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
                        </span>
                        &nbsp;
                        <a href="https://www.lacompaniadigital.com" style="color: #00ffff;" target="_blank"><strong>COMPAÑÍA</strong>  DIGITAL &nbsp;</a>
                        &nbsp;
                        {{ __('footer_copyright_text') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

{{-- Newsletter Form Script (opcional) --}}
@if(is_module_active('newsletter'))
<script>
(function () {
    const form = document.getElementById('newsletterForm');
    if (!form) return;

    const emailInput = document.getElementById('newsletterEmail');
    const successAlert = document.getElementById('newsletterSuccess');
    const errorAlert = document.getElementById('newsletterError');
    const csrfToken = document.querySelector('input[name="_token"]')?.value;

    if (!csrfToken) return;

    let isSubmitting = false;
    form.noValidate = true;

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        if (isSubmitting) return;
        isSubmitting = true;

        fetch(form.action, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json'
            },
            body: JSON.stringify({ newsletterEmail: emailInput.value })
        })
        .then(response => {
            if (!response.ok) throw response;
            return response.json();
        })
        .then(data => {
            if (data.success) {
                if (successAlert) {
                    successAlert.classList.remove('d-none');
                    if (errorAlert) errorAlert.classList.add('d-none');
                }
                form.reset();
            }
        })
        .catch(async (error) => {
            let message = 'Ocurrió un error. Intentá más tarde.';
            try {
                const errorData = await error.json();
                message = errorData.errors?.newsletterEmail?.[0] ?? message;
            } catch (_) {}
            if (errorAlert) {
                errorAlert.textContent = message;
                errorAlert.classList.remove('d-none');
                if (successAlert) successAlert.classList.add('d-none');
            }
        })
        .finally(() => {
            isSubmitting = false;
        });
    });
})();
</script>
@endif