<?php
/**
 * Travel Mountain Theme - Main Template
 */
get_header(); ?>

<!-- Hero Slider Section -->
<section class="hero hero-slider-wrapper">
    <div class="hero-slider">
        <?php
        $hero_slides = new WP_Query(array(
            'post_type' => 'hero_slide',
            'posts_per_page' => -1,
            'orderby' => 'menu_order',
            'order' => 'ASC'
        ));

        if ($hero_slides->have_posts()):
            while ($hero_slides->have_posts()):
                $hero_slides->the_post();
                $subtitle = get_post_meta(get_the_ID(), '_hero_subtitle', true);
                $tagline = get_post_meta(get_the_ID(), '_hero_tagline', true);
                $button_text = get_post_meta(get_the_ID(), '_hero_button_text', true);
                $button_url = get_post_meta(get_the_ID(), '_hero_button_url', true);
                $bg_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
                ?>
                <?php
                $slide_styles = $bg_image ? ' style="background-image: url(\'' . esc_url($bg_image) . '\');"' : '';
                ?>
                <div class="hero-slide" <?php echo $slide_styles; ?>>
                    <div class="hero-overlay"></div>

                    <div class="hero-content">
                        <div class="container">



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

                            <?php if (get_the_content()): ?>
                                <p class="hero-description"><?php echo wp_trim_words(get_the_content(), 30); ?></p>
                            <?php endif; ?>

                            <?php if ($button_url): ?>
                                <a href="<?php echo esc_url($button_url); ?>" class="btn btn-primary">
                                    <?php echo esc_html($button_text ? $button_text : 'More Info'); ?>
                                </a>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?php
            endwhile;
            wp_reset_postdata();
        else:
            // Default message if no slides added
            ?>
            <div class="hero-slide hero-slide-default">
                <div class="hero-overlay"></div>

                <div class="hero-content">
                    <div class="container" style="text-align: center;">
                        <span class="hero-subtitle">Get Started</span>
                        <p class="hero-tagline">Create Your First Hero Slide</p>
                        <h1 class="hero-title">Add Hero Slides from WordPress Admin</h1>
                        <p class="hero-description">Go to Hero Slides → Add New Slide, upload an image, add content, and
                            publish!</p>
                        <a href="<?php echo admin_url('post-new.php?post_type=hero_slide'); ?>" class="btn btn-primary">Add
                            Your First Slide</a>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>

    <!-- Scrolling Experience Banner -->


    <div class="hero-content-placeholder"></div>

    <!-- Service Cards -->
    <div class="hero-cards">
        <div class="container">
            <div class="service-cards">
                <div class="service-card">
                    <div class="card-icon"><i class="fas fa-walking"></i></div>
                    <h4><?php _e('Hiking Tours', 'travel-mountain'); ?></h4>
                </div>
                <div class="service-card">
                    <div class="card-icon"><i class="fas fa-car"></i></div>
                    <h4><?php _e('Safaris Tours', 'travel-mountain'); ?></h4>
                </div>
                <div class="service-card">
                    <div class="card-icon"><i class="fas fa-ship"></i></div>
                    <h4><?php _e('Sailing Tours', 'travel-mountain'); ?></h4>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Packages Section -->
<section class="packages-section" id="packages">
    <div class="container">
        <div class="packages-grid">
            <?php
            $packages = new WP_Query(array(
                'post_type' => 'package',
                'posts_per_page' => 3
            ));

            if ($packages->have_posts()):
                while ($packages->have_posts()):
                    $packages->the_post();
                    $city = get_post_meta(get_the_ID(), '_package_city', true);
                    $country = get_post_meta(get_the_ID(), '_package_country', true);
                    $duration = get_post_meta(get_the_ID(), '_package_duration', true);
                    $price = get_post_meta(get_the_ID(), '_package_price', true);
                    $old_price = get_post_meta(get_the_ID(), '_package_old_price', true);
                    $on_sale = get_post_meta(get_the_ID(), '_package_on_sale', true);
                    ?>
                    <div class="package-card">
                        <div class="package-image">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('package-thumbnail'); ?>
                            <?php endif; ?>
                            <?php if ($duration): ?>
                                <span class="package-duration"><?php echo esc_html($duration); ?></span>
                            <?php endif; ?>
                            <?php if ($on_sale): ?>
                                <span class="sale-badge"><?php _e('SALE', 'travel-mountain'); ?></span>
                            <?php endif; ?>
                        </div>
                        <div class="package-content">
                            <div class="package-location">
                                <span class="city"><?php echo esc_html($city); ?></span>
                                <span class="country"><?php echo esc_html($country); ?></span>
                            </div>
                            <p class="package-desc"><?php echo esc_html(get_the_excerpt()); ?></p>
                            <div class="package-footer">
                                <a href="<?php the_permalink(); ?>"
                                    class="details-link"><?php _e('Details', 'travel-mountain'); ?></a>

                            </div>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
    </div>
