<?php
get_header();

$cover_image = get_field('guide_cover', 'option');

$args = array(
    'post_type' => 'guide',
    'posts_per_page' => -1,
    'post_status' => 'publish',
);
$the_query = new WP_Query($args);
?>

<div class="main-content v2 bg-white">
    <!-- Archive Header -->
    archive guide
    <?php
    if (function_exists('yoast_breadcrumb')) {
        yoast_breadcrumb('<p class="breadcrumbs">', '</p>');
    } else {
        echo '<p class="breadcrumbs">' . get_the_title() . '</p>';
    }
    ?>
    <div class="relative flex items-center justify-center min-h-[400px]">
        <div class="layer">
            <?php if ($cover_image && $cover_image['ID']):
                echo wp_get_attachment_image($cover_image['ID'], 'medium_large', false, array('class' => 'z-0 w-full h-full object-cover top-0 left-0 absolute'));
            endif; ?>
            <div class="absolute inset-0 bg-black opacity-50"></div>
        </div>
        <div class="relative">
            <h1 class="font-heading text-[1.875rem] lg:text-[2.5rem] font-normal uppercase leading-snug text-white">

                <?php echo get_post_type_object('guide')->labels->name; ?>
            </h1>
            <?php if (get_the_archive_description()): ?>
                <div class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
                    <?php echo get_the_archive_description(); ?>
                </div>
            <?php endif; ?>
        </div>
    </div>

    <div class="container py-10 md:py-20 max-w-7xl">

        <!-- List Guides CPT instead of posts -->
        <?php
        if ($the_query->have_posts()): ?>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10">
                <?php while ($the_query->have_posts()): $the_query->the_post(); ?>
                    <article class="guide-card scroll-appear">
                        <a href="<?php the_permalink(); ?>" class="block group">

                            <!-- Featured Image -->
                            <div class="aspect-[4/3] overflow-hidden mb-4 relative">
                                <?php
                                $cover_image = get_field('guide_cover_image');
                                $reading_time = get_field('guide_reading_time');
                                $difficulty = get_field('guide_difficulty');

                                if ($cover_image): ?>
                                    <img src="<?php echo esc_url($cover_image['sizes']['medium_large']); ?>"
                                        alt="<?php echo esc_attr($cover_image['alt'] ?: get_the_title()); ?>"
                                        class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                <?php elseif (has_post_thumbnail()): ?>
                                    <?php the_post_thumbnail('medium_large', [
                                        'class' => 'w-full h-full object-cover transition-transform duration-300 group-hover:scale-105',
                                        'alt' => get_the_title()
                                    ]); ?>
                                <?php else: ?>
                                    <div class="w-full h-full bg-gray-200 flex items-center justify-center">
                                        <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                            <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; ?>

                                <!-- Guide Meta Overlay -->
                                <?php if ($reading_time || $difficulty): ?>
                                    <div class="absolute top-3 right-3 flex gap-2">
                                        <?php if ($reading_time): ?>
                                            <span class="bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full">
                                                <?php echo esc_html($reading_time); ?>min
                                            </span>
                                        <?php endif; ?>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <!-- Content -->
                            <div class="guide-content">
                                <h2 class="font-heading text-xl lg:text-2xl font-normal uppercase leading-snug mb-3 group-hover:text-gold transition-colors">
                                    <?php the_title(); ?>
                                </h2>

                                <?php
                                $guide_description = get_field('guide_description');
                                $excerpt_text = '';

                                if ($guide_description) {
                                    $excerpt_text = wp_trim_words($guide_description, 20, '...');
                                } elseif (has_excerpt()) {
                                    $excerpt_text = wp_trim_words(get_the_excerpt(), 20, '...');
                                }

                                if ($excerpt_text): ?>
                                    <p class="text-gray-600 leading-relaxed mb-4">
                                        <?php echo esc_html($excerpt_text); ?>
                                    </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">
                                        <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>

            <!-- Pagination -->
            <?php if ($the_query->get_next_posts_link() || $the_query->get_previous_posts_link()): ?>
                <div class="flex justify-center items-center space-x-4 mt-12">
                    <?php if ($the_query->get_previous_posts_link()): ?>
                        <div class="previous-posts">
                            <?php $the_query->get_previous_posts_link(__('← Guides précédents', 'laurentperrier')); ?>
                        </div>
                    <?php endif; ?>

                    <?php if ($the_query->get_next_posts_link()): ?>
                        <div class="next-posts">
                            <?php $the_query->get_next_posts_link(__('Guides suivants →', 'laurentperrier')); ?>
                        </div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>

        <?php else: ?>
            <!-- No Guides Found -->
            <div class="text-center py-16">
                <div class="max-w-md mx-auto">

                    <h3 class="text-lg font-medium text-gray-900 mb-2">
                        <?php _e('Aucun guide disponible', 'laurentperrier'); ?>
                    </h3>
                    <p class="text-gray-500">
                        <?php _e('Les guides seront bientôt disponibles. Revenez plus tard', 'laurentperrier'); ?>
                    </p>
                </div>
            </div>
        <?php endif; ?>

    </div>
</div>

<?php get_footer(); ?>