<?php

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
//if (!get_theme_mod('pawfect_crafted_disabled')) return;

$enabled = get_theme_mod('pawfect_crafted_enabled', true);
if (!$enabled) return;


$title       = get_theme_mod('pawfect_crafted_title', __( 'Crafted with Care', 'pawfect' ));
$subtitle    = get_theme_mod('pawfect_crafted_subtitle', __( 'Quality & Care', 'pawfect' ));
$desc        = get_theme_mod('pawfect_crafted_desc', __( 'We create products that make tails wag and whiskers wiggle...', 'pawfect' ));
$btn_text    = get_theme_mod('pawfect_crafted_button_text', __( 'Learn More', 'pawfect' ));
$btn_link    = get_theme_mod('pawfect_crafted_button_link', '#');
$btn_target  = get_theme_mod('pawfect_crafted_button_target', '_self');

// Get images with fallback for empty database values
$image_1     = get_theme_mod('pawfect_crafted_image_1', '');
$image_2     = get_theme_mod('pawfect_crafted_image_2', '');

// Use default images if database values are empty
if (empty($image_1)) {
    $image_1 = PAWFECT_THEME_URL . '/assets/images/pet-love.webp';
}
if (empty($image_2)) {
    $image_2 = PAWFECT_THEME_URL . '/assets/images/pet-love2.webp';
}

$container   = get_theme_mod('pawfect_crafted_container', 'pawfect-container-narrow');
?>

<!-- Enhanced Crafted with Care Section -->
<section class="pawfect-crafted-section pawfect-relative pawfect-bg-white pawfect-py-20 lg:pawfect-py-28 pawfect-overflow-hidden pawfect-section-wrapper">

   

    <!-- Background Decorations -->
    <div class="pawfect-absolute pawfect-inset-0 pawfect-opacity-5">
        <div class="pawfect-absolute pawfect-w-96 pawfect-h-96 pawfect-bg-pawfect-primary 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-gray-400 pawfect-rounded-full pawfect-blur-2xl pawfect--bottom-32 pawfect--left-32 pawfect-animate-pulse pawfect-animation-delay-2000"></div>
    </div>

    <div class="<?php echo esc_attr($container); ?> pawfect-relative pawfect-z-10 pawfect-mx-auto pawfect-px-4 lg:pawfect-px-0">
        <div class="pawfect-grid pawfect-grid-cols-1 lg:pawfect-grid-cols-2 pawfect-gap-12 lg:pawfect-gap-16 pawfect-items-center">

            <!-- Enhanced Image Gallery -->
            <?php if ($image_1 && $image_2): ?>
                <div class="pawfect-group pawfect-relative pawfect-h-[450px] lg:pawfect-h-[520px]"
                     data-aos="fade-right" data-aos-duration="800" data-aos-delay="100">

                    <!-- Background Glow Effect -->
                    <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-pawfect-primary pawfect-opacity-0 pawfect-rounded-3xl pawfect-blur-2xl pawfect-transition-opacity pawfect-duration-500 group-hover:pawfect-opacity-10 pawfect--z-10"></div>

                    <!-- Main Image -->
                    <div class="pawfect-absolute pawfect-top-0 pawfect-left-0 pawfect-w-4/5 pawfect-h-4/5 pawfect-rounded-3xl pawfect-overflow-hidden pawfect-shadow-sm  pawfect-transition-all pawfect-duration-500 hover:pawfect-shadow-lg hover:pawfect-scale-[1.02]">
                        <img src="<?php echo esc_url($image_1); ?>"
                             alt="<?php esc_attr_e( 'Crafted with Care', 'pawfect' ); ?>"
                             class="pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110">

                        <!-- Image Overlay -->
                        <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-br pawfect-from-transparent pawfect-to-black pawfect-to-opacity-20 pawfect-opacity-0 pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-100"></div>
                    </div>

                    <!-- Secondary Image -->
                    <div class="pawfect-absolute pawfect-bottom-0 pawfect-right-0 pawfect-w-3/5 pawfect-h-3/5 pawfect-rounded-3xl pawfect-overflow-hidden pawfect-shadow-sm  pawfect-transition-all pawfect-duration-500 pawfect-animation-delay-200 hover:pawfect-shadow-lg hover:pawfect-scale-[1.02]">
                        <img src="<?php echo esc_url($image_2); ?>"
                             alt="<?php esc_attr_e( 'Quality Craftsmanship', 'pawfect' ); ?>"
                             class="pawfect-w-full pawfect-h-full pawfect-object-cover pawfect-transition-all pawfect-duration-700 group-hover:pawfect-scale-110">

                        <!-- Image Overlay -->
                        <div class="pawfect-absolute pawfect-inset-0 pawfect-bg-gradient-to-br pawfect-from-transparent pawfect-to-black pawfect-to-opacity-20 pawfect-opacity-0 pawfect-transition-opacity pawfect-duration-300 group-hover:pawfect-opacity-100"></div>
                    </div>

                   
                </div>
            <?php endif; ?>

            <!-- Enhanced Content -->
            <div class="pawfect-crafted-heading pawfect-text-center lg: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-primary pawfect-text-sm pawfect-text-gray-500 pawfect-font-medium pawfect-mb-4">
                    <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
                    <span class="pawfect-uppercase pawfect-tracking-wider"><?php echo esc_html( $subtitle ); ?></span>
                    <div class="pawfect-w-6 pawfect-h-px pawfect-bg-primary"></div>
                </div>
                <?php endif; ?>

                <!-- Consistent Title -->
                <h2 class="pawfect-text-4xl md:pawfect-text-5xl pawfect-font-bold pawfect-text-[#1f2937] pawfect-mb-2">
                    <?php echo esc_html($title); ?>
                </h2>

                <!-- Consistent Description -->
                <?php if (!empty($desc)) : ?>
                    <p class="pawfect-text-pawfect-text pawfect-mb-8"
                       <?php echo pawfect_get_aos_attrs('fade-left', 600, 100); ?>>
                        <?php echo esc_html($desc); ?>
                    </p>
                <?php endif; ?>

                <!-- Consistent Button -->
                <?php if ($btn_text && $btn_link): ?>
                    <a href="<?php echo esc_url($btn_link); ?>" target="<?php echo esc_attr($btn_target); ?>"
                       class="pawfect-btn"
                       <?php echo pawfect_get_aos_attrs('fade-left', 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; ?>
            </div>
        </div>
    </div>
</section>