</section>

<!-- Search Section -->
<section class="search-section">
    <div class="container">
        <div class="search-content">
            <span class="section-subtitle"><?php _e('Choose your Trip', 'travel-mountain'); ?></span>
            <h2 class="section-title"><?php _e('Start your Vacation Now', 'travel-mountain'); ?></h2>
            <p class="section-desc">
                <?php _e('Looking for your dream vacation destination but don\'t know where to start? With the help of experienced and knowledgeable travel agents, you can plan the trip of a lifetime with ease.', 'travel-mountain'); ?>
            </p>


            <a href="/contact" class="header-quote-btn">
                <i class="fas fa-paper-plane"></i>
                <?php _e('Get a Quote', 'travel-mountain'); ?>
            </a>
        </div>
    </div>
</section>

<!-- Destinations Section -->
<section class="destinations-section">
    <div class="section-header">
        <span class="section-subtitle"><?php _e('Next Adventure', 'travel-mountain'); ?></span>
        <h2 class="section-title-large"><?php _e('Travel Destinations Available Sri Lanka', 'travel-mountain'); ?></h2>
        <p class="section-desc">
            <?php _e('We have compiled a list of top destinations across the Sri Lanka.', 'travel-mountain'); ?></p>
    </div>

    <div class="destinations-slider">
        <div class="destinations-track">
            <?php
            $destinations = new WP_Query(array(
                'post_type' => 'destination',
                'posts_per_page' => -1
            ));

            if ($destinations->have_posts()):
                while ($destinations->have_posts()):
                    $destinations->the_post();
                    $subtitle = get_post_meta(get_the_ID(), '_destination_subtitle', true);
                    $image_url = get_the_post_thumbnail_url(get_the_ID(), 'destination-thumbnail');
                    ?>
                    <div class="destination-card" style="background-image: url('<?php echo esc_url($image_url); ?>')">
                        <div class="destination-overlay">
                            <h3><?php the_title(); ?></h3>
                            <p><?php echo esc_html($subtitle); ?></p>
                            <a href="<?php the_permalink(); ?>" class="dest-link"><?php _e('Details', 'travel-mountain'); ?></a>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            endif;
            ?>
        </div>
        <div class="slider-controls">
            <button class="slider-btn prev"><i class="fas fa-chevron-left"></i></button>
            <button class="slider-btn next"><i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</section>

