<?php
/**
 * Template Name: Service Sidebar Layout
 * Description: Displays services in a stylish sidebar with main content area
 */

get_header();
include get_template_directory() . '/inc/menus/menu.php';

// Define the service icon function BEFORE using it
function get_service_icon($post_id) {
    // You can customize this based on your needs
    $icons = array(
        'default' => 'fa-cog',
        'consulting' => 'fa-chart-line',
        'development' => 'fa-code',
        'design' => 'fa-palette',
        'marketing' => 'fa-chart-simple',
        'support' => 'fa-headset',
        'training' => 'fa-chalkboard-user',
        'hosting' => 'fa-server',
        'cloud' => 'fa-cloud',
        'security' => 'fa-shield-alt',
        'backup' => 'fa-database',
        'email' => 'fa-envelope',
        'domain' => 'fa-globe',
        'web' => 'fa-globe',
        'content' => 'fa-pen-fancy',
        'strategy' => 'fa-chart-line',
    );
    
    $title = strtolower(get_the_title($post_id));
    foreach ($icons as $key => $icon) {
        if (strpos($title, $key) !== false) {
            return $icon;
        }
    }
    return $icons['default'];
}

?>

<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
    $bg_url = get_template_directory_uri() . '/assets/images/default-hero.jpg';
}

// Query for service category pages
$service_args = array(
    'post_type'      => 'page',
    'posts_per_page' => 5,
    'orderby'        => 'rand',
    'tax_query'      => array(
        array(
            'taxonomy' => 'page_category',
            'field'    => 'slug',
            'terms'    => 'web',
        ),
    ),
);
$service_query = new WP_Query($service_args);
?>

<!-- HERO SECTION -->
<section class="hero-section service-hero" 
         style="background-image: url('<?php echo esc_url($bg_url); ?>');"
         data-aos="fade-in" 
         data-aos-duration="1200" 
         data-aos-offset="0">
    <div class="hero-overlay">
        <div class="hero-content">
            <h1 class="hero-title" 
                data-aos="fade-up" 
                data-aos-duration="800" 
                data-aos-delay="200"><?php the_title(); ?></h1>
            <div class="hero-breadcrumb" 
                 data-aos="fade-up" 
                 data-aos-duration="600" 
                 data-aos-delay="400">
                <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>

