<?php
/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 */

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\Customer;
use Hyva\Theme\ViewModel\StoreConfig;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;

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


/** @var Customer $customer */
$customer = $viewModels->require(Customer::class);
/** @var StoreConfig $storeConfig */
$storeConfig = $viewModels->require(StoreConfig::class);
/** @var \Magento\Store\Model\StoreManagerInterface $storeManager */
$storeManager = \Magento\Framework\App\ObjectManager::getInstance()->get(\Magento\Store\Model\StoreManagerInterface::class);
$mediaUrl = $storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$logoPath = $storeConfig->getStoreConfig('design/header/logo_src');
$fullLogoUrl = $mediaUrl . 'logo/' . ltrim($logoPath, '/');
?>


<ul class="mt-0 ">
    <li class="mt-0">
        <span>
            <img src="<?= $escaper->escapeUrl(($fullLogoUrl)); ?>" alt="Banyo Logo">
        </span>

    </li>
    <li class="mt-4">
        <div class="flex items-center px-4 py-2 bg-white  border border-primary-darker rounded-md w-fit">
            <div class="rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" width="38" height="33" viewBox="0 0 38 33" fill="none">
                    <path
                            d="M32.5688 14.0427C32.615 9.48424 27.9981 5.30537 22.277 4.7275C22.1632 4.71616 22.0393 4.69889 21.908 4.68061C21.6248 4.64115 21.3319 4.60059 21.0364 4.60059C19.8638 4.60059 19.5504 5.29322 19.4679 5.7063C19.3876 6.10794 19.4642 6.44522 19.695 6.7092C20.0833 7.15322 20.7665 7.23204 21.3153 7.2952C21.4761 7.31387 21.6279 7.33124 21.7549 7.35524C26.8951 8.32109 28.6259 9.83959 29.4718 14.1253C29.4924 14.23 29.5017 14.3591 29.5116 14.4959C29.5485 15.0082 29.6254 16.0741 30.9881 16.0741H30.9882C31.1016 16.0741 31.2236 16.0658 31.3505 16.0496C32.6194 15.8874 32.5797 14.9131 32.5605 14.445C32.5552 14.3132 32.55 14.1885 32.5633 14.1055C32.5669 14.0846 32.5687 14.0636 32.5688 14.0427Z"
                            fill="#004472"/>
                    <path
                            d="M20.7041 3.05444C20.8564 3.06367 21.0005 3.07251 21.1205 3.08797C29.5612 4.17953 33.4429 7.54247 34.5186 14.6959C34.5369 14.8175 34.5398 14.9658 34.5427 15.1228C34.5535 15.6817 34.5756 16.8444 36.0604 16.8685L36.1065 16.8689C36.5722 16.8689 36.9426 16.7508 37.2075 16.5176C37.6697 16.1111 37.6375 15.5071 37.6115 15.0217C37.6051 14.9026 37.5991 14.7905 37.6006 14.6923C37.708 7.37619 30.177 0.741988 21.4847 0.49528C21.4486 0.494276 21.4142 0.495883 21.3795 0.499999C21.3624 0.502108 21.3308 0.504719 21.2766 0.504719C21.1899 0.504719 21.0832 0.498393 20.9702 0.491967C20.8334 0.484135 20.6785 0.475098 20.5213 0.475098C19.1371 0.475098 18.8739 1.30248 18.8402 1.79569C18.7626 2.93555 20.0739 3.01578 20.7041 3.05444Z"
                            fill="#004472"/>
                    <path
                            d="M34.1111 23.941C33.9316 23.8258 33.7461 23.7065 33.5723 23.5888C32.6508 22.9652 31.6703 22.3903 30.7221 21.8343C30.5254 21.7191 30.3286 21.6037 30.1325 21.488C28.9179 20.7706 27.826 20.422 26.7943 20.422C25.4048 20.422 24.1933 21.0676 23.1934 22.3407C22.7504 22.9051 22.213 23.1795 21.5506 23.1795C21.159 23.1795 20.7139 23.0856 20.2281 22.9001C16.3076 21.4051 13.5082 19.1129 11.9073 16.0873C11.1334 14.6249 11.3843 13.669 12.7462 12.891C13.5196 12.4496 14.9592 11.6278 14.8572 10.0542C14.7418 8.26721 10.0529 2.89034 8.07737 2.27965C7.24094 2.02099 6.36212 2.01858 5.4606 2.27362C3.18951 2.91565 1.55975 4.04315 0.747073 5.53404C-0.0382563 6.97463 -0.00279291 8.66614 0.849643 10.4257C3.31393 15.5131 6.7786 19.9486 11.1478 23.6089C15.4244 27.1919 20.6807 30.1269 26.7707 32.332C27.3196 32.5306 27.8953 32.639 28.3158 32.718C28.4591 32.7451 28.5828 32.7682 28.6729 32.789C28.7225 32.8003 28.7736 32.8065 28.8248 32.8069L28.8729 32.8071C28.8729 32.8071 28.8729 32.8071 28.8731 32.8071C31.7374 32.8071 35.1767 30.6061 36.2329 28.0968C37.1583 25.8997 35.4687 24.8136 34.1111 23.941Z"
                            fill="#004472"/>
                    <path
                            d="M21.9706 8.86562C21.4802 8.87607 20.4596 8.89735 20.1015 9.77142C19.934 10.1799 19.954 10.5345 20.1612 10.8255C20.4652 11.2525 21.0477 11.3833 21.5775 11.4551C23.4988 11.7144 24.4856 12.6078 24.683 14.2666C24.7747 15.0401 25.394 15.5802 26.1893 15.5802C26.248 15.5802 26.3082 15.5772 26.368 15.5711C27.3245 15.4754 27.7881 14.8845 27.7462 13.8149C27.7615 12.6987 27.0668 11.4314 25.8853 10.422C24.6997 9.40945 23.2705 8.83922 21.9706 8.86562Z"
                            fill="#004472"/>
                </svg>
            </div>
            <div class="img-text ml-2">
                <a href="tel:+0116 274 4059" class="text-base font-semibold text-gray-700 whitespace-nowrap">
                    Call
                    Us: <?= $escaper->escapeHtml($storeConfig->getStoreConfig('general/store_information/phone')); ?>
                </a>
                <p class="text-sm text-gray-700 whitespace-nowrap">
                    <?= $escaper->escapeHtml($storeConfig->getStoreConfig('general/store_information/hours')); ?>
                </p>
            </div>
        </div
    </li>

