<?php
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$bg_image = get_sub_field('bg_image');
$right_image = get_sub_field('right_image');
$center_image = get_sub_field('center_image');
$bg_url = $bg_image['url'] ?? '';
$right_url = $right_image['url'] ?? '';
$center_url = $center_image['url'] ?? '';
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section class="hero-section relative lg:flex bg-orange-100 lg:min-h-[41.25rem] 2xl:h-[90vh] 2xl:min-h-[53rem] mb-22 lg:mb-42"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
    <div class="hero-left lg:w-6/12 pt-18 pb-16 px-6 md:px-12 xl:px-25 lg:flex lg:items-center justify-end">
    <div class="absolute z-0 w-full h-full left-0 top-0 bg-cover lg:left-[20%] lg:w-1/2 lg:bg-contain bg-bottom-left lg:bg-center bg-no-repeat" style="<?php if ($bg_url) echo 'background-image:url(' . esc_url($bg_url) . ');'; ?>"></div>
        <div class="max-w-[50rem] flex w-full z-10 relative lg:static">
            <div class="max-w-[34rem]">
                <?php if ($title) : ?>
                    <h1 class="hero-title text-white text-5xl leading-[3.5rem] font-bold mb-3 lg:mb-6 lg:text-[4rem] lg:leading-[4.5rem]"><?php echo esc_html($title); ?></h1>
                <?php endif; ?>
                <?php if ($description) : ?>
                    <div class="hero-description mb-2 lg:mb-0 text-white text-lg leading-[1.625rem] lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
                <?php endif; ?>
                <?php if ($center_url) : ?>
                    <img src="<?php echo esc_url($center_url); ?>" alt="" class="hero-front-image lg:absolute lg:-bottom-32 lg:left-1/2 lg:-translate-x-1/2 lg:max-w-[30rem] 2xl:-bottom-42 2xl:max-w-[40rem] w-full h-auto z-20" />
                <?php endif; ?>
                <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                    <div class="lg:mt-10">
                        <a href="<?php echo esc_url($cta['url']); ?>" class="button inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><img class="mr-4 w-6 h-auto" src="<?php echo get_template_directory_uri(); ?>/images/ico-vitamind3-cart.svg" width="24" height="24" /><?php echo esc_html($cta['title']); ?></a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <div class="hidden lg:block lg:w-6/12 bg-cover relative" style="<?php if ($right_url) echo 'background-image:url(' . esc_url($right_url) . ');'; ?>"></div>
</section>
<?php endif; ?>

<?php
// Component: Hero V2 for Builder Flexible Content
$hide_component = get_sub_field('hide_component');
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$image = get_sub_field('image');
$mobile_image = get_sub_field('mobile_image');
?>
<?php if (!$hide_component) : ?>
<section class="hero-v2-section bg-bf-100 pt-16 lg:pt-28 mb-22 lg:mb-26"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
    <div class="max-w-[87.5rem] mx-auto px-6 lg:px-0 text-center">
        <div class="w-full max-w-[42.5rem] mx-auto relative z-10">
            <?php if ($title) : ?>
                <h1 class="text-[2.5rem] leading-[3rem] mb-4 lg:text-5xl lg:leading-[3.5rem] lg:mb-6"><?php echo esc_html($title); ?></h1>
            <?php endif; ?>
            <?php if ($description) : ?>
                <div class="wysiwyg-content text-brown-100 text-lg leading-[1.625rem] mb-10 lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
            <?php endif; ?>
            <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] py-3 px-8 w-full lg:w-auto mb-6 lg:mb-0" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            <?php endif; ?>
        </div>
        <div class="w-full mx-auto max-w-120 lg:max-w-[53.6rem] lg:-mt-20">
            <?php if ($image || $mobile_image) : ?>
                <picture>
                    <?php if ($mobile_image) : ?>
                        <source srcset="<?php echo esc_url($mobile_image['url']); ?>" media="(max-width: 1023px)">
                    <?php endif; ?>
                    <?php if ($image) : ?>
                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt'] ?? $title); ?>" class="w-full h-auto" />
                    <?php endif; ?>
                </picture>
            <?php endif; ?>
        </div>
    </div>
</section> 
<?php endif; ?>

