<footer class="{{ [
    'py-20',
    'space-y-20',
    'text-white',
    footer:footer_color
] | classes | collapse_whitespace }}">
    <div class="container flex flex-col gap-y-10 lg:gap-y-14">
        {{ partial:components/molecules/global/logo classes="size-full max-h-[44px] max-w-[220px]" }}
        <div class="grid gap-y-8 xl:grid-cols-12 xl:gap-5">
            <div class="flex flex-col gap-y-8 xl:col-span-3">
                {{ partial:components/atoms/text/prose classes="prose-white" content="{footer:contact}" }}
                <div class="flex items-center flex-wrap gap-4">
                    {{ if socials:youtube }}
                        <a href="{{ socials:youtube }}" class="transition-colors hover:opacity-75">
                            {{ partial:components/atoms/icons/youtube size="size-6" }}
                        </a>
                    {{ /if }}
                    {{ if socials:instagram }}
                        <a href="{{ socials:instagram }}" class="transition-colors hover:opacity-75">
                            {{ partial:components/atoms/icons/instagram size="size-6" }}
                        </a>
                    {{ /if }}
                    {{ if socials:facebook }}
                        <a href="{{ socials:facebook }}" class="transition-colors hover:opacity-75">
                            {{ partial:components/atoms/icons/facebook size="size-6" }}
                        </a>
                    {{ /if }}
                    {{ if socials:x }}
                        <a href="{{ socials:x }}" class="transition-colors hover:opacity-75">
                            {{ partial:components/atoms/icons/x size="size-6" }}
                        </a>
                    {{ /if }}
                    {{ if socials:linkedin }}
                        <a href="{{ socials:linkedin }}" class="transition-colors hover:opacity-75">
                            {{ partial:components/atoms/icons/linkedin size="size-6" }}
                        </a>
                    {{ /if }}
                </div>
            </div>
            {{ if footer:other }}
                <div class="grid grid-cols-2 gap-5 xl:col-span-3">
                    {{ partial:components/atoms/text/prose classes="prose-white" content="{footer:other}" }}
                </div>
            {{ /if }}
            <div class="h-fit md:grid md:grid-cols-2 md:gap-5 xl:col-span-6 xl:col-start-7 xl:mt-0">
                <div class="grid gap-5 xl:col-span-2">
                    {{ nav handle="footer" }}
                        {{ unless no_results }}
                            <div>
                                <a href="{{ url }}" class="font-semibold underline-offset-4 hover:underline">{{ title }}</a>
                                {{ if children }}
                                    <ul role="list" class="space-y-2 mt-2">
                                        {{ children }}
                                            <li>
                                                <a href="{{ url }}" class="hover:underline">{{ title }}</a>
                                            </li>
                                        {{ /children }}
                                    </ul>
                                {{ /if }}
                            </div>
                        {{ /unless }}
                    {{ /nav }}
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="text-base xl:flex xl:flex-wrap xl:items-center xl:justify-between">
            <div class="flex flex-wrap justify-center space-x-5 xl:order-2">
                {{ nav handle="footer_utility" }}
                    {{ unless no_results }}
                        <a href="{{ url }}" class="hover:underline">{{ title }}</a>
                    {{ /unless }}
                {{ /nav}}
                <div>
                    {{ 'Design & development' | trans }}: <a href="http://concept7.nl" class="hover:underline" target="_blank">Concept7</a>
                </div>
            </div>
            <div class="mt-8 md:order-1 xl:mt-0">
                <p class="text-center">{{ footer:copyright }}</p>
            </div>
        </div>
    </div>
</footer>
