<?php 
get_header();

$show_elementor_content = false;

if (did_action('elementor/loaded')) {
    $page_id = null;
    
    if (is_front_page()) {
        $show_on_front = get_option('show_on_front');
        if ($show_on_front == 'page') {
            $page_id = get_option('page_on_front');
        }
    } elseif (is_home()) {
        $page_id = get_option('page_for_posts');
    } elseif (is_singular('page')) {
        $page_id = get_the_ID();
    }
    
    if ($page_id && $page_id > 0) {
        $post = get_post($page_id);
        if ($post && $post->post_type == 'page') {
            $document = \Elementor\Plugin::$instance->documents->get($page_id, false);
            if ($document && $document->is_built_with_elementor()) {
                $elementor_content = \Elementor\Plugin::$instance->frontend->get_builder_content_for_display($page_id);
                if (!empty($elementor_content)) {
                    $show_elementor_content = true;
                    query_posts(array('page_id' => $page_id));
                    ?>
                    <main class="container-main">
                        <?php
                        while ( have_posts() ) :
                            the_post();
                            the_content();
                        endwhile;
                        wp_reset_query();
                        ?>
                    </main>
                    <?php
                    get_footer();
                    return;
                }
            }
        }
    }
}

if (!$show_elementor_content) {
?>
    <main class="container-main">
        <!-- start image slider -->
    <section class="mt-6">
        <div id="imageSlider" class="relative overflow-hidden rounded-2xl">
            <!-- slider track -->
            <div id="imageSliderTrack" class="flex transition-transform duration-700 ease-in-out">
                
                <img src="<?php echo get_template_directory_uri() ?>/src/img/DESKTOPSLIDE-2.jpg"
                    alt="slide 1"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
                  
                <img src="<?php echo THEME_DIR; ?>/src/img/DESKTOPSLIDE-3.webp"
                    alt="slide 2"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
        
                <img src="<?php echo THEME_DIR; ?>/src/img/DESKTOPSLIDE-4.webp"
                    alt="slide 3"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">

                <img src="<?php echo THEME_DIR; ?>/src/img/banner_SlideBanner_Z9fi1m_58b66e43-3eb0-4662-9a86-e56fc0472e2d.png"
                    alt="slide 4"
                    class="min-w-full h-[180px] sm:h-[260px] md:h-[340px] lg:h-[420px] object-cover">
        
            </div>
        
            <!-- prev -->
            <button id="sliderPrev"
                class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 right-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                <i class="ri-arrow-right-s-line text-xl"></i>
            </button>
        
            <!-- next -->
            <button id="sliderNext"
                class="absolute hidden mdp:flex top-1/2 -translate-y-1/2 left-3 bg-white/80 hover:bg-white p-2 rounded-xl transition">
                <i class="ri-arrow-left-s-line text-xl"></i>
            </button>
        
            <!-- dots -->
            <div id="sliderDots"
                class="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
            </div>
    
        </div>
    </section>
    <!-- end image slider -->

    <!-- start services (mobile slider + desktop grid) -->
    <section class="mt-6 px-2">
      <div class="grid grid-cols-2 sm:flex sm:flex-wrap items-center justify-center gap-2 md:gap-3">
          <!-- item 1 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-arrow-go-back-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">تعویض راحت</span>
          </a>


          
  
          <!-- item 2 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-shield-check-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">اصالت کالا</span>
          </a>
  
          <!-- item 3 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-truck-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">ارسال سریع</span>
          </a>
  
          <!-- item 4 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-secure-payment-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">پرداخت امن</span>
          </a>
  
          <!-- item 5 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-customer-service-2-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">پشتیبانی</span>
          </a>
  
          <!-- item 6 -->
          <a href="#" class="group inline-flex items-center gap-2
                  bg-white rounded-full px-3 py-2 sm:px-4 sm:py-2
                  ring-1 ring-gray-200
                  hover:ring-emerald-300 hover:shadow-sm transition-all duration-300
                  hover:scale-[1.02] active:scale-[0.98] w-full sm:w-auto no-underline">
              <span class="w-7 h-7 sm:w-8 sm:h-8 rounded-full bg-emerald-50 
                      flex items-center justify-center group-hover:bg-emerald-100 transition">
                  <i class="ri-gift-2-line text-sm sm:text-base text-emerald-600"></i>
              </span>
              <span class="text-sm font-medium text-gray-700">هدیه خرید</span>
          </a>
      </div>
  </section>
    <!-- end services -->
  
    <!-- start banner of selected products -->
    <section class="mt-6">
        <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <a href="#" class="bg-white rounded-2xl ">
                <img src="<?php echo THEME_DIR; ?>/src/img/P-Gaming.webp" alt="banner 1" class="w-full h-full object-cover rounded-2xl">
            </a>
            <a href="#" class="bg-white rounded-2xl ">
                <img src="<?php echo THEME_DIR; ?>/src/img/P-Power bank.webp" alt="banner 1" class="w-full h-full object-cover rounded-2xl">
            </a>
            <a href="#" class="bg-white rounded-2xl ">
                <img src="<?php echo THEME_DIR; ?>/src/img/P-Smart watch.webp" alt="banner 1" class="w-full h-full object-cover rounded-2xl">
            </a>
            <a href="#" class="bg-white rounded-2xl ">
                <img src="<?php echo THEME_DIR; ?>/src/img/P-Speaker.webp" alt="banner 1" class="w-full h-full object-cover rounded-2xl">
            </a>
        </div>
    </section>
    <!-- end banner of selected products -->

    <!-- start best Laptops -->
    <section class="flex w-full flex-col mt-6">
        <h2 class="text-center mdp:text-xl text-sm font-semiBold leading-6 text-primary-shade-1 lg:text-2.5xl mdp:mt-4 mt-2">
        برترین‌های لپ‌تاپ
        </h2>
    
        <ul
        id="best_laptops"
        class="flex flex-wrap justify-center gap-7 pt-4 lg:gap-x-8 lg:gap-y-11.5 xl:pt-6"
        >
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_asus_new.webp"
            alt="ایسوس"
            title="ایسوس"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_825/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D8%A7%DB%8C%D8%B3%D9%88%D8%B3-asus"
            >
            ایسوس
            </a>
        </li>
    
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_hp_new.webp"
            alt="اچ پی"
            title="اچ پی"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_876/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D8%A7%DA%86-%D9%BE%DB%8C-hp"
            >
            اچ پی
            </a>
        </li>
    
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_mac_new.webp"
            alt="مک بوک"
            title="مک بوک"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_826/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D8%A7%D9%BE%D9%84-apple"
            >
            مک بوک
            </a>
        </li>
    
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_lenovo_new.webp"
            alt="لنوو"
            title="لنوو"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_824/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D9%84%D9%86%D9%88%D9%88-lenovo"
            >
            لنوو
            </a>
        </li>
    
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_aser_new.webp"
            alt="ایسر"
            title="ایسر"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_877/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D8%A7%DB%8C%D8%B3%D8%B1-acer"
            >
            ایسر
            </a>
        </li>
    
        <li class="flex flex-col items-center gap-0.5 lg:gap-0">
            <img
            fetchpriority="auto"
            loading="lazy"
            src="<?php echo THEME_DIR; ?>/src/img/static_laptop_MSi.webp"
            alt="ام اس آی"
            title="ام اس آی"
            class="h-[80px] w-[80px] cursor-pointer lg:h-[180px] lg:w-[180px]"
            width="180"
            height="180"
            />
            <a
            class="text-xs font-medium leading-4 text-primary-shade-1 lg:text-lg no-underline hover:opacity-80 transition"
            href="/product/list/164_163_875/%DA%A9%D8%A7%D9%85%D9%BE%DB%8C%D9%88%D8%AA%D8%B1-%D9%88-%D9%84%D9%BE-%D8%AA%D8%A7%D9%BE-%D8%A7%D9%85-%D8%A7%D8%B3-%D8%A2%DB%8C-msi"
            >
            ام اس آی
            </a>
        </li>
        </ul>
    </section>
    <!-- end best Laptops -->

      <!-- start list products offer discount -->
      <?php
      if (class_exists('WooCommerce')) {
          $sale_products = wc_get_products(array(
              'limit' => 8,
              'orderby' => 'date',
              'order' => 'DESC',
              'status' => 'publish',
              'on_sale' => true
          ));
          
          if (!empty($sale_products)) :
      ?>
      <section class="mt-8">
        <div class="rounded-[44px] bg-emerald-50/70 p-4 md:p-6 overflow-hidden">
            <!-- تغییر ساختار برای قرارگیری پنل سبز همیشه در سمت راست در دسکتاپ -->
            <div class="flex flex-col lg:flex-row-reverse gap-4 lg:gap-5 items-stretch">
                
                <!-- RIGHT FIXED PANEL (NO SCROLL) - همیشه در سمت راست در دسکتاپ -->
                <aside class="shrink-0 lg:w-[320px] xl:w-[340px] order-2 lg:order-1">
                    <div class="h-full min-h-[340px] rounded-[36px] bg-emerald-600 text-white p-6 relative overflow-hidden">
                        <div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image:
                            radial-gradient(circle at 20% 20%, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 45%),
                            radial-gradient(circle at 80% 60%, rgba(255,255,255,.25) 0, rgba(255,255,255,0) 55%);"></div>
                        
                        <div class="relative h-full flex flex-col">
                            <div class="flex flex-col text-3xl font-extrabold leading-10">
                                <span>محصولات تخفیف‌دار</span>
                                <span class="text-sm text-white mt-3">وقت برای خرید کوتاهه</span>
                            </div>
                            
                            <!-- TIMER (24h loop) -->
                            <div class="mt-6 rounded-3xl bg-white/95 p-4 text-amber-500">
                                <div class="grid grid-cols-3 gap-3 text-center">
                                    <div class="rounded-2xl border border-amber-200 bg-amber-50 py-3">
                                        <div class="text-2xl font-extrabold tabular-nums" data-timer="s">۵۳</div>
                                        <div class="text-xs text-gray-700 mt-1">ثانیه</div>
                                    </div>
                                    <div class="rounded-2xl border border-amber-200 bg-amber-50 py-3">
                                        <div class="text-2xl font-extrabold tabular-nums" data-timer="m">۳۹</div>
                                        <div class="text-xs text-gray-700 mt-1">دقیقه</div>
                                    </div>
                                    <div class="rounded-2xl border border-amber-200 bg-amber-50 py-3">
                                        <div class="text-2xl font-extrabold tabular-nums" data-timer="h">۲۳</div>
                                        <div class="text-xs text-gray-700 mt-1">ساعت</div>
                                    </div>
                                </div>
                                
                                <div class="mt-4 h-2 rounded-full bg-amber-100 overflow-hidden">
                                    <div id="dealProgress" class="h-full w-[0%] bg-amber-400 rounded-full" style="width: 1.39676%;"></div>
                                </div>
                            </div>
                            
                            <!-- nav (WORKING) -->
                            <div class="mt-auto pt-7 flex items-center justify-center gap-3">
                                <button id="discPrev" class="w-12 h-12 rounded-2xl bg-white/15 hover:bg-white/20 transition flex items-center justify-center" type="button" aria-label="قبلی">
                                    <i class="ri-arrow-right-s-line text-3xl"></i>
                                </button>
                                
                                <button id="discNext" class="w-12 h-12 rounded-2xl bg-white/15 hover:bg-white/20 transition flex items-center justify-center" type="button" aria-label="بعدی">
                                    <i class="ri-arrow-left-s-line text-3xl"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </aside>
                
                <!-- PRODUCTS (SCROLL ONLY HERE) -->
                <div class="min-w-0 flex-1 order-1 lg:order-2">
                    <div id="discountTrack" dir="rtl" class="flex gap-4 md:gap-5 lg:gap-6 overflow-x-auto overscroll-x-contain snap-x snap-mandatory py-1 lg:py-2
                            touch-pan-x [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden px-1">
                        
                        <?php foreach ($sale_products as $product) : 
                            $product_id = $product->get_id();
                            
                            if ($product->is_type('variable')) {
                                $regular_price = (float) $product->get_variation_regular_price('min');
                                $sale_price = (float) $product->get_variation_sale_price('min');
                                $price = $sale_price > 0 ? $sale_price : (float) $product->get_variation_price('min');
                                $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price && $regular_price > 0;
                            } else {
                                $regular_price = (float) $product->get_regular_price();
                                $sale_price = (float) $product->get_sale_price();
                                $price = wc_get_price_to_display($product);
                                $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price && $regular_price > 0;
                            }
                            
                            if (!$is_sale || $regular_price <= 0 || $price <= 0 || $price >= $regular_price) {
                                continue;
                            }
                            
                            $discount_percent = round((($regular_price - $price) / $regular_price) * 100);
                            
                            if ($discount_percent <= 0) {
                                continue;
                            }
                            
                            $product_url = get_permalink($product_id);
                            $product_title = $product->get_name();
                            $product_image_id = $product->get_image_id();
                            $product_image = $product_image_id ? wp_get_attachment_image_url($product_image_id, 'medium') : wc_placeholder_img_src();
                            
                            $random_rating = round((mt_rand(42, 49) / 10), 1);
                            $product_rating_formatted = number_format_i18n($random_rating, 1);
                            
                            $price_formatted = number_format_i18n($price, 0);
                            $regular_price_formatted = number_format_i18n($regular_price, 0);
                            $is_in_stock = $product->is_in_stock();
                            $add_to_cart_url = $product->add_to_cart_url();
                        ?>
                        <article class="snap-start shrink-0 w-[85%] xs:w-[70%] sm:w-[55%] md:w-[48%] lg:w-[calc((100%-2*24px)/3)] xl:w-[calc((100%-2*24px)/3)]">
                            <div class="group h-full rounded-[34px] md:rounded-[36px] bg-white px-5 pt-6 pb-5 ring-1 ring-slate-100 hover:ring-2 hover:ring-emerald-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                                <?php if ($discount_percent > 0) : ?>
                                <div class="flex items-start justify-between mb-3">
                                    <span class="inline-flex px-3 py-1 rounded-2xl bg-emerald-100 text-emerald-700 text-xs font-extrabold">٪<?php echo esc_html($discount_percent); ?></span>
                                </div>
                                <?php endif; ?>
                                
                                <a href="<?php echo esc_url($product_url); ?>" class="no-underline block">
                                  <div class="h-[165px] sm:h-[175px] md:h-[190px] flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
                                      <img class="max-h-[155px] sm:max-h-[165px] md:max-h-[180px] object-contain select-none" 
                                          src="<?php echo esc_url($product_image); ?>" 
                                          alt="<?php echo esc_attr($product_title); ?>" 
                                          loading="lazy">
                                  </div>
                                </a>
                
                                <a href="<?php echo esc_url($product_url); ?>" class="mt-3 block no-underline">
                                    <h3 class="text-[15px] sm:text-sm md:text-base font-extrabold text-slate-900
                                                line-clamp-2 min-h-[46px] hover:text-emerald-700 transition-colors duration-200">
                                        <?php echo esc_html($product_title); ?>
                                    </h3>
                                </a>
                
                                <div class="mt-2 flex items-center justify-between">
                                    <div class="inline-flex items-center gap-1 text-amber-500 text-sm font-extrabold">
                                        <i class="ri-star-fill"></i><span><?php echo esc_html($product_rating_formatted); ?></span>
                                    </div>
                                    <span class="text-[12px] sm:text-xs text-emerald-600 font-semibold bg-emerald-50 px-2 py-1 rounded-full">فروش ویژه</span>
                                </div>
                
                                <div class="mt-4 flex items-end justify-between gap-3">
                                    <div class="flex flex-col gap-1 flex-1 min-w-0">
                                        <?php if ($is_sale && $regular_price > 0) : ?>
                                        <div class="text-xs sm:text-[12px] text-slate-400 line-through"><?php echo esc_html($regular_price_formatted); ?> تومان</div>
                                        <?php endif; ?>
                                        <div class="flex items-center gap-1.5">
                                            <span class="text-xs sm:text-sm font-bold text-emerald-600">تومان</span>
                                            <span class="text-base sm:text-lg font-extrabold text-emerald-600"><?php echo esc_html($price_formatted); ?></span>
                                        </div>
                                    </div>
                
                                    <?php if ($is_in_stock && $product->is_purchasable()) : 
                                        $is_variable = $product->is_type('variable');
                                        if ($is_variable) {
                                            $button_url = $product_url;
                                            $button_classes = 'w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-emerald-50 hover:ring-emerald-200 hover:scale-110 transition-all duration-200 no-underline';
                                        } else {
                                            $button_url = $add_to_cart_url;
                                            $button_classes = 'w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-emerald-50 hover:ring-emerald-200 hover:scale-110 transition-all duration-200 add_to_cart_button ajax_add_to_cart simple-product-cart no-underline';
                                        }
                                    ?>
                                    <a href="<?php echo esc_url($button_url); ?>" 
                                       class="<?php echo esc_attr($button_classes); ?>" 
                                       <?php if (!$is_variable) : ?>
                                       data-product_id="<?php echo esc_attr($product_id); ?>" 
                                       data-product_sku="<?php echo esc_attr($product->get_sku()); ?>"
                                       <?php endif; ?>
                                       aria-label="<?php echo esc_attr(sprintf(__('افزودن %s به سبد خرید', 'nikanshop'), $product_title)); ?>">
                                        <i class="ri-shopping-bag-3-line text-xl text-slate-800 group-hover:text-emerald-600 transition-colors duration-200"></i>
                                    </a>
                                    <?php else : ?>
                                    <a href="<?php echo esc_url($product_url); ?>" 
                                       class="w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-slate-100 hover:scale-110 transition-all duration-200 no-underline">
                                        <i class="ri-eye-line text-xl text-slate-800"></i>
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </article>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
      </section>
      <?php 
          endif;
      }
      ?>
      <!-- end list products offer discount -->
    
      <!-- start banner full home page-->
      <section class="mt-6">
          <div class="grid md:grid-cols-2 items-center justify-between gap-4">
              <a href="#"><img class="rounded-2xl" src="<?php echo THEME_DIR; ?>/src/img/p5.jpg" alt=""></a>
              <a href="#"><img class="rounded-2xl" src="<?php echo THEME_DIR; ?>/src/img/p4.jpg" alt=""></a>
          </div>
      </section>
      <!-- end banner home page-->

      <!-- start best product home page (Responsive | حفظ استایل اصلی) -->
      <section class="mt-8">
          <div class="flex items-center justify-between flex-col lg:flex-row gap-6 lg:gap-0">
            
            <!-- متن -->
            <div class="flex flex-col gap-5 sm:gap-6 lg:gap-7 w-full lg:w-1/2 p-2">
              <h3 class="text-2xl sm:text-3xl font-bold leading-snug">
                کیف‌های اورجینال لپ تاپ
              </h3>
        
              <span class="text-base sm:text-xl text-gray-500">
                Lenovo | ASUS | MSI | Acer
              </span>
        
              <p class="text-sm sm:text-base text-gray-500 leading-7">
                طراحی ارگونومیک و پشتی طبی سری Jack Wolfskin مناسب  حمل طولانی مدته و کمترین فشار رو به گردن و کمر شما وارد میکنه !!
              </p>
        
              <a
                href="#"
                class="flex items-center gap-2 bg-blue-950 text-white px-4 py-2 rounded-2xl w-40 no-underline hover:opacity-80 transition cursor-pointer"
              >
                <span>مشاهده همه</span>
                <i class="ri-arrow-left-line"></i>
              </a>
            </div>
        
            <!-- تصویر -->
            <div class="w-full lg:w-1/2 p-2">
              <img
                class="rounded-2xl w-full h-[220px] sm:h-[320px] lg:h-auto object-cover"
                src="<?php echo THEME_DIR; ?>/src/img/kif-lp.png"
                alt="کیف لپ تاپ"
                loading="lazy"
              >
            </div>
        
          </div>
      </section>
      <!-- end best product home page -->

      <!-- start best selling laptops -->
       
      <?php
      if (class_exists('WooCommerce')) {
          $latest_products = wc_get_products(array(
              'limit' => 8,
              'orderby' => 'date',
              'order' => 'DESC',
              'status' => 'publish'
          ));
          
          if (!empty($latest_products)) :
      ?>
      <section class="container-main mt-10">
          <div
            class="w-full rounded-[44px] bg-white px-4 py-6 md:px-6 md:py-7
                  shadow-[0_26px_70px_-55px_rgba(0,0,0,0.35)]"
          >
            <!-- Header -->
            <div class="flex items-center justify-between gap-4">
              <h2 class="text-xl md:text-2xl font-extrabold text-slate-900">آخرین محصولات</h2>
        
              <a
                href="<?php echo esc_url(wc_get_page_permalink('shop')); ?>"
                class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-full no-underline hover:opacity-90 transition"
              >
                <span class="mdp:text-base text-[12px] mdp:font-bold">مشاهده بیشتر</span>
                <i class="hidden mdp:block ri-arrow-left-line text-lg"></i>
              </a>
            </div>
        
            <div class="mt-4 h-px bg-slate-100"></div>
        
            <!-- Slider -->
            <div class="mt-6">
              <!-- Track -->
              <div
                id="bestSellerTrack"
                class="flex gap-4 sm:gap-5 md:gap-6 overflow-x-auto overscroll-x-contain snap-x snap-mandatory scroll-smooth py-2
                      touch-pan-x [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
                dir="rtl"
              >
                <?php foreach ($latest_products as $product) : 
                    $product_id = $product->get_id();
                    $product_url = get_permalink($product_id);
                    $product_title = $product->get_name();
                    $product_image_id = $product->get_image_id();
                    $product_image = $product_image_id ? wp_get_attachment_image_url($product_image_id, 'medium') : wc_placeholder_img_src();
                    
                    $random_rating = round((mt_rand(42, 49) / 10), 1);
                    $product_rating_formatted = number_format_i18n($random_rating, 1);
                    
                    if ($product->is_type('variable')) {
                        $regular_price = (float) $product->get_variation_regular_price('min');
                        $sale_price = (float) $product->get_variation_sale_price('min');
                        $price = $sale_price > 0 ? $sale_price : (float) $product->get_variation_price('min');
                        $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price;
                    } else {
                        $regular_price = (float) $product->get_regular_price();
                        $sale_price = (float) $product->get_sale_price();
                        $price = wc_get_price_to_display($product);
                        $is_sale = $product->is_on_sale() && $sale_price > 0 && $sale_price < $regular_price;
                    }
                    
                    $price_formatted = number_format_i18n($price, 0);
                    $regular_price_formatted = $regular_price > 0 ? number_format_i18n($regular_price, 0) : '';
                    $is_in_stock = $product->is_in_stock();
                    $add_to_cart_url = $product->add_to_cart_url();
                ?>
                <article class="snap-start shrink-0 w-[86%] xs:w-[80%] sm:w-[48%] lg:w-[calc(25%-18px)]">
                  <div class="group h-full rounded-[34px] md:rounded-[36px] bg-white px-5 pt-6 pb-5 ring-1 ring-slate-100 hover:ring-2 hover:ring-emerald-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1">
                    <a href="<?php echo esc_url($product_url); ?>" class="no-underline block">
                      <div class="h-[165px] sm:h-[175px] md:h-[190px] flex items-center justify-center group-hover:scale-105 transition-transform duration-300">
                        <img class="max-h-[155px] sm:max-h-[165px] md:max-h-[180px] object-contain select-none"
                            src="<?php echo esc_url($product_image); ?>" alt="<?php echo esc_attr($product_title); ?>" loading="lazy">
                      </div>
                    </a>
        
                    <a href="<?php echo esc_url($product_url); ?>" class="mt-3 block no-underline">
                      <h3 class="text-[15px] sm:text-sm md:text-base font-extrabold text-slate-900
                                line-clamp-2 min-h-[46px] hover:text-emerald-700 transition-colors duration-200">
                        <?php echo esc_html($product_title); ?>
                      </h3>
                    </a>
        
                    <div class="mt-2 flex items-center justify-between">
                      <div class="inline-flex items-center gap-1 text-amber-500 text-sm font-extrabold">
                        <i class="ri-star-fill"></i><span><?php echo esc_html($product_rating_formatted); ?></span>
                      </div>
                      <?php if ($is_sale) : ?>
                      <span class="text-[12px] sm:text-xs text-emerald-600 font-semibold bg-emerald-50 px-2 py-1 rounded-full">فروش ویژه</span>
                      <?php elseif ($is_in_stock) : ?>
                      <span class="text-[12px] sm:text-xs text-slate-400">موجود</span>
                      <?php else : ?>
                      <span class="text-[12px] sm:text-xs text-red-400">ناموجود</span>
                      <?php endif; ?>
                    </div>
        
                    <div class="mt-4 flex items-end justify-between gap-3">
                      <div class="flex flex-col gap-1 flex-1 min-w-0">
                        <?php if ($is_sale && $regular_price > 0) : ?>
                        <div class="text-xs sm:text-[12px] text-slate-400 line-through"><?php echo esc_html($regular_price_formatted); ?> تومان</div>
                        <?php endif; ?>
                        <div class="flex items-center gap-1.5">
                          <span class="text-xs sm:text-sm font-bold text-emerald-600">تومان</span>
                          <span class="text-base sm:text-lg font-extrabold text-emerald-600"><?php echo esc_html($price_formatted); ?></span>
                        </div>
                      </div>
        
                      <?php if ($is_in_stock && $product->is_purchasable()):
                        $is_variable = $product->is_type('variable');
                        if ($is_variable) {
                            $button_url = $product_url;
                            $button_classes = 'w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-emerald-50 hover:ring-emerald-200 hover:scale-110 transition-all duration-200 no-underline';
                        } else {
                            $button_url = $add_to_cart_url;
                            $button_classes = 'w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-emerald-50 hover:ring-emerald-200 hover:scale-110 transition-all duration-200 add_to_cart_button ajax_add_to_cart simple-product-cart no-underline';
                        }
                        ?>
                      <a href="<?php echo esc_url($button_url); ?>" 
                         class="<?php echo esc_attr($button_classes); ?>" 
                         <?php if (!$is_variable) : ?>
                         data-product_id="<?php echo esc_attr($product_id); ?>" 
                         data-product_sku="<?php echo esc_attr($product->get_sku()); ?>"
                         <?php endif; ?>
                         aria-label="<?php echo esc_attr(sprintf(__('افزودن %s به سبد خرید', 'nikanshop'), $product_title)); ?>">
                        <i class="ri-shopping-bag-3-line text-xl text-slate-800 group-hover:text-emerald-600 transition-colors duration-200"></i>
                      </a>
                      <?php else : ?>
                      <a href="<?php echo esc_url($product_url); ?>" 
                         class="w-12 h-12 rounded-2xl bg-slate-50 ring-1 ring-slate-100 flex items-center justify-center hover:bg-slate-100 hover:scale-110 transition-all duration-200 no-underline">
                        <i class="ri-eye-line text-xl text-slate-800"></i>
                      </a>
                      <?php endif; ?>
                    </div>
                  </div>
                </article>
                <?php endforeach; ?>
              </div>
              <div>

              <!-- Footer controls -->
              <div class="mt-6 flex items-center justify-between gap-4">
                <!-- Dots -->
                <div id="bestSellerDots" class="flex items-center gap-2">
                  <span class="h-2 w-8 rounded-full bg-slate-900 transition-all"></span>
                  <span class="h-2 w-2 rounded-full bg-slate-200 transition-all"></span>
                  <span class="h-2 w-2 rounded-full bg-slate-200 transition-all"></span>
                </div>
        
                <!-- Nav buttons -->
                <div class="flex items-center gap-3">
                  <button id="bestPrev" class="w-12 h-12 rounded-2xl bg-slate-100 hover:bg-slate-200 transition flex items-center justify-center" type="button">
                    <i class="ri-arrow-right-s-line text-2xl text-slate-700"></i>
                  </button>
                  <button id="bestNext" class="w-12 h-12 rounded-2xl bg-slate-100 hover:bg-slate-200 transition flex items-center justify-center" type="button">
                    <i class="ri-arrow-left-s-line text-2xl text-slate-700"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
      </section>
      <?php 
          endif;
      }
      ?>
      <!-- end best selling laptops -->

      <!-- start tech blog / laptop & pc tips -->
      <?php
      // دریافت آخرین پست‌ها
      $latest_posts = new WP_Query(array(
          'post_type' => 'post',
          'posts_per_page' => 7,
          'orderby' => 'date',
          'order' => 'DESC'
      ));
      
      if($latest_posts->have_posts()):
          $posts_array = [];
          while($latest_posts->have_posts()): 
              $latest_posts->the_post();
              $posts_array[] = get_post();
          endwhile;
          wp_reset_postdata();
          
          // تقسیم پست‌ها: 4 تای اول برای لیست سمت چپ، 1 تای بعدی برای featured، 2 تای آخر برای کارت‌های راست
          $left_posts = array_slice($posts_array, 0, 4);
          $featured_post = isset($posts_array[4]) ? $posts_array[4] : null;
          $right_posts = array_slice($posts_array, 5, 2);
      ?>
      <section dir="rtl" class="w-full py-10 ">
        <div class="mx-auto max-w-6xl px-4">
          <!-- Title -->
          <h2 class="text-center text-2xl sm:text-3xl font-extrabold text-slate-900">
            <span class="text-emerald-600">آخرین</span> مقالات وبلاگ
          </h2>

          <!-- Content Grid -->
          <div class="mt-8 grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6 items-stretch">
            <!-- Left List -->
            <div class="lg:col-span-4 order-2 lg:order-1 flex flex-col gap-3">
              <?php foreach($left_posts as $post): 
                  setup_postdata($post);
              ?>
              <a href="<?php the_permalink(); ?>"
                class="group flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-4
                        hover:bg-slate-50 hover:border-slate-300 transition no-underline">
                <span class="text-sm sm:text-base font-semibold text-slate-800 line-clamp-1">
                  <?php the_title(); ?>
                </span>

                <span class="shrink-0 w-11 h-11 rounded-2xl bg-emerald-50 flex items-center justify-center border border-emerald-100">
                  <!-- arrow icon -->
                  <svg class="w-5 h-5 text-emerald-600 group-hover:translate-x-[-2px] transition" viewBox="0 0 24 24" fill="none">
                    <path d="M14 7l-5 5 5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </span>
              </a>
              <?php endforeach; ?>
            </div>

            <!-- Center Featured Card -->
            <?php if($featured_post): 
                setup_postdata($featured_post);
                $categories = get_the_category();
                $category = !empty($categories) ? $categories[0] : null;
                $word_count = str_word_count(strip_tags(get_the_content()));
                $reading_time = ceil($word_count / 200);
            ?>
            <a href="<?php the_permalink(); ?>"
              class="lg:col-span-4 order-1 lg:order-2 relative overflow-hidden rounded-[28px] min-h-[260px] sm:min-h-[320px]
                      shadow-[0_20px_60px_-30px_rgba(0,0,0,0.25)] group no-underline">
              <!-- Image -->
              <?php if(has_post_thumbnail()): ?>
                <?php the_post_thumbnail('large', ['class' => 'absolute inset-0 w-full h-full object-cover']); ?>
              <?php else: ?>
                <img
                  src="<?php echo THEME_DIR; ?>/src/img/default-post.jpg"
                  alt="<?php the_title(); ?>"
                  class="absolute inset-0 w-full h-full object-cover"
                />
              <?php endif; ?>

              <!-- Soft tint like sample -->
              <div class="absolute inset-0 bg-emerald-900/20"></div>

              <!-- Bottom overlay -->
              <div class="absolute inset-x-0 bottom-0 p-5 sm:p-6">
                <div class="flex items-end justify-between gap-4">
                  <div class="text-white">
                    <h3 class="text-lg sm:text-2xl font-extrabold leading-snug drop-shadow">
                      <?php the_title(); ?>
                    </h3>
                    <div class="mt-2 flex items-center gap-2 text-white/90 text-xs sm:text-sm">
                      <span class="inline-flex items-center gap-1">
                        <!-- clock -->
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
                          <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                          <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/>
                        </svg>
                        زمان مطالعه: <?php echo $reading_time; ?> دقیقه
                      </span>
                    </div>
                  </div>

                  <!-- Arrow button -->
                  <span class="shrink-0 w-12 h-12 rounded-full bg-white/15 border border-white/30 backdrop-blur
                              flex items-center justify-center group-hover:bg-white/20 transition">
                    <svg class="w-6 h-6 text-white rotate-180" viewBox="0 0 24 24" fill="none">
                      <path d="M10 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </span>
                </div>
              </div>
            </a>
            <?php endif; ?>

            <!-- Right Cards -->
            <div class="lg:col-span-4 order-3 flex flex-col gap-4">
              <?php foreach($right_posts as $post): 
                  setup_postdata($post);
                  $categories = get_the_category();
                  $category = !empty($categories) ? $categories[0] : null;
                  $word_count = str_word_count(strip_tags(get_the_content()));
                  $reading_time = ceil($word_count / 200);
              ?>
              <a href="<?php the_permalink(); ?>"
                class="group flex items-center gap-4 rounded-2xl border border-slate-200 bg-white p-4
                        hover:bg-slate-50 hover:border-slate-300 transition no-underline ">
                <div class="flex-1 min-w-0">
                  <?php if($category): ?>
                  <span class="inline-flex items-center rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700 border border-emerald-100">
                    <?php echo esc_html($category->name); ?>
                  </span>
                  <?php endif; ?>

                  <h4 class="mt-2 font-extrabold text-slate-900 text-sm sm:text-base leading-snug line-clamp-2">
                    <?php the_title(); ?>
                  </h4>

                  <div class="mt-2 flex items-center gap-2 text-slate-500 text-xs sm:text-sm">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
                      <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2"/>
                    </svg>
                    زمان مطالعه: <?php echo $reading_time; ?> دقیقه
                  </div>
                </div>

                <div class="shrink-0 w-24 h-20 sm:w-28 sm:h-22 rounded-xl overflow-hidden border border-slate-100">
                  <?php if(has_post_thumbnail()): ?>
                    <?php the_post_thumbnail('thumbnail', ['class' => 'w-full h-full object-cover group-hover:scale-105 transition']); ?>
                  <?php else: ?>
                    <img
                      src="<?php echo THEME_DIR; ?>/src/img/default-post.jpg"
                      alt="<?php the_title(); ?>"
                      class="w-full h-full object-cover group-hover:scale-105 transition"
                    />
                  <?php endif; ?>
                </div>
              </a>
              <?php endforeach; ?>
            </div>
          </div>

          <!-- CTA Button -->
          <div class="mt-8 flex justify-center">
            <a href="<?php 
              $blog_page_id = get_option('page_for_posts');
              if($blog_page_id) {
                  echo get_permalink($blog_page_id);
              } else {
                  echo get_post_type_archive_link('post');
              }
            ?>"
              class="inline-flex items-center gap-2 rounded-full bg-slate-900 text-white px-6 py-3 text-sm sm:text-base font-bold
                      hover:bg-slate-800 active:scale-95 transition no-underline ">
              مشاهده بیشتر
              <svg class="w-5 h-5 rotate-180" viewBox="0 0 24 24" fill="none">
                <path d="M10 7l5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </section>
      <?php 
      wp_reset_postdata();
      endif; 
      ?>
      <!-- end tech blog / laptop & pc tips -->
    </main>
    <!-- end main -->

<?php 
}
get_footer(); 
?>
