{{-- Footer demo-accounting-1 — Usa componentes compartidos --}}
<footer id="footer" class="position-relative mt-0 border-0" style="background-color: var(--dark);">

    {{-- Línea decorativa cyan --}}
    <div style="height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); opacity: 0.3;"></div>

    <div class="container container-xl-custom py-5">
        <div class="row">
            {{-- Logo + descripción + socials --}}
            <div class="col-md-6 col-lg-4 mb-4 mb-lg-0">
                <a href="{{ url('/') }}" class="text-decoration-none mb-4 d-inline-block">
                    <img src="{{ site_asset_url('footer_logo') ?: site_asset_url('main_logo') }}" class="img-fluid" alt="{{ config('site.assets.main_logo_alt') }}" style="max-width: 200px; height: auto;" />
                </a>
                <p class="text-3-5 mb-4" style="color: var(--quaternary);">
                    {{ config('site.footer.description', config('site.description', '')) }}
                </p>

                <x-social-icons theme="dark" size="md" classes="footer-social-icons d-flex gap-2" />
            </div>

            {{-- Navegación --}}
            <div class="col-md-6 col-lg-2 mb-4 mb-lg-0">
                <h5 class="text-4 mb-3 text-transform-none font-weight-bold" style="color: var(--light);">{{ __('Navegación') }}</h5>
                <x-footer-nav :limit="5" :as-list="true" classes="list-unstyled" />
            </div>

            {{-- Servicios --}}
            @if(is_module_active('services') && isset($featuredServices) && $featuredServices->count() > 0)
            <div class="col-md-6 col-lg-2 mb-4 mb-md-0">
                <h5 class="text-4 mb-3 text-transform-none font-weight-bold" style="color: var(--light);">{{ __('Servicios') }}</h5>
                <ul class="list-unstyled">
                    @foreach($featuredServices->take(5) as $service)
                    <li class="mb-2"><a href="{{ route('frontend.services.detail', $service->slug) }}" class="text-decoration-none text-3" style="color: var(--quaternary); transition: color 0.3s;">{{ $service->title }}</a></li>
                    @endforeach
                </ul>
            </div>
            @endif

            {{-- Newsletter --}}
            <div class="col-md-6 col-lg-4 mb-4 mb-md-0">
                <h5 class="text-4 mb-2 text-transform-none font-weight-bold" style="color: var(--light);">{{ config('site.footer.newsletter_title', __('Novedades')) }}</h5>
                <p class="text-3 mb-3" style="color: var(--quaternary);">
                    {{ config('site.footer.newsletter_description', __('Recibí tendencias y novedades del mundo digital.')) }}
                </p>

                <x-newsletter-form theme="dark" button-classes="btn-primary px-4" :title="false" :description="false" />

                {{-- Contacto rápido --}}
                <div class="mt-4 pt-3" style="border-top: 1px solid var(--light-rgba-10);">
                    <x-footer-contact :show-icons="true" :show-address="false" />
                </div>
            </div>
        </div>
    </div>

    {{-- Copyright bar --}}
    <div style="background-color: var(--secondary); border-top: 1px solid var(--primary-rgba-10);">
        <div class="container container-xl-custom py-3">
            <div class="row">
                <div class="col d-flex align-items-center justify-content-center">
                    <p class="mb-0 text-2" style="color: var(--quaternary); opacity: 0.7;">
                        &copy; {{ date('Y') }}
                        <a href="{{ config('site.url') }}" class="footer-copyright-link">{{ config('site.name') }}</a>
                        &middot; {{ __('Todos los derechos reservados.') }}
                        &middot; {{ __('Potenciado por') }} <a href="https://bewpro.com" class="footer-copyright-link" target="_blank" rel="noopener">BewPro</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
/* Footer — demo-accounting-1 */
.footer-social-link {
    color: var(--quaternary);
    transition: color 0.3s ease;
    text-decoration: none;
}
.footer-social-link:hover {
    color: var(--primary);
}
.footer-nav-link {
    color: var(--quaternary);
    transition: color 0.3s ease;
    text-decoration: none;
}
.footer-nav-link:hover {
    color: var(--primary);
}
.footer-copyright-link {
    color: var(--primary);
    text-decoration: none;
}
.footer-copyright-link:hover {
    opacity: 0.8;
}
.newsletter-input {
    background-color: var(--secondary);
    color: var(--light);
    border: 1px solid var(--primary-rgba-20);
    border-radius: 6px 0 0 6px;
}
.newsletter-input:focus {
    background-color: var(--secondary);
    color: var(--light);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-rgba-20);
}
.newsletter-input::placeholder {
    color: var(--quaternary);
    opacity: 0.6;
}
.newsletter-btn {
    border-radius: 0 6px 6px 0;
}
</style>