<?php

/**
 * Template part: Guide Card
 * Usage: within The Loop.
 * Renders a unified guide card for archives and taxonomy pages.
 */
?>
<article class="guide-card scroll-appear flex flex-col relative" role="article" aria-labelledby="guide-title-<?php the_ID(); ?>">
    <div class="flex flex-col group grow gap-4">
        <!-- Featured Image -->
        <div class="aspect-4/3 overflow-hidden mb-4 relative">
            <?php
            $cover_image = get_field('guide_cover_image');

            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 absolute">
            <?php elseif (has_post_thumbnail()): ?>
                <?php the_post_thumbnail('medium_large', [
                    'class' => 'w-full h-full object-cover absolute',
                    'alt' => get_the_title()
                ]); ?>
            <?php else: ?>
                <div class="w-full h-full bg-gold flex items-center justify-center ">
                    <img src="<?php echo get_stylesheet_directory_uri() ?>/dist/assets/img/logo-laurentperrier.png" alt="Laurent-Perrier" class="max-w-full ">
                </div>
            <?php endif; ?>
        </div>

        <!-- Content -->
        <div class="guide-content flex flex-col gap-4 grow">
            <!-- Main Guide Category -->
            <div class="grow flex flex-col gap-4">
                <div class="flex flex-col">
                    <?php
                    $categories = get_the_terms(get_the_ID(), 'guide_category');
                    if ($categories) {
                        $main_category = current($categories);
                        $term_link = get_term_link($main_category);
                        if (!is_wp_error($term_link)) {
                            echo '<a href="' . esc_url($term_link) . '" class="text-xs font-heading text-gold uppercase hover:underline" aria-label="' . esc_attr(sprintf(__('Voir la catégorie %s', 'laurentperrier'), $main_category->name)) . '">' . esc_html($main_category->name) . '</a>';
                        } else {
                            echo '<span class="text-xs font-heading text-gold uppercase">' . esc_html($main_category->name) . '</span>';
                        }
                    }
                    ?>

                    <h2 class="font-heading text-xl lg:text-2xl font-normal uppercase leading-snug">
                        <a id="guide-title-<?php the_ID(); ?>" href="<?php the_permalink(); ?>" class="sensor hover:underline" rel="bookmark" aria-label="<?php echo esc_attr(sprintf(__('Lire le guide : %s', 'laurentperrier'), get_the_title())); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>

                    <div class="guide-meta">
                        <time class="text-xs uppercase font-heading" datetime="<?php echo esc_attr(get_the_date('c')); ?>">
                            <?php echo esc_html(get_the_date('j F Y')); ?>
                        </time>
                    </div>

                </div>
                <p class="leading-relaxed">
                    <?php echo esc_html(wp_trim_words(get_the_excerpt(), 20, '...')); ?>
                </p>
            </div>

            <!-- Read More -->
            <span class="flex gap-3 items-center text-sm font-heading font-medium uppercase  tracking-[0.08125rem]" aria-label="<?php echo esc_attr(sprintf(__('En savoir plus sur : %s', 'laurentperrier'), get_the_title())); ?>">
                <svg xmlns="http://www.w3.org/2000/svg" width="29" height="29" viewBox="0 0 29 29" fill="none" aria-hidden="true" focusable="false">
                    <path d="M21.415 14.3946C21.6103 14.1993 21.6103 13.8827 21.415 13.6875L18.233 10.5055C18.0378 10.3102 17.7212 10.3102 17.5259 10.5055C17.3307 10.7007 17.3307 11.0173 17.5259 11.2126L20.3544 14.041L17.5259 16.8694C17.3307 17.0647 17.3307 17.3813 17.5259 17.5765C17.7212 17.7718 18.0378 17.7718 18.233 17.5765L21.415 14.3946ZM7.02051 14.041V14.541H21.0615V14.041V13.541H7.02051V14.041Z" fill="black" />
                    <circle cx="14.041" cy="14.041" r="13.541" stroke="black" />
                </svg>
                <?php _e('En savoir plus', 'laurentperrier'); ?>
            </span>
        </div>
    </div>
</article>
