<?php

$id = 'masonry-tiles-block-' . $block['id'];
if (!empty($block['anchor'])) {
    $id = $block['anchor'];
}

$classes = 'block-masonry-tiles-block';
if (!empty($block['className'])) {
    $classes .= ' ' . $block['className'];
}
if (!empty($block['align'])) {
    $classes .= ' align' . $block['align'];
}
$third_tile_bg_url = '';
if (have_rows('tiles_group')) :
    while (have_rows('tiles_group')) : the_row();
        if (have_rows('third_tile')) :
            while (have_rows('third_tile')) : the_row();
                $bg = get_sub_field('bg');
                if ($bg && !empty($bg['url'])) {
                    $third_tile_bg_url = esc_url($bg['url']);
                }
            endwhile;
        endif;
    endwhile;
endif;

?>
<?php if (!empty($third_tile_bg_url)) : ?>
    <style>
        @media (max-width: 767px) {
            .fourth-tile-mobile-bg {
                background-image: url('<?php echo $third_tile_bg_url; ?>') !important;
                background-size: cover !important;
                background-position: center !important;
            }
            .dark .fourth-tile-mobile-bg {
                background-image: url('<?php echo $third_tile_bg_url; ?>') !important;
            }
        }
    </style>
<?php endif; ?>

<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($classes); ?>">
    <div class="container mx-auto py-[90px] max-[768px]:py-[45px]">
        <?php if (get_field('heading')) : ?>
            <h2 class="font-[500] leading-[110%] max-[1330px]:text-[36px] max-[768px]:text-[24px] text-[48px]">
                <?php echo get_field('heading'); ?>
            </h2>
        <?php endif; ?>

        <?php if (have_rows('tiles_group')) : ?>
            <?php while (have_rows('tiles_group')) :
                the_row(); ?>

                <div class="max-[768px]:grid-cols-1 max-[1050px]:grid-cols-2 grid grid-cols-3 max-[1050px]:gap-[12px] gap-[24px] mt-[40px]">


                    <div>
                        <?php if (have_rows('first_tile')) : ?>
                            <?php while (have_rows('first_tile')) :
                                the_row(); ?>
                                <div class="relative max-[768px]:h-[290px] h-[512px] rounded-[12px] p-[24px] overflow-hidden"
                                    <?php
                                    $image = get_sub_field('image');
                                    if ($image) : ?>
                                        style="background-image: url('<?php echo esc_url($image['url']); ?>'); background-size: cover; background-position: center;"
                                    <?php endif; ?>>

                                    <!-- Градиент оверлей -->
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>

                                    <div class="relative flex flex-col gap-[12px] h-full justify-end z-10">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <h3 class="max-[768px]:text-[24px] text-[32px] font-[600] leading-[115%] text-[#f8f8f8]"><?php echo esc_html(get_sub_field('heading')); ?></h3>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('text')) : ?>
                                            <div class="max-[768px]:text-[14px] text-[16px] font-[500] leading-[145%] text-[#e0e0e0]"><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>

                    <div class="flex max-[1050px]:justify-between flex-col max-[1050px]:gap-[12px] gap-[24px]">

                        <?php if (have_rows('second_tile')) : ?>
                            <?php while (have_rows('second_tile')) :
                                the_row(); ?>
                                <div class=" h-[244px] max-[768px]:h-auto relative border border-[#e0e0e0] dark:border-transparent bg-transparent dark:bg-white rounded-[12px] p-[24px] overflow-hidden">
                                    <?php
                                    if (get_current_room() === 'fitness') {
                                        ?>
                                        <div class="absolute right-[24px] top-[24px]">
                                            <img class="max-[768px]:h-[36px] max-[768px]:w-[107px]" alt="decoration"
                                                 src="<?php echo get_template_directory_uri() . '/assets/images/masonry-decor.png'; ?>">
                                        </div>
                                        <?php
                                    }
                                    ?>

                                    <div class="flex flex-col h-full justify-end">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <h3 class="max-[768px]:text-[42px] font-[600] text-[62px] max-[768px]:dark:text-[24px] dark:text-[42px] leading-[115%]">
                                <span class="bg-[linear-gradient(90deg,#2b2c35_67.31%,#4f5870_92.9%)] bg-clip-text text-transparent">
                                       <?php echo esc_html(get_sub_field('heading')); ?>
                                </span>
                                            </h3>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('underheading')) : ?>
                                            <p class="max-[768px]:font-[600] max-[768px]:text-[16px] text-[20px] leading-[140%] text-[#222]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('text')) : ?>
                                            <div class="max-[768px]:mt-[8px] mt-[12px] max-[768px]:text-[14px] text-[16px] leading-[145%] text-[#6c6b6b]"
                                            ><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>


                        <?php if (have_rows('third_tile')) : ?>
                            <?php while (have_rows('third_tile')) : the_row(); ?>
                                <div class="max-[768px]:hidden h-[244px] max-[768px]:h-auto rounded-[12px] p-[24px] overflow-hidden"
                                    <?php
                                    $bg = get_sub_field('bg');
                                    if ($bg) : ?>
                                        style="background-image: url('<?php echo esc_url($bg['url']); ?>'); background-size: cover; background-position: center;"
                                    <?php endif; ?>>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>


                    <div class="max-[1050px]:col-span-2 max-[768px]:col-span-1 max-[768px]:flex-col max-[1050px]:flex-row flex flex-col max-[1050px]:gap-[12px] gap-[24px]">
                        <?php if (have_rows('fourth_tile')) : ?>
                            <?php while (have_rows('fourth_tile')) : the_row(); ?>
                                <div class="relative max-[768px]:w-full  fourth-tile-mobile-bg max-[1050px]:w-[calc(50%-6px)] h-[244px] max-[768px]:h-auto relative rounded-[12px] p-[24px] overflow-hidden dark:bg-[linear-gradient(90deg,_#2b2c35_53.4%,_#4f5870_100%)] bg-[linear-gradient(90deg,_#9d9994_39.42%,_#bbb7b1_92.9%)]">
                                    <div class="max-[768px]:hidden absolute right-[24px] top-[24px]">
                                        <svg width="87" height="50" viewBox="0 0 87 50" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <g clip-path="url(#clip0_4015_3641)">
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M87.0003 0C70.954 39.9255 36.1536 18.6568 8.89355 28.3583C16.8203 5.97016 31.127 1.86568 47.1737 1.67911C59.1603 1.49254 75.9806 2.79851 87.0003 0Z"
                                                      fill="#F8F8F8"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                      d="M59.7404 28.918C47.367 59.5149 20.8802 42.5372 0 50.0001C10.8269 19.403 35.5736 35.0747 59.7404 28.918Z"
                                                      fill="#F8F8F8"/>
                                            </g>
                                            <defs>
                                                <clipPath id="clip0_4015_3641">
                                                    <rect width="87" height="50" fill="white"/>
                                                </clipPath>
                                            </defs>
                                        </svg>
                                    </div>
                                    <div class="max-[768px]:block hidden absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                                    <div class="max-[768px]:text-[#fff] flex h-full justify-end flex-col text-[#f8f8f8]">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <h3 class="max-[768px]:font-[600] relative z-[1] max-[768px]:text-[24px] text-[42px] leading-[115%]"><?php echo esc_html(get_sub_field('heading')); ?></h3>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('underheading')) : ?>
                                            <p class="relative z-[1] max-[768px]:font-[600] max-[768px]:text-[16px] text-[20px] leading-[140%]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('text')) : ?>
                                            <div class="relative z-[1] max-[768px]:text-[#fff] max-[768px]:mt-[8px] mt-[12px] max-[768px]:text-[14px] text-[16px] leading-[145%] text-[#e0e0e0]">
                                                <?php echo wp_kses_post(get_sub_field('text')); ?>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>


                        <?php if (have_rows('fifth_tile')) : ?>
                            <?php while (have_rows('fifth_tile')) : the_row(); ?>
                                <div class="max-[768px]:w-full max-[1050px]:w-[calc(50%-6px)] h-[244px] max-[768px]:h-auto border border-[#e0e0e0] dark:border-transparent bg-transparent dark:bg-white rounded-[12px] p-[24px] overflow-hidden">
                                    <div class="max-[768px]:justify-center flex flex-col h-full justify-end">
                                        <?php if (get_sub_field('heading')) : ?>
                                            <h3 class="font-[600] max-[768px]:text-[24px]  text-[42px] leading-[115%]">
                                <span class="bg-[linear-gradient(90deg,#2b2c35_67.31%,#4f5870_92.9%)] bg-clip-text text-transparent">
                                       <?php echo esc_html(get_sub_field('heading')); ?>
                                </span>
                                            </h3>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('underheading')) : ?>
                                            <p class="max-[768px]:font-[600] max-[768px]:text-[16px] text-[20px] leading-[140%] text-[#222]"><?php echo esc_html(get_sub_field('underheading')); ?></p>
                                        <?php endif; ?>

                                        <?php if (get_sub_field('text')) : ?>
                                        <div class="max-[768px]:mt-[8px] mt-[12px] max-[768px]:text-[14px] text-[16px] leading-[145%] text-[#6c6b6b]"
                                        "><?php echo wp_kses_post(get_sub_field('text')); ?></div>
                                    <?php endif; ?>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </div>

                </div>

            <?php endwhile; ?>
        <?php endif; ?>

    </div>
</section>