@props(['settings'])

@if($settings['calc_enabled'] ?? true)
<section class="py-12 overflow-hidden relative" x-data="{
    clicks_val: {{ $settings['calc_default_clicks'] ?? 1000 }},
    cr_val: {{ $settings['calc_default_cr'] ?? 2 }},
    aov_val: {{ $settings['calc_default_aov'] ?? 97 }},
    com_val: {{ $settings['calc_default_commission'] ?? 30 }},
    display_monthly: 0,
    update() {
        let conversions = Math.round(this.clicks_val * (this.cr_val / 100));
        let monthly = Math.round(conversions * this.aov_val * (this.com_val / 100));
        this.display_monthly = monthly;
    }
}"
    x-init="update(); $watch('clicks_val', () => update()); $watch('cr_val', () => update()); $watch('aov_val', () => update()); $watch('com_val', () => update())">

    <style>
        .range-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 24px;
            height: 24px;
            background: white;
            border: 4px solid #6366f1;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
            transition: 0.2s;
        }

        .range-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            background: #6366f1;
            border-color: white;
        }
    </style>

    {{-- Decorative Background Elements --}}
    <div
        class="absolute -right-[10%] top-0 w-full max-w-xl h-full bg-indigo-500/5 blur-[150px] rounded-full pointer-events-none">
    </div>
    <div
        class="absolute -left-[10%] bottom-0 w-full max-w-xl h-full bg-blue-500/5 blur-[150px] rounded-full pointer-events-none">
    </div>

    <div class="max-w-[1200px] mx-auto px-6 relative z-10">
        <div class="bg-neutral-900/40 border border-white/5 rounded-[4rem] p-8 lg:p-20 backdrop-blur-3xl shadow-3xl">
            <div class="grid lg:grid-cols-2 gap-10 items-center">
                <div class="space-y-12">
                    <div class="space-y-4 text-center lg:text-left">
                        <h2
                            class="text-5xl lg:text-7xl font-black text-white font-bricolage tracking-tight leading-[1.05]">
                            Estimate your potential
                        </h2>
                        <p class="text-text-dim font-medium text-xl leading-relaxed max-w-xl">
                            Use our interactive calculator to see how much you could earn as a partner. Start building
                            your recurring revenue stream today.
                        </p>
                    </div>

                    <div class="space-y-12">
                        <div class="space-y-6">
                            <div
                                class="flex justify-between text-[11px] font-black uppercase tracking-[0.2em] text-text-dim px-1">
                                <span>Monthly Traffic (Clicks)</span>
                                <span class="text-white font-mono text-lg" x-text="clicks_val.toLocaleString()"></span>
                            </div>
                            <div class="relative flex items-center">
                                <input type="range" x-model="clicks_val" min="100" max="100000" step="100"
                                    class="range-slider w-full h-1.5 bg-white/10 rounded-lg appearance-none cursor-pointer">
                            </div>
                        </div>

                        <div class="space-y-6">
                            <div
                                class="flex justify-between text-[11px] font-black uppercase tracking-[0.2em] text-text-dim px-1">
                                <span>Average Conversion Rate</span>
                                <span class="text-white font-mono text-lg" x-text="cr_val + '%'"></span>
                            </div>
                            <div class="relative flex items-center">
                                <input type="range" x-model="cr_val" min="0.1" max="15" step="0.1"
                                    class="range-slider w-full h-1.5 bg-white/10 rounded-lg appearance-none cursor-pointer">
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-8 pt-4">
                            <div class="space-y-4">
                                <label
                                    class="text-[11px] font-black uppercase tracking-[0.2em] text-neutral-600 block px-2">Avg
                                    Order Value</label>
                                <div class="relative group">
                                    <span
                                        class="absolute left-6 top-1/2 -translate-y-1/2 text-text-dim font-black">$</span>
                                    <input type="number" x-model="aov_val"
                                        class="w-full bg-white/5 border border-white/10 rounded-3xl py-6 pl-10 pr-6 text-white font-black outline-none focus:border-indigo-500/50 transition-all focus:bg-white/10 text-lg">
                                </div>
                            </div>
                            <div class="space-y-4">
                                <label
                                    class="text-[11px] font-black uppercase tracking-[0.2em] text-neutral-600 block px-2">Commission
                                    %</label>
                                <div class="relative group">
                                    <span
                                        class="absolute right-6 top-1/2 -translate-y-1/2 text-text-dim font-black">%</span>
                                    <input type="number" x-model="com_val"
                                        class="w-full bg-white/5 border border-white/10 rounded-3xl py-6 pl-6 pr-10 text-white font-black outline-none focus:border-indigo-500/50 transition-all focus:bg-white/10 text-lg">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="relative">
                    <div class="space-y-8">
                        <div
                            class="p-16 bg-indigo-600 rounded-[4rem] shadow-[0_40px_100px_-15px_rgba(79,70,229,0.4)] text-center relative overflow-hidden group">
                            <div
                                class="absolute inset-0 bg-gradient-to-tr from-white/0 via-white/5 to-white/15 opacity-0 group-hover:opacity-100 transition-opacity">
                            </div>
                            <h4 class="text-xs font-black uppercase tracking-[0.3em] text-indigo-100/60 mb-6">Estimated
                                Monthly Income</h4>
                            <div class="text-7xl lg:text-9xl font-black text-white font-bricolage tracking-tighter">
                                $<span x-text="display_monthly.toLocaleString()"></span>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-8">
                            <div
                                class="p-10 bg-neutral-900/40 border border-white/5 rounded-[3rem] text-center backdrop-blur-3xl hover:border-white/10 transition-colors">
                                <h4 class="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-600 mb-4">
                                    Yearly Potential</h4>
                                <div class="text-4xl font-black text-white font-bricolage">$<span
                                        x-text="(display_monthly * 12).toLocaleString()"></span></div>
                            </div>
                            <div
                                class="p-10 bg-neutral-900/40 border border-white/5 rounded-[3rem] text-center backdrop-blur-3xl hover:border-white/10 transition-colors">
                                <h4 class="text-[10px] font-black uppercase tracking-[0.2em] text-neutral-600 mb-4">Est.
                                    Monthly Sales</h4>
                                <div class="text-4xl font-black text-white font-bricolage"><span
                                        x-text="Math.round(clicks_val * (cr_val / 100)).toLocaleString()"></span></div>
                            </div>
                        </div>

                        <div class="pt-4">
                            <a href="{{ route('affiliate.signup') }}"
                                class="block w-full text-center py-6 bg-white text-black rounded-[2rem] font-black uppercase tracking-[0.2em] text-[13px] hover:bg-neutral-100 transition-all hover:scale-105 shadow-xl">
                                Join to Start Earning
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif