<?php
/** @var \Banyo\CustomHomePage\ViewModel\PremiereSubCategory $viewModel */
$viewModel = $block->getData('viewModel');
$items = $viewModel->getSubCategoryItems();
$firstCat  = $items[0] ?? null;
$secondCat = $items[1] ?? null;
$thirdCat  = $items[2] ?? null;
$fourthCat = $items[3] ?? null;
?>

<?php if ($items): ?>
    <div class="px-3 2xl:container 3xl:max-w-screen-2xl py-2">

        <div class="hidden lg:block pt-2 ">

            <div class="flex gap-6">

                <!-- right section-->
                <div class="flex flex-col gap-6">
                    <!-- two image top -->
                    <div class="flex gap-6">
                        <div>
                            <a href="<?= $secondCat["url"]; ?>" class="block relative">
                                <?php if ($secondCat["desktopImage"]): ?>
                                    <img src="<?= $secondCat["desktopImage"]; ?>"
                                         />
                                <?php endif; ?>
                                <div class="py-2 absolute bottom-4 w-full">
                                    <h3
                                        class="text-2xl font-semibold px-6  capitalize text-white font-sen">
<!--                                        --><?php //= $block->escapeHtml($secondCat->getName()); ?>
                                    </h3>

                                </div>
                            </a>
                        </div>

                        <div>
                            <a href="<?= $thirdCat["url"]; ?>" class="block relative">
                                <?php if ($thirdCat["desktopImage"]): ?>
                                    <img src="<?= $thirdCat["desktopImage"]; ?>"
                                        />
                                <?php endif; ?>
                                <div class="py-2 absolute bottom-4 w-full">
                                    <h3
                                        class="text-2xl font-semibold px-6 capitalize text-white font-sen">
<!--                                        --><?php //= $block->escapeHtml($thirdCat->getName()); ?>
                                    </h3>

                                </div>
                            </a>
                        </div>

                    </div>
                    <!-- bottom image  -->
                    <div>
                        <a href="<?= $fourthCat["url"]; ?>" class="block relative">
                            <?php if ($fourthCat["desktopImage"]): ?>
                                <img src="<?= $fourthCat["desktopImage"]; ?>"
                                     />
                            <?php endif; ?>
                            <div class="py-2 absolute bottom-4 w-full">
                                <h3
                                    class="text-2xl font-semibold px-6 capitalize text-white font-sen">
<!--                                    --><?php //= $block->escapeHtml($fourthCat->getName()); ?>
                                </h3>

                            </div>
                        </a>
                    </div>
                </div>
                <!-- left section -->
                <div>
                    <a href="<?= $firstCat["url"]; ?>" class="block relative">
                        <?php if ($firstCat["desktopImage"]): ?>
                            <img src="<?= $firstCat["desktopImage"]; ?>"
                                  />
                        <?php endif; ?>
                        <div class="py-2 absolute bottom-4 w-full">
                            <h3
                                class="text-2xl font-semibold px-6 capitalize text-white font-sen">
<!--                                --><?php //= $block->escapeHtml($firstCat->getName()); ?>
                            </h3>

                        </div>
                    </a>
                </div>
            </div>
        </div>



        <!--  Mobile View-->

        <div class="md:hidden ">
            <div  class="grid grid-cols-2 gap-3">

                <?php foreach ($items as $item): ?>
                    <div>
                        <a href="<?= $item['url'] ?>" class="block relative">
                            <img src="<?= $item['mobileImage'] ?>" alt="subcat image" />

                        </a>
                    </div>
                <?php endforeach; ?></div>
        </div>
    </div>
<?php endif; ?>
