<?php

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

$classes = 'block-tiles-block';
if ( ! empty( $block['className'] ) ) {
    $classes .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $classes .= ' align' . $block['align'];
}

$heading = get_field('heading');
$tiles_repeater = get_field('tiles_repeater');


?>

<section id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
    <div class="container mx-auto mt-[24px]">

        <?php if ($heading) : ?>
            <h2 class="text-[48px] max-[768px]:text-[36px] font-bold text-center text-[#1f2937]">
                <?php echo esc_html($heading); ?>
            </h2>
        <?php endif; ?>

        <?php if ($tiles_repeater) : ?>
            <div class="mt-[24px] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[30px] max-[768px]:gap-[20px]">
                <?php foreach ($tiles_repeater as $tile) : ?>
                    <div class="bg-[#ffffff] border-[1px] border-[#e5e7eb] rounded-[16px] p-[30px] max-[768px]:p-[20px] shadow-lg hover:shadow-xl transition-shadow ">

                        <?php if (!empty($tile['image'])) : ?>
                            <div class="w-[80px] h-[80px] rounded-full overflow-hidden mb-[20px] mx-auto bg-[#f3f4f6] flex items-center justify-center">
                                <img src="<?php echo esc_url($tile['image']['url']); ?>"
                                     alt="<?php echo esc_attr($tile['image']['alt']); ?>"
                                     class="w-full h-full object-cover" />
                            </div>
                        <?php endif; ?>

                        <?php if (!empty($tile['title'])) : ?>
                            <h3 class="text-[24px] max-[768px]:text-[20px] font-semibold text-[#1f2937] mb-[16px] text-center">
                                <?php echo esc_html($tile['title']); ?>
                            </h3>
                        <?php endif; ?>

                        <?php if (!empty($tile['text'])) : ?>
                            <div class="text-[16px] max-[768px]:text-[14px] text-[#6b7280] leading-[150%] text-center">
                                <?php echo wp_kses_post($tile['text']); ?>
                            </div>
                        <?php endif; ?>

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

    </div>
</section>