<?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="Nexus Logo">
        </span>

    </li>
    <li class="mt-4">
        <div class="flex items-center px-4 py-2 bg-primary  border border-primary-darker rounded-md w-fit">
            <div class="rounded-full">
                <svg xmlns="http://www.w3.org/2000/svg" width="38" height="36" viewBox="0 0 38 36" fill="none">
                    <path d="M32.7502 15.2319C32.7957 10.2722 28.2501 5.72555 22.6174 5.09683C22.5054 5.08448 22.3833 5.06569 22.2541 5.04581C21.9753 5.00288 21.6869 4.95874 21.3959 4.95874C20.2415 4.95874 19.9329 5.71233 19.8517 6.16178C19.7727 6.59877 19.848 6.96574 20.0753 7.25295C20.4576 7.73605 21.1302 7.82181 21.6706 7.89052C21.8289 7.91084 21.9783 7.92974 22.1034 7.95585C27.1642 9.00671 28.8682 10.6589 29.701 15.3218C29.7214 15.4357 29.7305 15.5761 29.7403 15.725C29.7766 16.2824 29.8523 17.4421 31.1939 17.4421H31.194C31.3057 17.4421 31.4258 17.4331 31.5507 17.4154C32.8 17.239 32.7609 16.179 32.7421 15.6696C32.7368 15.5262 32.7317 15.3905 32.7448 15.3003C32.7483 15.2776 32.7501 15.2547 32.7502 15.2319Z" fill="white"/>
                    <path d="M21.0679 3.27634C21.2178 3.28639 21.3597 3.296 21.4778 3.31283C29.7881 4.50046 33.6098 8.1594 34.669 15.9425C34.6869 16.0748 34.6898 16.2361 34.6927 16.407C34.7033 17.0151 34.725 18.28 36.1869 18.3063L36.2323 18.3067C36.6908 18.3067 37.0554 18.1782 37.3163 17.9245C37.7714 17.4822 37.7396 16.8251 37.714 16.297C37.7078 16.1674 37.7018 16.0454 37.7033 15.9385C37.809 7.97849 30.3944 0.760352 21.8364 0.49193C21.8009 0.490837 21.767 0.492585 21.7328 0.497064C21.716 0.499358 21.6848 0.502199 21.6315 0.502199C21.5461 0.502199 21.4411 0.495316 21.3298 0.488324C21.1952 0.479803 21.0426 0.469971 20.8879 0.469971C19.525 0.469971 19.2659 1.37018 19.2327 1.9068C19.1563 3.14699 20.4474 3.23428 21.0679 3.27634Z" fill="white"/>
                    <path d="M34.2681 26.0013C34.0914 25.8759 33.9088 25.7461 33.7377 25.6181C32.8304 24.9396 31.8651 24.3141 30.9315 23.7092C30.7378 23.5838 30.544 23.4583 30.351 23.3324C29.1552 22.5518 28.0801 22.1725 27.0644 22.1725C25.6963 22.1725 24.5035 22.875 23.5191 24.2601C23.0829 24.8742 22.5538 25.1728 21.9017 25.1728C21.5161 25.1728 21.0779 25.0705 20.5996 24.8688C16.7397 23.2422 13.9835 20.7482 12.4073 17.4563C11.6454 15.8652 11.8924 14.8251 13.2333 13.9787C13.9948 13.4984 15.4121 12.6043 15.3117 10.8922C15.198 8.94792 10.5816 3.09779 8.63658 2.43334C7.81306 2.15192 6.94781 2.1493 6.06023 2.42679C3.82422 3.12532 2.21963 4.35207 1.41951 5.97418C0.646316 7.54157 0.681231 9.38196 1.5205 11.2964C3.94672 16.8316 7.35787 21.6575 11.6595 25.6399C15.8701 29.5384 21.0452 32.7317 27.0411 35.1309C27.5815 35.347 28.1484 35.4649 28.5623 35.5508C28.7034 35.5803 28.8252 35.6055 28.9139 35.6281C28.9627 35.6404 29.0131 35.6471 29.0635 35.6475L29.1109 35.6477C29.1109 35.6477 29.1109 35.6477 29.1111 35.6477C31.9311 35.6477 35.3173 33.253 36.3572 30.5229C37.2683 28.1323 35.6048 26.9507 34.2681 26.0013Z" fill="white"/>
                    <path d="M22.315 9.59934C21.8321 9.61071 20.8273 9.63387 20.4748 10.5849C20.3098 11.0293 20.3296 11.4152 20.5336 11.7318C20.8329 12.1963 21.4063 12.3386 21.9279 12.4167C23.8196 12.6988 24.7911 13.6709 24.9855 15.4757C25.0758 16.3172 25.6855 16.9049 26.4685 16.9049C26.5263 16.9049 26.5856 16.9017 26.6445 16.895C27.5862 16.7909 28.0426 16.148 28.0014 14.9843C28.0164 13.7698 27.3325 12.391 26.1692 11.2927C25.0019 10.191 23.5948 9.57061 22.315 9.59934Z" fill="white"/>
                </svg>
            </div>
            <div class="img-text ml-2">
                <a href="tel:+0116 274 4059" class="text-base font-semibold text-white whitespace-nowrap">
                    Call
                    Us: <?= $escaper->escapeHtml($storeConfig->getStoreConfig('general/store_information/phone')); ?>
                </a>
                <p class="text-sm text-white 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>
                <div class="text-base md:text-lg font-sen font-bold uppercase text-black">
                    NEXUS
                </div>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\about-us"
                           class="text-base font-sen text-black hover:underline hover:text-primary-darker font-medium">
                            About Us
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="<?= $escaper->escapeUrl($block->getUrl('contact')) ?>"
                           class="text-base font-sen text-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-sen text-black hover:underline hover:text-primary-darker font-medium">
                            Visit Our Showroom
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\blog"
                           class="text-base leading-6 text-black hover:underline hover:text-primary-darker font-medium font-sen">
                            Ideas and Inspirations
                        </a>
                    </li>

                    <?php if (!$customer->customerLoggedIn()): ?>
                        <li class="mt-4">
                            <a href="\how-to-order"
                               class="text-base font-sen text-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>
                <div class="text-base md:text-lg font-sen font-bold uppercase text-black">
                    customer services
                </div>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\returns"
                           class="text-base font-sen text-black hover:underline hover:text-primary-darker font-medium">
                            Returns
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="/faq"
                           class="text-base font-sen text-black hover:underline hover:text-primary-darker font-medium">
                            FAQS
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="/finance"
                           class="text-base font-sen text-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-sen text-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>
                <div class="text-base md:text-lg font-sen font-bold uppercase text-black">
                    Legal
                </div>
                <ul class="mt-4">
                    <li class="mt-4">
                        <a href="\cookies"
                           class="text-base font-sen text-black hover:underline hover:text-primary-darker font-medium">
                            Cookies
                        </a>
                    </li>
                    <li class="mt-4">
                        <a href="\terms-conditions"
                           class="text-base font-sen text-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-sen text-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">Nexus</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 font-sen">About Us</a></li>
            <li><a href="<?= $escaper->escapeUrl($block->getUrl('contacts')) ?>" class="hover:underline text-black font-sen">
                    <?= $escaper->escapeHtml(__('Contact Us')) ?></a></li>
            <li><a href="#" class="hover:underline text-black font-sen">Visit Our Showroom</a></li>
            <?php if (!$customer->customerLoggedIn()): ?>
                <li><a href="/how-to-order" class="hover:underline text-black font-sen">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="/returns" class="hover:underline text-black font-sen">Returns</a></li>
            <li><a href="#" class="hover:underline text-black font-sen">FAQs</a></li>
            <li><a href="#" class="hover:underline text-black font-sen">0% Finance Options</a></li>
            <li><a href="/14-day-money-back-guarantee" class="hover:underline text-black font-sen">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 font-sen">Cookies</a></li>
            <li><a href="/terms-and-conditions" class="hover:underline text-black font-sen">Terms and Conditions</a></li>
            <li><a href="/privacy-policy" class="hover:underline text-black font-sen">Privacy Policy</a></li>
        </ul>
    </div>
</div>
<div>
    <ul class="mt-4 lg:mt-0">
        <li class="mt-4 lg:mt-0">
            <div class="text-base leading-6 text-black font-bold font-sen">
                Genuine Reviews from Real Customers
            </div>
        </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">
            <div class="text-base leading-6 text-black hover:underline hover:text-primary-darker font-sen">
                Trust Score 4.9 | 659 Reviews
            </div>
        </li>

    </ul>
</div>
