<?php
/**
 * Elementor template part: Home section
 * Auto-generated from index.php to preserve exact markup.
 */
?>
      <?php
      // دریافت آخرین پست‌ها
      // تلاش برای فیلتر کردن نوشته‌ها بر اساس دسته «تکنولوژی» (اگر وجود داشته باشد)
      $tech_cat = null;
      foreach (['technology','tech','تکنولوژی','فناوری'] as $slug_or_name) {
          $term = get_term_by('slug', $slug_or_name, 'category');
          if (!$term) {
              $term = get_term_by('name', $slug_or_name, 'category');
          }
          if ($term && ! is_wp_error($term)) { $tech_cat = $term; break; }
      }

      $query_args = array(
          'post_type' => 'post',
          'post_status' => 'publish',
          'posts_per_page' => 7,
          'ignore_sticky_posts' => 1,
          'orderby' => 'date',
          'order' => 'DESC'
      );
      if ( $tech_cat ) { $query_args['cat'] = (int) $tech_cat->term_id; }
      $latest_posts = new WP_Query($query_args);
      
      if($latest_posts->have_posts()):
          $posts_array = [];
          while($latest_posts->have_posts()): 
              $latest_posts->the_post();
              $posts_array[] = get_post();
          endwhile;
// تقسیم پست‌ها: 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 $p): 
                  $pid = is_object($p) ? (int)$p->ID : (int)$p;
                  if(!$pid) continue;
                  $permalink = get_permalink($pid);
                  $title = get_the_title($pid);
              ?>
              <a href="<?php echo esc_url($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 echo esc_html($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-[-1px] transition" 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>
              </a>
              <?php endforeach; ?>
            </div>

            <!-- Center Featured Card -->
            <?php if($featured_post): 
                $fid = is_object($featured_post) ? (int)$featured_post->ID : (int)$featured_post;
                $fpermalink = get_permalink($fid);
                $ftitle = get_the_title($fid);
                $fcats = get_the_category($fid);
                $fcat = !empty($fcats) ? $fcats[0] : null;
                $category = $fcat;
                $fcontent = get_post_field('post_content', $fid);
                $fword_count = str_word_count(wp_strip_all_tags($fcontent));
                $freading_time = max(1, (int)ceil($fword_count / 200));
                $fimg_url = get_the_post_thumbnail_url($fid, 'large');
            ?>
            <a href="<?php echo esc_url($fpermalink); ?>"
              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($fimg_url): ?>
                <img src="<?php echo esc_url($fimg_url); ?>" alt="<?php echo esc_attr($ftitle); ?>" 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 echo esc_attr($ftitle); ?>"
                  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 echo esc_html($ftitle); ?>
                    </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 (int)$freading_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 $p): 
                  $pid = is_object($p) ? (int)$p->ID : (int)$p;
                  if(!$pid) continue;
                  $permalink = get_permalink($pid);
                  $title = get_the_title($pid);
                  $cats = get_the_category($pid);
                  $category = !empty($cats) ? $cats[0] : null;
                  $content_raw = get_post_field('post_content', $pid);
                  $word_count = str_word_count(wp_strip_all_tags($content_raw));
                  $reading_time = max(1, (int)ceil($word_count / 200));
                  $thumb = get_the_post_thumbnail($pid, 'thumbnail', ['class'=>'w-full h-full object-cover']);
              ?>
              <a href="<?php echo esc_url($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-2xl 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 echo esc_html($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 (int)$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($thumb): ?>
                    <?php echo $thumb; ?>
                  <?php else: ?>
                    <img src="<?php echo esc_url(THEME_DIR); ?>/src/img/default-post.jpg" alt="<?php echo esc_attr($title); ?>" class="w-full h-full object-cover" />
                  <?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
else:
          echo '<p class="mt-6 text-center text-slate-500">هیچ نوشته‌ای برای نمایش پیدا نشد.</p>';
      endif;
?>