<?php

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

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

// Get settings
$title = get_theme_mod('pawfect_feature_highlight_title', __( 'Crafted with Love for Your Furry Friends', 'pawfect' ));
$desc = get_theme_mod('pawfect_feature_highlight_desc', __( 'Every product is carefully designed and tested to ensure the highest quality and safety for your beloved pets. From premium materials to innovative designs, we create products that both you and your pets will love.', 'pawfect' ));
$btn_text = get_theme_mod('pawfect_feature_highlight_button_text', __( 'Discover Our Story', 'pawfect' ));
$btn_link = get_theme_mod('pawfect_feature_highlight_button_link', '#');
$btn_target = get_theme_mod('pawfect_feature_highlight_button_target', '_self');
$extra_btn_text = get_theme_mod('pawfect_feature_highlight_extra_button_text', __( 'Watch Story', 'pawfect' ));
$extra_btn_link = get_theme_mod('pawfect_feature_highlight_extra_button_link', '#');
$extra_btn_target = get_theme_mod('pawfect_feature_highlight_extra_button_target', '_self');
$bg_color = get_theme_mod('pawfect_feature_highlight_bg_color', '#ffffff');
$text_color = get_theme_mod('pawfect_feature_highlight_text_color', '#1f2937');
$collage = get_theme_mod('pawfect_feature_highlight_collage');
$collage_items = json_decode($collage);

// Provide default collage items if none exist
if (empty($collage_items) || !is_array($collage_items)) {
    $collage_items = array(
        (object) array(
            'image_url' => PAWFECT_THEME_URL . '/assets/images/featured-heighlight/collage1.webp',
            'title' => __( 'Premium Quality', 'pawfect' ),
            'text' => __( 'Crafted with love', 'pawfect' ),
        ),
        (object) array(
            'image_url' => PAWFECT_THEME_URL . '/assets/images/featured-heighlight/collage2.webp',
            'title' => __( 'Pet Comfort', 'pawfect' ),
            'text' => __( 'For your furry friends', 'pawfect' ),
        ),
    );
}

