<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <title>Digital Studio - @yield('title', 'Home')</title>
    <link rel="icon" type="image/png" href="{{ asset('assets/Digital Studio.svg') }}"/>
    <link href="https://fonts.googleapis.com/css?family=Lexend" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto Mono" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto Flex" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Sora" rel="stylesheet" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
    
    <!-- Preloader CSS -->
    <style>
        /* Preloader Styles */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--background-color);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        
        .preloader-content {
            text-align: center;
        }
        
        .preloader-logo {
            width: 120px;
            height: 120px;
            margin-bottom: 20px;
            animation: pulseEffect 2s infinite ease-in-out;
        }
        
        .preloader-text {
            color: var(--primary-color);
            font-family: 'Lexend', sans-serif;
            font-size: 24px;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }
        
        .loading-bar {
            width: 200px;
            height: 4px;
            background: var(--grey-color);
            border-radius: 2px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .loading-progress {
            height: 100%;
            background: var(--primary-color);
            width: 0%;
            border-radius: 2px;
            transition: width 0.3s ease;
        }
        
        .preloader.hidden {
            opacity: 0;
            visibility: hidden;
        }
    </style>
    
    @stack('styles')
</head>
<body>
    <!-- Preloader -->
    <div id="preloader">
        <div class="preloader-content">
            {{-- <img src="{{ asset('assets/Digital Studio.svg') }}" alt="Digital Studio" class="preloader-logo"> --}}
            <div class="preloader-text">Digital Studio</div>
            <div class="loading-bar">
                <div class="loading-progress" id="loadingProgress"></div>
            </div>
        </div>
    </div>
    
    @include('partials.nav')
    
    @yield('content')
    
    @include('partials.footer')
    
    <!-- Floating WhatsApp Button -->
    <a href="https://wa.me/447123456789?text=Hello%20Bolton%20Studio,%20I'm%20interested%20in%20your%20services" 
       class="whatsapp-float" 
       target="_blank" 
       title="Chat with us on WhatsApp">
        <i class="fab fa-whatsapp"></i>
        <span class="whatsapp-tooltip">Chat with us</span>
    </a>
    
    <!-- Start of Tawk.to Script -->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/671fb6f04304e3196ad9917e/1ib9u5712';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!-- End of Tawk.to Script -->
    
    <script src="{{ asset('js/script.js') }}"></script>
    @stack('scripts')
    
    <!-- Speed Calculation Script -->
    <script>
        // Performance measurement
        window.addEventListener('load', function() {
            // Calculate page load time
            const perfData = window.performance.timing;
            const pageLoadTime = (perfData.loadEventEnd - perfData.navigationStart) / 1000;
            
            // Update speed display
            const speedValue = document.getElementById('pageLoadTime');
            if (speedValue) {
                speedValue.textContent = pageLoadTime.toFixed(2) + 's';
                
                // Color code based on performance
                if (pageLoadTime < 2) {
                    speedValue.style.color = '#4CAF50'; // Green for fast
                } else if (pageLoadTime < 4) {
                    speedValue.style.color = '#FF9800'; // Orange for moderate
                } else {
                    speedValue.style.color = '#F44336'; // Red for slow
                }
            }
            
            // Hide preloader after showing load time
            setTimeout(() => {
                const preloader = document.getElementById('preloader');
                if (preloader) {
                    preloader.classList.add('hidden');
                    
                    // Remove from DOM after animation
                    setTimeout(() => {
                        preloader.style.display = 'none';
                    }, 500);
                }
            }, 500);
        });
        
        // Preloader simulation
        document.addEventListener('DOMContentLoaded', function() {
            let progress = 0;
            const progressBar = document.getElementById('loadingProgress');
            const interval = setInterval(() => {
                progress += Math.random() * 20;
                if (progress > 100) {
                    progress = 100;
                    clearInterval(interval);
                }
                if (progressBar) {
                    progressBar.style.width = progress + '%';
                }
            }, 200);
        });
    </script>
</body>
</html>