</ul>

<!-- for desktop -->
<div class="staring justify-between w-7/12 hidden lg:flex">
    <div class="flex flex-wrap pr-4">
        <div class="w-full grid grid-cols-1 gap-8 xl:col-span-2">
            <div>
                <h4 class="text-base md:text-lg font-inter font-bold uppercase text-black">
                    BANYO
                </h4>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\about-us"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            About Us
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="<?= $escaper->escapeUrl($block->getUrl('contacts')) ?>"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            <?= $escaper->escapeHtml(__('Contact Us')) ?>
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\visit-showroom"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Visit Our Showroom
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\article"
                           class="text-base leading-6 text-black hover:underline hover:text-primary-darker font-medium">
                            Ideas and Inspirations
                        </a>
                    </li>

                    <?php if (!$customer->customerLoggedIn()): ?>
                        <li class="mt-4">
                            <a href="\how-to-order"
                               class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                                How to Order
                            </a>
                        </li>
                    <?php endif; ?>

                </ul>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap pr-4">
        <div class="w-full grid grid-cols-1 gap-8 xl:col-span-2">
            <div>
                <h4 class="text-base md:text-lg font-inter font-bold uppercase text-black">
                    customer services
                </h4>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\delivery"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Delivery
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\returns"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Returns
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="/faq"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            FAQS
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="/finance"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            0% Finance Options
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\14-day-money-back-guarantee"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            14 Day Money Back Guarantee
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="flex flex-wrap pr-4">
        <div class="w-full grid grid-cols-1 gap-8 xl:col-span-2">
            <div>
                <h4 class="text-base md:text-lg font-inter font-bold uppercase text-black">
                    Legal
                </h4>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\cookies"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Cookies
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\terms-conditions"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Terms and Conditions
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\privacy-policy"
                           class="text-base font-intertext-black hover:underline hover:text-primary-darker font-medium">
                            Privacy Policy
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- For Mobile Accordion-->
<div class="lg:hidden">
    <!-- BANYO -->
    <div x-data="{ open: false }" class="py-3 lg:pt-0 ">
        <a @click="open = !open" class="flex justify-between items-center cursor-pointer group">
            <div class="uppercase font-bold text-black">BANYO</div>
            <span class="transition-transform duration-300 ease-in-out"
                  :class="{ 'rotate-180': open }">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4 16 16"
                     stroke="currentColor" class="text-black stroke-current lg:hidden"
                     width="24" height="24" aria-hidden="true" role="img">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </span>
        </a>

        <ul class="flex-col gap-4 mt-4 mb-6 lg:flex flex transition-transform duration-300 ease-in-out"
            :class="{ 'flex': open, 'hidden': !open }">

            <li><a href="/about-us" class="hover:underline text-black">About Us</a></li>
            <li><a href="<?= $escaper->escapeUrl($block->getUrl('contacts')) ?>" class="hover:underline text-black">
                    <?= $escaper->escapeHtml(__('Contact Us')) ?></a></li>
            <li><a href="/visit-showroom" class="hover:underline text-black">Visit Our Showroom</a></li>
            <?php if (!$customer->customerLoggedIn()): ?>
                <li><a href="/how-to-order" class="hover:underline text-black">How to Order</a></li>
            <?php endif; ?>
        </ul>
    </div>

    <!-- Customer Services -->
    <div x-data="{ open: false }" class="py-3 lg:pt-0 border-t-2 ">
        <a @click="open = !open" class="flex justify-between items-center cursor-pointer group">
            <div class="uppercase font-bold text-black">Customer Services</div>
            <span class="transition-transform duration-300 ease-in-out"
                  :class="{ 'rotate-180': open }">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4 16 16"
                     stroke="currentColor" class="text-primary-darker stroke-current lg:hidden"
                     width="24" height="24" aria-hidden="true" role="img">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </span>
        </a>
        <ul class="flex-col gap-4 mt-4 mb-6 lg:flex flex transition-transform duration-300 ease-in-out"
            :class="{ 'flex': open, 'hidden': !open }">

            <li><a href="/delivery" class="hover:underline text-black">Delivery</a></li>
            <li><a href="/returns" class="hover:underline text-black">Returns</a></li>
            <li><a href="/faq" class="hover:underline text-black">FAQs</a></li>
            <li><a href="/finance" class="hover:underline text-black">0% Finance Options</a></li>
            <li><a href="/14-day-money-back-guarantee" class="hover:underline text-black">14 Day Money Back
                    Guarantee</a></li>
        </ul>
    </div>

    <!-- Legal -->
    <div x-data="{ open: false }" class="py-3 lg:pt-0 border-t-2">
        <a @click="open = !open" class="flex justify-between items-center cursor-pointer group">
            <div class="uppercase font-bold text-black">Legal</div>
            <span class="transition-transform duration-300 ease-in-out"
                  :class="{ 'rotate-180': open }">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4 16 16"
                     stroke="currentColor" class="text-primary-darker stroke-current lg:hidden"
                     width="24" height="24" aria-hidden="true" role="img">
                    <path d="M19 9l-7 7-7-7"/>
                </svg>
            </span>
        </a>
        <ul class="flex-col gap-4 mt-4 mb-6 lg:flex flex transition-transform duration-300 ease-in-out"
            :class="{ 'flex': open, 'hidden': !open }">

            <li><a href="/cookies" class="hover:underline text-black">Cookies</a></li>
            <li><a href="/terms-and-conditions" class="hover:underline text-black">Terms and Conditions</a></li>
            <li><a href="/privacy-policy" class="hover:underline text-black">Privacy Policy</a></li>
        </ul>
    </div>
</div>
<div>
    <ul class="mt-4 lg:mt-0">
        <li class="mt-4 lg:mt-0">
            <p class="text-base leading-6 text-black font-bold">
                Genuine Reviews from Real Customers
            </p>
        </li>
        <li class="mt-4">
            <img src="<?= $this->getViewFileUrl('images/Trustpilot.png'); ?>" alt="Trustpilot Logo">
        </li>
        <li class="mt-4">
            <img src="<?= $this->getViewFileUrl('images/stars-5.png'); ?>" alt="Trustpilot Stars"
        </li>
        <li class="mt-4">
            <p class="text-base leading-6 text-black hover:underline hover:text-primary-darker ">
                Trust Score 4.9 | 659 Reviews
            </p>
        </li>

    </ul>
</div>
