<?php

if (!defined('ABSPATH')) {
    exit;
}

get_header();
?>
<section class="bg-neutral-950 px-6 pb-24 pt-32 lg:px-10">
    <div class="mx-auto max-w-6xl">
        <div class="rounded-[2rem] bg-white/90 p-8 shadow-glow backdrop-blur md:p-12">
            <div class="mb-12">
                <p class="text-xs font-bold uppercase tracking-[0.28em] text-copper"><?php esc_html_e('Archive', 'seduction-tailwind'); ?></p>
                <h1 class="mt-3 text-3xl font-black tracking-tight text-wine sm:text-4xl"><?php the_archive_title(); ?></h1>
                <div class="mt-4 max-w-3xl text-base leading-8 text-neutral-600"><?php the_archive_description(); ?></div>
            </div>

            <div class="grid gap-8 md:grid-cols-2">
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <article <?php post_class('group overflow-hidden rounded-[1.75rem] bg-neutral-50'); ?>>
                            <a class="block overflow-hidden" href="<?php the_permalink(); ?>">
                                <?php if (has_post_thumbnail()) : ?>
                                    <?php the_post_thumbnail('large', array('class' => 'h-56 w-full object-cover transition duration-700 group-hover:scale-105')); ?>
                                <?php else : ?>
                                    <img class="h-56 w-full object-cover transition duration-700 group-hover:scale-105" src="https://picsum.photos/seed/<?php echo esc_attr(get_the_ID()); ?>/900/600" alt="<?php the_title_attribute(); ?>">
                                <?php endif; ?>
                            </a>
                            <div class="p-8">
                                <p class="text-xs font-bold uppercase tracking-[0.22em] text-copper"><?php echo esc_html(get_the_date()); ?></p>
                                <h2 class="mt-4 text-2xl font-extrabold tracking-tight text-wine transition group-hover:text-orange-600">
                                    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                                </h2>
                                <div class="prose mt-5 max-w-none prose-a:text-copper">
                                    <?php the_excerpt(); ?>
                                </div>
                            </div>
                        </article>
                    <?php endwhile; ?>
                <?php else : ?>
                    <article class="rounded-[1.75rem] bg-neutral-50 p-8">
                        <h2 class="text-2xl font-bold text-wine"><?php esc_html_e('Aucun article pour le moment', 'seduction-tailwind'); ?></h2>
                    </article>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<?php
get_footer();