<?php 
    get_header(); 
    include get_template_directory() . '/inc/menus/menu.php'; 
?>
<main role="main">

<?php 
if (has_post_thumbnail()) {
    $backgroundImg = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'full');
    $bg_url = $backgroundImg[0];
} else {
    // fallback image (IMPORTANT)
    $bg_url = get_template_directory_uri() . '/assets/images/default-hero.jpg';
}
?>

<!-- HERO SECTION -->
<section class="hero-section" style="background-image: url('<?php echo esc_url($bg_url); ?>');">
    
    <div class="hero-overlay">
        <div class="hero-content">

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

            <!-- BREADCRUMB -->
            <div class="hero-breadcrumb">
                <a href="<?php echo esc_url(home_url()); ?>">
                    <i class="fas fa-home"></i> 
                </a>
                <span class="separator"> > </span>
                <span><?php the_title(); ?></span>
            </div>

        </div>
    </div>

</section>


    <section class="kpy-single-news-section">
        <div class="container">
            <div class="kpy-single-news-grid">

                <!-- Main Content -->
                <div class="kpy-main-content">
                    <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                        <article id="post-<?php the_ID(); ?>" <?php post_class('kpy-news-article'); ?>>

                            <div class="kpy-article-thumbnail">
                                <?php if (has_post_thumbnail()) : ?>
                                    <?php the_post_thumbnail('full', array('class' => 'kpy-featured-image')); ?>
                                <?php endif; ?>
                            </div>

                            <div class="kpy-article-meta">
                                <span class="kpy-meta-date">
                                    <i class="bi bi-calendar3"></i>
                                    <?php the_time('F j, Y'); ?>
                                </span>
                                <span class="kpy-meta-author">
                                    <i class="bi bi-person"></i>
                                    <?php the_author(); ?>
                                </span>
                            </div>

                            <h1 class="kpy-article-title"><?php the_title(); ?></h1>

                            <div class="kpy-article-content">
                                <?php the_content(); ?>
                            </div>

                            <?php if (has_tag()) : ?>
                                <div class="kpy-article-tags">
                                    <span class="kpy-tags-label"><i class="bi bi-tags"></i> Tags:</span>
                                    <?php the_tags('', ' ', ''); ?>
                                </div>
                            <?php endif; ?>

                            <!-- Share -->
                            <div class="kpy-share-section">
                                <h4 class="kpy-share-title">Share this article</h4>
                                <div class="kpy-share-buttons">
                                    <a href="https://www.facebook.com/sharer/sharer.php?u=<?= esc_url(get_permalink()); ?>" target="_blank" class="kpy-share-btn kpy-share-facebook">
                                        <i class="bi bi-facebook"></i>
                                        <span>Facebook</span>
                                    </a>
                                    <a href="https://twitter.com/intent/tweet?url=<?= esc_url(get_permalink()); ?>&text=<?= urlencode(get_the_title()); ?>" target="_blank" class="kpy-share-btn kpy-share-twitter">
                                        <i class="bi bi-twitter-x"></i>
                                        <span>Twitter</span>
                                    </a>
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?= esc_url(get_permalink()); ?>" target="_blank" class="kpy-share-btn kpy-share-linkedin">
                                        <i class="bi bi-linkedin"></i>
                                        <span>LinkedIn</span>
                                    </a>
                                    <a href="https://wa.me/?text=<?= urlencode(get_the_title() . ' - ' . get_permalink()); ?>" target="_blank" class="kpy-share-btn kpy-share-whatsapp">
                                        <i class="bi bi-whatsapp"></i>
                                        <span>WhatsApp</span>
                                    </a>
                                </div>
                            </div>

                            <?php edit_post_link('Edit Post', '<div class="kpy-edit-link">', '</div>'); ?>
                        </article>
                    <?php endwhile; endif; ?>
                </div>

                <!-- Sidebar -->
                <div class="kpy-sidebar">

                    <div class="kpy-sidebar-widget kpy-related-news-widget">
                        <h3 class="kpy-widget-title">
                            <span class="kpy-title-icon"><i class="bi bi-newspaper"></i></span>
                            Latest Stories
                        </h3>
                        
                       <?php
                    $related_args = array(
                        'post_type' => 'post',
                        'posts_per_page' => 3,
                        'post__not_in' => array(get_the_ID()),
                        'orderby' => 'date',
                        'order' => 'DESC',
                        'tax_query' => array(
                            array(
                                'taxonomy' => 'category',
                                'field'    => 'slug',
                                'terms'    => 'blog',
                            ),
                        ),
                    );
                    $related_query = new WP_Query($related_args);
                    
                    if ($related_query->have_posts()) : ?>
                            <div class="kpy-horizontal-news-list">
                                <?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
                                    <div class="kpy-horizontal-news-card">
                                        <a href="<?php the_permalink(); ?>" class="kpy-horizontal-news-link">
                                            <div class="kpy-horizontal-thumbnail" style="height:140px;">
                                                <?php if (has_post_thumbnail()) : ?>
                                                    <?php the_post_thumbnail('medium', array('class' => 'kpy-horizontal-image')); ?>
                                                <?php else : ?>
                                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/images/placeholder-news.jpg" alt="<?php the_title(); ?>" class="kpy-horizontal-image">
                                                <?php endif; ?>
                                            </div>
                                            <div class="kpy-horizontal-content">
                                                <span class="kpy-horizontal-date">
                                                    <i class="bi bi-calendar3"></i>
                                                    <?php echo get_the_date('M d, Y'); ?>
                                                </span>
                                                <h4 class="kpy-horizontal-title"><?php the_title(); ?></h4>
                                                <span class="kpy-horizontal-read-more">
                                                    Read More <i class="bi bi-arrow-right"></i>
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                                <?php endwhile; wp_reset_postdata(); ?>
                            </div>
                        <?php else : ?>
                            <p class="kpy-widget-empty">No related stories found.</p>
                        <?php endif; ?>
                    </div>

                    <!-- CTA Widget (Reusing donation styles) -->
<div class="kpy-sidebar-widget kpy-donation-widget">
    <div class="kpy-donation-content">
        
        <div class="kpy-donation-icon">
            <i class="bi bi-megaphone-fill"></i>
        </div>

        <h4 class="kpy-donation-title">Let’s Work Together</h4>

        <p class="kpy-donation-text">
            Have a project in mind or need a powerful digital solution? 
            Let’s help you build something amazing.
        </p>

        <a href="<?php echo kipya_url_for_path('contact-us'); ?>" class="kpy-donation-btn">
            Contact Us <i class="bi bi-arrow-right"></i>
        </a>

        <p class="kpy-donation-note">
            <i class="bi bi-check-circle"></i>
            Fast response. Professional support.
        </p>

    </div>
</div>

                </div>

            </div>
        </div>
    </section>
</main>

<?php get_footer(); ?>