<?php
$id = get_sub_field('id');
$title = get_sub_field('title');
$sub_title = get_sub_field('sub_title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="three-boxes-section mb-22 lg:mb-37 relative z-10 bg-shit-100">
    <div class="w-full max-w-[81.5rem] mx-auto px-6">
        <div class="max-w-[42.5rem] mx-auto">
            <?php if ($title) : ?>
                <h2 class="text-xl leading-[1.75rem] text-center mb-4 uppercase text-orange-100 lg:text-2xl lg:leading-[2rem] lg:mb-6"><?php echo esc_html($title); ?></h2>
            <?php endif; ?>
            <?php if ($sub_title) : ?>
                <div class="text-center text-[2.5rem] leading-[3rem] mb-10 lg:text-5xl lg:leading-[3.5rem] lg:mb-[4.625rem]"><?php echo esc_html($sub_title); ?></div>
            <?php endif; ?>
            <?php if ($description) : ?>
                <div class="mb-10 lg:mb-16 -mt-4 lg:-mt-12 text-lg leading-[1.625rem] text-brown-100 text-center lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
            <?php endif; ?>
        </div>
        <?php if (have_rows('box')) : ?>
            <div class="hidden lg:flex lg:items-center lg:justify-between">
                <?php while (have_rows('box')) : the_row();
                    $box_image = get_sub_field('image');
                    $box_title = get_sub_field('title');
                    $box_description = get_sub_field('description');
                ?>
                    <div class="box text-center lg:max-w-[21.5rem]">
                        <?php if ($box_image && isset($box_image['url'])) : ?>
                            <img src="<?php echo esc_url($box_image['url']); ?>" alt="<?php echo esc_attr($box_title); ?>" class="mx-auto mb-8 lg:mb-10 w-auto h-20 object-contain" />
                        <?php endif; ?>
                        <?php if ($box_title) : ?>
                            <h3 class="text-orange-100 font-bold text-2xl leading-[2rem] mb-4"><?php echo esc_html($box_title); ?></h3>
                        <?php endif; ?>
                        <div class="border-b border-gray-200 mb-4"></div>
                        <?php if ($box_description) : ?>
                            <div class="text-brown-100 text-lg leading-[1.625rem] lg:text-xl lg:leading-[1.75rem]"><?php echo $box_description; ?></div>
                        <?php endif; ?>
                    </div>
                <?php endwhile; ?>
            </div>
            <section class="splide splide-boxes lg:hidden" aria-label="Splide Basic HTML Example">
                <div class="splide__track">
                    <div class="splide__list">
                        <?php while (have_rows('box')) : the_row();
                            $box_image = get_sub_field('image');
                            $box_title = get_sub_field('title');
                            $box_description = get_sub_field('description');
                        ?>
                            <div class="splide__slide box text-center">
                                <?php if ($box_image && isset($box_image['url'])) : ?>
                                    <img src="<?php echo esc_url($box_image['url']); ?>" alt="<?php echo esc_attr($box_title); ?>" class="mx-auto mb-8 w-20 h-auto object-contain" />
                                <?php endif; ?>
                                <?php if ($box_title) : ?>
                                    <h3 class="text-orange-100 font-bold text-2xl leading-[2rem] mb-4"><?php echo esc_html($box_title); ?></h3>
                                <?php endif; ?>
                                <div class="border-b border-gray-200 mb-4"></div>
                                <?php if ($box_description) : ?>
                                    <div class="text-brown-100 text-lg leading-[1.625rem]"><?php echo $box_description; ?></div>
                                <?php endif; ?>
                            </div>
                        <?php endwhile; ?>
                    </div>
                </div>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        var splide = new Splide('.splide-boxes', {
                            type: 'loop',
                            perPage: 1,
                            arrows: false
                        });
                        splide.mount();
                    });
                </script>
            <?php endif; ?>
    </div>
    <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
        <div class="w-full max-w-[81.5rem] mx-auto px-6 mt-20 lg:mt-14 text-center">
            <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
        </div>
    <?php endif; ?>
</section>
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$desktop_image = get_sub_field('desktop_image');
$mobile_image = get_sub_field('mobile_image');
$desktop_url = $desktop_image['url'] ?? '';
$mobile_url = $mobile_image['url'] ?? '';
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="text-with-right-image bg-beige-200 relative mb-22 lg:mb-40">
    <img class="absolute top-0 left-0 w-[10.25rem] h-auto" src="<?php echo get_template_directory_uri(); ?>/images/image_container.svg" width="164" height="180" />
    <div class="max-w-[81.5rem] mx-auto flex flex-col lg:flex-row items-center px-6 relative">
        <div class="w-full lg:w-5/12 pt-16 lg:pt-[6.5rem] lg:pb-20">
            <?php if ($title) : ?>
                <h2 class="text-[2.5rem] leading-[3rem] font-medium mb-4 lg:mb-6 lg:text-5xl lg:leading-[3.5rem]"><?php echo esc_html($title); ?></h2>
            <?php endif; ?>
            <?php if ($description) : ?>
                <div class="mb-8 lg:mb-10 text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
            <?php endif; ?>
            <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            <?php endif; ?>
        </div>
        <div class="w-full lg:w-7/12 flex justify-center mt-6">
            <?php if ($desktop_url || $mobile_url) : ?>
                <picture>
                    <?php if ($mobile_url) : ?>
                        <source srcset="<?php echo esc_url($mobile_url); ?>" media="(max-width: 1023px)">
                    <?php endif; ?>
                    <?php if ($desktop_url) : ?>
                        <img src="<?php echo esc_url($desktop_url); ?>" alt="<?php echo esc_attr($title); ?>" class="w-full h-auto max-w-md lg:max-w-full" />
                    <?php endif; ?>
                </picture>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$id = get_sub_field('id');
$title = get_sub_field('title');
$cta = get_sub_field('cta');
$desktop_image = get_sub_field('desktop_image');
$mobile_image = get_sub_field('mobile_image');
$desktop_url = $desktop_image['url'] ?? '';
$mobile_url = $mobile_image['url'] ?? '';
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="text-with-right-image bg-beige-100 relative mb-22 lg:mb-40">
    <div class="max-w-[81.5rem] mx-auto flex flex-col lg:flex-row items-center px-6 relative">
        <div class="w-full lg:w-6/12 pt-16 lg:pt-[6.5rem] lg:pb-20 2xl:pr-[2.5rem]">
            <?php if ($title) : ?>
                <h2 class="text-[2.5rem] leading-[3rem] font-medium mb-4 lg:mb-10 lg:text-5xl lg:leading-[3.5rem]"><?php echo esc_html($title); ?></h2>
            <?php endif; ?>
            <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                <a href="<?php echo esc_url($cta['url']); ?>" class="hidden button button-orange lg:inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            <?php endif; ?>
        </div>
        <div class="w-full lg:w-6/12 flex justify-center 2xl:pl-[5rem]">
            <?php if ($desktop_url || $mobile_url) : ?>
                <picture>
                    <?php if ($mobile_url) : ?>
                        <source srcset="<?php echo esc_url($mobile_url); ?>" media="(max-width: 1023px)">
                    <?php endif; ?>
                    <?php if ($desktop_url) : ?>
                        <img src="<?php echo esc_url($desktop_url); ?>" alt="<?php echo esc_attr($title); ?>" class="w-full h-auto max-w-md lg:max-w-full" />
                    <?php endif; ?>
                </picture>
            <?php endif; ?>
        </div>
        <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
            <a href="<?php echo esc_url($cta['url']); ?>" class="lg:hidden mt-7 button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
        <?php endif; ?>
    </div>
