<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Template Part: Enhanced Hero Slider Section
 *
 * Features:
 * - Responsive design with optimized layouts
 * - Advanced animations and transitions
 * - Better accessibility and performance
 * - Modern visual effects
 */

// Get slider data and settings
$pawfect_slider_data = get_theme_mod('pawfect_main_slider_content');
$pawfect_slides = [];

if (is_string($pawfect_slider_data) && !empty($pawfect_slider_data)) {
    $decoded = json_decode($pawfect_slider_data);
    if (is_array($decoded)) {
        $pawfect_slides = $decoded;
    }
}

// Slider settings
$overlay_enabled = get_theme_mod('pawfect_main_slider_overlay_disable', true);
$overlay_color = get_theme_mod('pawfect_main_slider_overlay_color', 'rgba(0,0,0,0.4)');
$transition_effect = get_theme_mod('pawfect_main_slider_animation', false) ? 'fade' : 'slide';

// Autoplay settings
$autoplay_enabled = get_theme_mod('pawfect_main_slider_autoplay', true);
$autoplay_delay = get_theme_mod('pawfect_main_slider_autoplay_delay', 5000);
$pause_on_hover = get_theme_mod('pawfect_main_slider_pause_on_hover', true);
$infinite_loop = get_theme_mod('pawfect_main_slider_infinite_loop', true);

// Determine enabled state (prefer disabled override; keep backwards compatibility)
$enabled_mod  = get_theme_mod('pawfect_main_slider_enabled', null);
$disabled_mod = get_theme_mod('pawfect_main_slider_disabled', false);
$enabled = ($enabled_mod !== null) ? (bool) $enabled_mod : ! (bool) $disabled_mod;
// Disabled always wins
if ($disabled_mod) { $enabled = false; }
if (! $enabled) {
    return;
}


// Prepare JavaScript configuration with proper boolean values
// Convert theme mod values to proper booleans - fix autoplay boolean conversion
$autoplay_js = ($autoplay_enabled == true) ? 'true' : 'false';
$pause_hover_js = ($pause_on_hover == true) ? 'true' : 'false';
$infinite_js = ($infinite_loop == true) ? 'true' : 'false';
$overlay_js = ($overlay_enabled == true) ? 'true' : 'false';

$js_config = [
    'autoplay' => $autoplay_js,
    'autoplayDelay' => (int) $autoplay_delay,
    'pauseOnHover' => $pause_hover_js,
    'infiniteLoop' => $infinite_js,
    'speed' => 1000,
    'effect' => '"' . $transition_effect . '"',
    'overlay' => $overlay_js,
    'overlayColor' => '"' . $overlay_color . '"',
];
?>

<!-- Dynamic Styles handled by class-dynamic-css.php -->

<!-- Slider Configuration Script -->
<script>
    window.pawfectHeroSliderOptions = {
        autoplay: <?php echo esc_js( $js_config['autoplay'] ); ?>,
        autoplayDelay: <?php echo absint( $js_config['autoplayDelay'] ); ?>,
        pauseOnHover: <?php echo esc_js( $js_config['pauseOnHover'] ); ?>,
        infiniteLoop: <?php echo esc_js( $js_config['infiniteLoop'] ); ?>,
        speed: <?php echo absint( $js_config['speed'] ); ?>,
        effect: <?php echo esc_js( $js_config['effect'] ); ?>,
        overlay: <?php echo esc_js( $js_config['overlay'] ); ?>,
        overlayColor: <?php echo esc_js( $js_config['overlayColor'] ); ?>
    };
</script>

