<?php get_header(); ?>

<main id="primary" class="site-main bg-offwhite selection:bg-gold/30 selection:text-navy">
    <?php while ( have_posts() ) : the_post(); ?>
        <?php
        $reading_time = max( 1, (int) ceil( str_word_count( wp_strip_all_tags( get_the_content() ) ) / 200 ) );
        $share_url    = rawurlencode( get_permalink() );
        $share_title  = rawurlencode( get_the_title() );
        $primary_category = wf_theme_get_primary_post_category( get_the_ID() );
        ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <div class="max-w-7xl mx-auto px-6 md:px-12 pb-24">
                <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
                    <div class="lg:col-span-8 bg-white p-8 md:p-12 rounded-3xl shadow-sm border">
                        
                            <nav class="flex items-center gap-2 text-sm text-charcoal/60 mb-6 font-medium tracking-wide" aria-label="<?php esc_attr_e( 'Fil d\'Ariane', 'anti-tabac' ); ?>">
                                <a href="<?php echo esc_url(home_url('/')); ?>" class="hover:text-gold transition-colors">Accueil</a>
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                                <a href="<?php echo esc_url(get_permalink(get_option('page_for_posts')) ?: home_url('/blog')); ?>" class="hover:text-gold transition-colors">Blog</a>
                                <?php if ( $primary_category ) : ?>
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                                    <a href="<?php echo esc_url( get_category_link( $primary_category ) ); ?>" class="hover:text-gold transition-colors"><?php echo esc_html( $primary_category->name ); ?></a>
                                <?php endif; ?>
                            </nav>

                        <div class="gl-blog-card__meta !mt-0 mb-6">
                            <?php if ( $primary_category ) : ?>
                                <a href="<?php echo esc_url( get_category_link( $primary_category ) ); ?>" class="gl-cat-badge"><?php echo esc_html( $primary_category->name ); ?></a>
                            <?php endif; ?>
                            <span><?php echo esc_html( get_the_date() ); ?></span>
                            <span><?php echo esc_html( sprintf( '%d min de lecture', $reading_time ) ); ?></span>
                        </div>

                        <h1 class="gl-single-title"><?php the_title(); ?></h1>

                        <?php if ( has_post_thumbnail() ) : ?>
                        <figure class="gl-single-featured-media">
                            <?php the_post_thumbnail( 'full', array( 'class' => 'gl-single-featured-image', 'loading' => 'eager', 'fetchpriority' => 'high', 'sizes' => '(max-width: 1024px) 100vw, 760px' ) ); ?>
                        </figure>
                        <?php endif; ?>
                        
                        <div class="prose prose-lg prose-stone max-w-none prose-headings:font-serif prose-headings:text-navy prose-a:text-gold prose-a:no-underline hover:prose-a:text-navy prose-img:rounded-2xl">
                            <?php the_content(); ?>
                        </div>

                        <div class="gl-single-author-row gl-single-author-row--footer">
                            <div class="flex items-center gap-3">
                                <?php echo get_avatar( get_the_author_meta('user_email'), 48, '', get_the_author(), array('class' => 'rounded-full') ); ?>
                                <div>
                                    <p class="gl-single-author-name"><?php the_author(); ?></p>
                                    <p class="gl-single-author-role"><?php echo esc_html( get_the_author_meta('description') ?: 'Auteur Anti Tabac' ); ?></p>
                                </div>
                            </div>

                            <div class="gl-single-share">
                                <span>Partager</span>
                                <a href="<?php echo esc_url( 'https://www.facebook.com/sharer/sharer.php?u=' . $share_url ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Partager sur Facebook', 'anti-tabac' ); ?>">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
                                </a>
                                <a href="<?php echo esc_url( 'https://twitter.com/intent/tweet?text=' . $share_title . '&url=' . $share_url ); ?>" target="_blank" rel="noopener noreferrer" aria-label="<?php esc_attr_e( 'Partager sur X', 'anti-tabac' ); ?>">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m4 4 16 16"/><path d="M20 4 4 20"/></svg>
                                </a>
                                <a href="<?php echo esc_url( 'mailto:?subject=' . $share_title . '&body=' . $share_url ); ?>" aria-label="<?php esc_attr_e( 'Partager par email', 'anti-tabac' ); ?>">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
                                </a>
                            </div>
                        </div>
                        
                        <!-- Tags -->
                        <?php if ( has_tag() ) : ?>
                        <div class="mt-12 pt-8 border-t border-black/5 flex items-center gap-3 flex-wrap">
                            <span class="font-serif italic text-charcoal/60 mr-2">Tags :</span>
                            <?php the_tags( '', ' ', '' ); ?>
                        </div>
                        <?php endif; ?>
                    </div>

                    <!-- Sidebar -->
                    <aside class="lg:col-span-4 space-y-10">
                        <!-- Related Articles -->
                        <div class="bg-white p-8 rounded-3xl shadow-sm border border-black/5 sticky top-28">
                            <h3 class="font-serif text-2xl text-navy mb-6 flex items-center gap-2">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gold"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg> À lire aussi
                            </h3>
                            <div class="space-y-6">
                                <?php
                                $orig_post = $post;
                                global $post;
                                $args = array(
                                    'post__not_in'        => array( $post->ID ),
                                    'posts_per_page'      => 3,
                                    'ignore_sticky_posts' => 1,
                                );

                                $related_categories = wp_get_post_categories( $post->ID );

                                if ( ! empty( $related_categories ) ) {
                                    $args['category__in'] = $related_categories;
                                }

                                $my_query = new WP_Query( $args );
                                while( $my_query->have_posts() ) {
                                    $my_query->the_post();
                                ?>
                                    <a href="<?php the_permalink(); ?>" class="group flex gap-4 items-center">
                                        <div class="relative w-20 h-20 rounded-xl overflow-hidden flex-shrink-0">
                                            <?php if (has_post_thumbnail()) the_post_thumbnail('thumbnail', array('class' => 'w-full h-full object-cover group-hover:scale-110 transition-transform duration-500')); ?>
                                        </div>
                                        <div>
                                            <h4 class="font-serif text-navy group-hover:text-gold transition-colors leading-snug line-clamp-2">
                                                <?php the_title(); ?>
                                            </h4>
                                        </div>
                                    </a>
                                <?php }
                                $post = $orig_post;
                                wp_reset_postdata();
                                ?>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>