<!-- DUAL COLUMN LAYOUT -->
<div class="service-dual-layout" 
     data-aos="fade-up" 
     data-aos-duration="1000" 
     data-aos-delay="100"
     data-aos-offset="50">
    <div class="container">
        <div class="layout-grid">
            
            <!-- SIDEBAR WITH SERVICES -->
            <aside class="service-sidebar" 
                   data-aos="fade-right" 
                   data-aos-duration="800" 
                   data-aos-delay="200"
                   data-aos-offset="50">
                <div class="service-sidebar-inner">
                    <div class="sidebar-header" 
                         data-aos="fade-up" 
                         data-aos-duration="600" 
                         data-aos-delay="300">
                        <h3 class="sidebar-title">Other Services</h3>
                        <div class="sidebar-title-line"></div>
                    </div>
                    
                    <?php if ($service_query->have_posts()) : ?>
                        <div class="services-list">
                            <?php 
                            $current_id = get_the_ID();
                            $service_index = 0;
                            while ($service_query->have_posts()) : $service_query->the_post(); 
                                $is_active = ($current_id == get_the_ID()) ? 'active' : '';
                                $icon_class = get_service_icon(get_the_ID());
                                $delay = 0.4 + ($service_index * 0.08);
                            ?>
                                <div class="service-item <?php echo esc_attr($is_active); ?>" 
                                     data-aos="fade-up" 
                                     data-aos-duration="500" 
                                     data-aos-delay="<?php echo $delay * 1000; ?>"
                                     data-aos-offset="30">
                                    <a href="<?php the_permalink(); ?>">
                                        <div class="service-icon" 
                                             data-aos="zoom-in" 
                                             data-aos-duration="400" 
                                             data-aos-delay="<?php echo ($delay + 0.1) * 1000; ?>">
                                            <i class="fas <?php echo esc_attr($icon_class); ?>"></i>
                                        </div>
                                        <div class="service-info">
                                            <h4 class="service-name" 
                                                data-aos="fade-up" 
                                                data-aos-duration="400" 
                                                data-aos-delay="<?php echo ($delay + 0.15) * 1000; ?>">
                                                <?php the_title(); ?>
                                            </h4>
                                            <?php if (has_excerpt()) : ?>
                                                <p class="service-excerpt" 
                                                   data-aos="fade-up" 
                                                   data-aos-duration="400" 
                                                   data-aos-delay="<?php echo ($delay + 0.2) * 1000; ?>">
                                                    <?php echo wp_trim_words(get_the_excerpt(), 10); ?>
                                                </p>
                                            <?php endif; ?>
                                        </div>
                                        <div class="service-arrow" 
                                             data-aos="fade-left" 
                                             data-aos-duration="300" 
                                             data-aos-delay="<?php echo ($delay + 0.25) * 1000; ?>">
                                            <i class="fas fa-arrow-right"></i>
                                        </div>
                                    </a>
                                </div>
                            <?php 
                            $service_index++;
                            endwhile; 
                            ?>
                        </div>
                    <?php else : ?>
                        <div class="no-services" data-aos="fade-up" data-aos-duration="500">
                            <p>No services found. Please add pages with "service" category.</p>
                        </div>
                    <?php endif; ?>
                    <?php wp_reset_postdata(); ?>
                    
                    <!-- Optional CTA in Sidebar -->
                    <div class="sidebar-cta" 
                         data-aos="fade-up" 
                         data-aos-duration="700" 
                         data-aos-delay="700"
                         data-aos-offset="30">
                        <div class="cta-content">
                            <i class="fas fa-headset" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="750"></i>
                            <h4 data-aos="fade-up" data-aos-duration="400" data-aos-delay="800">Need Help?</h4>
                            <p data-aos="fade-up" data-aos-duration="400" data-aos-delay="850">Contact us for expert consultation</p>
                            <a href="<?php echo kipya_url_for_path('contact-us'); ?>" class="cta-button" data-aos="fade-up" data-aos-duration="400" data-aos-delay="900">Get in Touch →</a>
                        </div>
                    </div>
                </div>
            </aside>
            
            <!-- MAIN CONTENT AREA -->
            <div class="main-content-area" 
                 data-aos="fade-left" 
                 data-aos-duration="800" 
                 data-aos-delay="250"
                 data-aos-offset="50">
                <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                    <article id="post-<?php the_ID(); ?>" <?php post_class('service-article'); ?>>
                        
                        <!-- Stylish Featured Image at Top -->
                        <?php if (has_post_thumbnail()) : 
                            $featured_image = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
                            $image_alt = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true);
                        ?>
                            <div class="article-featured-image" 
                                 data-aos="zoom-in" 
                                 data-aos-duration="800" 
                                 data-aos-delay="300">
                                <div class="featured-image-wrapper">
                                    <img src="<?php echo esc_url($featured_image[0]); ?>" 
                                         alt="<?php echo esc_attr($image_alt ? $image_alt : get_the_title()); ?>"
                                         class="featured-img">
                                    <div class="image-overlay">
                                        <div class="overlay-content">
                                            <i class="fas fa-expand-alt"></i>
                                            <span>View Full Image</span>
                                        </div>
                                    </div>
                                </div>
                                <?php if ($image_alt) : ?>
                                    <div class="image-caption" 
                                         data-aos="fade-up" 
                                         data-aos-duration="400" 
                                         data-aos-delay="400">
                                        <i class="fas fa-camera"></i> <?php echo esc_html($image_alt); ?>
                                    </div>
                                <?php endif; ?>
                            </div>
                        <?php endif; ?>
                        
                        <div class="article-content" 
                             data-aos="fade-up" 
                             data-aos-duration="700" 
                             data-aos-delay="350">
                            <?php the_content(); ?>
                        </div>
                        
                        <?php 
                        // Optional: Display additional service details
                        $service_details = get_post_meta(get_the_ID(), 'service_details', true);
                        if ($service_details) : ?>
                            <div class="service-additional-info" 
                                 data-aos="fade-up" 
                                 data-aos-duration="500" 
                                 data-aos-delay="450">
                                <i class="fas fa-info-circle"></i>
                                <?php echo wp_kses_post($service_details); ?>
                            </div>
                        <?php endif; ?>
                        
                    </article>
                <?php endwhile; endif; ?>
            </div>
            
        </div>
    </div>
</div>