<!-- 🐾 Hero Slider Section with Fade Effect -->
<section class="pawfect-hero-section pawfect-relative pawfect-h-screen pawfect-overflow-hidden pawfect-bg-[#fdfdfd]">

    
    <div class="swiper pawfect-hero-swiper pawfect-h-full"
        data-autoplay="<?php echo esc_attr( $autoplay_enabled ? 'true' : 'false' ); ?>"
        data-autoplay-delay="<?php echo esc_attr( $autoplay_delay ); ?>"
        data-pause-on-hover="<?php echo esc_attr( $pause_on_hover ? 'true' : 'false' ); ?>"
        data-infinite-loop="<?php echo esc_attr( $infinite_loop ? 'true' : 'false' ); ?>"
        data-effect="<?php echo esc_attr( $transition_effect ); ?>">
        <div class="swiper-wrapper pawfect-h-full">
            <?php if (!empty($pawfect_slides)): ?>
                <?php
                // Limit to 2 slides in free version
                $limited_slides = array_slice($pawfect_slides, 0, 2);
                foreach ($limited_slides as $index => $slide):
                    $image = !empty($slide->image_url) ? esc_url($slide->image_url) : get_template_directory_uri() . '/assets/images/hero-up.webp';
                    $title = !empty($slide->title) ? wp_kses_post($slide->title) : 'Tailored Luxury for Every Paw';
                    $subtitle = !empty($slide->subtitle) ? wp_kses_post($slide->subtitle) : '';
                    $description = !empty($slide->text) ? wp_kses_post($slide->text) : (!empty($slide->description) ? wp_kses_post($slide->description) : '');
                    $button_text = !empty($slide->button_text) ? esc_html($slide->button_text) : 'Shop Now';
                    $link = !empty($slide->link) ? esc_url($slide->link) : '#';
                    $content_format = !empty($slide->content_format) ? $slide->content_format : 'center';
                ?>
                    <!-- Slide <?php echo absint( $index + 1 ); ?> -->
                    <div class="swiper-slide pawfect-relative pawfect-h-full pawfect-bg-cover pawfect-bg-center"
                        style="background-image: url('<?php echo esc_url( $image ); ?>')">
                        <?php if ($overlay_enabled): ?>
                            <div class="pawfect-hero-overlay pawfect-absolute pawfect-inset-0 pawfect-z-10"></div>
                        <?php endif; ?>
                        <div
                            class="pawfect-container pawfect-absolute pawfect-inset-0 pawfect-flex pawfect-items-center pawfect-px-4 pawfect-z-20 pawfect-slide-wrapper pawfect-slide-content-<?php echo esc_attr($content_format); ?>">
                            <div class="pawfect-slide-content-<?php echo esc_attr($content_format); ?> pawfect-hero-slide-content">
                                <?php if ($subtitle): ?>
                                    <div class="pawfect-hero-subtitle pawfect-inline-flex pawfect-items-center pawfect-gap-2 pawfect-text-sm pawfect-font-medium pawfect-mb-4 pawfect-hero-animate pawfect-hero-animate-subtitle">
                                        <div class="pawfect-w-6 pawfect-h-px pawfect-hero-subtitle-line"></div>
                                        <span> <?php echo wp_kses_post( $subtitle ); ?></span>
                                        <div class="pawfect-w-6 pawfect-h-px pawfect-hero-subtitle-line"></div>
                                    </div>

                                <?php endif; ?>

                                <h1 class="pawfect-hero-title pawfect-font-bold pawfect-tracking-wide pawfect-hero-animate pawfect-hero-animate-title">
                                    <?php echo wp_kses_post( $title ); ?>
                                </h1>

                                <?php if ($description): ?>
                                    <p class="pawfect-hero-description pawfect-text-base md:pawfect-text-lg pawfect-mx-auto pawfect-opacity-80 pawfect-hero-animate pawfect-hero-animate-description">
                                        <?php echo wp_kses_post( $description ); ?>
                                    </p>
                                <?php endif; ?>

                                <div class="pawfect-hero-button-wrapper pawfect-text-center pawfect-hero-animate pawfect-hero-animate-button">
                                    <a href="<?php echo esc_url( $link ); ?>"
                                        class="pawfect-btn"><span><?php echo esc_html( $button_text ); ?></span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <!-- Default Slide 1 -->
                <div class="swiper-slide pawfect-relative pawfect-h-full pawfect-bg-cover pawfect-bg-center"
                    style="background-image: url('<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/hero-up.webp')">
                    <?php if ($overlay_enabled): ?>
                        <div class="pawfect-hero-overlay pawfect-absolute pawfect-inset-0 pawfect-z-10"></div>
                    <?php endif; ?>
                    <div
                        class="pawfect-absolute pawfect-inset-0 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-px-4 pawfect-z-20">
                        <div class="pawfect-text-center pawfect-hero-slide-content pawfect-slide-content-center">
                            <p class="pawfect-hero-subtitle pawfect-mb-4 pawfect-opacity-90 pawfect-hero-animate pawfect-hero-animate-subtitle">
                                <?php echo esc_html__( 'Premium Pet Products', 'pawfect' ); ?>
                            </p>

                            <h1 class="pawfect-hero-title pawfect-font-bold pawfect-tracking-wide lg:pawfect-px-[30rem] pawfect-hero-animate pawfect-hero-animate-title">
                                <?php echo esc_html__( 'Tailored Luxury for Every Paw', 'pawfect' ); ?>
                            </h1>

                            <p class="pawfect-hero-description pawfect-text-base md:pawfect-text-lg pawfect-max-w-2xl pawfect-mx-auto pawfect-opacity-80 pawfect-hero-animate pawfect-hero-animate-description">
                                <?php echo esc_html__( 'Discover our collection of premium pet accessories designed with love and crafted for comfort', 'pawfect' ); ?>
                            </p>

                            <div class="pawfect-hero-button-wrapper pawfect-text-center pawfect-hero-animate pawfect-hero-animate-button">
                                <a href="#" class="pawfect-btn"><span><?php echo esc_html__( 'Shop Now', 'pawfect' ); ?></span></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Default Slide 2 -->
                <div class="swiper-slide pawfect-relative pawfect-h-full pawfect-bg-cover pawfect-bg-center"
                    style="background-image: url('<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/hero-up.webp')">
                    <?php if ($overlay_enabled): ?>
                        <div class="pawfect-hero-overlay pawfect-absolute pawfect-inset-0 pawfect-z-10"></div>
                    <?php endif; ?>
                    <div
                        class="pawfect-absolute pawfect-inset-0 pawfect-flex pawfect-items-center pawfect-justify-center pawfect-px-4 pawfect-z-20">
                        <div class="pawfect-text-center pawfect-hero-slide-content pawfect-slide-content-center">
                            <p class="pawfect-hero-subtitle pawfect-mb-4 pawfect-opacity-90 pawfect-hero-animate pawfect-hero-animate-subtitle">
                                <?php echo esc_html__( 'Handcrafted Excellence', 'pawfect' ); ?>
                            </p>

                            <h1 class="pawfect-hero-title pawfect-font-bold pawfect-tracking-wide lg:pawfect-px-[30rem] pawfect-hero-animate pawfect-hero-animate-title">
                                <?php echo esc_html__( 'Where Comfort Meets Craft', 'pawfect' ); ?>
                            </h1>

                            <p class="pawfect-hero-description pawfect-text-base md:pawfect-text-lg pawfect-max-w-2xl pawfect-mx-auto pawfect-opacity-80 pawfect-hero-animate pawfect-hero-animate-description">
                                <?php echo esc_html__( 'Every piece is thoughtfully designed to bring joy to both pets and their loving families', 'pawfect' ); ?>
                            </p>

                            <div class="pawfect-hero-button-wrapper pawfect-text-center pawfect-hero-animate pawfect-hero-animate-button">
                                <a href="#" class="pawfect-btn"><span><?php echo esc_html__( 'Explore Now', 'pawfect' ); ?></span></a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <!-- Navigation Arrows -->
        <?php if (get_theme_mod('pawfect_main_slider_show_navigation', true)): ?>
            <div class="swiper-button-prev pawfect-text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
                    <path
                        d="M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z">
                    </path>
                </svg>
            </div>
            <div class="swiper-button-next pawfect-text-white">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#000000" viewBox="0 0 256 256">
                    <path
                        d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z">
                    </path>
                </svg>
            </div>
        <?php endif; ?>

        <!-- Pagination Dots -->
        <?php if (get_theme_mod('pawfect_main_slider_show_pagination', true)): ?>
            <div class="swiper-pagination pawfect-flex pawfect-items-center pawfect-justify-center pawfect-mt-6"></div>
        <?php endif; ?>
    </div>
</section>

<!--============= End Hero Section =================-->