</section>  
<?php endif; ?>

<?php
$id = get_sub_field('id');
$title = get_sub_field('title');
$sub_title = get_sub_field('sub_title');
$description = get_sub_field('description');
$left_column_title = get_sub_field('left_column_title');
$right_column_title = get_sub_field('right_column_title');
$cta = get_sub_field('cta');
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="product-comparison bg-shit-100 mb-22 lg:mb-40">
    <div class="lg:max-w-[57.5rem] mx-auto px-6">
        <?php if ($title) : ?>
            <h2 class="text-xl leading-[1.75rem] text-center mb-4 uppercase text-orange-100 lg:text-2xl lg:leading-[2rem] lg:mb-6"><?php echo esc_html($title); ?></h2>
        <?php endif; ?>
        <?php if ($sub_title) : ?>
            <div class="text-center text-[2.5rem] leading-[3rem] mb-4 lg:text-5xl lg:leading-[3.5rem] lg:mb-[4.625rem]"><?php echo esc_html($sub_title); ?></div>
        <?php endif; ?>
        <?php if ($description) : ?>
            <div class="mb-10 lg:mb-16 text-lg leading-[1.625rem] text-brown-100 text-center lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
        <?php endif; ?>
        <div class="lg:flex lg:justify-between">
            <div class="lg:w-1/2">
                <?php if ($left_column_title) : ?>
                    <h3 class="font-bold text-center text-orange-100 text-[1.75rem] leading-[2.25rem] mb-5 lg:mb-6 lg:text-[2rem] lg:leading-[2.5rem]"><?php echo esc_html($left_column_title); ?></h3>
                <?php endif; ?>
                <div class="border-b border-[0.188rem] border-gray-200"></div>
                <?php if (have_rows('left_column_items')) : ?>
                    <ul class="text-center comparison-good">
                        <?php while (have_rows('left_column_items')) : the_row();
                            $item = get_sub_field('item');
                        ?>
                            <li class="flex items-center justify-center py-6 border-b border-gray-200 text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]">
                            <img class="shrink-0 w-[0.875rem] h-auto mr-4 lg:mr-[0.625rem] lg:w-5" src="<?php echo get_template_directory_uri(); ?>/images/ic_checkmark.svg" width="14" height="12" />
                                <?php echo $item; ?>
                            </li>
                        <?php endwhile; ?>
                    </ul>
                <?php endif; ?>
            </div>
            <div class="hidden lg:block lg:w-1/2">
                <?php if ($right_column_title) : ?>
                    <h3 class="text-center text-[1.75rem] leading-[2.25rem] mb-5 lg:mb-6 lg:text-[2rem] lg:leading-[2.5rem]"><?php echo esc_html($right_column_title); ?></h3>
                <?php endif; ?>
                <div class="border-b border-[0.188rem] border-gray-200"></div>
                <?php if (have_rows('right_column_items')) : ?>
                    <ul class="text-center">
                        <?php while (have_rows('right_column_items')) : the_row();
                            $item = get_sub_field('item');
                        ?>
                            <li class="flex items-center justify-center py-6 border-b border-gray-200 text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]">
                            <img class="shrink-0 w-[0.875rem] h-auto mr-4 lg:mr-[0.563rem]" src="<?php echo get_template_directory_uri(); ?>/images/ic_x.svg" width="9" height="12" />
                                <?php echo $item; ?>
                            </li>
                        <?php endwhile; ?>
                    </ul>
                <?php endif; ?>
            </div>
        </div>
        <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
            <div class="lg:text-center mt-12 lg:mt-14">
                <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php