<!-- CTA SECTION WITH BACKGROUND IMAGE - BELOW BOTH COLUMNS -->
<div class="cta-section" 
     data-aos="fade-up" 
     data-aos-duration="1000" 
     data-aos-delay="200"
     data-aos-offset="50">
    <div class="cta-background">
        <div class="cta-overlay"></div>
        <div class="cta-container">
            <div class="cta-content-wrapper">
                <h2 class="cta-title" 
                    data-aos="fade-up" 
                    data-aos-duration="700" 
                    data-aos-delay="300">
                    Let's Build Your Digital Presence Together
                </h2>
                <p class="cta-description" 
                   data-aos="fade-up" 
                   data-aos-duration="700" 
                   data-aos-delay="400">
                    Whether you are a business or an organization, we are ready to support your growth with structured, professional digital solutions.
                </p>
                
                <div class="cta-contact-info">
                    <div class="contact-item" 
                         data-aos="fade-up" 
                         data-aos-duration="500" 
                         data-aos-delay="500">
                        <i class="fas fa-phone-alt" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="550"></i>
                        <div class="contact-details">
                            <span class="contact-label">Call Us</span>
                            <a href="tel:+256706713232" class="contact-value">+256 706 713 232</a>
                            <a href="tel:+256777305812" class="contact-value">+256 777 305 812</a>
                        </div>
                    </div>
                    
                    <div class="contact-item" 
                         data-aos="fade-up" 
                         data-aos-duration="500" 
                         data-aos-delay="600">
                        <i class="fas fa-envelope" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="650"></i>
                        <div class="contact-details">
                            <span class="contact-label">Email Us</span>
                            <a href="mailto:info@baklaltd.com" class="contact-value">info@baklaltd.com</a>
                        </div>
                    </div>
                    
                    <div class="contact-item" 
                         data-aos="fade-up" 
                         data-aos-duration="500" 
                         data-aos-delay="700">
                        <i class="fas fa-globe" data-aos="zoom-in" data-aos-duration="400" data-aos-delay="750"></i>
                        <div class="contact-details">
                            <span class="contact-label">Visit Our Website</span>
                            <a href="https://www.baklaltd.com" target="_blank" class="contact-value">www.baklaltd.com</a>
                        </div>
                    </div>
                </div>
                
                <div class="cta-buttons">
                    <a href="tel:+256706713232" class="cta-btn cta-btn-primary" 
                       data-aos="fade-up" 
                       data-aos-duration="500" 
                       data-aos-delay="800">
                        <i class="fas fa-phone"></i> Call Now
                    </a>
                    <a href="mailto:info@baklaltd.com" class="cta-btn cta-btn-secondary" 
                       data-aos="fade-up" 
                       data-aos-duration="500" 
                       data-aos-delay="850">
                        <i class="fas fa-envelope"></i> Email Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* AOS initial state fixes */
    .hero-section,
    .service-sidebar,
    .main-content-area,
    .cta-section,
    .service-item,
    .sidebar-cta,
    .contact-item {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .hero-section.aos-animate,
    .service-sidebar.aos-animate,
    .main-content-area.aos-animate,
    .cta-section.aos-animate,
    .service-item.aos-animate,
    .sidebar-cta.aos-animate,
    .contact-item.aos-animate {
        opacity: 1;
    }
    
    /* Ensure smooth animations */
    .hero-title,
    .hero-breadcrumb,
    .sidebar-title,
    .service-icon,
    .service-name,
    .service-excerpt,
    .service-arrow,
    .featured-img,
    .cta-title,
    .cta-description,
    .cta-btn {
        will-change: transform, opacity;
    }
    
    /* Prevent FOUC */
    .aos-init {
        opacity: 0;
    }
    
    .aos-animate {
        opacity: 1;
    }
</style>

<script>
// Add active state highlighting and smooth scroll
document.addEventListener('DOMContentLoaded', function() {
    // Highlight current service in sidebar
    const currentUrl = window.location.href;
    const serviceLinks = document.querySelectorAll('.service-item a');
    
    serviceLinks.forEach(link => {
        if (link.href === currentUrl) {
            link.closest('.service-item').classList.add('active');
        }
    });
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Featured image lightbox effect
    const featuredImage = document.querySelector('.featured-image-wrapper');
    if (featuredImage) {
        featuredImage.addEventListener('click', function() {
            const imgSrc = this.querySelector('.featured-img').src;
            const lightbox = document.createElement('div');
            lightbox.className = 'kpy-lightbox';
            lightbox.innerHTML = `
                <div class="lightbox-content">
                    <img src="${imgSrc}" alt="Featured Image">
                    <span class="lightbox-close">&times;</span>
                </div>
            `;
            document.body.appendChild(lightbox);
            
            lightbox.addEventListener('click', function(e) {
                if (e.target === lightbox || e.target.className === 'lightbox-close') {
                    lightbox.remove();
                }
            });
        });
    }
});

// Lightbox styles
const lightboxStyles = document.createElement('style');
lightboxStyles.textContent = `
    .kpy-lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        animation: fadeIn 0.3s ease;
    }
    
    .lightbox-content {
        position: relative;
        max-width: 90%;
        max-height: 90%;
    }
    
    .lightbox-content img {
        max-width: 100%;
        max-height: 90vh;
        object-fit: contain;
        border-radius: 8px;
    }
    
    .lightbox-close {
        position: absolute;
        top: -40px;
        right: 0;
        color: white;
        font-size: 40px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .lightbox-close:hover {
        transform: scale(1.1);
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
`;
document.head.appendChild(lightboxStyles);
</script>

</main>

<?php get_footer(); ?>