<!-- TripAdvisor Section -->
<?php if (get_theme_mod('tripadvisor_show', '1')):
    $tripadvisor_code = get_theme_mod('tripadvisor_embed_code', '');
    $tripadvisor_title = get_theme_mod('tripadvisor_title', '');
    $background = get_theme_mod('tripadvisor_background', 'green');

    // Set background color based on selection
    $bg_colors = array(
        'green' => 'var(--primary)',
        'white' => 'var(--white)',
        'cream' => 'var(--cream)',
        'dark' => 'var(--dark)'
    );
    $bg_color = isset($bg_colors[$background]) ? $bg_colors[$background] : 'var(--primary)';
    $text_color = ($background == 'white' || $background == 'cream') ? 'var(--dark)' : 'var(--white)';
    ?>
    <section class="tripadvisor-section" style="padding: 80px 0; background: <?php echo $bg_color; ?>;">
        <div class="container">
            <?php if ($tripadvisor_title): ?>
                <div style="text-align: center; margin-bottom: 40px;">
                    <h2 style="color: <?php echo $text_color; ?>; font-size: 36px; margin: 0;">
                        <?php echo esc_html($tripadvisor_title); ?>
                    </h2>
                </div>
            <?php endif; ?>

            <div class="tripadvisor-widget-container" style="max-width: 1200px; margin: 0 auto;">
                <?php if ($tripadvisor_code): ?>
                    <?php echo wp_kses_post($tripadvisor_code); ?>
                <?php else: ?>
                    <div
                        style="background: white; padding: 60px 40px; text-align: center; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.1);">
                        <div style="margin-bottom: 20px;">
                            <svg width="120" height="40" viewBox="0 0 120 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="20" cy="20" r="18" fill="#34E0A1" />
                                <circle cx="20" cy="20" r="12" fill="white" />
                                <circle cx="20" cy="20" r="6" fill="#000" />
                                <circle cx="100" cy="20" r="18" fill="#34E0A1" />
                                <circle cx="100" cy="20" r="12" fill="white" />
                                <circle cx="100" cy="20" r="6" fill="#000" />
                                <path d="M35 8 L85 8 L60 25 Z" fill="#34E0A1" />
                            </svg>
                        </div>
                        <h3 style="color: var(--dark); margin-bottom: 15px;">Add Your TripAdvisor Widget</h3>
                        <p style="color: var(--medium-gray); margin-bottom: 25px; font-size: 15px; line-height: 1.6;">
                            To display your TripAdvisor reviews here:
                        </p>
                        <ol
                            style="text-align: left; max-width: 600px; margin: 0 auto 25px; color: var(--medium-gray); line-height: 1.8;">
                            <li>Go to <strong>Appearance → Customize → TripAdvisor Section</strong></li>
                            <li>Get your widget code from <a href="https://www.tripadvisor.com/Owners" target="_blank"
                                    style="color: var(--primary);">TripAdvisor Management Center</a></li>
                            <li>Navigate to: <strong>Marketing Tools → Widgets</strong></li>
                            <li>Copy the embed code</li>
                            <li>Paste it in the <strong>"TripAdvisor Embed Code"</strong> field</li>
                        </ol>
                        <a href="<?php echo admin_url('customize.php?autofocus[section]=tripadvisor_section'); ?>"
                            class="btn btn-primary"
                            style="display: inline-block; background: var(--primary); color: white; padding: 15px 35px; text-decoration: none; border-radius: 4px; font-weight: 600;">
                            Add TripAdvisor Code
                        </a>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
<?php endif; ?>

<!-- Partners Section -->
<section class="partners-section">
    <div class="container">
        <h2 class="partners-title"><?php echo esc_html(get_theme_mod('partners_title', 'Travel Itineraries')); ?></h2>
        <div class="partners-logos">
            <?php
            $partners = new WP_Query(array(
                'post_type' => 'partner',
                'posts_per_page' => -1
            ));

            if ($partners->have_posts()):
                while ($partners->have_posts()):
                    $partners->the_post();
                    $icon = get_post_meta(get_the_ID(), '_partner_icon', true);
                    if ($icon):
                        ?>
                        <div class="partner-logo"><i class="fas <?php echo esc_attr($icon); ?>"></i></div>
                        <?php
                    endif;
                endwhile;
                wp_reset_postdata();
            else:
                ?>
                <div class="partner-logo"><i class="fas fa-plane"></i></div>
                <div class="partner-logo"><i class="fas fa-hotel"></i></div>
                <div class="partner-logo"><i class="fas fa-ship"></i></div>
                <div class="partner-logo"><i class="fas fa-car"></i></div>
                <div class="partner-logo"><i class="fas fa-train"></i></div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Testimonials Section -->




