<?php
/** @var \Banyo\CustomHomePage\ViewModel\BanyoAtHome $viewModel */
$viewModel = $block->getData('viewModel');
$items = $viewModel->getBanyoAtHomeItems();
$heading = $viewModel->getConfigValue("banyo_at_home_title");
$firstItem = !empty($items) ? array_shift($items) : null;
$remainingItems = $items;
?>
<div class="bg-white pb-4">
    <div class="px-3 2xl:container 3xl:max-w-screen-2xl py-4">
        <div>
            <h2 class="text-3xl font-bold font-inter text-black text-center pb-4">
                <?= $escaper->escapeHtml($heading)?>
            </h2>
        </div>
        <div class="md:flex justify-center items-center gap-7">
            <div class="m-1 md:m-0 md:max-h-[554px] md:max-w-[678px] border-2">
                <?php if ($firstItem): ?>
                    <a href="<?= $escaper->escapeUrl($firstItem['url']) ?>">
                        <img src="<?= $escaper->escapeUrl($firstItem['image']) ?>" class="w-full md:max-h-[554px]"  alt="First Item">
                    </a>
                <?php endif; ?>
            </div>
            <div>
                <?php if (!empty($remainingItems)): ?>
                    <div class="remaining-banyo-images grid grid-cols-2 gap-7">
                        <?php foreach ($remainingItems as $item): ?>
                            <div class="banyo-image max-h-[264px] max-w-[384px] border">
                                <a href="<?= $escaper->escapeUrl($item['url']) ?>" >
                                    <img src="<?= $escaper->escapeUrl($item['image']) ?>" alt="Banyo Item" class=" max-h-[264px] w-full"   />
                                </a>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>


</div>
