@props(['settings'])

@if($settings['hero_enabled'] ?? true)
<section class="relative py-12 lg:py-16 overflow-hidden">
    {{-- Background Glow --}}
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-5xl h-[600px] bg-indigo-500/20 blur-[150px] rounded-full pointer-events-none"
        style="opacity: var(--affiliate-glow);">
    </div>

    <div class="max-w-[1400px] mx-auto px-6 relative z-10">
        <div class="grid lg:grid-cols-2 gap-10 items-center">
            <div class="space-y-10 text-center lg:text-left">
                <div
                    class="inline-flex items-center gap-2.5 px-5 py-2 rounded-full bg-indigo-500/10 border border-indigo-500/30 text-indigo-400 text-[11px] font-black uppercase tracking-[0.2em] animate-fade-in">
                    <span
                        class="w-2 h-2 rounded-full bg-indigo-500 shadow-[0_0_10px_rgba(99,102,241,0.8)] animate-pulse"></span>
                    {{ $settings['hero_eyebrow'] ?? 'Affiliate Program' }}
                </div>

                <h1 class="text-5xl lg:text-8xl font-black text-text-base dark:text-white leading-[1.05] tracking-tight font-bricolage animate-fade-in"
                    style="animation-delay: 100ms">
                    {{ $settings['hero_title'] ?? 'Monetize your audience with our elite partner program' }}
                </h1>

                <p class="text-xl text-text-dim max-w-xl mx-auto lg:mx-0 leading-relaxed font-medium animate-fade-in"
                    style="animation-delay: 200ms">
                    {{ $settings['hero_description'] ?? 'Join thousands of successful partners earning high-ticket
                    commissions by promoting premium digital assets and software.' }}
                </p>

                <div class="flex flex-col sm:flex-row items-center gap-5 pt-6 justify-center lg:justify-start animate-fade-in"
                    style="animation-delay: 300ms">
                    <a href="{{ $settings['hero_primary_url'] ?? route('affiliate.signup') }}"
                        class="group relative px-12 py-6 bg-white text-black rounded-2xl font-black uppercase tracking-[0.2em] text-[13px] overflow-hidden transition-all hover:scale-105 active:scale-95">
                        <span class="relative z-10">{{ $settings['hero_primary_text'] ?? 'Start Earning Now' }}</span>
                        <div
                            class="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
                        </div>
                    </a>
                    @if(!empty($settings['hero_secondary_text']))
                    <a href="{{ $settings['hero_secondary_url'] ?? '#' }}"
                        class="px-12 py-6 bg-surface-primary/5 hover:bg-surface-secondary text-text-base dark:text-white border border-border-subtle rounded-2xl font-black uppercase tracking-[0.2em] text-[13px] transition-all hover:border-border-subtle">
                        {{ $settings['hero_secondary_text'] }}
                    </a>
                    @endif
                </div>
            </div>

            <div class="relative group animate-float">
                <div
                    class="absolute -inset-10 bg-indigo-500/10 opacity-0 group-hover:opacity-100 blur-[80px] rounded-full transition-opacity duration-1000">
                </div>
                <div
                    class="relative bg-neutral-900/30 border border-white/10 rounded-[3rem] p-3 backdrop-blur-2xl shadow-3xl overflow-hidden group-hover:border-indigo-500/20 transition-colors">
                    <img src="{{ $settings['hero_image'] ?? 'https://framerusercontent.com/images/R8XyGZQjUZZ0ZpXN9xI5I5f8.png' }}"
                        alt="Affiliate Dashboard Mockup"
                        class="rounded-[2.5rem] w-full shadow-2xl grayscale-[0.3] group-hover:grayscale-0 transition-all duration-1000 scale-[1.01] group-hover:scale-105">

                    {{-- Decorative Internal Glow --}}
                    <div
                        class="absolute inset-0 bg-gradient-to-tr from-indigo-500/10 via-transparent to-transparent pointer-events-none">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif