<?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 py-10 md:py-20">
        <article id="post-<?php the_ID(); ?>">
          <header class="mb-6 text-center container">
            <h1><?php the_title(); ?></h1>
            <div class="guide-meta text-sm mt-2">
              <?php
              $date_display   = get_the_date(get_option('date_format'));
              $date_iso       = get_the_date('c');
              $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');
              ?>
              <span>
                <time datetime="<?php echo esc_attr($date_iso); ?>"><?php echo esc_html($date_display); ?></time>
              </span>
              <span>
                <?php printf(__('par %s', 'laurentperrier'), '<a class="text-gold hover:underline" rel="author" href="' . esc_url($author_url) . '">' . esc_html($author_name) . '</a>'); ?>
              </span>
            </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-16 mt-16" aria-labelledby="related-guides-title">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 id="related-guides-title" class="font-heading text-[1.875rem] lg:text-[2.5rem] font-normal uppercase leading-snug text-gray-900">
            <?php _e('Guides Associés', 'laurentperrier'); ?>
          </h2>
          <p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
            <?php _e('Découvrez d\'autres guides pour enrichir votre expérience Laurent-Perrier', 'laurentperrier'); ?>
          </p>
        </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 bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 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()) : ?>
                    <?php the_post_thumbnail('medium', [
                      'class' => 'w-full h-full object-cover transition-transform duration-300 group-hover:scale-105',
                      'alt' => esc_attr(get_the_title()),
                      'loading' => 'lazy'
                    ]); ?>
                  <?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="p-6">
                  <h3 class="font-heading text-lg lg:text-xl font-normal uppercase leading-snug mb-3 group-hover:text-gold transition-colors line-clamp-2">
                    <?php the_title(); ?>
                  </h3>

                  <?php if (has_excerpt()) : ?>
                    <p class="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3">
                      <?php echo wp_trim_words(get_the_excerpt(), 15, '...'); ?>
                    </p>
                  <?php endif; ?>

                  <!-- Read More -->
                  <span class="inline-flex items-center text-sm font-medium text-gold group-hover:underline">
                    <?php _e('Lire le guide', 'laurentperrier'); ?>
                    <svg class="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                  </span>
                </div>
              </a>
            </article>
          <?php endwhile; ?>
        </div>

        <!-- View All Guides Link -->
        <div class="text-center mt-12">
          <a href="<?php echo get_post_type_archive_link('guide'); ?>"
            class="inline-flex items-center px-8 py-3 border border-gold text-gold hover:bg-gold hover:text-white transition-all duration-300 font-medium uppercase tracking-wide">
            <?php _e('Voir tous les guides', 'laurentperrier'); ?>
            <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
            </svg>
          </a>
        </div>
      </div>
    </section>
  <?php
  endif;
  wp_reset_postdata();
  ?>


  <?php get_footer(); ?>