@php
    $column1 = \Illuminate\Support\Arr::pull($footer_columns, 'column1');
    $column2 = \Illuminate\Support\Arr::pull($footer_columns, 'column2');
    $column3 = \Illuminate\Support\Arr::pull($footer_columns, 'column3');
@endphp

<footer class="bg-black">
    <div class="bg-purple py-16">
        <div class="container-1">
            <div class="flex flex-col items-center md:items-top justify-between my-10">
                <a href="/">
                    <x-icon name="logo-premier-plus" class="text-white hover:opacity-75" size="8.5em"/>
                </a>
            </div>
            <div class="flex flex-col md:flex-row items-center md:items-start justify-between gap-y-10">
                <div class="flex flex-col items-center order-2 md:items-start gap-4 md:w-1/4 px-2">
                    @isset($column1)
                        @foreach($column1 as $link)
                          <a href="{{ $link->url }}" class="link text-white font-extrabold">{{ $link->name }}</a>
                        @endforeach
                    @endisset
                </div>

                <div class="flex flex-col items-center order-2 md:items-start gap-4 md:w-1/4 px-2">
                    @isset($column2)
                        @foreach($column2 as $link)
                            <a href="{{ $link->url }}" class="link text-white font-normal excluded">{{ $link->name }}</a>
                        @endforeach
                    @endisset
                </div>

                <div class="flex flex-col items-center order-2 md:items-start gap-4 md:w-1/4 px-2">
                    @isset($column3)
                        @foreach($column3 as $link)
                            <a href="{{ $link->url }}" class="link text-white font-normal excluded">{{ $link->name }}</a>
                        @endforeach
                    @endisset
                </div>

                <div class="flex flex-col items-center order-1 md:order-2 md:items-end sm:max-w-[288px] gap-y-7 px-2">
                    <div class="relative" x-data @click="$dispatch('opensearchmodal')">
                        <x-form.input
                            class="form-input form-purple pr-12 block w-full focus:ring-white/30"
                            placeholder="Search..."
                        />
                        <button class="absolute m-2.5 mx-3 top-0 right-0 text-purple-light btn p-0 active:scale-90">
                            <x-icon name="search" class="" size="1.5em"/>
                        </button>
                    </div>
                    <a target="_blank" href="{{ get_setting_value('web_donation_link') }}"
                       class="btn-bright-pink focus:ring-white/30 px-12 w-full">Donate</a>
                </div>
            </div>

            <div class="text-center text-white pb-10">
                <x-icon name="logo-premier" size="9rem" class="inline-block -mb-4" />
                <h4 class="h4">Our Other Sites</h4>
            </div>

            <div class="flex flex-col md:flex-row items-center md:items-start justify-between gap-4">
                <div class="flex flex-col items-center md:items-start gap-4 md:w-1/4">
                    <a target="_blank" href="https://www.premier.org.uk/"
                       class="block link font-normal text-sm text-white">Premier</a>
                    <a target="_blank" href="https://www.premierchristianity.com"
                       class="block link font-normal text-sm text-white">Premier Christianity Magazine</a>
                    <a target="_blank" href="https://premierchristian.news/"
                       class="block link font-normal text-sm text-white">Premier Christian News</a>
                </div>

                <div class="flex flex-col items-center md:items-start gap-4 md:w-1/4">
                    <a target="_blank" href="https://www.premiernexgen.com/"
                       class="block link font-normal text-sm text-white">Premier NexGen</a>
                    <a target="_blank" href="https://www.womanalive.co.uk/"
                       class="block link font-normal text-sm text-white">Woman Alive Magazine</a>
                    <a target="_blank" href="https://premierjobsearch.co.uk/"
                       class="block link font-normal text-sm text-white">Premier Job Search</a>
                </div>

                <div class="flex flex-col items-center md:items-start gap-4 md:w-1/4">
                    <a target="_blank" href="https://www.premierunbelievable.com/"
                       class="block link font-normal text-sm text-white">Premier Unbelievable</a>
                    <a target="_blank" href="https://www.premierlifeline.org.uk/"
                       class="block link font-normal text-sm text-white">Premier Lifeline</a>
                    <a target="_blank" href="https://premierchristianmarketplace.co.uk/"
                       class="block link font-normal text-sm text-white">Premier Christian Marketplace</a>
                </div>

                <div class="flex flex-col items-center md:items-start gap-4 md:w-1/4">
                    <a target="_blank" href="https://digital-theology.org/"
                       class="block link font-normal text-sm text-white">Centre for Digital Theology</a>
                    <a target="_blank" href="https://www.premierdigital.info/"
                       class="block link font-normal text-sm text-white">Premier Digital</a>
                    <a target="_blank" href="https://christianholidayguide.co.uk/"
                       class="block link font-normal text-sm text-white">The Christian Holiday Guide</a>
                </div>
            </div>
        </div>
    </div>
    <div class="container-1 py-20 space-y-14 text-center text-grey-200 text-sm">
        <p>Premier consists of Premier Christian Media Trust registered as a charity (no. 287610) and as a company
            limited by guarantee (no. 01743091) with two fully-owned trading subsidiaries: Premier Christian
            Communications Ltd (no. 02816074) and Christian Communication Partnership Ltd (no. 03422292). All three
            companies are registered in England & Wales with a registered office address of Unit 6 April Court, Sybron
            Way, Crowborough, TN6 3DZ.</p>
        <div class="sm:flex justify-center space-y-2 sm:space-x-6 sm:space-y-0">
            <p>© Premier {{ now()->year }}</p>
            <p><a href="https://premier.org.uk/privacy" class="link text-white" target="_blank"
                  rel="noopener noreferrer">Privacy Policy</a></p>
            <p>Built By <a href="https://www.amperative.com" target="_blank"
                           class="link text-white excluded">Amperative</a></p>
        </div>
    </div>
</footer>

@push('body.bottom')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(() => {
                fixSmartBannerToHeader();
            }, 1000);
        });

        let recursionCount = 0; 

        function fixSmartBannerToHeader(){
            recursionCount++;
            const banner = document.querySelector('.smartbanner');
            if(banner){
                banner.style.position = 'fixed';
                banner.style.zIndex = 599999;
                console.log(`Banner fixed after ${recursionCount} attempts`);
            }else if(recursionCount > 15){
                return;
            }else{
                setTimeout(() => fixSmartBannerToHeader(),1000);
                console.log(`Attempt ${recursionCount}: Smart banner not found, retrying...`);
            }
        }
    </script>
@endpush