<section class="product-listing px-common featured">
        <div class="container custom-container">
            <h2 class="title">Our Featured <span class="color">Product</span></h2>
            <div class="listing-products">
            <?php
            $featured_query = wc_get_products([
                'limit'    => 10,
                'status'   => 'publish',
                'featured' => true,
            ]);
            $user_id = get_current_user_id();
            $favorites = get_user_meta($user_id, 'favorite_products', true);
            if (!is_array($favorites)) {
                $favorites = [];
            }
            foreach ($featured_query as $product) :
                $product_id = $product->get_id();
                $name       = $product->get_name();
                $link       = get_permalink($product_id);
                $price_html = $product->get_price_html();
                $image      = $product->get_image();
                $rating     = wc_get_rating_html($product->get_average_rating());
                $is_on_sale = $product->is_on_sale();
                $reg_price  = $product->get_regular_price();
                $sale_price = $product->get_sale_price();
                $discount   = ($is_on_sale && $reg_price > 0) ? round(100 - ($sale_price / $reg_price) * 100) : 0;
                // Check if product is in favorites
                $is_favorite = in_array($product_id, $favorites);
                $img_src = $is_favorite 
                    ? get_template_directory_uri() . '/img/fav-list-selected.svg' 
                    : get_template_directory_uri() . '/img/fav-list-plain.svg';

                $fav_img = '<img src="' . $img_src . '" alt="">';
            ?>
                <a class="listing-blks" href="<?php echo esc_url($link); ?>">
                <div class="products-wrp">
                    <?php if ($is_on_sale): ?>
                    <div class="off-label">
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/discount-icon.svg" alt="discount"></span>
                        <span class="txt"><?php echo $discount; ?>% OFF</span>
                    </div>
                    <?php endif; ?>
                    <div class="fav-list fav-btn" data-product="<?php echo esc_attr($product_id); ?>">
                        <?=$fav_img?>
                    </div>
                    <div class="prod-img">
                    <?php echo $image; ?>
                    </div>
                </div>
                <div class="product-desc">
                    <div class="prod-title"><?php echo esc_html($name); ?></div>
                    <div class="price-blk">
                    <span class="price"><?php echo $price_html; ?></span>
                    </div>
                    <div class="bottom-blk">
                    <?php if ($is_on_sale): ?>
                        <div class="save-tag">Save - <?php echo $discount; ?>%</div>
                    <?php endif; ?>
                    <div class="rating-wrp">
                        <div class="rating">
                            <?php
                            $rating = round( $product->get_average_rating() ); // 0 to 5
                            $star_img = get_template_directory_uri() . '/img/rating-star.svg';
                            $empty_star_img = get_template_directory_uri() . '/img/rating-star.svg'; // same image, but faded via CSS

                            for ($i = 1; $i <= 5; $i++) {
                                $is_active = $i <= $rating ? 'active' : '';
                                echo '<button class="rating-btn ' . $is_active . '">
                                        <img src="' . esc_url($star_img) . '" alt="star">
                                    </button>';
                            }
                            ?>
                        </div>
                    </div>
                    </div>
                </div>
                </a>
            <?php endforeach; ?>
            </div>

            <?php if (count($featured_query) >=5): ?>
                <div class="btn-blk">
                    <a href="<?php echo esc_url(get_permalink(wc_get_page_id('shop'))); ?>" class="sec-btn">
                        <span class="txt">View More</span>
                        <span class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/btn-chevron-right.svg" alt=""></span>
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </section>


    <section class="stay-bnr-btm px-common">
        <div class="container custom-container">
            <div class="inner-cont-wrp">
                <div class="sec-wrp">
                    <div class="content-left">
                        <div class="sec-title">Sign up Newsletter</div>
                        <h2 class="title">
                            Stay in <span class="color">the Loop</span>
                        </h2>
                        <div class="bnr-desc">
                            Sign up for our newsletter to get the latest updates, exclusive offers, and insider content – straight to your inbox.
                        </div>
                    </div>
                    <div class="newsletter-blk">
                        <form class="newsletter-form" id="newsletter-form" data-parsley-validate>
                            <div class="form-group">
                               <input class="form-control custom-form-control" type="email" autocomplete="off" value="" name="email" id="newsletter-email" required
                                data-parsley-type="email"
                                data-parsley-type-message="Enter a valid email address."
                                maxlength="50"
                                data-parsley-trigger="change"
                                data-parsley-required-message="Email is required."
                                placeholder="Enter your email address">
                                <!-- <span class="error-msg">Please check field value</span> -->
                            </div>
                            <button type="submit" class="submit-primary newsletter-button"><span>Subscribe</span></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

    </section>