{% use "includes/blocks/blocks.html.twig" %}
<footer class="relative">
<!-- DECORATIONS -->
<img src="{{ asset('vue/decor/iam-funradio.svg', 'img') }}"
class="absolute right-[-10px] lg:right-0 w-[100px] top-[-35px] lg:w-[160px] lg:top-[-65px] 2xl:w-[260px] 2xl:top-[-90px]" alt="Fun Radio"
/>
<div class="hidden 2xl:block 2xl:absolute bottom-0 left-0 right-0 overflow-hidden h-[180px]">
<img src="{{ asset('vue/decor/square-blue.svg', 'img') }}"
class="hidden 2xl:block 2xl:absolute left-0 w-[12vw] max-w-[80px] min-w-[70px] bottom-[-50px]" alt="Fun Radio"
/>
</div>
<!-- FOOTER 1 MOBILE + DESKTOP -->
<div class="flex flex-col items-center bg-frDarkBlue text-white mid-section-pb mid-section-pt">
<div class="container w-fit lg:w-full justify-center grid grid-cols-2 lg:grid-cols-4 gap-50 lg:gap-54">
<!-- STUDIO -->
<div class="flex flex-col min-w-[180px] gap-6">
<div class="row flex items-center gap-6 lg:gap-10">
<img class="w-12 h-12 lg:w-18 lg:h-18" src="{{ asset('vue/icons/tel-studio.svg', 'img') }}" alt=""/>
<div class="sm-text-card">Štúdio</div>
</div>
<div class="row flex flex-start gap-6 lg:gap-10 items-center">
<a
href="tel:0903943003"
title="Volať 0903 943 003"
class="flex md-text-card mr-0 group relative">
0903 943 003
<span class="flex items-center ml-6">
<img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
</span>
</a>
</div>
</div>
<!-- DOPRAVA -->
<div class="flex flex-col min-w-[180px] gap-6">
<div class="row flex items-center gap-6 lg:gap-10">
<img class="w-15 h-12 lg:w-22 lg:h-16" src="{{ asset('vue/icons/tel-doprava.svg', 'img') }}" alt=""/>
<div class="sm-text-card">Doprava</div>
</div>
<div class="row flex flex-nowrap flex-start gap-6 lg:gap-10 items-center">
<a
href="tel:0800800200"
title="Volať 0800 800 200"
class="flex md-text-card mr-0 group relative">
0800 800 200
<span class="flex items-center ml-6">
<img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
</span>
</a>
</div>
</div>
<!-- RECEPCIA -->
<div class="flex flex-col min-w-[180px] gap-6">
<div class="row flex items-center gap-6 lg:gap-10">
<img class="w-12 h-12 lg:w-18 lg:h-18" src="{{ asset('vue/icons/tel-recepcia.svg', 'img') }}" alt=""/>
<div class="sm-text-card">Recepcia</div>
</div>
<div class="row flex flex-start gap-6 lg:gap-10 items-center">
<a
href="tel:02/57787111"
title="Volať 02 / 577 87 111"
class="flex md-text-card mr-0 group relative">
02 / 577 87 111
<span class="flex items-center ml-6">
<img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
</span>
</a>
</div>
</div>
<!-- E-MAIL -->
<div class="flex flex-col min-w-[180px] gap-6">
<div class="row flex items-center gap-6 lg:gap-10">
<img class="w-13 h-10 lg:w-20 lg:h-16" src="{{ asset('vue/icons/e-mail.svg', 'img') }}" alt=""/>
<div class="sm-text-card">E-mail</div>
</div>
<div class="row flex flex-start gap-6 lg:gap-10 items-center">
<a
href="mailto:info@funradio.sk"
title="E-mail na info@funradio.sk"
class="flex md-text-card mr-0 group relative">
info@funradio.sk
<span class="flex items-center ml-6">
<img class="w-16 transition-transform duration-300 group-hover:translate-x-5"
src="{{ asset('vue/icons/arrow-link-pink.svg', 'img') }}" alt="→" />
</span>
</a>
</div>
</div>
</div>
</div>
<!-- FOOTER 2 MOBILE -->
<div class="lg:hidden bg-frDarkBlue text-white flex flex-col items-center">
<div class="container">
<hr class="border-t-1 border-white" />
</div>
<div class="container flex flex-col items-center pb-47">
<div class="lg:hidden grid grid-cols-2 gap-x-54 w-fit mt-48">
<div class="flex flex-row">
<img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}" width="110" height="56" alt="Fun Radio" />
</div>
<div class="flex flex-row gap-54">
{{ block('social_footer') }}
</div>
<!-- COL LEFT 1 -->
<div class="flex flex-col mt-[54px]">
<h3 class="md-text-card text-frMagenta font-bold footerArrow-mobile mb-20">Aplikácia</h3>
<div class="footerApps">
<img src="{{ asset('vue/iphone.webp', 'img') }}"
alt="Appstore"
class="relative max-w-fit w-[160px] mb-5 left-[-20px]"
/>
<a href="#" class="block mb-[5px]">
<img src="{{ asset('vue/icons/googleplay.webp', 'img') }}"
alt="Google Play"
class="w-100"
/>
</a>
<a href="#">
<img src="{{ asset('vue/icons/appstore.webp', 'img') }}"
alt="App store"
class="w-100"
/>
</a>
</div>
</div>
<!-- COL RIGHT 1 -->
<div class="flex flex-col mt-[54px]">
{# Broadcasts #}
{% if footer_menu_airing is not empty %}
<h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Vysielanie</h3>
{% for item in footer_menu_airing %}
{% if item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
<a href="{{ slug }}" class="sm-text-card {{ loop.last ? 'pb-20' : 'pb-4' }}" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
{% endfor %}
{% endif %}
</div>
<!-- COL LEFT 2 -->
<div class="flex flex-col mt-20">
{# Categories #}
{% if footer_menu_categories is not empty %}
{% for item in footer_menu_categories %}
{% if item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
<a href="{{ slug }}" class="sm-text-card pb-4" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
{% endfor %}
{% endif %}
</div>
<!-- COL RIGHT 2 -->
{# Podcasts #}
{% if footer_menu_podcasts is not empty %}
<div class="flex flex-col">
<h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Podcasty</h3>
{% for item in footer_menu_podcasts %}
<a href="{{ item.link }}" class="sm-text-card pb-4">{{ item.name }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<!-- FOOTER 2 DESKTOP -->
<div class="hidden lg:flex bg-frDarkBlue text-white flex-col items-center">
<div class="container">
<hr class="border-t-1 border-white lg:mid-section-pb" />
</div>
<div class="container grid grid-cols-4 items-start gap-10 lg:pb-40">
<!-- COL 1 -->
<div class="footer2__col1 flex flex-col gap-30 h-full justify-between">
<div class="flex flex-col gap-28">
<div class="flex">
<img src="{{ asset('vue/icons/funRadioLogo.svg', 'img') }}" width="110" height="56" alt="Fun Radio" />
</div>
<div class="flex flex-row gap-54">
{{ block('social_footer') }}
</div>
</div>
{# Categories #}
{% if footer_menu_categories is not empty %}
<div class="flex flex-col items-start">
{% for item in footer_menu_categories %}
{% if item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
<a href="{{ slug }}" class="sm-text-card" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
{% endfor %}
</div>
{% endif %}
</div>
{# Broadcasts #}
{% if footer_menu_airing is not empty %}
<div class="flex flex-col">
<h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Vysielanie</h3>
{% for item in footer_menu_airing %}
{% if item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
<a href="{{ slug }}" class="sm-text-card" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
{% endfor %}
</div>
{% endif %}
{# Podcasts #}
{% if footer_menu_podcasts is not empty %}
<div class="flex flex-col">
<h3 class="md-text-card mb-20 lg:mb-40 text-frMagenta font-bold">Podcasty</h3>
{% for item in footer_menu_podcasts %}
<a href="{{ item.link }}" class="sm-text-card">{{ item.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- COL 4 -->
<div class="flex flex-col">
<h3 class="md-text-card mb-20 text-frMagenta font-bold footerArrow">Aplikácia</h3>
<div>
<div class="footerApps w-129">
<a href="#" class="lg:mb-5 block">
<img src="{{ asset('vue/icons/googleplay.webp', 'img') }}" width="auto" alt="Google Play" class="w-129" />
</a>
<a href="#">
<img src="{{ asset('vue/icons/appstore.webp', 'img') }}" width="auto" alt="App store" class="w-129" />
</a>
</div>
<img src="{{ asset('vue/iphone.webp', 'img') }}" width="auto" alt="Appstore" class="h-126 lg:h-224 lg:w-auto lg:-ml-24" />
</div>
</div>
</div>
</div>
<div class="flex items-center justify-center bg-frDarkBlue text-white lg:pb-[100px]">
<!-- FOOTER 3 -->
<div class="container pb-23 lg:pb-40 relative z-10">
<hr class="border-t-1 border-white mb-25 lg:mb-40" />
<div class="flex">
<span class="xs-text-card w-auto whitespace-nowrap mr-40">Ⓒ {{ 'now'|date('Y') }} {{ site_title }}</span>
{% if footer_menu_bottom is not empty %}
<div class="flex flex-wrap justify-between gap-10 ml-auto">
{% for item in footer_menu_bottom %}
{% if item.type == "custom" %}
{% set slug = item.url %}
{% elseif item.type == "category" %}
{% set slug = path('category', {category: item.slug}) %}
{% elseif item.type == "broadcast" %}
{% set slug = path('broadcast', {id: item.item, slug: item.slug}) %}
{% else %}
{% set slug = path('staticPage', {id: item.item, slug: item.slug}) %}
{% endif %}
{% set rel = item.rel ? ' rel="' ~ item.rel ~ '"' : '' %}
{% set target = item.target ? ' target="' ~ item.target ~ '"' : '' %}
<a href="{{ slug }}" class="xs-text-card lg:mx-20" {{ rel|raw }}{{ target|raw }}>{{ item.title }}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</footer>