$id = get_sub_field('id');
$image_desktop = get_sub_field('image_desktop');
$image_mobile = get_sub_field('image_mobile');
$title = get_sub_field('title');
$sub_title = get_sub_field('sub_title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$desktop_url = $image_desktop['url'] ?? '';
$mobile_url = $image_mobile['url'] ?? '';
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="image-left-text-box-right mb-22 lg:mb-40">
    <div class="max-w-[87.5rem] mx-auto flex flex-col lg:flex-row items-center">
        <div class="w-full lg:w-2/6">
            <?php if ($desktop_url || $mobile_url) : ?>
                <picture>
                    <?php if ($mobile_url) : ?>
                        <source srcset="<?php echo esc_url($mobile_url); ?>" media="(max-width: 1023px)">
                    <?php endif; ?>
                    <?php if ($desktop_url) : ?>
                        <img src="<?php echo esc_url($desktop_url); ?>" alt="<?php echo esc_attr($title); ?>" class="w-full h-auto max-w-full lg:h-[37.5rem] lg:w-[53.125rem] lg:max-w-[53.125rem]" />
                    <?php endif; ?>
                </picture>
            <?php endif; ?>
        </div>
        <div class="w-full lg:w-4/6 2xl:w-[53rem] px-6 bg-beige-100 py-14 lg:py-10 lg:px-10 xl:py-20 xl:lg:px-20 lg:shrink-0">
            <?php if ($title) : ?>
                <h2 class="text-xl leading-[1.75rem] mb-4 uppercase text-orange-100 lg:text-2xl lg:leading-[2rem] lg:mb-6"><?php echo esc_html($title); ?></h2>
            <?php endif; ?>
            <?php if ($sub_title) : ?>
                <div class="text-[2.5rem] leading-[3rem] mb-4 lg:text-5xl lg:leading-[3.5rem] lg:mb-6"><?php echo esc_html($sub_title); ?></div>
            <?php endif; ?>
            <?php if ($description) : ?>
                <div class="text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]"><?php echo $description; ?></div>
            <?php endif; ?>
            <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                <div class="mt-12 lg:mt-10">
                    <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$title = get_sub_field('title');
$sub_title = get_sub_field('sub_title');
$cta = get_sub_field('cta');
$id = get_sub_field('id');
?>
<?php if (!$hide_component) : ?>
<section class="blog-posts-section bg-shit-100 mb-22 lg:mb-40"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
    <div class="max-w-[87.5rem] mx-auto px-6">
        <?php if ($title) : ?>
            <h2 class="text-xl leading-[1.75rem] mb-4 uppercase text-center text-orange-100 lg:text-2xl lg:leading-[2rem] lg:mb-6"><?php echo esc_html($title); ?></h2>
        <?php endif; ?>
        <?php if ($sub_title) : ?>
            <div class="text-center text-[2.5rem] leading-[3rem] mb-6 lg:text-5xl lg:leading-[3.5rem] lg:mb-12"><?php echo esc_html($sub_title); ?></div>
        <?php endif; ?>
        <div class="lg:flex lg:gap-x-10">
            <?php
            $latest_posts = new WP_Query(array(
                'posts_per_page' => 3,
                'post_status' => 'publish',
            ));
            if ($latest_posts->have_posts()) :
                while ($latest_posts->have_posts()) : $latest_posts->the_post();
            ?>
                    <article class="blog-post mb-8 border-b border-gray-200 lg:mb-14 lg:w-4/12">
                        <a href="<?php the_permalink(); ?>" class="">
                            <?php if (has_post_thumbnail()) : ?>
                                <div href="<?php the_permalink(); ?>" class="block mb-8">
                                    <?php the_post_thumbnail('blog-thumb', ['class' => 'w-full h-auto']); ?>
                                </div>
                            <?php endif; ?>
                            <div class="">
                                <?php
                                $categories = get_the_category();
                                if ($categories) {
                                    foreach ($categories as $cat) {
                                        echo '<span class="mb-[0.875rem] inline-block bg-orange-100 uppercase text-beige-300 rounded-[0.25rem] font-bold text-sm leading-[1.25rem] px-3 pt-[0.25rem] mr-2 min-h-7">' . esc_html($cat->name) . '</span>';
                                    }
                                }
                                $tags = get_the_tags();
                                if ($tags) {
                                    foreach ($tags as $tag) {
                                        echo '<span class="mb-[0.875rem] inline-block bg-beige-300 uppercase text-orange-100 rounded-[0.25rem] font-bold text-sm leading-[1.25rem] px-3 pt-[0.25rem] mr-2 min-h-7">' . esc_html($tag->name) . '</span>';
                                    }
                                }
                                ?>
                            </div>
                            <h3 class="text-[1.375rem] leading-[1.875rem] font-bold mb-3 lg:text-2xl lg:leading-[2rem]">
                                <?php the_title(); ?>
                            </h3>
                            <div class="text-brown-100 text-lg leading-[1.5rem] mb-8 flex-1 lg:text-xl lg:leading-[1.75rem] lg:mb-11"><?php the_excerpt(); ?></div>
                        </a>
                    </article>
            <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
        <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
            <div class="mt-12 lg:text-center">
                <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            </div>
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>

<?php
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
$cta = get_sub_field('cta');
$type = get_sub_field('type');
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section class="banner-section mb-22 lg:mb-40"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
    <div class="max-w-[87.5rem] mx-auto px-6 lg:px-0">
        <div class="<?php echo ($type === 'color') ? 'banner-bg' : 'bg-beige-200'; ?> flex flex-col lg:flex-row lg:items-center lg:justify-between relative px-8 py-12 lg:pl-[12rem] lg:py-12 lg:pr-30">
            <?php if ($type === 'color') : ?>
                <svg class="absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" width="157" height="172" viewBox="0 0 157 172" fill="none">
                    <g style="mix-blend-mode:soft-light" clip-path="url(#clip0_612_87)">
                        <path d="M21.0392 -6.87891C21.0392 20.4362 44.6164 39.1628 42.4757 71.0629C40.7202 98.2811 28.3427 119.449 9.4396 115.256C-0.982307 113.014 -13.0635 112.815 -19.4929 126.476C-23.1965 134.375 -24.2705 141.889 -24.2705 148.524C-24.2705 151.061 -24.0779 153.494 -23.8779 155.839" stroke="white" stroke-opacity="0.28" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M74.2452 150.383C65.638 153.726 56.9345 155.501 48.8163 155.797C28.0761 156.581 14.284 148.023 7.34343 142.025C4.41019 139.57 0.00294067 141.145 -0.774814 144.88C-1.46368 147.927 -2.04883 151.662 -2.04883 155.797" stroke="white" stroke-opacity="0.28" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M47.5801 -6.87891C47.5801 -2.26808 48.069 1.65637 48.9431 4.99208C49.9208 9.30854 54.2095 12.0555 58.4983 11.074C90.764 3.52024 126.837 24.7113 124.793 78.1781" stroke="white" stroke-opacity="0.28" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M139.906 116.075C139.906 130.469 127.197 142.138 111.52 142.138C106.815 142.138 102.377 141.086 98.4694 139.226C98.4093 139.197 98.3493 139.168 98.2894 139.139C95.1918 140.467 89.6216 142.47 86.1658 143.687C84.9363 144.12 83.771 142.948 84.2241 141.726C85.3039 138.814 87.0139 134.413 88.5475 131.387C88.462 131.279 88.3774 131.17 88.2936 131.061C85.0434 126.822 83.1348 121.653 83.1348 116.075C83.1348 101.681 95.8433 90.0117 111.52 90.0117C127.197 90.0117 139.906 101.681 139.906 116.075Z" stroke="white" stroke-opacity="0.28" stroke-width="5" />
                    </g>
                    <defs>
                        <clipPath id="clip0_612_87">
                            <rect width="157" height="172" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
            <?php else : ?>
                <svg class="absolute top-0 left-0" width="157" height="172" viewBox="0 0 157 172" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_717_1168)">
                        <path d="M21.0382 -6.87891C21.0382 20.4362 44.6154 39.1628 42.4747 71.0629C40.7192 98.2811 28.3418 119.449 9.43863 115.256C-0.983284 113.014 -13.0644 112.815 -19.4939 126.476C-23.1975 134.375 -24.2715 141.889 -24.2715 148.524C-24.2715 151.061 -24.0789 153.494 -23.8789 155.839" stroke="#E37F1C" stroke-opacity="0.1" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M74.2432 150.383C65.6361 153.726 56.9326 155.501 48.8143 155.797C28.0742 156.581 14.282 148.023 7.34148 142.025C4.40823 139.57 0.000987545 141.145 -0.776767 144.88C-1.46564 147.927 -2.05078 151.662 -2.05078 155.797" stroke="#E37F1C" stroke-opacity="0.1" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M47.5781 -6.87891C47.5781 -2.26808 48.0671 1.65637 48.9411 4.99208C49.9189 9.30854 54.2075 12.0555 58.4963 11.074C90.762 3.52024 126.835 24.7113 124.791 78.1781" stroke="#E37F1C" stroke-opacity="0.1" stroke-width="5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M79 123.254L98.4444 141L129 98" stroke="#E37F1C" stroke-opacity="0.1" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" />
                    </g>
                    <defs>
                        <clipPath id="clip0_717_1168">
                            <rect width="157" height="172" fill="white" />
                        </clipPath>
                    </defs>
                </svg>
            <?php endif; ?>
            <div class="lg:pr-16 shrink-0">
                <?php if ($title) : ?>
                    <h2 class="text-[2.5rem] leading-[3rem] font-medium mb-4 lg:mb-2 lg:text-5xl lg:leading-[3.5rem] <?php echo ($type === 'color') ? 'text-white' : 'text-black-222'; ?>"><?php echo esc_html($title); ?></h2>
                <?php endif; ?>
                <?php if ($description) : ?>
                    <div class="text-2xl leading-[2rem] <?php echo ($type === 'color') ? 'text-white' : 'text-black-222'; ?> mb-8 lg:mb-0 lg:text-2xl lg:leading-[2rem]"><?php echo $description; ?></div>
                <?php endif; ?>
            </div>
            <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
                <div class="shrink-0">
                    <a href="<?php echo esc_url($cta['url']); ?>" class="button <?php echo ($type === 'color') ? 'button-white' : 'button-orange'; ?> inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$title = get_sub_field('title');
