@props(['hero'])

{{-- Render Custom HTML if enabled --}}
@if($hero->use_custom_html && $hero->custom_html)
    <div class="custom-hero-section">
        {!! $hero->custom_html !!}
    </div>
@else
    {{-- Render builder-based hero --}}

@php
    $isLight = $hero->theme === 'light';
    // Use pre-eager-loaded elements to avoid N+1 queries
    $elements = $hero->relationLoaded('elements') ? $hero->elements : $hero->elements()->get();
    $floatingBadges = $elements->where('type', 'floating_badge');
    $featureBullets = $elements->where('type', 'feature_bullet');
    $ctaButtons = $elements->where('type', 'cta_button');
    $trustIndicators = $elements->where('type', 'trust_indicator');
    $imageUrl = $hero->getImageUrl();
    $imageFit = $hero->image_fit ?? 'cover';
    $imageZoom = $hero->image_zoom ?? 100;

    // Dynamic color gradients based on extracted colors
    $hasExtractedColors = !empty($hero->extracted_color_primary);
    $backgroundStyle = null;
    $defaultGradientClass = $isLight
        ? 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100 dark:from-zinc-900 dark:via-zinc-800 dark:to-zinc-900'
        : 'bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900 dark:from-black dark:via-zinc-900 dark:to-black';

    if ($hasExtractedColors) {
        $colorService = app(\App\Services\ColorExtractionService::class);
        $lightGradient = $colorService->generateLightGradient(
            $hero->extracted_color_primary,
            $hero->extracted_color_secondary
        );
        $darkGradient = $colorService->generateDarkGradient(
            $hero->extracted_color_primary,
            $hero->extracted_color_secondary
        );

        // For light theme heroes, use light gradient in light mode, dark gradient in dark mode
        // For dark theme heroes, always use dark gradient
        if ($isLight) {
            $backgroundStyle = "--hero-light-start: {$lightGradient['start']}; --hero-light-mid: {$lightGradient['mid']}; --hero-light-end: {$lightGradient['end']}; --hero-dark-start: {$darkGradient['start']}; --hero-dark-mid: {$darkGradient['mid']}; --hero-dark-end: {$darkGradient['end']}";
        } else {
            $backgroundStyle = "--hero-dark-start: {$darkGradient['start']}; --hero-dark-mid: {$darkGradient['mid']}; --hero-dark-end: {$darkGradient['end']}";
        }
    }
@endphp

<!-- DEBUG: Primary={{ $hero->extracted_color_primary ?? 'NULL' }}, Secondary={{ $hero->extracted_color_secondary ?? 'NULL' }}, hasExtractedColors={{ $hasExtractedColors ? 'true' : 'false' }} -->

{{-- Dynamic Hero Section --}}
<section
    class="relative overflow-hidden {{ !$hasExtractedColors ? $defaultGradientClass : '' }}"
    @if($hasExtractedColors)
        style="{{ $backgroundStyle }}; background: linear-gradient(to bottom right, var(--hero-{{ $isLight ? 'light' : 'dark' }}-start), var(--hero-{{ $isLight ? 'light' : 'dark' }}-mid), var(--hero-{{ $isLight ? 'light' : 'dark' }}-end));"
        x-data
        x-init="
            const heroIsLightTheme = {{ $isLight ? 'true' : 'false' }};
            const updateGradient = () => {
                const isDarkMode = document.documentElement.classList.contains('dark');

                // Dark theme heroes always stay dark
                if (!heroIsLightTheme) {
                    $el.style.background = `linear-gradient(to bottom right, var(--hero-dark-start), var(--hero-dark-mid), var(--hero-dark-end))`;
                }
                // Light theme heroes adapt to system theme
                else if (isDarkMode) {
                    $el.style.background = `linear-gradient(to bottom right, var(--hero-dark-start), var(--hero-dark-mid), var(--hero-dark-end))`;
                } else {
                    $el.style.background = `linear-gradient(to bottom right, var(--hero-light-start), var(--hero-light-mid), var(--hero-light-end))`;
                }
            };
            updateGradient();
            const observer = new MutationObserver(updateGradient);
            observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
        "
    @endif
