<?php

declare(strict_types=1);

use FoundationCommerce\ThemeViewModels\ViewModels\StoreInfoProvider;
use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;
use FoundationCommerce\ThemeViewModels\ViewModels\ThemeIcons;

/** @var Template $block */
/** @var Escaper $escaper */

/** @var \FoundationCommerce\ThemeViewModels\ViewModels\ThemeIcons $icons */
$icons = $viewModels->require(\FoundationCommerce\ThemeViewModels\ViewModels\ThemeIcons::class);

/** @var StoreInfoProvider $storeInfoProvider */
$storeInfoProvider = $viewModels->require
(\FoundationCommerce\ThemeViewModels\ViewModels\StoreInfoProvider::class );
?>
<div class="text-black body-font bg-secondary-lighter">
    <div class="container py-6 lg:py-10">
        <div class="flex flex-wrap order-first lg:items-center">
            <?= $block->getChildHtml('subscribe') ?>
        </div>
    </div>
    <div class="bg-secondary text-white pb-7 md:py-3">
        <div class="container">
            <div class="md:flex md:justify-between md:flex-wrap">
                <?php $footerColumns = ['About', 'Store info'];
                    foreach ($footerColumns as $footerColumn => $footerColumnTitle) {
                ?>
                <div class="link-column border-b-2 md:border-none border-container-darker md:w-1/2 lg:w-1/4" x-data="{open : false}">
                    <p @click="open === false ? open = true : open = false" class="uppercase text-lg leading-6 font-bold tracking-widerer py-5 md:pb-0">
                        <?= $escaper->escapeHtml(__($footerColumnTitle)) ?>
                        <span class="inline float-right md:hidden" :class="{ 'transform rotate-180' : open == true }">
                            <?= $icons->chevronDownSolidHtml(" ", 20, 20) ?>
                        </span>
                    </p>
                    <div class="w-12 border-b hidden md:block pt-2.5 md:mb-5"></div>
                    <div class="md:block border-t md:border-none" :class="{ 'hidden' : !open }">
                        <?= $block->getChildHtml('footer-column' . ($footerColumn + 1) . '-links') ?>
                    </div>
                </div>
                <?php } ?>
                <div class="link-column border-b-2 md:border-none border-container-darker md:w-1/2 lg:w-1/4 md:mt-10 lg:mt-0" x-data="{open : false}">
                    <p class="uppercase text-lg leading-6 font-bold tracking-widerer py-5 md:pb-0" @click="open === false ? open = true : open = false">
                        <?= $escaper->escapeHtml(__('Get in touch')) ?>
                        <span class="inline float-right md:hidden" :class="{ 'transform rotate-180' : open == true }">
                                <?= $icons->chevronDownSolidHtml(" ", 20, 20) ?>
                        </span>
                    </p>
                    <div class="w-12 border-b hidden md:block pt-2.5 md:mb-5"></div>
                    <div class="md:mb-0 md:block border-t md:border-none" :class="{ 'hidden' : !open }">
                        <div class="py-2">
                            <a href="/contact/"><?= $escaper->escapeHtml(__('Contact Us')) ?></a>
                        </div>
                        <div class="py-2"><?= $storeInfoProvider->getStoreAddress() ?></div>
                        <?php if ($phoneNumber = $storeInfoProvider->getStoreNumber()) { ?>
                        <div class="py-2">
                            <a class="flex items-center" href="tel: <?= $phoneNumber ?>">
                                <?= $icons->phoneHtml("h-4 mr-2", 16, 16) ?>
                                <?= $phoneNumber ?>
                            </a>
                        </div>
                        <?php } ?>
                    </div>
                </div>
                <div class="link-column pt-6 md:pt-5 md:w-1/2 lg:w-1/4 md:mt-10 lg:mt-0">
                    <?= $icons->logoPiShopOutlinesHtml("mb-8", 226, 45) ?>
                    <div class="mb-4 border-b md:border-none border-container-lighter pb-6">
                        <div class="flex items-center">
                            <?php
                                $socialLinks = [
                                    [
                                        'url' => 'https://www.facebook.com/SwissRaspberryPi/',
                                        'label' => 'Visit our Facebook page',
                                        'svg' => 'facebook-f-brands',
                                        'w' => 14
                                    ],
                                    [
                                        'url' => 'https://twitter.com/pishop_ch/',
                                        'label' => 'Visit our Twitter page',
                                        'svg' => 'twitter-brands',
                                        'w' => 31
                                    ],
                                    [
                                        'url' => 'https://www.instagram.com/pi_shop.ch/',
                                        'label' => 'Visit our Instagram page',
                                        'svg' => 'instagram-brands',
                                        'w' => 25
                                    ]
                                ];

                                foreach ($socialLinks as $socialLink) {
                                    ?><a href="<?= $socialLink['url']?>" aria-label="<?= $escaper->escapeHtml(__($socialLink['label'])); ?>" target="_blank" rel="noopener norefferrer me"><?= $icons->renderHtml($socialLink['svg'], "mr-8 lg:mr-6 xl:mr-8", $socialLink['w'], 25) ?></a>
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex flex-col md:flex-row items-center md:justify-between mt-4 md:mt-10 text-xs md:border-t md:border-container-lighter">
                <div class="w-full md:w-1/2 md:mt-4">
                    <p>&copy; <?= date('Y') ?> Pi-Shop.ch - Totonic GmbH. All Rights Reserved.</p>
                </div>
                <div class="flex justify-start md:justify-end items-center mt-4 md:w-1/2 w-full">
                    <?= $block->getChildHtml('footer.payment.icons') ?>
                </div>
            </div>
        </div>
    </div>
</div>

