<?php get_header(); ?>

<main id="primary" class="site-main wf-single-page 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() );
        $blog_url      = get_permalink( get_option( 'page_for_posts' ) ) ?: home_url( '/blog' );
        $blog_label    = get_option( 'page_for_posts' ) ? get_the_title( get_option( 'page_for_posts' ) ) : __( 'Blog', 'wf-theme' );
        $post_cats     = get_the_category();
        $primary_cat   = ! empty( $post_cats ) ? $post_cats[0] : null;
        $author_bio    = get_the_author_meta( 'description' );
        $related_args  = array(
            'post__not_in'        => array( get_the_ID() ),
            'posts_per_page'      => 3,
            'ignore_sticky_posts' => true,
        );

        if ( $primary_cat ) {
            $related_args['category__in'] = array( $primary_cat->term_id );
        }

        $related_posts = new WP_Query( $related_args );
        ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class( 'wf-single-article' ); ?>>
            <section class="gl-single-hero wf-single-hero">
                <div class="gl-single-hero__inner max-w-7xl mx-auto px-6 md:px-12 lg:grid-cols-12">
                    <div class="lg:col-span-7">
                        <nav class="gl-single-breadcrumbs" aria-label="<?php esc_attr_e( 'Fil d Ariane article', 'wf-theme' ); ?>">
                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Accueil', 'wf-theme' ); ?></a>
                            <span>/</span>
                            <a href="<?php echo esc_url( $blog_url ); ?>"><?php echo esc_html( $blog_label ); ?></a>
                            <?php if ( $primary_cat ) : ?>
                                <span>/</span>
                                <a href="<?php echo esc_url( get_category_link( $primary_cat->term_id ) ); ?>"><?php echo esc_html( $primary_cat->name ); ?></a>
                            <?php endif; ?>
                        </nav>

                        <div class="gl-single-hero__meta">
                            <span><?php echo esc_html( get_the_date() ); ?></span>
                            <span><?php echo esc_html( sprintf( __( '%s min de lecture', 'wf-theme' ), $reading_time ) ); ?></span>
                            <?php if ( $primary_cat ) : ?>
                                <span class="gl-blog-chip"><?php echo esc_html( $primary_cat->name ); ?></span>
                            <?php endif; ?>
                        </div>

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

                        <?php if ( has_excerpt() ) : ?>
                            <p class="gl-single-excerpt"><?php echo esc_html( wp_strip_all_tags( get_the_excerpt() ) ); ?></p>
                        <?php endif; ?>

                        <div class="gl-single-author-row">
                            <div class="flex items-center gap-3">
                                <?php echo get_avatar( get_the_author_meta( 'user_email' ), 52, '', 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( $author_bio ? $author_bio : __( 'Auteur Workout Facile', 'wf-theme' ) ); ?></p>
                                </div>
                            </div>

                            <div class="gl-single-share">
                                <span><?php esc_html_e( 'Partager', 'wf-theme' ); ?></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', 'wf-theme' ); ?>">
                                    <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', 'wf-theme' ); ?>">
                                    <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', 'wf-theme' ); ?>">
                                    <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>
                    </div>

                    <div class="gl-single-hero__media lg:col-span-5">
                        <?php if ( has_post_thumbnail() ) : ?>
                            <?php the_post_thumbnail( 'full', array( 'class' => 'gl-single-hero__image', 'loading' => 'eager', 'fetchpriority' => 'high', 'sizes' => '(max-width: 1024px) 100vw, 42vw' ) ); ?>
                        <?php else : ?>
                            <div class="gl-single-hero__placeholder">
                                <span><?php esc_html_e( 'Workout Facile', 'wf-theme' ); ?></span>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </section>

            <section class="wf-single-section">
                <div class="max-w-7xl mx-auto px-6 md:px-12">
                    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16">
                        <div class="lg:col-span-8 wf-single-content-card">
                            <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( $author_bio ? $author_bio : __( 'Auteur Workout Facile', 'wf-theme' ) ); ?></p>
                                    </div>
                                </div>

                                <div class="gl-single-share">
                                    <span><?php esc_html_e( 'Partager', 'wf-theme' ); ?></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', 'wf-theme' ); ?>">
                                        <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', 'wf-theme' ); ?>">
                                        <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', 'wf-theme' ); ?>">
                                        <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>

                            <?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"><?php esc_html_e( 'Tags :', 'wf-theme' ); ?></span>
                                    <?php the_tags( '', ' ', '' ); ?>
                                </div>
                            <?php endif; ?>
                        </div>

                        <aside class="lg:col-span-4 space-y-8">
                            <div class="wf-single-sidebar-card sticky top-28">
                                <h3 class="font-serif text-2xl text-navy mb-4"><?php esc_html_e( 'A lire aussi', 'wf-theme' ); ?></h3>
                                <p class="text-charcoal/65 text-sm mb-6"><?php esc_html_e( 'Continuez votre lecture avec des contenus proches de cet article.', 'wf-theme' ); ?></p>

                                <div class="space-y-6">
                                    <?php if ( $related_posts->have_posts() ) : ?>
                                        <?php while ( $related_posts->have_posts() ) : $related_posts->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 bg-offwhite">
                                                    <?php if ( has_post_thumbnail() ) : ?>
                                                        <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'w-full h-full object-cover group-hover:scale-110 transition-transform duration-500' ) ); ?>
                                                    <?php endif; ?>
                                                </div>
                                                <div>
                                                    <h4 class="font-serif text-navy group-hover:text-gold transition-colors leading-snug line-clamp-2"><?php the_title(); ?></h4>
                                                    <p class="text-xs text-charcoal/55 mt-2"><?php echo esc_html( get_the_date() ); ?></p>
                                                </div>
                                            </a>
                                        <?php endwhile; ?>
                                        <?php wp_reset_postdata(); ?>
                                    <?php else : ?>
                                        <p class="text-charcoal/65 text-sm"><?php esc_html_e( 'Aucun article associe pour le moment.', 'wf-theme' ); ?></p>
                                    <?php endif; ?>
                                </div>

                                <div class="mt-8 pt-8 border-t border-black/5">
                                    <a href="<?php echo esc_url( $blog_url ); ?>" class="inline-flex items-center gap-2 bg-navy text-white px-6 py-3 rounded-full font-semibold hover:bg-gold transition-colors">
                                        <?php echo esc_html( sprintf( __( 'Retour au %s', 'wf-theme' ), $blog_label ) ); ?>
                                    </a>
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
            </section>
        </article>
    <?php endwhile; ?>
</main>

<?php get_footer(); ?>