{{-- Footer Optimizado para Demo Construction --}}
<footer id="footer"
        class="{{ $config['classes'] }}"
        style="background-image: url({{ asset($config['background']) }}); background-repeat: no-repeat; background-position: center bottom;">

    <div class="container pt-5">
        <div class="row pt-4 mb-5 gy-4">

            {{-- Logo Section --}}
            <div class="col-lg-2 align-self-center">
                <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>
            </div>

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

            {{-- Newsletter & Contact Section --}}
            <div class="col-lg-5">
                @if($config['features']['newsletter'])
                <h4 class="text-color-dark font-weight-bold mb-4-5">{{ config('site.footer.newsletter_title') }}</h4>
                <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-5">
                        <div class="input-group">
                            <input class="form-control border-0"
                                   placeholder="{{ __('Email Address...') }}"
                                   name="newsletterEmail"
                                   id="newsletterEmail"
                                   type="email">
                            <button class="btn btn-primary px-3" type="submit">
                                <img width="27" height="27"
                                     src="{{ asset('template/img/demos/construction/icons/arrow-right.svg') }}"
                                     alt=""
                                     data-icon
                                     data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-light'}"
                                     style="width: 27px;" />
                            </button>
                        </div>
                    </form>
                </div>
                @endif

                @if($config['features']['contact_info'])
                <ul class="list list-unstyled list-inline">
                    <li class="list-inline-item d-inline-flex align-items-center">
                        <img width="23" height="23"
                             src="{{ asset('template/img/demos/construction/icons/phone.svg') }}"
                             alt=""
                             data-icon
                             data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark'}" />
                        <a href="tel:{{ config('site.contact.phone') }}"
                           class="text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5 ms-2">
                           {{ config('site.contact.phone') }}
                        </a>
                    </li>
                    <li class="list-inline-item d-inline-flex align-items-center ms-0 ms-sm-4 ms-lg-1 ms-xl-4">
                        <img width="23" height="23"
                             src="{{ asset('template/img/demos/construction/icons/email.svg') }}"
                             alt=""
                             data-icon
                             data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark'}" />
                        <a href="mailto:{{ config('site.contact.email') }}"
                           class="text-decoration-none text-color-dark text-color-hover-primary font-weight-bold text-3-5 ms-2">
                           {{ config('site.contact.email') }}
                        </a>
                    </li>
                </ul>
                @endif
            </div>
        </div>

        <hr>

        {{-- Copyright & Social Section --}}
        <div class="footer-copyright bg-transparent pb-5 mt-5-5">
            <div class="row pb-5">
                <div class="col text-center mb-5">
                    <p class="text-color-grey text-3 mb-3">
                        {{ config('site.name') }} © {{ date('Y') }}. {{ __('All Rights Reserved.') }}
                    </p>

                    @if($config['features']['social_links'])
                    <ul class="footer-social-icons social-icons social-icons-clean social-icons-medium mb-5">
                        @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'] }} text-4"></i>
                                    </a>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Decorative Elements --}}
    @if($config['features']['decorative_elements'])
    <div class="position-absolute left-100pct transform3dx-n50 top-0 d-none d-lg-block">
        <div class="appear-animation"
             data-appear-animation="fadeInLeftShorterPlus"
             data-appear-animation-delay="1000"
             data-appear-animation-duration="1500ms">
            <div class="custom-square-1 custom-square-1-big bg-dark mt-0 mb-5 me-5"></div>
        </div>
    </div>
    @endif
</footer>