?>
<!-- Dynamic Styles -->
<style>
    :root {
        --feature-bg-color:
            <?php echo esc_attr( $bg_color ); ?>
        ;
        --feature-text-color:
            <?php echo esc_attr( $text_color ); ?>
        ;
    }

    /* Enhanced positioning utilities */
    .pawfect-pos--top-left {
        top: 0;
        left: 0;
    }

    .pawfect-pos--top-center {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .pawfect-pos--top-right {
        top: 0;
        right: 0;
    }

    .pawfect-pos--center-left {
        top: 50%;
        left: 0;
        transform: translateY(-50%);
    }

    .pawfect-pos--center {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .pawfect-pos--center-right {
        top: 50%;
        right: 0;
        transform: translateY(-50%);
    }

    .pawfect-pos--bottom-left {
        bottom: 0;
        left: 0;
    }

    .pawfect-pos--bottom-center {
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .pawfect-pos--bottom-right {
        bottom: 0;
        right: 0;
    }

    /* Enhanced collage animations - Allow natural image sizes */
    .pawfect-feature-highlight .pawfect-feature-img {
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform-origin: center !important;
        display: block !important;
        /* Remove all size constraints to show images at their natural size */
        max-width: none !important;
        min-width: unset !important;
        min-height: unset !important;
        width: auto !important;
        height: auto !important;
        object-fit: none !important;
    }

    /* Container sizing based on customizer width */
    .pawfect-feature-highlight .pawfect-image-wrapper {
        display: inline-block !important;
        position: absolute !important;
    }

    /* Ensure collage container properly contains absolutely positioned items */
    .pawfect-feature-highlight {
        position: relative !important;
        overflow: hidden !important;
        contain: layout style paint !important;
    }

    /* Constrain image wrappers within their container boundaries */
    .pawfect-feature-highlight .pawfect-image-wrapper {
        max-width: calc(100% - 20px) !important;
        max-height: calc(100% - 20px) !important;
        min-width: 80px !important;
        min-height: 80px !important;
    }

    /* Ensure images don't exceed container boundaries */
    .pawfect-feature-highlight .pawfect-image-wrapper img {
        max-width: 100% !important;
        max-height: 100% !important;
    }

    /* When width is specified in customizer, scale the image to fit that width */
    .pawfect-feature-highlight .pawfect-image-wrapper[style*="width"] .pawfect-feature-img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        max-width: none !important;
    }

    .pawfect-feature-img:hover {
        transform: scale(1.05) rotate(2deg);
        z-index: 20;
    }

    .pawfect-feature-img:nth-child(even):hover {
        transform: scale(1.05) rotate(-2deg);
    }

    /* Parallax effect on scroll */
    @media (prefers-reduced-motion: no-preference) {
        .pawfect-feature-img {
            will-change: transform;
        }
    }
</style>

<!-- Feature Highlight Section -->
<section class="pawfect-feature-highlight pawfect-relative pawfect-py-20 lg:pawfect-py-32 pawfect-overflow-hidden">

    <div class="pawfect-container pawfect-relative pawfect-z-10">
        <div
            class="pawfect-flex pawfect-flex-col lg:pawfect-flex-row pawfect-items-center pawfect-gap-12 lg:pawfect-gap-20">

            <!-- Enhanced Image Collage -->
            <div
                class="pawfect-collage-container pawfect-relative pawfect-w-full lg:pawfect-w-[58%] pawfect-h-[500px] lg:pawfect-h-[600px] pawfect-order-2 lg:pawfect-order-1"
                <?php echo pawfect_get_aos_attrs('fade-right', 800, 200); ?>>

                <!-- Minimal Decorative Element -->
                <div class="pawfect-absolute pawfect-inset-0 pawfect-opacity-5">
                    <div
                        class="pawfect-absolute pawfect-w-20 pawfect-h-20 pawfect-bg-primary pawfect-rounded-full pawfect-blur-xl pawfect-top-10 pawfect-right-10">
                    </div>
                </div>

                <?php
                // Enhanced defaults with better positioning
                $defaults = array(
                    'top' => ['55%', '10%', '0%', '-5%'],
                    'left' => ['auto', '-10px', '20%', '55%'],
                    'width' => ['18vw', '14vw', '16vw', '13vw'],
                    'z-index' => [10, 15, 20, 12]
                );

                $index = 0;
                if (is_array($collage_items) && !empty($collage_items)):
                    foreach ($collage_items as $item):
                        $image = !empty($item->image_url) ? esc_url($item->image_url) : '';
                        $alt = !empty($item->title) ? esc_attr($item->title) : '';

                        // Try to get larger image size if it's a WordPress attachment
                        if ($image) {
                            if (strpos($image, wp_upload_dir()['baseurl']) !== false) {
                                // Extract attachment ID from URL if possible
                                $attachment_id = attachment_url_to_postid($image);
                                if ($attachment_id) {
                                    // Try full size first, then large
                                    $full_image = wp_get_attachment_image_src($attachment_id, 'full');
                                    if ($full_image) {
                                        $image = $full_image[0];
                                    } else {
                                        $large_image = wp_get_attachment_image_src($attachment_id, 'large');
                                        if ($large_image) {
                                            $image = $large_image[0];
                                        }
                                    }
                                }
                            }
                        }

                        $top = !empty($item->text_two)
                            ? esc_attr($item->text_two)
                            : (isset($defaults['top'][$index]) ? esc_attr($defaults['top'][$index]) : '0');

                        $left = !empty($item->text_three)
                            ? esc_attr($item->text_three)
                            : (isset($defaults['left'][$index]) ? esc_attr($defaults['left'][$index]) : '0');

                        $width = !empty($item->shortcode)
                            ? esc_attr($item->shortcode)
                            : (isset($defaults['width'][$index]) ? esc_attr($defaults['width'][$index]) : '350px');

                        $z_index = isset($defaults['z-index'][$index]) ? $defaults['z-index'][$index] : 10;

                        if ($image):
                            $style = "top: {$top}; left: {$left}; width: {$width}; z-index: {$z_index};";
                            $delay_class = 'pawfect-delay-' . ($index * 200);
                            $classes = "pawfect-feature-img pawfect-rounded-2xl pawfect-shadow-2xl pawfect-backdrop-blur-sm {$delay_class}";

                            // Get title and description from collage item
                            $item_title = !empty($item->title) ? esc_html($item->title) : '';
                            $item_description = !empty($item->text) ? esc_html($item->text) : '';
                            ?>
                            <div class="pawfect-image-wrapper pawfect-absolute pawfect-group"
                                style="<?php echo esc_attr($style); ?>"
                                <?php echo pawfect_get_aos_attrs('zoom-in', 600, 400 + ($index * 150)); ?>>
                                <div class="pawfect-relative pawfect-w-full pawfect-h-full">
                                    <img src="<?php echo esc_url( $image ); ?>" alt="<?php echo esc_attr( $alt ); ?>"
                                        class="<?php echo esc_attr($classes); ?> pawfect-transition-all pawfect-duration-500 group-hover:pawfect-scale-105" />

                                    <?php if ($item_title || $item_description): ?>
                                        <!-- Card Bottom Content -->
                                        <div class="pawfect-absolute pawfect-bottom-0 pawfect-left-0 pawfect-right-0 pawfect-bg-gradient-to-t pawfect-from-black/80 pawfect-via-black/40 pawfect-to-transparent pawfect-p-4 pawfect-rounded-b-2xl pawfect-opacity-0 group-hover:pawfect-opacity-100 pawfect-transition-opacity pawfect-duration-300">
                                            <?php if ($item_title): ?>
                                                <h4 class="pawfect-text-white pawfect-font-semibold pawfect-text-sm pawfect-mb-1">
                                                    <?php echo esc_html( $item_title ); ?>
                                                </h4>
                                            <?php endif; ?>
                                            <?php if ($item_description): ?>
                                                <p class="pawfect-text-white/80 pawfect-text-xs pawfect-leading-relaxed">
                                                    <?php echo esc_html( $item_description ); ?>
                                                </p>
                                            <?php endif; ?>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php
                        endif;

                        $index++;
                    endforeach; ?>
                <?php endif; ?>
            </div>

            <!-- Enhanced Text Content -->
            <div
                class="pawfect-content-area pawfect-w-full lg:pawfect-w-[42%] pawfect-text-center lg:pawfect-text-left pawfect-order-1 lg:pawfect-order-2">

                <!-- Section Badge -->

                <?php $subtitle = get_theme_mod('pawfect_feature_highlight_subtitle', ''); ?>
                <?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; ?>

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



                <!-- Description -->
                <?php if ($desc): ?>
                    <div class="pawfect-feature-highlight-desc pawfect-text-base pawfect-leading-relaxed pawfect-mb-8 pawfect-max-w-2xl <?php echo esc_attr( $title ? 'pawfect-mx-auto lg:pawfect-mx-0' : 'pawfect-mx-auto' ); ?>"
                        <?php echo pawfect_get_aos_attrs('fade-left', 600, 100); ?>>
                        <?php echo wp_kses_post($desc); ?>
                    </div>
                <?php endif; ?>

                <!-- Call to Action -->
                <div
                    class="pawfect-flex pawfect-flex-col sm:pawfect-flex-row pawfect-gap-4 <?php echo esc_attr( $title ? 'pawfect-justify-center lg:pawfect-justify-start' : 'pawfect-justify-center' ); ?>"
                    <?php echo pawfect_get_aos_attrs('fade-left', 600, 200); ?>>

                    <?php if ($btn_text && $btn_link): ?>
                        <a href="<?php echo esc_url($btn_link); ?>" target="<?php echo esc_attr($btn_target); ?>" class="pawfect-btn">
                            <span><?php echo esc_html($btn_text); ?></span>
                            <svg class="pawfect-w-5 pawfect-h-5 pawfect-ml-2 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; ?>

                    <!-- Extra Button (Watch Story) -->
                    <?php if ($extra_btn_text && $extra_btn_link): ?>
                        <a href="<?php echo esc_url($extra_btn_link); ?>" target="<?php echo esc_attr($extra_btn_target); ?>" class="pawfect-btn">
                            <svg class="pawfect-w-5 pawfect-h-5 pawfect-mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z"
                                    clip-rule="evenodd"></path>
                            </svg>
                            <span><?php echo esc_html($extra_btn_text); ?></span>
                        </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>