>

    {{-- Subtle pattern overlay --}}
    <div class="absolute inset-0 {{ $isLight ? 'opacity-30' : 'opacity-10' }}">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle at {{ $isLight ? '1px 1px' : '2px 2px' }}, {{ $isLight ? 'rgba(99, 102, 241, 0.15)' : 'rgba(255,255,255,0.15)' }} 1px, transparent 0); background-size: {{ $isLight ? '40px 40px' : '32px 32px' }};"></div>
    </div>

    {{-- Decorative shapes --}}
    @if($isLight)
        <div class="absolute top-20 right-10 w-72 h-72 rounded-full blur-3xl" style="background-color: {{ $hasExtractedColors ? $hero->extracted_color_primary : 'rgb(199 210 254)' }}; opacity: 0.3;"></div>
        <div class="absolute bottom-10 left-10 w-96 h-96 rounded-full blur-3xl" style="background-color: {{ $hasExtractedColors ? $hero->extracted_color_secondary : 'rgb(191 219 254)' }}; opacity: 0.2;"></div>
    @else
        <div class="absolute top-0 right-0 w-96 h-96 rounded-full blur-3xl" style="background-color: {{ $hasExtractedColors ? $hero->extracted_color_primary : 'rgb(79 70 229)' }}; opacity: 0.2;"></div>
        <div class="absolute bottom-0 left-0 w-72 h-72 rounded-full blur-3xl" style="background-color: {{ $hasExtractedColors ? $hero->extracted_color_secondary : 'rgb(147 51 234)' }}; opacity: 0.2;"></div>
    @endif

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            {{-- Content Side --}}
            <div class="order-2 lg:order-1">
                {{-- Badge --}}
                @if($hero->badge_text)
                    @if($isLight)
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 mb-6">
                            <svg class="w-3.5 h-3.5 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"/>
                            </svg>
                            {{ $hero->badge_text }}
                        </span>
                    @else
                        <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-indigo-500/20 border border-indigo-500/30 mb-6">
                            <span class="relative flex h-2 w-2">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
                            </span>
                            <span class="text-sm font-semibold text-indigo-300">{{ $hero->badge_text }}</span>
                        </div>
                    @endif
                @endif

                {{-- Header --}}
                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold {{ $isLight ? 'text-zinc-900 dark:text-white' : 'text-white' }} leading-tight mb-6">
                    {{ $hero->header }}
                    @if($hero->header_highlight)
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">{{ $hero->header_highlight }}</span>
                    @endif
                </h1>

                {{-- Description --}}
                @if($hero->description)
                    <p class="text-lg sm:text-xl {{ $isLight ? 'text-zinc-600 dark:text-zinc-300' : 'text-zinc-300' }} mb-8 max-w-lg leading-relaxed">
                        {{ $hero->description }}
                    </p>
                @endif

                {{-- Feature Bullets (Dark theme style) --}}
                @if(!$isLight && $featureBullets->isNotEmpty())
                    <div class="grid sm:grid-cols-2 gap-4 mb-8">
                        @foreach($featureBullets as $feature)
                            @php $colors = $feature->color_classes; @endphp
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-xl {{ $colors['bg_light'] }} flex items-center justify-center flex-shrink-0">
                                    <x-safe-icon :name="$feature->icon" class="w-5 h-5 {{ $colors['text'] }}" />
                                </div>
                                <span class="text-zinc-300">{{ $feature->label }}</span>
                            </div>
                        @endforeach
                    </div>
                @endif

                {{-- CTA Buttons --}}
                @if($ctaButtons->isNotEmpty())
                    <div class="flex flex-wrap gap-4">
                        @foreach($ctaButtons as $button)
                            <a href="{{ $button->url ?? '#inventory' }}"
                               class="inline-flex items-center px-8 py-4 text-base font-semibold rounded-xl transition-all duration-300 hover:scale-[1.02]
                                      {{ $button->variant === 'primary'
                                         ? 'text-white bg-gradient-to-r from-indigo-600 to-' . ($isLight ? 'indigo-700' : 'purple-600') . ' hover:from-indigo-500 hover:to-' . ($isLight ? 'indigo-600' : 'purple-500') . ' shadow-lg hover:shadow-xl shadow-indigo-500/25'
                                         : ($button->variant === 'outline'
                                            ? ($isLight ? 'text-zinc-700 dark:text-white bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-700 shadow-sm hover:shadow-md' : 'text-white bg-white/10 border border-white/20 hover:bg-white/20')
                                            : 'text-zinc-700 dark:text-white bg-white dark:bg-zinc-800 shadow-sm hover:shadow-md') }}">
                                {{ $button->label }}
                            </a>
                        @endforeach
                    </div>
                @endif

                {{-- Trust Indicators (Light theme style) --}}
                @if($isLight && $trustIndicators->isNotEmpty())
                    <div class="flex flex-wrap items-center gap-6 mt-10 pt-8 border-t border-zinc-200/50 dark:border-zinc-700/50">
                        @foreach($trustIndicators as $indicator)
                            <div class="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400">
                                <svg class="w-5 h-5 text-green-500" 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"/>
                                </svg>
                                {{ $indicator->label }}
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Image Side --}}
            <div class="order-1 lg:order-2 relative">
                <div class="relative">
                    {{-- Floating Badges --}}
                    @foreach($floatingBadges as $badge)
                        @php
                            $colors = $badge->color_classes;
                            $positionClasses = match($badge->position) {
                                'top-left' => 'absolute -top-4 -left-4 z-20',
                                'top-right' => 'absolute -top-4 -right-4 z-20',
                                'bottom-left' => 'absolute -bottom-4 -left-4 z-20',
                                'bottom-right' => 'absolute -bottom-4 -right-4 z-20',
                                default => 'absolute -top-4 left-4 z-20',
                            };
                        @endphp
                        <div class="{{ $positionClasses }} {{ $isLight ? 'bg-white dark:bg-zinc-800/90 dark:backdrop-blur-sm dark:border dark:border-zinc-700/50 rounded-2xl shadow-xl' : 'bg-zinc-800/90 backdrop-blur-sm border border-zinc-700/50 rounded-xl shadow-xl' }} p-4 {{ $isLight ? 'animate-float' : '' }}">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 {{ $colors['bg'] }} rounded-xl flex items-center justify-center {{ $isLight ? '' : 'text-white font-bold text-xl' }}">
                                    @if($badge->sublabel && !$isLight && is_numeric($badge->sublabel))
                                        {{ $badge->sublabel }}
                                    @else
                                        @php
                                            // Validate icon name - must be alphabetic with optional dashes
                                            $iconName = $badge->icon && is_string($badge->icon) && preg_match('/^[a-z]+(-[a-z]+)*$/', trim($badge->icon))
                                                ? trim($badge->icon)
                                                : 'star';
                                        @endphp
                                        <x-dynamic-component :component="'heroicon-o-' . $iconName" class="w-5 h-5 text-white" />
                                    @endif
                                </div>
                                <div>
                                    <div class="text-xs {{ $isLight ? 'text-zinc-500 dark:text-zinc-400' : 'text-zinc-400' }}">{{ $badge->sublabel }}</div>
                                    <div class="font-bold {{ $isLight ? 'text-zinc-900 dark:text-white' : 'text-white' }}">{{ $badge->label }}</div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    {{-- Product Image --}}
                    <div class="relative z-10 flex items-center justify-center">
                        <div class="relative w-full max-w-md lg:max-w-lg mx-auto">
                            @php
                                $objectFitClass = match($imageFit) {
                                    'contain' => 'object-contain',
                                    'fill' => 'object-fill',
                                    default => 'object-cover',
                                };
                                $showContainer = $hero->show_image_container ?? true;
                            @endphp

                            @if($showContainer)
                                {{-- Square container style --}}
                                <div class="aspect-square {{ $isLight
                                    ? 'bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-700 dark:to-zinc-800'
                                    : 'bg-gradient-to-br from-zinc-700 to-zinc-800' }} rounded-3xl shadow-2xl flex items-center justify-center overflow-hidden {{ !$isLight ? 'border border-zinc-700/50' : '' }}">
                                    @if($imageUrl)
                                        <img src="{{ $imageUrl }}" alt="{{ $hero->header }}" class="w-full h-full object-cover" style="transform: scale({{ $imageZoom / 100 }}); transform-origin: center;" />
                                    @else
                                        <svg class="w-48 h-48 text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    @endif
                                </div>
                            @else
                                {{-- Natural image style (no container) --}}
                                @if($imageUrl)
                                    <img src="{{ $imageUrl }}" alt="{{ $hero->header }}" class="max-w-full h-auto rounded-lg drop-shadow-2xl" style="transform: scale({{ $imageZoom / 100 }}); transform-origin: center;" />
                                @else
                                    <div class="aspect-square w-full {{ $isLight
                                        ? 'bg-gradient-to-br from-zinc-100 to-zinc-200 dark:from-zinc-700 dark:to-zinc-800'
                                        : 'bg-gradient-to-br from-zinc-700 to-zinc-800' }} rounded-3xl flex items-center justify-center">
                                        <svg class="w-48 h-48 text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
                                        </svg>
                                    </div>
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@if($isLight)
<style>
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}
</style>
@endif

@endif {{-- End custom HTML check --}}