<!-- Transport Partners Section - REPLACE PRICING SECTION WITH THIS -->
<section class="transport-section" style="padding: 80px 0; background: white;">
    <div class="container">
        <div style="text-align: center; max-width: 800px; margin: 0 auto 60px;">
            <span
                class="section-subtitle"><?php echo esc_html(get_theme_mod('transport_subtitle', 'Our Fleet')); ?></span>
            <h2 class="section-title">
                <?php echo esc_html(get_theme_mod('transport_title', 'Available Transport Partners')); ?></h2>
            <p class="section-desc">
                <?php echo esc_html(get_theme_mod('transport_description', 'Choose from our fleet of comfortable and reliable vehicles with experienced drivers for your journey.')); ?>
            </p>
        </div>

        <div class="transport-grid"
            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;">
            <?php
            $transports = new WP_Query(array(
                'post_type' => 'transport',
                'posts_per_page' => -1,
                'orderby' => 'menu_order',
                'order' => 'ASC'
            ));

            if ($transports->have_posts()):
                while ($transports->have_posts()):
                    $transports->the_post();
                    $vehicle_type = get_post_meta(get_the_ID(), '_transport_vehicle_type', true);
                    $driver_name = get_post_meta(get_the_ID(), '_transport_driver_name', true);
                    $capacity = get_post_meta(get_the_ID(), '_transport_capacity', true);
                    $price_per_day = get_post_meta(get_the_ID(), '_transport_price_per_day', true);
                    $phone = get_post_meta(get_the_ID(), '_transport_phone', true);
                    $features = get_post_meta(get_the_ID(), '_transport_features', true);
                    $is_featured = get_post_meta(get_the_ID(), '_transport_featured', true);

                    $features_array = array_filter(explode("\n", $features));
                    ?>
                    <div class="transport-card"
                        style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; position: relative;">

                        <?php if ($is_featured): ?>
                            <span class="featured-badge"
                                style="position: absolute; top: 15px; right: 15px; z-index: 10; background: var(--secondary); color: var(--dark); padding: 8px 18px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; box-shadow: 0 3px 10px rgba(0,0,0,0.2);">
                                <?php _e('FEATURED', 'travel-mountain'); ?>
                            </span>
                        <?php endif; ?>

                        <!-- Vehicle Image -->
                        <div class="transport-image"
                            style="position: relative; height: 250px; overflow: hidden; background: var(--light-gray);">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('package-thumbnail', array('style' => 'width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;')); ?>
                            <?php else: ?>
                                <div
                                    style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);">
                                    <i class="fas fa-car" style="font-size: 60px; color: white; opacity: 0.5;"></i>
                                </div>
                            <?php endif; ?>

                            <!-- Vehicle Type Badge -->
                            <?php if ($vehicle_type): ?>
                                <span
                                    style="position: absolute; bottom: 15px; left: 15px; background: rgba(255,255,255,0.95); padding: 8px 15px; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--dark); box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                    <i class="fas fa-car"></i> <?php echo esc_html($vehicle_type); ?>
                                </span>
                            <?php endif; ?>
                        </div>

                        <!-- Content -->
                        <div style="padding: 30px;">
                            <!-- Vehicle Name -->
                            <h3 style="font-size: 22px; color: var(--dark); margin-bottom: 15px; font-weight: 600;">
                                <?php the_title(); ?>
                            </h3>

                            <!-- Driver & Capacity Info -->
                            <div
                                style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--light-gray);">
                                <?php if ($driver_name): ?>
                                    <div>
                                        <div
                                            style="font-size: 12px; color: var(--medium-gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
                                            <?php _e('Driver', 'travel-mountain'); ?>
                                        </div>
                                        <div style="font-size: 15px; color: var(--dark); font-weight: 600;">
                                            <?php echo esc_html($driver_name); ?>
                                        </div>
                                    </div>
                                <?php endif; ?>

                                <?php if ($capacity): ?>
                                    <div>
                                        <div
                                            style="font-size: 12px; color: var(--medium-gray); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px;">
                                            <?php _e('Capacity', 'travel-mountain'); ?>
                                        </div>
                                        <div style="font-size: 15px; color: var(--dark); font-weight: 600;">
                                            <i class="fas fa-users"></i> <?php echo esc_html($capacity); ?>
                                            <?php _e('Passengers', 'travel-mountain'); ?>
                                        </div>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <!-- Description -->
                            <?php if (get_the_excerpt()): ?>
                                <p style="font-size: 14px; line-height: 1.7; color: var(--medium-gray); margin-bottom: 20px;">
                                    <?php echo wp_trim_words(get_the_excerpt(), 20); ?>
                                </p>
                            <?php endif; ?>

                            <!-- Features List -->
                            <?php if ($features_array && count($features_array) > 0): ?>
                                <ul style="list-style: none; padding: 0; margin: 0 0 25px 0;">
                                    <?php
                                    $display_features = array_slice($features_array, 0, 4);
                                    foreach ($display_features as $feature):
                                        $feature = trim($feature);
                                        ?>
                                        <li
                                            style="padding: 8px 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--medium-gray);">
                                            <i class="fas fa-check-circle" style="color: var(--primary); font-size: 16px;"></i>
                                            <?php echo esc_html($feature); ?>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            <?php endif; ?>

                            <!-- Price & Contact -->
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid var(--light-gray);">
                                <div>
                                    <div style="font-size: 12px; color: var(--medium-gray); margin-bottom: 5px;">
                                        <?php _e('From', 'travel-mountain'); ?>
                                    </div>
                                    <div style="font-size: 28px; font-weight: 700; color: var(--primary);">
                                        $<?php echo esc_html($price_per_day); ?>
                                        <span
                                            style="font-size: 14px; font-weight: 400; color: var(--medium-gray);">/<?php _e('day', 'travel-mountain'); ?></span>
                                    </div>
                                </div>

                                <?php if ($phone):
                                    // Format phone number for WhatsApp (remove spaces, dashes, etc.)
                                    $whatsapp_phone = preg_replace('/[^0-9+]/', '', $phone);

                                    // Create WhatsApp message
                                    $whatsapp_message = sprintf(
                                        'Hi! I would like to book *%s*%s. Price: $%s/day. Please provide more details.',
                                        get_the_title(),
                                        $vehicle_type ? ' (' . $vehicle_type . ')' : '',
                                        $price_per_day
                                    );
                                    $whatsapp_url = 'https://wa.me/' . $whatsapp_phone . '?text=' . urlencode($whatsapp_message);
                                    ?>
                                    <a href="<?php echo esc_url($whatsapp_url); ?>" target="_blank" class="contact-btn"
                                        style="background: #25D366; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 14px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px;">
                                        <i class="fab fa-whatsapp"></i>
                                        <?php _e('Book Now', 'travel-mountain'); ?>
                                    </a>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            else:
                ?>
                <!-- No Transport Partners Added Yet -->
                <div class="col-span-full"
                    style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: var(--cream); border-radius: 12px;">
                    <i class="fas fa-car"
                        style="font-size: 60px; color: var(--primary); opacity: 0.3; margin-bottom: 20px;"></i>
                    <h3 style="font-size: 24px; color: var(--dark); margin-bottom: 15px;">
                        <?php _e('No Transport Partners Yet', 'travel-mountain'); ?>
                    </h3>
                    <p style="font-size: 16px; color: var(--medium-gray); margin-bottom: 25px;">
                        <?php _e('Add your transport partners from the WordPress admin to display them here.', 'travel-mountain'); ?>
                    </p>
                    <?php if (current_user_can('edit_posts')): ?>
                        <a href="<?php echo admin_url('post-new.php?post_type=transport'); ?>" class="btn btn-primary">
                            <?php _e('Add Transport Partner', 'travel-mountain'); ?>
                        </a>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Discover Section -->
