@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="https://my.premier.org.uk/donate/donate-premier-plus"
                       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.goecoffee.com/"
                       class="block link font-normal text-sm text-white">Garden of Eden Coffee</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>
                </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>