@extends("front.layout")

@section("content")
<style>
    a {
        color: {{getSetting('primary_color').'!important'}};
    }
    
    /* Add some animation styles */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .celebration-text {
        animation: fadeIn 1.5s ease-in-out;
    }
    
    .celebrate-icon {
        display: inline-block;
        animation: bounce 1s infinite alternate;
    }
    
    @keyframes bounce {
        from { transform: scale(1); }
        to { transform: scale(1.2); }
    }
</style>

<!-- Import confetti library from CDN -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>

<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <img class="img-fluid" src="{{ asset(session('logo', getSetting('logo'))) }}" alt="Loancamp" style="height:40px;">
            </div>
            <div class="col-lg-6">
                <div class="h-100">
                    <h6 class="display-6 pb-3 celebration-text">
                        Thank you for signing up for {{getSetting('app_name')}}!
                    </h6>
                    <p class="pt-2 celebration-text">
                        You're one step closer to getting instant refinance opportunity alerts. <br> 
                        <a href="{{route('login')}}">Login now </a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div><!-- About End -->

<script>
    // Trigger confetti when the page loads
    document.addEventListener('DOMContentLoaded', function() {
        // Launch initial confetti burst from top of page
        confetti({
            particleCount: 150,
            spread: 180,
            origin: { y: 0, x: 0.5 },
            gravity: 1.2,
            startVelocity: 30
        });
        
        // Create a more continuous celebration effect with multiple bursts from top
        setTimeout(function() {
            confetti({
                particleCount: 80,
                spread: 150,
                origin: { y: 0, x: 0.2 },
                gravity: 1,
                startVelocity: 25
            });
        }, 700);
        
        setTimeout(function() {
            confetti({
                particleCount: 80,
                spread: 150,
                origin: { y: 0, x: 0.8 },
                gravity: 1,
                startVelocity: 25
            });
        }, 2000);
    });
</script>
@endsection