<section class="discover-section">
    <div class="container">
        <div class="discover-grid">
            <div class="discover-images">
                <div class="discover-img-1">
                    <?php
                    $img1 = get_theme_mod('discover_image_1');
                    $img1_url = $img1 ? $img1 : get_template_directory_uri() . '/images/grouped-image.jpg';
                    ?>
                    <img src="<?php echo esc_url($img1_url); ?>"
                        alt="<?php echo esc_attr(get_theme_mod('discover_label_1', 'Group Tour')); ?>">
                    <span
                        class="img-label"><?php echo esc_html(get_theme_mod('discover_label_1', 'Organized Group Tour')); ?></span>
                </div>
                <div class="discover-img-2">
                    <?php
                    $img2 = get_theme_mod('discover_image_2');
                    $img2_url = $img2 ? $img2 : get_template_directory_uri() . '/images/single-trip.jpg';
                    ?>
                    <img src="<?php echo esc_url($img2_url); ?>"
                        alt="<?php echo esc_attr(get_theme_mod('discover_label_2', 'Single Trip')); ?>">
                    <span
                        class="img-label"><?php echo esc_html(get_theme_mod('discover_label_2', 'Single Customized Trip')); ?></span>
                </div>
            </div>
            <div class="discover-content">
                <span
                    class="section-subtitle"><?php echo esc_html(get_theme_mod('discover_subtitle', 'Wandering Souls')); ?></span>
                <h2 class="section-title">
                    <?php echo esc_html(get_theme_mod('discover_title', 'Discover Your Next Adventure')); ?></h2>
                <p><?php echo esc_html(get_theme_mod('discover_description', 'Whether you\'re planning a romantic honeymoon or a family vacation, our price section has got you covered.')); ?>
                </p>

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

