<?php
/**
 * Single Post Template - GLRC Child Theme
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

get_header();

while ( have_posts() ) : the_post();
    $categories = get_the_category();
    $category_name = ! empty( $categories ) ? esc_html( $categories[0]->name ) : 'Kajian Hukum';
    $post_url = urlencode( get_permalink() );
    $post_title = urlencode( get_the_title() );
?>

<!-- 1. HERO SINGLE POST (Judul & Metadata) -->
<section class="bg-glrc-green text-white py-14 md:py-20 text-center relative overflow-hidden border-b-4 border-glrc-gold">
    <div class="absolute inset-0 bg-black/30"></div>
    <div class="glrc-centered-box relative z-10 max-w-4xl">
        <h1 class="font-serif-title text-2xl md:text-4xl font-bold leading-tight mb-5 text-white">
            <?php the_title(); ?>
        </h1>
        <div class="flex items-center justify-center flex-wrap gap-4 text-xs md:text-sm text-gray-200">
            <span class="flex items-center gap-1.5 bg-glrc-gold/30 px-3 py-1 rounded-full border border-glrc-gold/50">
                <i class="fas fa-folder-open text-glrc-gold"></i> <?php echo $category_name; ?>
            </span>
            <span class="flex items-center gap-1.5">
                <i class="fas fa-user-tie text-glrc-gold"></i> <?php the_author(); ?>
            </span>
            <span class="flex items-center gap-1.5">
                <i class="fas fa-calendar-alt text-glrc-gold"></i> <?php echo get_the_date( 'd M Y' ); ?>
            </span>
        </div>
    </div>
</section>

<!-- 2. MAIN POST LAYOUT (Center Aligned Container) -->
<main class="py-12 md:py-16 bg-gray-50">
    <div class="glrc-centered-box">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            
            <!-- KOLOM KIRI: ISI ARTIKEL (8 Kolom) -->
            <div class="lg:col-span-8 bg-white p-6 md:p-10 rounded-2xl shadow-sm border border-gray-100">
                
                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="mb-8 rounded-xl overflow-hidden shadow-sm">
                        <?php the_post_thumbnail( 'large', array( 'class' => 'w-full h-auto object-cover max-h-[440px]' ) ); ?>
                    </div>
                <?php endif; ?>

                <!-- Konten Utama -->
                <div class="glrc-post-entry leading-relaxed">
                    <?php the_content(); ?>
                </div>

                <!-- Bagian Share -->
                <div class="flex items-center space-x-3 mt-10 pt-6 border-t border-gray-100">
                    <span class="font-serif-title font-bold text-gray-800 text-sm">Bagikan :</span>
                    <a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $post_url; ?>" target="_blank" rel="noopener" class="w-8 h-8 rounded bg-[#B38B3F] text-white flex items-center justify-center hover:opacity-90 text-xs transition"><i class="fab fa-facebook-f"></i></a>
                    <a href="https://twitter.com/intent/tweet?url=<?php echo $post_url; ?>&text=<?php echo $post_title; ?>" target="_blank" rel="noopener" class="w-8 h-8 rounded bg-[#3D251E] text-white flex items-center justify-center hover:opacity-90 text-xs transition"><i class="fab fa-twitter"></i></a>
                    <a href="https://api.whatsapp.com/send?text=<?php echo $post_title . '%20' . $post_url; ?>" target="_blank" rel="noopener" class="w-8 h-8 rounded bg-[#128C7E] text-white flex items-center justify-center hover:opacity-90 text-xs transition"><i class="fab fa-whatsapp"></i></a>
                </div>

                <!-- Komentar -->
                <div class="mt-10 pt-8 border-t border-gray-100">
                    <?php
                    if ( comments_open() || get_comments_number() ) :
                        comments_template();
                    endif;
                    ?>
                </div>

            </div>

            <!-- KOLOM KANAN: SIDEBAR (4 Kolom) -->
            <aside class="lg:col-span-4 space-y-6">
                
                <!-- Widget 1: Kategori Penelitian -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <h4 class="font-extrabold text-xs tracking-wider uppercase text-glrc-green border-b-2 border-glrc-gold pb-2 mb-4">
                        KATEGORI PENELITIAN
                    </h4>
                    <ul class="space-y-2.5 text-sm">
                        <?php
                        $categories = get_categories( array( 'orderby' => 'name', 'order' => 'ASC', 'number' => 6 ) );
                        foreach ( $categories as $cat ) :
                        ?>
                            <li class="border-b border-gray-50 pb-2 last:border-none last:pb-0">
                                <a href="<?php echo esc_url( get_category_link( $cat->term_id ) ); ?>" class="flex items-center text-gray-700 hover:text-glrc-gold font-medium transition text-xs">
                                    <i class="fas fa-chevron-circle-right text-glrc-gold text-[10px] mr-2.5"></i>
                                    <?php echo esc_html( $cat->name ); ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>

                <!-- Widget 2: Tombol Penting -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <h4 class="font-extrabold text-xs tracking-wider uppercase text-glrc-green border-b-2 border-glrc-gold pb-2 mb-4">
                        TOMBOL PENTING
                    </h4>
                    
                    <div class="space-y-3">
                        <a href="https://ijcal.profesionallegal.com" target="_blank" 
                           class="flex items-center p-3.5 rounded-xl bg-glrc-gold text-white hover:bg-opacity-95 transition shadow-sm group">
                            <div class="text-2xl mr-3 group-hover:scale-110 transition duration-300">
                                <i class="fas fa-file-download"></i>
                            </div>
                            <div>
                                <span class="block text-xs uppercase tracking-wider font-extrabold">UNDUH JURNAL</span>
                                <span class="text-[10px] opacity-90">TERBARU</span>
                            </div>
                        </a>

                        <a href="<?php echo home_url( '/#kontak' ); ?>" 
                           class="flex items-center p-3.5 rounded-xl bg-[#E8DCBF] text-glrc-green hover:bg-[#decea6] transition shadow-sm group">
                            <div class="text-2xl mr-3 text-glrc-gold-dark group-hover:scale-110 transition duration-300">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div>
                                <span class="block text-xs uppercase tracking-wider font-extrabold text-glrc-green">JADWAL</span>
                                <span class="text-[10px] text-gray-700 font-medium">KONSULTASI</span>
                            </div>
                        </a>
                    </div>
                </div>

                <!-- Widget 3: Berita Terbaru -->
                <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                    <h4 class="font-extrabold text-xs tracking-wider uppercase text-glrc-green border-b-2 border-glrc-gold pb-2 mb-4">
                        BERITA TERBARU
                    </h4>
                    <div class="space-y-3">
                        <?php
                        $recent_posts = new WP_Query( array(
                            'posts_per_page'      => 4,
                            'post__not_in'        => array( get_the_ID() ),
                            'ignore_sticky_posts' => 1
                        ) );
                        if ( $recent_posts->have_posts() ) :
                            while ( $recent_posts->have_posts() ) : $recent_posts->the_post();
                        ?>
                            <a href="<?php the_permalink(); ?>" class="block group border-b border-gray-50 pb-2.5 last:border-none last:pb-0">
                                <h5 class="text-xs font-bold text-gray-800 group-hover:text-glrc-gold transition leading-snug">
                                    <?php the_title(); ?>
                                </h5>
                                <span class="text-[10px] text-gray-400 mt-1 block"><i class="far fa-clock mr-1"></i><?php echo get_the_date( 'd M Y' ); ?></span>
                            </a>
                        <?php
                            endwhile;
                            wp_reset_postdata();
                        endif;
                        ?>
                    </div>
                </div>

            </aside>

        </div>
    </div>
</main>

<?php
endwhile;

get_footer();