$cta = get_sub_field('cta');
$id = get_sub_field('id');
$type = get_sub_field('type');
?>
<?php if (!$hide_component) : ?>
<section class="faq-section bg-shit-100 mb-22 lg:mb-40"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
    <div class="max-w-[57.5rem] mx-auto px-6 lg:px-0">
        <?php if ($title) : ?>
            <h2 class="text-center text-[2.5rem] leading-[3rem] mb-10 lg:text-5xl lg:leading-[3.5rem] lg:mb-12"><?php echo esc_html($title); ?></h2>
        <?php endif; ?>
        <div class="" id="faq-accordion">
            <?php
            if ($type === 'questions_selected') {
                $faq_posts = get_sub_field('selected_questions'); // ACF post object/relationship field
                if ($faq_posts) {
                    $i = 0;
                    foreach ($faq_posts as $faq_post) {
                        $question_id = 'faq-q-' . $i;
                        $answer_id = 'faq-a-' . $i;
                        $border_class = $i === 0 ? 'border-t border-b border-gray-200' : 'border-b border-gray-200';
                        ?>
                        <div class="faq-item <?php echo $border_class; ?> p-0 shadow-none">
                            <button class="faq-question flex justify-between w-full text-left focus:outline-none py-6 px-0" aria-expanded="false" aria-controls="<?php echo $answer_id; ?>" id="<?php echo $question_id; ?>">
                                <span class="text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]"><?php echo get_the_title($faq_post); ?></span>
                                <img src="<?php echo get_template_directory_uri(); ?>/images/ic-plus.svg" alt="Show/Hide" class="ml-4 w-6 h-6 transition-transform duration-200" />
                            </button>
                            <div class="faq-answer text-brown-100 text-base hidden px-0 overflow-hidden transition-all duration-300 ease-in-out" id="<?php echo $answer_id; ?>" aria-labelledby="<?php echo $question_id; ?>" style="max-height:0;opacity:0;">
                                <div class="pb-6">
                                    <?php echo apply_filters('the_content', get_post_field('post_content', $faq_post)); ?>
                                </div>
                            </div>
                        </div>
                        <?php
                        $i++;
                    }
                } else {
                    echo '<p class="text-center text-gray-500">Ni najdenih vprašanj.</p>';
                }
            } else {
                $faq_query = new WP_Query(array(
                    'post_type' => 'faq',
                    'posts_per_page' => 6,
                    'post_status' => 'publish',
                ));
                if ($faq_query->have_posts()) :
                    $i = 0;
                    while ($faq_query->have_posts()) : $faq_query->the_post();
                        $question_id = 'faq-q-' . $i;
                        $answer_id = 'faq-a-' . $i;
                        $border_class = $i === 0 ? 'border-t border-b border-gray-200' : 'border-b border-gray-200';
                ?>
                        <div class="faq-item <?php echo $border_class; ?> p-0 shadow-none">
                            <button class="faq-question flex justify-between w-full text-left focus:outline-none py-6 px-0" aria-expanded="false" aria-controls="<?php echo $answer_id; ?>" id="<?php echo $question_id; ?>">
                                <span class="text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]"><?php the_title(); ?></span>
                                <img src="<?php echo get_template_directory_uri(); ?>/images/ic-plus.svg" alt="Show/Hide" class="ml-4 w-6 h-6 transition-transform duration-200" />
                            </button>
                            <div class="faq-answer text-brown-100 text-base hidden px-0 overflow-hidden transition-all duration-300 ease-in-out" id="<?php echo $answer_id; ?>" aria-labelledby="<?php echo $question_id; ?>" style="max-height:0;opacity:0;">
                                <div class="pb-6">
                                    <?php the_content(); ?>
                                </div>
                            </div>
                        </div>
                    <?php
                        $i++;
                    endwhile;
                    wp_reset_postdata();
                else :
                    ?>
                    <p class="text-center text-gray-500">Ni najdenih vprašanj.</p>
                <?php endif;
            }
            ?>
        </div>
        <?php if ($cta && isset($cta['url'], $cta['title'])) : ?>
            <div class="mt-12 lg:text-center">
                <a href="<?php echo esc_url($cta['url']); ?>" class="button button-orange inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto" target="<?php echo esc_attr($cta['target'] ?? '_self'); ?>"><?php echo esc_html($cta['title']); ?></a>
            </div>
        <?php endif; ?>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('#faq-accordion .faq-question').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    const answer = btn.parentElement.querySelector('.faq-answer');
                    const icon = btn.querySelector('img');
                    const expanded = btn.getAttribute('aria-expanded') === 'true';

                    // Close all others
                    document.querySelectorAll('#faq-accordion .faq-answer').forEach(function(a) {
                        if (a !== answer) {
                            a.style.maxHeight = '0';
                            a.style.opacity = '0';
                            a.parentElement.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
                            a.parentElement.querySelector('.faq-question img').style.transform = '';
                            // Remove any previous transitionend
                            a.removeEventListener('transitionend', a._faqHandler);
                            // Add transitionend for hiding
                            a._faqHandler = function handler(e) {
                                if (e.propertyName === 'max-height' && a.style.maxHeight === '0px') {
                                    a.classList.add('hidden');
                                    a.removeEventListener('transitionend', handler);
                                }
                            };
                            a.addEventListener('transitionend', a._faqHandler);
                        }
                    });

                    if (!expanded) {
                        // Open this one
                        answer.classList.remove('hidden');
                        // Force reflow to ensure transition
                        void answer.offsetWidth;
                        answer.style.maxHeight = answer.scrollHeight + 'px';
                        answer.style.opacity = '1';
                        btn.setAttribute('aria-expanded', 'true');
                        icon.style.transform = 'rotate(45deg)';
                    } else {
                        // Remove any previous transitionend
                        answer.removeEventListener('transitionend', answer._faqHandler);
                        // Close this one
                        answer.style.maxHeight = '0';
                        answer.style.opacity = '0';
                        btn.setAttribute('aria-expanded', 'false');
                        icon.style.transform = '';
                        answer._faqHandler = function handler(e) {
                            if (e.propertyName === 'max-height' && answer.style.maxHeight === '0px') {
                                answer.classList.add('hidden');
                                answer.removeEventListener('transitionend', handler);
                            }
                        };
                        answer.addEventListener('transitionend', answer._faqHandler);
                    }
                });
            });
        });
    </script>
