<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
$enabled = get_theme_mod('pawfect_promo_timer_enabled', true);
if (!$enabled) return;

$title = get_theme_mod('pawfect_promo_timer_title', "Don't Sleep On This Sale!");
$subtitle = get_theme_mod('pawfect_promo_timer_subtitle', __( 'Limited Time', 'pawfect' ));
$desc = get_theme_mod('pawfect_promo_timer_desc', __( 'Our semi-annual sale ends soon — grab your favorite picks before time runs out.', 'pawfect' ));
$desc_color = get_theme_mod('pawfect_promo_timer_desc_color', '#ffffff');
$button_text = get_theme_mod('pawfect_promo_timer_button_text', __( 'SHOP NOW', 'pawfect' ));
$button_link = get_theme_mod('pawfect_promo_timer_button_link', '#');
$button_target = get_theme_mod('pawfect_promo_timer_button_target', '_self');
$bg_image = get_theme_mod('pawfect_promo_timer_bg_image', get_template_directory_uri() . '/assets/images/count-sale.webp');
$timer_date = get_theme_mod('pawfect_promo_timer_date');

// If no timer date is set, automatically set it to one week from now
if (empty($timer_date)) {
    $timer_date = date('Y-m-d H:i', strtotime('+1 week'));
    set_theme_mod('pawfect_promo_timer_date', $timer_date);
}

// Check if the timer has expired and reset it to one week from now
$current_time = time();
$timer_timestamp = strtotime($timer_date);
if ($timer_timestamp <= $current_time) {
    $timer_date = date('Y-m-d H:i', strtotime('+1 week'));
    set_theme_mod('pawfect_promo_timer_date', $timer_date);
}

?>

