<?php

get_header();
?>



<main class="main-content v2 bg-white" role="main">

  <?php lp_display_guide_breadcrumb(); ?>

  <?php
  if (have_posts()):
    while (have_posts()):
      the_post();
  ?>
      <div class="gutemberg-container mb-12 md:mb-20">
        <article id="post-<?php the_ID(); ?>">
          <header class="text-center container flex flex-col gap-4 py-20 md:py-28 md:pt-28">
            <h1><?php the_title(); ?></h1>
            <div class="guide-meta">
              <?php

              $date_iso       = date_i18n('d/m/Y', strtotime(get_the_date('Y-m-d')));
              $author_id      = get_the_author_meta('ID');
              $author_name    = get_the_author();
              $author_url     = get_author_posts_url($author_id);
              $categories     = get_the_terms(get_the_ID(), 'guide_category');
              ?>
              <em>
                <?php echo __('Publié le', 'laurentperrier'); ?>
                <time datetime="<?php echo esc_attr($date_iso); ?>"><?php echo esc_html($date_iso); ?></time>
              </em>
              <em>
                <?php printf(__('par %s', 'laurentperrier'), '<a class="text-gold underline hover:no-underline" rel="author" href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'); ?>
              </em>
            </div>
          </header>

          <div class="entry-content">
            <?php the_content(); ?>
          </div>


        </article>
      </div>
  <?php
    endwhile;
  endif;
  ?>

  <!-- Related Guides Section -->
  <?php
  // Get related guides (exclude current post)
  $related_guides_args = array(
    'post_type' => 'guide',
    'posts_per_page' => 4,
    'post_status' => 'publish',
    'post__not_in' => array(get_the_ID()),
    'orderby' => 'rand', // Random order for variety
    'meta_query' => array(
      array(
        'key' => '_thumbnail_id',
        'compare' => 'EXISTS' // Only guides with featured images
      )
    )
  );

  // Apply WPML language filter if available
  if (function_exists('icl_object_id')) {
    $related_guides_args['suppress_filters'] = false;
  }

  $related_guides = new WP_Query($related_guides_args);

  if ($related_guides->have_posts()) :
  ?>

    <section class="related-guides bg-gray-50 py-24 mt-16 bg-black" aria-labelledby="related-guides-title">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <div id="related-guides-title" class="font-heading text-[1.25rem] lg:text-[1.4375rem] font-normal uppercase leading-snug text-white tracking-[0.21563rem]">
            <?php _e('Découvrez aussi dans la section guide', 'laurentperrier'); ?>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
          <?php while ($related_guides->have_posts()) : $related_guides->the_post(); ?>
            <article class="related-guide-card  overflow-hidden group">
              <a href="<?php the_permalink(); ?>" class="block" aria-label="<?php echo esc_attr(sprintf(__('Lire le guide: %s', 'laurentperrier'), get_the_title())); ?>">

                <!-- Featured Image -->
                <div class="aspect-[4/3] overflow-hidden">
                  <?php if (has_post_thumbnail()) : ?>
                    <img src="<?php echo get_the_post_thumbnail_url(get_the_ID(), 'medium'); ?>"
                      alt="<?php echo esc_attr(get_the_title()); ?>"
                      class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                      loading="lazy"
                      sizes="(max-width:320px) 145px, (max-width:425px) 220px, 500px" />

                  <?php else : ?>
                    <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                      <svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
                        <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path>
                      </svg>
                    </div>
                  <?php endif; ?>
                </div>

                <!-- Content -->
                <div class="py-4">
                  <div class="text-base font-medium text-gold underline group-hover:no-underline">
                    <?php the_title(); ?>
                  </div>
                </div>
              </a>
            </article>
          <?php endwhile; ?>
        </div>
      </div>
    </section>
  <?php
  endif;
  wp_reset_postdata();
  ?>



  <?php get_footer(); ?>