</section>
<?php endif; ?>

<?php
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
$description_two = get_sub_field('description_two');
$cta_one = get_sub_field('cta_one');
$cta_two = get_sub_field('cta_two');
$gallery = get_sub_field('gallery');
$hide_component = get_sub_field('hide_component');
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="product-section pt-18 lg:pt-8 mb-22 lg:mb-40 bg-shit-100">
    <div class="max-w-[87.5rem] mx-auto px-6">
        <?php if ($title) : ?>
            <h2 class="xl:hidden font-bold text-[2.5rem] leading-[3rem] mb-6 text-orange-100 lg:text-5xl lg:leading-[3.5rem] lg:mb-8"><?php echo esc_html($title); ?></h2>
        <?php endif; ?>
        <?php if ($description) : ?>
            <div class="xl:hidden content-product text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem] wysiwyg-content"><?php echo $description; ?></div>
        <?php endif; ?>
        <div class="xl:flex">
            <?php if ($gallery && is_array($gallery)) : ?>
                <div class="xl:1/2">
                    <section class="splide splide-product bg-white border border-gray-200 mb-3 py-10 px-8" aria-label="Product Gallery">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <?php foreach ($gallery as $image) : ?>
                                    <li class="splide__slide">
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt'] ?? ''); ?>" class="w-full h-auto rounded" />
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </section>
                    <section class="splide splide-product-thumbs mb-8 flex justify-center" aria-label="Product Gallery Thumbnails">
                        <div class="splide__track">
                            <ul class="splide__list">
                                <?php foreach ($gallery as $image) : ?>
                                    <li class="splide__slide">
                                        <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt'] ?? ''); ?>" class="w-14 h-14 object-cover rounded border border-gray-200" />
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </section>
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            var main = new Splide('.splide-product', {
                                type: 'fade',
                                heightRatio: 0.6,
                                pagination: false,
                                arrows: true,
                                cover: true,
                            });
                            var thumbs = new Splide('.splide-product-thumbs', {
                                fixedWidth: 116,
                                fixedHeight: 116,
                                isNavigation: true,
                                gap: 12,
                                focus: 'center',
                                pagination: false,
                                cover: true,
                                arrows: false,
                                breakpoints: {
                                    640: {
                                        fixedWidth: 56,
                                        fixedHeight: 56,
                                    },
                                },
                            });
                            main.sync(thumbs);
                            main.mount();
                            thumbs.mount();
                        });
                    </script>
                <?php endif; ?>
                </div>
                <div class="xl:1/2 xl:pl-10 2xl:pl-30">
                    <?php if ($title) : ?>
                        <h2 class="hidden xl:block font-bold text-[2.5rem] leading-[3rem] mb-6 text-orange-100 lg:text-5xl lg:leading-[3.5rem] lg:mb-8"><?php echo esc_html($title); ?></h2>
                    <?php endif; ?>
                    <?php if ($description) : ?>
                        <div class="hidden xl:block content-product text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem] wysiwyg-content"><?php echo $description; ?></div>
                    <?php endif; ?>
                    <?php if ($description_two) : ?>
                        <div class="content-product mb-8 lg:mb-10 text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem] wysiwyg-content"><?php echo $description_two; ?></div>
                    <?php endif; ?>
                    <div class="flex flex-col gap-6 mb-8">
                        <?php if ($cta_one && isset($cta_one['url'], $cta_one['title'])) : ?>
                            <div class="text-center xl:text-left">
                                <a href="<?php echo esc_url($cta_one['url']); ?>" class="button inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto lg:min-w-70" target="<?php echo esc_attr($cta_one['target'] ?? '_self'); ?>"><img class="mr-4 w-6 h-auto" src="<?php echo get_template_directory_uri(); ?>/images/ico-vitamind3-cart.svg" width="24" height="24" /><?php echo esc_html($cta_one['title']); ?></a>
                            </div>
                        <?php endif; ?>
                        <?php if ($cta_two && isset($cta_two['url'], $cta_two['title'])) : ?>
                            <div class="text-center xl:text-left">
                                <a href="<?php echo esc_url($cta_two['url']); ?>" class="button button-orange-white inline-flex items-center justify-center text-xl leading-[1.75rem] w-full lg:w-auto lg:min-w-70" target="<?php echo esc_attr($cta_two['target'] ?? '_self'); ?>"><?php echo esc_html($cta_two['title']); ?></a>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
        </div>
    </div>