<!-- Enhanced Don't Sleep On This Sale Section -->
<section class="pawfect-countdown-sale pawfect-relative pawfect-w-full pawfect-min-h-[32rem] pawfect-bg-cover pawfect-bg-center pawfect-bg-no-repeat pawfect-flex pawfect-items-center pawfect-justify-center pawfect-text-white pawfect-overflow-hidden pawfect-section-wrapper"
         style="background-image: url('<?php echo esc_url($bg_image); ?>')">

  

    <!-- Enhanced Background Overlay -->
    <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-br pawfect-from-black pawfect-via-black pawfect-to-transparent pawfect-opacity-60"></div>

    <!-- Animated Background Elements -->
    <div class="pawfect-absolute pawfect-inset-0 pawfect-opacity-10">
        <div class="pawfect-absolute pawfect-w-96 pawfect-h-96 pawfect-bg-white pawfect-rounded-full pawfect-blur-3xl pawfect--top-48 pawfect--right-48 pawfect-animate-pulse"></div>
        <div class="pawfect-absolute pawfect-w-64 pawfect-h-64 pawfect-bg-white pawfect-rounded-full pawfect-blur-2xl pawfect--bottom-32 pawfect--left-32 pawfect-animate-pulse pawfect-animation-delay-2000"></div>
    </div>

    <!-- Enhanced Content Container -->
    <div class="pawfect-container pawfect-relative pawfect-z-10 pawfect-w-full pawfect-max-w-7xl pawfect-flex pawfect-flex-col lg:pawfect-flex-row pawfect-items-center pawfect-justify-between pawfect-gap-12 pawfect-px-4 lg:pawfect-px-10 pawfect-py-12">

        <!-- Left Content -->
        <div class="pawfect-promo-timer-heading pawfect-max-w-2xl pawfect-text-left">

            <!-- Consistent Section Badge -->
            <?php if ( ! empty( $subtitle ) && trim( $subtitle ) !== '' ) : ?>
            <div class="pawfect-inline-flex pawfect-items-center pawfect-gap-2 pawfect-text-white pawfect-text-sm pawfect-font-medium pawfect-mb-4">
                <div class="pawfect-w-6 pawfect-h-px pawfect-bg-white pawfect-opacity-60"></div>
                <span class="pawfect-uppercase pawfect-tracking-wider"><?php echo esc_html( $subtitle ); ?></span>
                <div class="pawfect-w-6 pawfect-h-px pawfect-bg-white pawfect-opacity-60"></div>
            </div>
            <?php endif; ?>

            <?php if ($title): ?>
                <h2 class="pawfect-text-white pawfect-text-4xl md:pawfect-text-5xl lg:pawfect-text-6xl pawfect-font-bold pawfect-mb-6 pawfect-leading-tight pawfect-tracking-tight">
                    <?php echo esc_html($title); ?>
                </h2>
            <?php endif; ?>

            <?php if ($desc): ?>
                <p class="pawfect-promo-timer-desc pawfect-text-lg md:pawfect-text-xl pawfect-mb-8 pawfect-leading-relaxed pawfect-font-light"
                   <?php echo pawfect_get_aos_attrs('fade-right', 600, 100); ?>>
                    <?php echo esc_html($desc); ?>
                </p>
            <?php endif; ?>

            <?php if ($button_text && $button_link): ?>
                <a href="<?php echo esc_url($button_link); ?>" target="<?php echo esc_attr($button_target); ?>"
                   class="pawfect-btn pawfect-bg-white pawfect-text-pawfect-dark pawfect-border-white hover:pawfect-bg-pawfect-primary hover:pawfect-text-white"
                   <?php echo pawfect_get_aos_attrs('fade-right', 600, 200); ?>>
                    <span><?php echo esc_html($button_text); ?></span>
                    <svg class="pawfect-w-5 pawfect-h-5 pawfect-ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </a>
            <?php endif; ?>
        </div>

        <!-- Minimal Countdown Timer -->
        <div class="pawfect-countdown-container" data-countdown-date="<?php echo esc_attr($timer_date); ?>"
             <?php echo pawfect_get_aos_attrs('fade-left', 800, 300); ?>>
            <div class="pawfect-text-center pawfect-mb-4">
                <h3 class="pawfect-text-sm pawfect-font-medium pawfect-text-white pawfect-opacity-80 pawfect-uppercase pawfect-tracking-wider">
                    <?php echo esc_html__( 'Sale Ends In', 'pawfect' ); ?>
                </h3>
            </div>

            <div class="pawfect-flex pawfect-justify-center pawfect-items-center pawfect-gap-6 pawfect-text-center">
                <div class="pawfect-countdown-item" style="min-width: 72px;">
                    <div id="cd-days" class="pawfect-text-2xl md:pawfect-text-3xl pawfect-font-bold pawfect-text-white pawfect-mb-1" style="font-variant-numeric: tabular-nums; min-width: 3ch;">00</div>
                    <div class="pawfect-text-xs pawfect-text-white pawfect-opacity-60 pawfect-font-medium pawfect-uppercase"><?php echo esc_html__( 'Days', 'pawfect' ); ?></div>
                </div>
                <div class="pawfect-text-white pawfect-opacity-40 pawfect-text-xl">:</div>
                <div class="pawfect-countdown-item" style="min-width: 72px;">
                    <div id="cd-hours" class="pawfect-text-2xl md:pawfect-text-3xl pawfect-font-bold pawfect-text-white pawfect-mb-1" style="font-variant-numeric: tabular-nums; min-width: 3ch;">00</div>
                    <div class="pawfect-text-xs pawfect-text-white pawfect-opacity-60 pawfect-font-medium pawfect-uppercase"><?php echo esc_html__( 'Hours', 'pawfect' ); ?></div>
                </div>
                <div class="pawfect-text-white pawfect-opacity-40 pawfect-text-xl">:</div>
                <div class="pawfect-countdown-item" style="min-width: 72px;">
                    <div id="cd-minutes" class="pawfect-text-2xl md:pawfect-text-3xl pawfect-font-bold pawfect-text-white pawfect-mb-1" style="font-variant-numeric: tabular-nums; min-width: 3ch;">00</div>
                    <div class="pawfect-text-xs pawfect-text-white pawfect-opacity-60 pawfect-font-medium pawfect-uppercase"><?php echo esc_html__( 'Min', 'pawfect' ); ?></div>
                </div>
                <div class="pawfect-text-white pawfect-opacity-40 pawfect-text-xl">:</div>
                <div class="pawfect-countdown-item" style="min-width: 72px;">
                    <div id="cd-seconds" class="pawfect-text-2xl md:pawfect-text-3xl pawfect-font-bold pawfect-text-white pawfect-mb-1" style="font-variant-numeric: tabular-nums; min-width: 3ch;">00</div>
                    <div class="pawfect-text-xs pawfect-text-white pawfect-opacity-60 pawfect-font-medium pawfect-uppercase"><?php echo esc_html__( 'Sec', 'pawfect' ); ?></div>
                </div>
            </div>
        </div>
    </div>
</section>

<?php if ($timer_date): ?>
    <script>
       const endTime = new Date("<?php echo esc_js( $timer_date ); ?>").getTime();

        const timerInterval = setInterval(function () {
            const now = new Date().getTime();
            const distance = endTime - now;
            if (distance < 0) {
                clearInterval(timerInterval);
                return;
            }

            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            document.getElementById("cd-days").textContent = days.toString().padStart(2, '0');
            document.getElementById("cd-hours").textContent = hours.toString().padStart(2, '0');
            document.getElementById("cd-minutes").textContent = minutes.toString().padStart(2, '0');
            document.getElementById("cd-seconds").textContent = seconds.toString().padStart(2, '0');
        }, 1000);
    </script>
<?php endif; ?>