<!-- Blog Gallery Section -->
<section class="blog-section" style="padding: 80px 0; background: white;">
    <div class="container">
        <div style="text-align: center; max-width: 800px; margin: 0 auto 60px;">
            <span class="section-subtitle"><?php _e('Roaming Tales', 'travel-mountain'); ?></span>
            <h2 class="section-title"><?php _e('Travel Blog', 'travel-mountain'); ?></h2>
            <p class="section-desc">
                <?php _e('We share our experiences, tips and travel stories to inspire and guide our readers.', 'travel-mountain'); ?>
            </p>
        </div>

        <div class="blog-gallery"
            style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px;">
            <?php
            $blog_query = new WP_Query(array(
                'post_type' => 'post',
                'posts_per_page' => 6
            ));

            if ($blog_query->have_posts()):
                while ($blog_query->have_posts()):
                    $blog_query->the_post();
                    $full_image = get_the_post_thumbnail_url(get_the_ID(), 'full');
                    ?>
                    <div class="blog-gallery-item" data-image="<?php echo esc_url($full_image); ?>"
                        data-title="<?php echo esc_attr(get_the_title()); ?>"
                        style="position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 8/3; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer;">
                        <!-- Image -->
                        <div class="gallery-image" style="position: absolute; inset: 0; overflow: hidden;">
                            <?php if (has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('blog-thumbnail', array('style' => 'width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;')); ?>
                            <?php else: ?>
                                <div
                                    style="width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-image" style="font-size: 60px; color: white; opacity: 0.3;"></i>
                                </div>
                            <?php endif; ?>
                        </div>

                        <!-- Overlay with Title -->
                        <div class="gallery-overlay"
                            style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); display: flex; align-items: flex-end; padding: 25px; transition: all 0.3s ease;">
                            <h3
                                style="color: white; font-size: 18px; font-weight: 600; margin: 0; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,0.5);">
                                <?php the_title(); ?>
                            </h3>
                        </div>

                        <!-- Zoom Icon Indicator -->
                        <div class="zoom-icon"
                            style="position: absolute; top: 15px; right: 15px; z-index: 10; background: rgba(255,255,255,0.9); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease;">
                            <i class="fas fa-search-plus" style="color: var(--primary); font-size: 16px;"></i>
                        </div>
                    </div>
                    <?php
                endwhile;
                wp_reset_postdata();
            else:
                ?>
                <div style="grid-column: 1 / -1; text-align: center; padding: 60px 20px;">
                    <i class="fas fa-blog"
                        style="font-size: 60px; color: var(--primary); opacity: 0.3; margin-bottom: 20px;"></i>
                    <h3 style="font-size: 24px; color: var(--dark); margin-bottom: 15px;">
                        <?php _e('No Blog Posts Yet', 'travel-mountain'); ?>
                    </h3>
                    <p style="font-size: 16px; color: var(--medium-gray);">
                        <?php _e('Start sharing your travel stories!', 'travel-mountain'); ?>
                    </p>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Lightbox Modal -->
<div id="gallery-lightbox" class="gallery-lightbox"
    style="display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.95); backdrop-filter: blur(10px); animation: fadeIn 0.3s ease;">
    <div class="lightbox-content"
        style="position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 60px 20px;">

        <!-- Close Button -->
        <button class="lightbox-close"
            style="position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; background: rgba(255,255,255,0.1); border: 2px solid white; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; transition: all 0.3s ease; z-index: 10001; display: flex; align-items: center; justify-content: center;">
            <i class="fas fa-times"></i>
        </button>

        <!-- Image Container -->
        <div class="lightbox-image-wrapper"
            style="position: relative; max-width: 90%; max-height: 90vh; text-align: center;">
            <img id="lightbox-image" src="" alt=""
                style="max-width: 100%; max-height: 85vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: zoomIn 0.4s ease;">
            <div id="lightbox-title"
                style="color: white; font-size: 24px; font-weight: 600; margin-top: 25px; text-shadow: 0 2px 10px rgba(0,0,0,0.8);">
            </div>
        </div>

        <!-- Navigation Arrows -->
        <button class="lightbox-prev"
            style="position: absolute; left: 30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background: rgba(255,255,255,0.1); border: 2px solid white; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; transition: all 0.3s ease; z-index: 10001; display: flex; align-items: center; justify-content: center;">
            <i class="fas fa-chevron-left"></i>
        </button>
        <button class="lightbox-next"
            style="position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background: rgba(255,255,255,0.1); border: 2px solid white; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; transition: all 0.3s ease; z-index: 10001; display: flex; align-items: center; justify-content: center;">
            <i class="fas fa-chevron-right"></i>
        </button>

    </div>
</div>

