<?php
/**
 * Template part for displaying the about section
 *
 * @package Carpentry Contractor
 */

$carpentry_contractor_aboutus = get_theme_mod('carpentry_contractor_our_products_show_hide_section', true);

if ($carpentry_contractor_aboutus == '1') :

    $carpentry_contractor_post_category = get_theme_mod('carpentry_contractor_featured_section_category', '');
    $posts = [];

    if ($carpentry_contractor_post_category) :
        $query = new WP_Query(array(
            'category_name'  => sanitize_text_field($carpentry_contractor_post_category),
            'posts_per_page' => 5,
        ));

        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
                $posts[] = [
                    'title'     => get_the_title(),
                    'content'   => wp_trim_words(get_the_content(), 20),
                    'permalink' => get_permalink(),
                    'thumbnail' => has_post_thumbnail() ? get_the_post_thumbnail_url(null, 'full') : '',
                ];
            endwhile;
            wp_reset_postdata();
        endif;
    endif;
    ?>

    <section id="blog-section" class="py-5 mx-md-0 mx-3">
        <div class="container">
            <div class="text-center mb-5">
                <?php if ($carpentry_contractor_subheading = get_theme_mod('carpentry_contractor_serv_short_heading')) : ?>
                    <p class="serv-short my-0"><?php echo esc_html($carpentry_contractor_subheading); ?></p>
                <?php endif; ?>

                <?php if ($carpentry_contractor_heading = get_theme_mod('carpentry_contractor_our_products_heading_section')) : ?>
                    <h2 class="product-heading my-2"><?php echo esc_html($carpentry_contractor_heading); ?></h2>
                <?php endif; ?>

                <?php if ($carpentry_contractor_detailserv = get_theme_mod('carpentry_contractor_serv_details')) : ?>
                    <p class="serv-details mb-2"><?php echo esc_html($carpentry_contractor_detailserv); ?></p>
                <?php endif; ?>
            </div>

            <div class="row">
                <?php if (!empty($posts[0])) : ?>
                    <div class="col-lg-7 col-md-7 mb-4 post-1">
                        <div class="image-wrapper position-relative hover-box">
                            <?php if (!empty($posts[0]['thumbnail'])) : ?>
                                <img src="<?php echo esc_url($posts[0]['thumbnail']); ?>" alt="<?php echo esc_attr($posts[0]['title']); ?>"/>
                            <?php else : ?>
                                <div class="post-color"></div>
                            <?php endif; ?>
                            <div class="overlay-content">
                                <h3><a href="<?php echo esc_url($posts[0]['permalink']); ?>"><?php echo esc_html($posts[0]['title']); ?></a></h3>
                                <p><?php echo esc_html($posts[0]['content']); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>

                <?php if (!empty($posts[1])) : ?>
                    <div class="col-lg-5 col-md-5 mb-4 post-2">
                        <div class="image-wrapper position-relative hover-box">
                            <?php if (!empty($posts[1]['thumbnail'])) : ?>
                                <img src="<?php echo esc_url($posts[1]['thumbnail']); ?>" alt="<?php echo esc_attr($posts[1]['title']); ?>"/>
                            <?php else : ?>
                                <div class="post-color"></div>
                            <?php endif; ?>
                            <div class="overlay-content">
                                <h3><a href="<?php echo esc_url($posts[1]['permalink']); ?>"><?php echo esc_html($posts[1]['title']); ?></a></h3>
                                <p><?php echo esc_html($posts[1]['content']); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <div class="row">
                <?php for ($i = 2; $i < 5; $i++) : ?>
                    <?php if (!empty($posts[$i])) : ?>
                        <div class="col-lg-4 col-md-4 mb-4 post-<?php echo esc_attr($i + 1); ?>">
                            <div class="image-wrapper position-relative hover-box">
                                <?php if (!empty($posts[$i]['thumbnail'])) : ?>
                                    <img src="<?php echo esc_url($posts[$i]['thumbnail']); ?>" alt="<?php echo esc_attr($posts[$i]['title']); ?>"/>
                                <?php else : ?>
                                    <div class="post-color"></div>
                                <?php endif; ?>
                                <div class="overlay-content">
                                    <h3><a href="<?php echo esc_url($posts[$i]['permalink']); ?>"><?php echo esc_html($posts[$i]['title']); ?></a></h3>
                                    <p><?php echo esc_html($posts[$i]['content']); ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endif; ?>
                <?php endfor; ?>
            </div>
        </div>
    </section>
<?php endif; ?>