<?php
/**
 * Template part for displaying the Featured Links Section.
 *
 * @package Blog_Over
 */

$enable_featured = get_theme_mod('blog_over_enable_featured_links', false);

if (!$enable_featured) {
    return;
}

$featured_items = get_theme_mod('blog_over_featured_links_repeater', array());



if (empty($featured_items)) {
    return;
}

// Get layout, border effect, columns, and section width
$layout_style = get_theme_mod('blog_over_featured_layout', 'grid');
$border_effect = get_theme_mod('blog_over_featured_border_effect', 'none');
$columns = get_theme_mod('blog_over_featured_columns', '3');
$section_width = get_theme_mod('blog_over_featured_section_width', 'boxed');

// Build wrapper classes
$wrapper_classes = 'blog-over-featured-links-wrapper';
$container_class = ($section_width === 'full-width') ? 'blog-over-container blog-over-container-wide' : 'blog-over-container';

// Build grid classes
$grid_classes = 'blog-over-featured-grid';
$grid_classes .= ' blog-over-layout-' . esc_attr($layout_style);
$grid_classes .= ' blog-over-border-' . esc_attr($border_effect);

// Add column class for grid, cards and diagonal layouts (not minimal)
if ($layout_style === 'grid' || $layout_style === 'cards' || $layout_style === 'diagonal') {
    $grid_classes .= ' blog-over-columns-' . esc_attr($columns);
}

// Get section title and description
$section_title = get_theme_mod('blog_over_featured_section_title', '');
$section_description = get_theme_mod('blog_over_featured_section_description', '');
?>

<div class="<?php echo esc_attr($wrapper_classes); ?>">
    <div class="<?php echo esc_attr($container_class); ?>">
        <?php if ($section_title || $section_description): ?>
            <div class="blog-over-featured-section-header">
                <?php if ($section_title): ?>
                    <div class="blog-over-section-heading-wrap">
                        <h2 class="blog-over-section-heading blog-over-featured-section-title"><?php echo esc_html($section_title); ?></h2>
                    </div>
                <?php endif; ?>
                <?php if ($section_description): ?>
                    <p class="blog-over-featured-section-description"><?php echo esc_html($section_description); ?></p>
                <?php endif; ?>
            </div>
        <?php endif; ?>
        <?php if ($layout_style === 'diagonal'): ?>
            <!-- ═══ DIAGONAL SPLIT LAYOUT (Pro) ═══ -->
            <div class="<?php echo esc_attr($grid_classes); ?>">
                <button class="blog-over-featured-nav blog-over-featured-prev" aria-label="<?php esc_attr_e('Previous', 'blog-over'); ?>">
                    <i class="fas fa-arrow-left"></i>
                </button>
                <div class="blog-over-featured-inner">
                    <?php foreach ($featured_items as $item):
                        $title      = isset($item['link_title'])    ? $item['link_title']    : '';
                        $category   = isset($item['link_category']) ? $item['link_category'] : '';
                        $badge_color= isset($item['badge_color'])   ? $item['badge_color']   : '#3b82f6';
                        $url        = isset($item['link_url'])      ? $item['link_url']      : '#';
                        $image      = isset($item['link_image'])    ? $item['link_image']    : '';
                        $target     = isset($item['open_new_tab']) && $item['open_new_tab'] ? '_blank' : '_self';
                    ?>
                        <div class="blog-over-featured-item">
                            <div class="blog-over-featured-diagonal-image">
                                <div class="blog-over-diagonal-img-inner" style="background-image: url('<?php echo esc_url($image); ?>');" role="img" aria-label="<?php echo esc_attr($title ? $title : get_bloginfo('name')); ?>"></div>
                            </div>
                            <div class="blog-over-featured-content">
                                <?php if ($category): ?>
                                    <div class="blog-over-featured-category">
                                        <span style="background-color: <?php echo esc_attr($badge_color); ?>;"><?php echo esc_html($category); ?></span>
                                    </div>
                                <?php endif; ?>
                                <?php if ($title): ?>
                                    <h3 class="blog-over-featured-title">
                                        <a href="<?php echo esc_url($url); ?>" target="<?php echo esc_attr($target); ?>"><?php echo esc_html($title); ?></a>
                                    </h3>
                                <?php endif; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <button class="blog-over-featured-nav blog-over-featured-next" aria-label="<?php esc_attr_e('Next', 'blog-over'); ?>">
                    <i class="fas fa-arrow-right"></i>
                </button>
            </div>

        <?php else: ?>
            <!-- ═══ ALL OTHER LAYOUTS (Grid / Cards / Minimal) ═══ -->
            <div class="<?php echo esc_attr($grid_classes); ?>">
                <?php foreach ($featured_items as $item):
                    $title       = isset($item['link_title'])    ? $item['link_title']    : '';
                    $url         = isset($item['link_url'])      ? $item['link_url']      : '#';
                    $image       = isset($item['link_image'])    ? $item['link_image']    : '';
                    $btn_text    = isset($item['btn_text'])      ? $item['btn_text']      : __('Read More', 'blog-over');
                    $category    = isset($item['link_category']) ? $item['link_category'] : '';
                    $badge_color = isset($item['badge_color'])   ? $item['badge_color']   : '#3b82f6';
                    $target      = isset($item['open_new_tab']) && $item['open_new_tab'] ? '_blank' : '_self';
                    $is_minimal  = $layout_style === 'minimal';
                ?>
                    <div class="blog-over-featured-item" style="background-image: url('<?php echo esc_url($image); ?>');" role="img" aria-label="<?php echo esc_attr($title ? $title : get_bloginfo('name')); ?>">

                        <?php if ($is_minimal): ?>
                            <a href="<?php echo esc_url($url); ?>" class="blog-over-featured-overlay-link" target="<?php echo esc_attr($target); ?>"></a>
                        <?php endif; ?>

                        <?php if ($layout_style === 'cards' && $image): ?>
                            <div class="blog-over-featured-image-wrapper">
                                <img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($title); ?>" class="blog-over-featured-image">
                            </div>
                        <?php endif; ?>

                        <?php if ($title || $btn_text || $category): ?>
                            <div class="blog-over-featured-content">

                                <div class="blog-over-featured-text">
                                    <?php if ($category): ?>
                                        <div class="blog-over-featured-category">
                                            <span style="background-color: <?php echo esc_attr($badge_color); ?>;"><?php echo esc_html($category); ?></span>
                                        </div>
                                    <?php endif; ?>

                                    <?php if ($title): ?>
                                        <h3 class="blog-over-featured-title">
                                            <?php if (!$is_minimal): ?>
                                                <a href="<?php echo esc_url($url); ?>" target="<?php echo esc_attr($target); ?>"><?php echo esc_html($title); ?></a>
                                            <?php else: ?>
                                                <?php echo esc_html($title); ?>
                                            <?php endif; ?>
                                        </h3>
                                    <?php endif; ?>
                                </div>

                                <?php if ($btn_text): ?>
                                    <?php if (!$is_minimal): ?>
                                        <a href="<?php echo esc_url($url); ?>" class="blog-over-featured-btn" target="<?php echo esc_attr($target); ?>"><?php echo esc_html($btn_text); ?></a>
                                    <?php else: ?>
                                        <span class="blog-over-featured-btn"><?php echo esc_html($btn_text); ?></span>
                                    <?php endif; ?>
                                <?php endif; ?>

                            </div>
                        <?php endif; ?>

                        <div class="blog-over-featured-overlay"></div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>