<style>
    /* Lightbox Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes zoomIn {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Lightbox Button Hover Effects */
    .lightbox-close:hover,
    .lightbox-prev:hover,
    .lightbox-next:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-50%) scale(1.1);
        border-color: var(--secondary);
    }

    .lightbox-close:hover {
        transform: scale(1.1) rotate(90deg);
    }

    /* Blog Gallery Hover Effects */
    .blog-gallery-item {
        cursor: pointer;
    }

    .blog-gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    }

    .blog-gallery-item:hover .gallery-image img {
        transform: scale(1.1);
    }

    .blog-gallery-item:hover .gallery-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.1) 100%);
    }

    /* Show zoom icon on hover */
    .blog-gallery-item:hover .zoom-icon {
        opacity: 1;
    }

    /* Responsive Gallery */
    @media (max-width: 768px) {
        .blog-gallery {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
            gap: 20px !important;
        }

        .blog-gallery-item {
            aspect-ratio: 1/1 !important;
        }

        /* Lightbox responsive */
        .lightbox-prev,
        .lightbox-next {
            width: 45px !important;
            height: 45px !important;
            font-size: 18px !important;
        }

        .lightbox-prev {
            left: 10px !important;
        }

        .lightbox-next {
            right: 10px !important;
        }

        .lightbox-close {
            top: 10px !important;
            right: 10px !important;
            width: 40px !important;
            height: 40px !important;
            font-size: 20px !important;
        }

        #lightbox-title {
            font-size: 18px !important;
            margin-top: 15px !important;
        }
    }

    @media (max-width: 480px) {
        .blog-gallery {
            grid-template-columns: 1fr !important;
        }

        .lightbox-image-wrapper {
            max-width: 95% !important;
        }
    }
</style>

<script>
    jQuery(document).ready(function ($) {
        // Initialize hero slider
        $('.hero-slider').slick({
            dots: true,
            arrows: true,
            infinite: true,
            speed: 800,
            slidesToShow: 1,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 5000,
            fade: true,
            cssEase: 'ease-in-out',
            adaptiveHeight: false,
            lazyLoad: 'ondemand',
            prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
            nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
            responsive: [
                {
                    breakpoint: 768,
                    settings: {
                        arrows: false,
                        dots: true
                    }
                }
            ]
        });

        // Gallery Lightbox Functionality
        let currentImageIndex = 0;
        let galleryImages = [];

        // Collect all gallery items
        $('.blog-gallery-item').each(function (index) {
            const imageUrl = $(this).data('image');
            const title = $(this).data('title');

            if (imageUrl) {
                galleryImages.push({
                    url: imageUrl,
                    title: title
                });
            }

            // Click handler to open lightbox
            $(this).on('click', function () {
                currentImageIndex = index;
                openLightbox();
            });
        });

        // Open lightbox function
        function openLightbox() {
            if (galleryImages[currentImageIndex]) {
                $('#lightbox-image').attr('src', galleryImages[currentImageIndex].url);
                $('#lightbox-title').text(galleryImages[currentImageIndex].title);
                $('#gallery-lightbox').fadeIn(300);
                $('body').css('overflow', 'hidden');
            }
        }

        // Close lightbox - handle close button separately
        $('.lightbox-close').on('click', function (e) {
            e.stopPropagation();
            $('#gallery-lightbox').fadeOut(300);
            $('body').css('overflow', 'auto');
        });

        // Close when clicking on backdrop
        $('#gallery-lightbox').on('click', function (e) {
            if (e.target === this) {
                $('#gallery-lightbox').fadeOut(300);
                $('body').css('overflow', 'auto');
            }
        });

        // Prevent closing when clicking on image
        $('.lightbox-image-wrapper').on('click', function (e) {
            e.stopPropagation();
        });

        // Next image
        $('.lightbox-next').on('click', function (e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
            updateLightboxImage();
        });

        // Previous image
        $('.lightbox-prev').on('click', function (e) {
            e.stopPropagation();
            currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
            updateLightboxImage();
        });

        // Update lightbox image with animation
        function updateLightboxImage() {
            $('#lightbox-image').css({
                'animation': 'none',
                'opacity': '0'
            });

            setTimeout(function () {
                $('#lightbox-image').attr('src', galleryImages[currentImageIndex].url);
                $('#lightbox-title').text(galleryImages[currentImageIndex].title);
                $('#lightbox-image').css({
                    'animation': 'zoomIn 0.4s ease',
                    'opacity': '1'
                });
            }, 100);
        }

        // Keyboard navigation
        $(document).on('keydown', function (e) {
            if ($('#gallery-lightbox').is(':visible')) {
                if (e.key === 'Escape') {
                    $('#gallery-lightbox').fadeOut(300);
                    $('body').css('overflow', 'auto');
                } else if (e.key === 'ArrowRight') {
                    currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
                    updateLightboxImage();
                } else if (e.key === 'ArrowLeft') {
                    currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
                    updateLightboxImage();
                }
            }
        });
    });