</section>
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$id = get_sub_field('id');
$title = get_sub_field('title');
$description = get_sub_field('description');
?>
<?php if (!$hide_component) : ?>
<section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="title-with-description-section mb-10 lg:mb-18 bg-shit-100 mt-18">
    <div class="max-w-[45rem] mx-auto px-6 lg:px-0">
        <?php if ($title) : ?>
            <h2 class="text-center font-medium text-[2.5rem] leading-[3rem] mb-6 lg:text-5xl lg:leading-[3.5rem]"><?php echo esc_html($title); ?></h2>
        <?php endif; ?>
        <?php if ($description) : ?>
            <div class="wysiwyg-content text-center text-lg leading-[1.625rem] text-brown-100 lg:text-xl lg:leading-[1.75rem]">
                <?php echo $description; ?>
            </div>
        <?php endif; ?>
    </div>
</section> 
<?php endif; ?>

<?php
$hide_component = get_sub_field('hide_component');
$id = get_sub_field('id');
$tabs = get_sub_field('tab');
if ($tabs && is_array($tabs)) :
    $tab_ids = [];
    $tab_index = 0;
?>
<?php if (!$hide_component) : ?>
    <section<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?> class="tabs-section mb-22 lg:mb-40">
        <div class="max-w-[72.5rem] mx-auto px-6">
            <div class="relative mb-12">
                <div class="absolute inset-x-0 bottom-0 h-0.5 border-b-[0.125rem] border-gray-200 z-0"></div>
                <div class="tabs-nav flex gap-4 justify-center z-10 relative lg:px-20">
                    <?php foreach ($tabs as $i => $tab) :
                        $tab_id = 'tab-' . $i . '-' . uniqid();
                        $tab_ids[] = $tab_id;
                        $active_class = $i === 0 ? 'active-tab-btn' : '';
                    ?>
                        <button type="button" class="inline-block cursor-pointer uppercase tab-btn px-6 pt-2 min-h-[3.5rem] lg:min-h-[4.5rem] rounded-t-[0.5rem] text-orange-100 text-lg lg:text-2xl lg:leading-[2rem] font-bold transition-all w-1/3 <?php echo $active_class; ?>" style="border-bottom:0.25rem solid transparent; opacity:<?php echo $i === 0 ? '1' : '0.5'; ?>;" data-tab="<?php echo esc_attr($tab_id); ?>" <?php if ($i === 0) echo 'aria-selected="true"'; ?>><?php echo esc_html($tab['title'] ?? ''); ?></button>
                    <?php endforeach; ?>
                </div>
            </div>
            <div class="tabs-content lg:max-w-[57.5rem] lg:mx-auto">
                <?php foreach ($tabs as $i => $tab) :
                    $tab_id = $tab_ids[$i];
                    $active = $i === 0 ? 'active' : '';
                    $image = $tab['image'] ?? null;
                ?>
                    <div class="tab-panel <?php echo $active; ?>" id="<?php echo esc_attr($tab_id); ?>">
                        <div class="flex flex-col lg:flex-row lg:gap-10 items-start lg:items-center">
                            <div class="lg:w-1/2">
                                <?php if (!empty($tab['title'])) : ?>
                                    <h2 class="wysiwyg-content font-bold mb-6 text-[2rem] leading-[2.5rem] text-orange-100 lg:text-[2.5rem] lg:leading-[3rem]">
                                        <?php echo $tab['title']; ?>
                                    </h2>
                                <?php endif; ?>
                                <?php if (!empty($tab['description'])) : ?>
                                    <div class="wysiwyg-content mb-6 text-base leading-[1.5rem] text-gray-700 lg:text-xl lg:leading-[1.75rem]">
                                        <?php echo $tab['description']; ?>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <?php if ($image && isset($image['url'])) : ?>
                                <div class="tab-image w-full lg:w-1/2 mb-12 lg:mb-0">
                                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($tab['title'] ?? ''); ?>" class="w-full h-auto rounded" />
                                </div>
                            <?php endif; ?>
                        </div>
                        <div class="tab-content w-full lg:mt-10">
                            <?php if (!empty($tab['faq']) && is_array($tab['faq'])) : ?>
                                <div class="tab-faq" id="tab-faq-<?php echo $i; ?>">
                                    <?php foreach ($tab['faq'] as $j => $faq) :
                                        $question_id = 'tab-faq-q-' . $i . '-' . $j;
                                        $answer_id = 'tab-faq-a-' . $i . '-' . $j;
                                        $border_class = $j === 0 ? 'border-t border-b border-gray-200' : 'border-b border-gray-200';
                                    ?>
                                        <div class="faq-item <?php echo $border_class; ?> p-0 shadow-none">
                                            <button class="faq-question flex justify-between w-full text-left focus:outline-none py-6 px-0" aria-expanded="false" aria-controls="<?php echo $answer_id; ?>" id="<?php echo $question_id; ?>">
                                                <span class="font-semibold lg:font-normal text-lg leading-[1.625rem] text-orange-100 lg:text-xl lg:leading-[1.75rem]"><?php echo esc_html($faq['question'] ?? ''); ?></span>
                                                <img src="<?php echo get_template_directory_uri(); ?>/images/ic-plus.svg" alt="Show/Hide" class="ml-4 w-6 h-6 transition-transform duration-200" />
                                            </button>
                                            <div class="faq-answer text-brown-100 text-base hidden px-0 overflow-hidden transition-all duration-300 ease-in-out" id="<?php echo $answer_id; ?>" aria-labelledby="<?php echo $question_id; ?>" style="max-height:0;opacity:0;">
                                                <div class="pb-6 text-gray-700">
                                                    <?php echo $faq['answer'] ?? ''; ?>
                                                </div>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                // Tab switching
                const tabBtns = document.querySelectorAll('.tabs-section .tab-btn');
                const tabPanels = document.querySelectorAll('.tabs-section .tab-panel');
                tabBtns.forEach(btn => {
                    btn.addEventListener('click', function() {
                        const tabId = this.getAttribute('data-tab');
                        tabBtns.forEach(b => {
                            b.classList.remove('active-tab-btn', 'bg-orange-100', 'text-white');
                            b.style.opacity = '0.5';
                        });
                        this.classList.add('active-tab-btn');
                        this.style.opacity = '1';
                        tabPanels.forEach(panel => {
                            panel.classList.remove('active');
                        });
                        const nextPanel = document.getElementById(tabId);
                        nextPanel.classList.add('active');
                    });
                });
                // FAQ accordion for tab-faq
                document.querySelectorAll('.tab-faq .faq-question').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        const answer = btn.parentElement.querySelector('.faq-answer');
                        const icon = btn.querySelector('img');
                        const expanded = btn.getAttribute('aria-expanded') === 'true';

                        // Close all others in this tab-faq
                        btn.closest('.tab-faq').querySelectorAll('.faq-answer').forEach(function(a) {
                            if (a !== answer) {
                                a.style.maxHeight = '0';
                                a.style.opacity = '0';
                                a.parentElement.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
                                a.parentElement.querySelector('.faq-question img').style.transform = '';
                                a.removeEventListener('transitionend', a._faqHandler);
                                a._faqHandler = function handler(e) {
                                    if (e.propertyName === 'max-height' && a.style.maxHeight === '0px') {
                                        a.classList.add('hidden');
                                        a.removeEventListener('transitionend', handler);
                                    }
                                };
                                a.addEventListener('transitionend', a._faqHandler);
                            }
                        });

                        if (!expanded) {
                            answer.classList.remove('hidden');
                            void answer.offsetWidth;
                            answer.style.maxHeight = answer.scrollHeight + 'px';
                            answer.style.opacity = '1';
                            btn.setAttribute('aria-expanded', 'true');
                            icon.style.transform = 'rotate(45deg)';
                        } else {
                            answer.removeEventListener('transitionend', answer._faqHandler);
                            answer.style.maxHeight = '0';
                            answer.style.opacity = '0';
                            btn.setAttribute('aria-expanded', 'false');
                            icon.style.transform = '';
                            answer._faqHandler = function handler(e) {
                                if (e.propertyName === 'max-height' && answer.style.maxHeight === '0px') {
                                    answer.classList.add('hidden');
                                    answer.removeEventListener('transitionend', handler);
                                }
                            };
                            answer.addEventListener('transitionend', answer._faqHandler);
                        }
                    });
                });
            });
        </script>
        <style>
            .active-tab-btn {
                background: rgba(227, 127, 28, 0.05) !important;
                border-bottom: 0.25rem solid #E37F1C !important;
            }

            .tab-panel {
                opacity: 0;
                transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
                pointer-events: none;
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
            }

            .tab-panel.active {
                opacity: 1;
                pointer-events: auto;
                position: relative;
            }

            .tabs-content {
                position: relative;
                min-height: 200px;
            }
        </style>
    </section>
    <?php endif; ?>  
<?php endif; ?>

<?php
// Component: Full Width Text for Post Flexible Content
$title = get_sub_field('title');
$id = get_sub_field('id');
$hide_component = get_sub_field('hide_component');
if ($title && !$hide_component) : ?>
    <div<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
        <h2 class="max-w-[87.5rem] mx-auto px-6 lg:px-0 mt-6 lg:mt-12 text-[2rem] leading-[2.5rem] font-bold text-orange-100 mb-6 lg:text-[2.5rem] lg:leading-[3rem] lg:mb-8">
            <?php echo $title; ?>
        </h2>
    </div>
<?php endif; ?>

<?php
$full_text = get_sub_field('full_text');
$id = get_sub_field('id');
$hide_component = get_sub_field('hide_component');

if ($full_text && !$hide_component) : ?>
    <section class="max-w-[87.5rem] mx-auto px-6 lg:px-0 post-full-width-text text-brown-100 text-lg leading-[1.625rem] lg:text-xl lg:leading-[1.75rem] mb-12 lg:mb-16"<?php if ($id) echo ' id="' . esc_attr($id) . '"'; ?>>
        <?php echo $full_text; ?>
    </section>
<?php endif; ?>