<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
/**
 * Template Part: Call to Action Section
 */

// Section toggle
$enabled = (bool) get_theme_mod('pawfect_cta_enabled', true);
if (! $enabled) { return; }

// Settings
$title = get_theme_mod('pawfect_cta_title', __( 'Ready to Give Your Pet the Best?', 'pawfect' ));
$desc = get_theme_mod('pawfect_cta_desc', __( 'Join thousands of happy pet parents who trust us with their furry family members.', 'pawfect' ));
$button_text = get_theme_mod('pawfect_cta_button_text', __( 'Get Started Today', 'pawfect' ));
$button_link = get_theme_mod('pawfect_cta_button_link', '#');
$button_target = get_theme_mod('pawfect_cta_button_target', '_self');
$secondary_button_text = get_theme_mod('pawfect_cta_secondary_button_text', __( 'Learn More', 'pawfect' ));
$secondary_button_link = get_theme_mod('pawfect_cta_secondary_button_link', '#');

// Background settings
$bg_type = get_theme_mod('pawfect_cta_background_type', 'color');
$bg_color = get_theme_mod('pawfect_cta_background_color', '#1f2937');
$bg_image = get_theme_mod('pawfect_cta_background_image', '');
$text_color = get_theme_mod('pawfect_cta_text_color', '#ffffff');
$container_class = get_theme_mod('pawfect_cta_container_size', 'pawfect-container');

// Enhanced section styles
$section_style = '';
$section_classes = 'pawfect-cta-section pawfect-relative pawfect-py-20 lg:pawfect-py-28 pawfect-text-center pawfect-overflow-hidden';

if ($bg_type === 'color') {
    // Colors are now handled by vanilla CSS variables
    $section_style = '';
} elseif ($bg_type === 'image' && !empty($bg_image)) {
    // Images remain inline but colors are handled by CSS
    $section_style = "background-image: url('{$bg_image}'); background-size: cover; background-position: center;";
    $section_classes .= ' pawfect-bg-cover pawfect-bg-center pawfect-bg-fixed';
}
?>

<!-- Enhanced Ready to Give Your Pet the Best CTA Section -->
<section class="<?php echo esc_attr($section_classes); ?>" 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--left-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--right-32 pawfect-animate-pulse pawfect-animation-delay-2000"></div>
    </div>

    <?php if ($bg_type === 'image' && !empty($bg_image)): ?>
        <!-- Enhanced Overlay for better text readability -->
        <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>
    <?php endif; ?>

    <!-- Enhanced Content Container -->
    <div class="<?php echo esc_attr($container_class); ?> pawfect-relative pawfect-z-10">
        <div class="pawfect-max-w-5xl pawfect-mx-auto">

            <!-- CTA Badge -->
            <div class="pawfect-inline-flex pawfect-items-center pawfect-gap-2 pawfect-bg-pawfect-primary pawfect-bg-opacity-10 pawfect-text-pawfect-primary pawfect-text-sm pawfect-font-medium pawfect-tracking-wider pawfect-uppercase pawfect-mb-6">
                <span><?php echo esc_html__( 'Join Our Community', 'pawfect' ); ?></span>
            </div>

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

            <?php if ($desc): ?>
                <!-- Enhanced Description -->
                <p class="pawfect-text-lg md:pawfect-text-xl lg:pawfect-text-2xl pawfect-mb-12 pawfect-opacity-90 pawfect-max-w-4xl pawfect-mx-auto pawfect-leading-relaxed pawfect-font-light">
                    <?php echo esc_html($desc); ?>
                </p>
            <?php endif; ?>

            <!-- Enhanced Button Container -->
            <div class="pawfect-flex pawfect-flex-col sm:pawfect-flex-row pawfect-gap-6 pawfect-justify-center pawfect-items-center pawfect-mb-8">
                <?php if ($button_text && $button_link): ?>
                    <!-- Primary CTA Button -->
                    <a href="<?php echo esc_url($button_link); ?>" target="<?php echo esc_attr($button_target); ?>"
                       class="pawfect-group pawfect-inline-flex pawfect-items-center pawfect-bg-white pawfect-text-gray-900 pawfect-font-bold pawfect-px-10 pawfect-py-5 pawfect-rounded-xl pawfect-shadow-2xl pawfect-transition-all pawfect-duration-300 hover:pawfect-bg-pawfect-primary hover:pawfect-text-white hover:pawfect-scale-105 hover:pawfect-shadow-3xl">
                        <span class="pawfect-transition-all pawfect-duration-300"><?php echo esc_html($button_text); ?></span>
                        <svg class="pawfect-w-5 pawfect-h-5 pawfect-ml-3 pawfect-transition-transform pawfect-duration-300 group-hover:pawfect-translate-x-1" 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; ?>

                <?php if ($secondary_button_text && $secondary_button_link): ?>
                    <!-- Secondary CTA Button -->
                    <a href="<?php echo esc_url($secondary_button_link); ?>"
                       class="pawfect-group pawfect-inline-flex pawfect-items-center pawfect-border-2 pawfect-border-white pawfect-text-white pawfect-font-semibold pawfect-px-10 pawfect-py-5 pawfect-rounded-xl pawfect-backdrop-blur-sm pawfect-transition-all pawfect-duration-300 hover:pawfect-bg-white hover:pawfect-text-gray-900 hover:pawfect-scale-105">
                        <span class="pawfect-transition-all pawfect-duration-300"><?php echo esc_html($secondary_button_text); ?></span>
                        <svg class="pawfect-w-5 pawfect-h-5 pawfect-ml-3 pawfect-transition-transform pawfect-duration-300 group-hover:pawfect-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </a>
                <?php endif; ?>
            </div>

            <!-- Trust Indicators -->
            <div class="pawfect-flex pawfect-flex-col sm:pawfect-flex-row pawfect-items-center pawfect-justify-center pawfect-gap-8 pawfect-text-white pawfect-opacity-80">
                <div class="pawfect-flex pawfect-items-center pawfect-gap-2">
                    <svg class="pawfect-w-5 pawfect-h-5 pawfect-text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="pawfect-text-sm pawfect-font-medium"><?php echo esc_html__( 'Free Shipping', 'pawfect' ); ?></span>
                </div>
                <div class="pawfect-flex pawfect-items-center pawfect-gap-2">
                    <svg class="pawfect-w-5 pawfect-h-5 pawfect-text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="pawfect-text-sm pawfect-font-medium">30-Day Returns</span>
                </div>
                <div class="pawfect-flex pawfect-items-center pawfect-gap-2">
                    <svg class="pawfect-w-5 pawfect-h-5 pawfect-text-green-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="pawfect-text-sm pawfect-font-medium">24/7 Support</span>
                </div>
            </div>
        </div>
    </div>
</section>
