<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
// Get all the settings from the Customizer
$is_enabled      = (bool) get_theme_mod('pawfect_mission_enabled', true);
$title           = get_theme_mod('pawfect_mission_title', __('Made with & Purpose', 'pawfect'));
$subtitle        = get_theme_mod('pawfect_mission_subtitle', __('Our Mission', 'pawfect'));
$desc            = get_theme_mod('pawfect_mission_desc', __('Every Pawfect product is ethically crafted for pets & planet.', 'pawfect'));
$btn_text        = get_theme_mod('pawfect_mission_button_text', __('Learn About Our Ethics', 'pawfect'));
$btn_url         = get_theme_mod('pawfect_mission_button_link', '#');
$btn_target      = get_theme_mod('pawfect_mission_button_target', '_self');
$container_class = get_theme_mod('pawfect_mission_width', 'pawfect-container'); // Container width setting

// Background settings
$bg_type         = get_theme_mod('pawfect_mission_background_type', 'image');
$bg_color        = get_theme_mod('pawfect_mission_background_color', '#1a202c');
$bg_image        = get_theme_mod('pawfect_mission_background_image', get_template_directory_uri() . '/assets/images/shop-now3.webp');
$video_url       = get_theme_mod('pawfect_mission_video_url', '');


// If the section is disabled, don't show anything.
if (!$is_enabled) {
    return;
}

// Enhanced section classes and styles based on background type
$section_classes = 'pawfect-mission-section pawfect-relative pawfect-py-20 lg:pawfect-py-32 pawfect-text-center pawfect-overflow-hidden';
$section_style   = '';
$overlay_opacity = 'pawfect-opacity-100'; // Default to no overlay

if ($bg_type === 'color' && !empty($bg_color)) {
    // Colors are now handled by vanilla CSS variables
    $section_style = '';
    // Enhanced text color logic based on background
    $section_classes .= ' pawfect-text-gray-800';
} elseif ($bg_type === 'image' && !empty($bg_image)) {
    $section_style = 'background-image: url(' . esc_url($bg_image) . ');';
    $section_classes .= ' pawfect-bg-cover pawfect-bg-center pawfect-bg-fixed';
    $overlay_opacity = 'pawfect-opacity-40'; // Enhanced overlay for better readability
} elseif ($bg_type === 'video' && !empty($video_url)) {
    $section_classes .= ' pawfect-bg-black'; // Black fallback for video
    $overlay_opacity = 'pawfect-opacity-40';
}

?>

<!-- Enhanced Made with & Purpose Section -->
<section class="<?php echo esc_attr($section_classes); ?> pawfect-section-wrapper" style="<?php echo esc_attr($section_style); ?>">

    

    <!-- Background Decorations -->
    <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>

    <?php // Video Background
    if ($bg_type === 'video' && !empty($video_url)) : ?>
        <video autoplay muted loop playsinline class="pawfect-absolute pawfect-inset-0 pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-z-0">
            <source src="<?php echo esc_url($video_url); ?>" type="video/mp4">
        </video>
    <?php endif; ?>

    <?php // Enhanced Background Overlay
    if ($bg_type === 'image' && !empty($bg_image)) : ?>
         <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-br pawfect-from-black pawfect-via-black pawfect-to-transparent <?php echo esc_attr($overlay_opacity); ?> pawfect-z-0"></div>
    <?php elseif ($bg_type === 'video' && !empty($video_url)) : ?>
         <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-br pawfect-from-black pawfect-via-black pawfect-to-transparent <?php echo esc_attr($overlay_opacity); ?> pawfect-z-0"></div>
    <?php endif; ?>

    <!-- Enhanced Content Container -->
    <div class="pawfect-relative pawfect-z-10 <?php echo esc_attr($container_class); ?> pawfect-px-6">

        <!-- Mission Section Heading -->
        <div class="pawfect-mission-heading">
            <!-- 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; ?>

            <!-- Consistent Title -->
            <h2 class="pawfect-text-4xl md:pawfect-text-5xl pawfect-font-bold pawfect-text-white pawfect-mb-6">
                <?php echo wp_kses_post($title); ?>
            </h2>
        </div>

        <!-- Consistent Description -->
        <?php if (!empty($desc)) : ?>
            <p class="pawfect-text-white pawfect-opacity-90 pawfect-max-w-2xl pawfect-mx-auto pawfect-mb-10"
               <?php echo pawfect_get_aos_attrs('fade-up', 600, 100); ?>>
                <?php echo wp_kses_post($desc); ?>
            </p>
        <?php endif; ?>

        <!-- Consistent Button -->
        <?php if (!empty($btn_text)) : ?>
            <a href="<?php echo esc_url($btn_url); ?>" target="<?php echo esc_attr($btn_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-up', 600, 200); ?>>
                <span><?php echo esc_html($btn_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; ?>

        <!-- Scroll Indicator -->
        <div class="pawfect-absolute pawfect-bottom-8 pawfect-left-1/2 pawfect-transform pawfect--translate-x-1/2 pawfect-text-white pawfect-opacity-60 pawfect-animate-bounce">
            <svg class="pawfect-w-6 pawfect-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
        </div>
    </div>
</section>