</script>

<style>
    /* Hero Slider Styles */
    .hero-slider-wrapper {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }

    .hero-slider {
        width: 100%;
        max-width: 100vw;
    }

    .hero-slider .slick-list {
        width: 100%;
        overflow: hidden;
    }

    .hero-slider .slick-track {
        width: 100%;
    }

    .hero-slide {
        position: relative;
        width: 100%;
        min-height: 100vh;
        display: flex !important;
        align-items: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }


    /* Default slide background */
    .hero-slide-default {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    }

    /* Dark Overlay for Better Text Readability */
    .hero-slide .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.2) 50%,
                rgba(0, 0, 0, 0.6) 100%);
        z-index: 1;
    }

    .slick-dotted.slick-slider {
        margin-bottom: 0;
    }

    .hero-slide .hero-content {
        position: relative;
        z-index: 10;
        width: 100%;
        padding: 100px 0;
    }

    /* Hero Text Shadows for Better Readability */
    .hero-slide .hero-subtitle,
    .hero-slide .hero-tagline,
    .hero-slide .hero-title,
    .hero-slide .hero-description {
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5), 0 4px 25px rgba(0, 0, 0, 0.3);
    }

    /* Slick Arrows */
    .hero-slider .slick-prev,
    .hero-slider .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        width: 60px;
        height: 60px;
        background: rgba(255, 255, 255, 0.25);
        border: 2px solid rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        color: white;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .hero-slider .slick-prev:hover,
    .hero-slider .slick-next:hover {
        background: rgba(255, 255, 255, 0.4);
        border-color: white;
        transform: translateY(-50%) scale(1.1);
    }

    .hero-slider .slick-prev {
        left: 40px;
    }

    .hero-slider .slick-next {
        right: 40px;
    }

    .hero-slider .slick-prev:before,
    .hero-slider .slick-next:before {
        display: none;
    }

    /* Slick Dots */
    .hero-slider .slick-dots {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0 auto;
        width: auto;
    }

    .hero-slider .slick-dots li {
        margin: 0;
    }

    .hero-slider .slick-dots li button {
        width: 14px;
        height: 14px;
        padding: 0;
        border: 3px solid white;
        border-radius: 50%;
        background: transparent;
        font-size: 0;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .hero-slider .slick-dots li button:before {
        display: none;
    }

    .hero-slider .slick-dots li.slick-active button {
        background: white;
        width: 14px;
        border-radius: 12px;
    }

    .hero-slider .slick-dots li button:hover {
        background: rgba(255, 255, 255, 0.6);
    }

    /* Animation for slide content */
    .hero-slider .slick-active .hero-subtitle {
        animation: fadeInUp 0.8s ease 0.3s both;
    }

    .hero-slider .slick-active .hero-tagline {
        animation: fadeInUp 0.8s ease 0.5s both;
    }

    .hero-slider .slick-active .hero-title {
        animation: fadeInUp 0.8s ease 0.7s both;
    }

    .hero-slider .slick-active .hero-description {
        animation: fadeInUp 0.8s ease 0.9s both;
    }

    .hero-slider .slick-active .btn {
        animation: fadeInUp 0.8s ease 1.1s both;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Ensure Experience Banner stays on top */
    .experience-banner {
        position: absolute;
        top: 50%;
        z-index: 15;
    }

    /* Fix for Service Cards positioning */
    .hero-cards {
        position: absolute;
        bottom: 50px;
        z-index: 15;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .hero-slide {
            min-height: 100vh;
        }

        .hero-slide .hero-content {
            padding: 150px 0 200px;
        }

        .hero-slider .slick-prev,
        .hero-slider .slick-next {
            display: none !important;
        }

        .hero-slider .slick-dots {
            bottom: 30px;
            gap: 10px;
        }

        .hero-slider .slick-dots li button {
            width: 10px;
            height: 10px;
            border-width: 2px;
        }

        .hero-slider .slick-dots li.slick-active button {
            width: 35px;
        }

        .hero-cards {
            position: relative;
            bottom: auto;
            padding: 40px 0;
            background: var(--cream);
        }

        .experience-banner {
            display: none;
        }
    }

    /* Tablet */
    @media (min-width: 769px) and (max-width: 1024px) {
        .hero-slider .slick-prev {
            left: 20px;
        }

        .hero-slider .slick-next {
            right: 20px;
        }

        .hero-slide .hero-content {
            padding: 80px 0;
        }
    }
</style>

<?php get_footer(); ?>