{{-- Footer Default - Sistema Universal --}}
<footer id="footer" class="{{ $config['classes'] }}">

    <div class="container">
        <div class="row py-4">

            {{-- Logo Section --}}
            <div class="col-lg-3 mb-4 mb-lg-0">
                <a href="{{ route('home') }}">
                    <img alt="{{ config('site.assets.main_logo_alt') }}"
                         class="img-fluid logo"
                         width="123"
                         height="48"
                         src="{{ asset(config('site.assets.footer_logo')) }}">
                </a>
                <p class="text-color-dark opacity-7 mt-3">
                    {{ config('site.description', 'Sitio web profesional con diseño moderno y funcional.') }}
                </p>
            </div>

            {{-- Navigation Section --}}
            <div class="col-lg-3 mb-4 mb-lg-0">
                <h5 class="text-color-dark font-weight-bold mb-3">{{ __('Navegación') }}</h5>
                <ul class="list list-unstyled">
                    @foreach($navigation as $key => $item)
                        @if($item['active'])
                            <li class="mb-2">
                                <a href="{{ $item['url'] }}" class="text-color-dark text-color-hover-primary">
                                    @if(isset($item['icon']))
                                        <i class="{{ $item['icon'] }} me-1"></i>
                                    @endif
                                    {{ $item['title'] }}
                                </a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>

            {{-- Contact Section --}}
            <div class="col-lg-3 mb-4 mb-lg-0">
                <h5 class="text-color-dark font-weight-bold mb-3">{{ __('Contacto') }}</h5>

                @if($config['features']['contact_info'])
                <ul class="list list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-phone me-2 text-color-primary"></i>
                        <a href="tel:{{ config('site.contact.phone') }}" class="text-color-dark text-color-hover-primary">
                            {{ config('site.contact.phone') }}
                        </a>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-envelope me-2 text-color-primary"></i>
                        <a href="mailto:{{ config('site.contact.email') }}" class="text-color-dark text-color-hover-primary">
                            {{ config('site.contact.email') }}
                        </a>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-map-marker-alt me-2 text-color-primary"></i>
                        <span class="text-color-dark">{{ config('site.contact.address') }}</span>
                    </li>
                </ul>
                @endif
            </div>

            {{-- Newsletter & Social Section --}}
            <div class="col-lg-3">
                @if($config['features']['newsletter'])
                <h5 class="text-color-dark font-weight-bold mb-3">{{ config('site.footer.newsletter_title', __('Newsletter')) }}</h5>
                <div class="newsletter">
                    <div class="alert alert-success d-none" id="newsletterSuccess">
                        <strong>{{ __('Success!') }}</strong> {{ __('You\'ve been added to our email list.') }}
                    </div>
                    <div class="alert alert-danger d-none" id="newsletterError"></div>
                    <form id="newsletterForm" action="#" method="POST" class="mb-4">
                        <div class="input-group">
                            <input class="form-control"
                                   placeholder="{{ __('Email Address...') }}"
                                   name="newsletterEmail"
                                   id="newsletterEmail"
                                   type="email">
                            <button class="btn btn-primary" type="submit">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                </div>
                @endif

                @if($config['features']['social_links'])
                <div class="mt-4">
                    <h6 class="text-color-dark font-weight-bold mb-3">{{ __('Síguenos') }}</h6>
                    <ul class="social-icons social-icons-clean social-icons-medium">
                        @foreach(config('site.social_media') as $key => $social)
                            @if($social['active'])
                                <li class="social-icons-{{ $key }}">
                                    <a href="{{ $social['url'] }}" target="_blank" title="{{ $social['title'] }}">
                                        <i class="{{ $social['icon'] }}"></i>
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
                @endif
            </div>
        </div>

        {{-- Copyright Section --}}
        <div class="footer-copyright">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p class="text-color-dark opacity-7 mb-0">
                        {{ config('site.name') }} © {{ date('Y') }}. {{ __('All Rights Reserved.') }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>