<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>دەزگای میدیایی ڕاز</title>

        <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&display=swap" rel="stylesheet" />

        <!-- Styles / Scripts -->
        <script>window.tailwind=window.tailwind||{};window.tailwind.config={darkMode:'class',theme:{extend:{fontFamily:{sans:['IranSans','Inter','ui-sans-serif','system-ui','sans-serif'],kurdish:['IranSans','sans-serif']}}}};</script>
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <script src="{{ asset('js/app.js') }}" defer></script>
        
        <!-- Custom Scrollbar Styles -->
        <style>
            /* Webkit browsers (Chrome, Safari, Edge) */
            ::-webkit-scrollbar {
                width: {{ $colorSettings['scrollbar_width'] ?? '12px' }};
            }
            
            ::-webkit-scrollbar-track {
                background: {{ $colorSettings['scrollbar_track_color'] ?? '#f1f5f9' }};
                border-radius: 6px;
            }
            
            ::-webkit-scrollbar-thumb {
                background: {{ $colorSettings['scrollbar_thumb_color'] ?? '#cbd5e1' }};
                border-radius: 6px;
                border: 2px solid {{ $colorSettings['scrollbar_track_color'] ?? '#f1f5f9' }};
            }
            
            ::-webkit-scrollbar-thumb:hover {
                background: {{ $colorSettings['scrollbar_thumb_hover_color'] ?? '#94a3b8' }};
            }
            
            /* Firefox */
            * {
                scrollbar-width: {{ $colorSettings['scrollbar_width'] ?? '12px' }};
                scrollbar-color: {{ $colorSettings['scrollbar_thumb_color'] ?? '#cbd5e1' }} {{ $colorSettings['scrollbar_track_color'] ?? '#f1f5f9' }};
            }

            /* Beautiful Page Loader Styles */
            .page-loader {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(135deg, #38424c 0%, #a3a9b0 100%);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;
                overflow: hidden;
            }

            .loader-background {
                position: absolute;
                inset: 0;
                overflow: hidden;
            }

            .gradient-orb {
                position: absolute;
                border-radius: 50%;
                filter: blur(40px);
                opacity: 0.6;
                animation: float 6s ease-in-out infinite;
            }

            .orb-1 {
                width: 300px;
                height: 300px;
                background: linear-gradient(45deg, #38424c, #a3a9b0);
                top: 10%;
                left: 10%;
                animation-delay: 0s;
            }

            .orb-2 {
                width: 250px;
                height: 250px;
                background: linear-gradient(45deg, #a3a9b0, #38424c);
                top: 60%;
                right: 10%;
                animation-delay: 2s;
            }

            .orb-3 {
                width: 200px;
                height: 200px;
                background: linear-gradient(45deg, #38424c, #a3a9b0);
                bottom: 10%;
                left: 50%;
                animation-delay: 4s;
            }

            @keyframes float {
                0%, 100% { transform: translateY(0px) rotate(0deg); }
                33% { transform: translateY(-20px) rotate(120deg); }
                66% { transform: translateY(20px) rotate(240deg); }
            }

            .loader-content {
                position: relative;
                z-index: 10;
                text-align: center;
                color: white;
            }

            .logo-container {
                position: relative;
                margin-bottom: 2rem;
            }



            .loader-logo {
                width: 80px;
                height: 80px;
                object-fit: contain;
                background: linear-gradient(45deg, #38424c, #353b49);
                border-radius: 50%;
                padding: 15px;
                animation: logo-bounce 2s ease-in-out infinite;
            }

            @keyframes logo-bounce {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
            }

            .brand-text {
                margin-bottom: 3rem;
            }

            .brand-title {
                font-size: 3.5rem;
                font-weight: 800;
                margin-bottom: 0.5rem;
                background: linear-gradient(45deg, #ffffff, #a3a9b0);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            }

            .brand-subtitle {
                font-size: 1.1rem;
                opacity: 0.9;
                font-weight: 300;
                letter-spacing: 2px;
            }

            .loading-indicator {
                margin-bottom: 2rem;
            }

            .progress-ring {
                position: relative;
                width: 120px;
                height: 120px;
                margin: 0 auto;
            }

            .progress-svg {
                width: 100%;
                height: 100%;
                transform: rotate(-90deg);
            }

            .progress-bg {
                fill: none;
                stroke: rgba(255, 255, 255, 0.2);
                stroke-width: 8;
            }

            .progress-bar {
                fill: none;
                stroke: #a3a9b0;
                stroke-width: 8;
                stroke-linecap: round;
                stroke-dasharray: 339.292;
                stroke-dashoffset: 339.292;
                animation: progress-animation 2s ease-in-out forwards;
            }

            @keyframes progress-animation {
                to {
                    stroke-dashoffset: 0;
                }
            }

            .progress-text {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 1.2rem;
                font-weight: 600;
                color: white;
            }

            .floating-elements {
                position: absolute;
                inset: 0;
                pointer-events: none;
            }

            .float-element {
                position: absolute;
                width: 8px;
                height: 8px;
                background: #a3a9b0;
                border-radius: 50%;
                opacity: 0.7;
                animation: float-element 3s ease-in-out infinite;
            }

            .fe-1 {
                top: 20%;
                left: 20%;
                animation-delay: 0s;
            }

            .fe-2 {
                top: 30%;
                right: 25%;
                animation-delay: 0.5s;
            }

            .fe-3 {
                bottom: 25%;
                left: 30%;
                animation-delay: 1s;
            }

            .fe-4 {
                bottom: 35%;
                right: 20%;
                animation-delay: 1.5s;
            }

            @keyframes float-element {
                0%, 100% {
                    transform: translateY(0px) scale(1);
                    opacity: 0.7;
                }
                50% {
                    transform: translateY(-20px) scale(1.2);
                    opacity: 1;
                }
            }

            /* Loader exit animation */
            .page-loader.fade-out {
                animation: fade-out 0.5s ease-out forwards;
            }

            @keyframes fade-out {
                to {
                    opacity: 0;
                    transform: scale(1.1);
                }
            }

            /* Responsive adjustments */
            @media (max-width: 768px) {
                .brand-title {
                    font-size: 2.5rem;
                }
                
                .brand-subtitle {
                    font-size: 1rem;
                }
                
                .loader-logo {
                    width: 60px;
                    height: 60px;
                }
                
                .logo-ring:nth-child(1) {
                    width: 90px;
                    height: 90px;
                    top: -45px;
                    left: -45px;
                }
                
                .logo-ring:nth-child(2) {
                    width: 120px;
                    height: 120px;
                    top: -60px;
                    left: -60px;
                }
                
                .logo-ring:nth-child(3) {
                    width: 150px;
                    height: 150px;
                    top: -75px;
                    left: -75px;
                }
            }
        </style>
    </head>
<body class="font-sans antialiased" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
    <div class="min-h-screen" style="{{ $backgroundCss ?? 'background-color: #f3f4f6;' }}">
    <!-- Amazing Page Loader -->
    <div id="pageLoader" class="page-loader">
        <div class="loader-background">
            <div class="gradient-orb orb-1"></div>
            <div class="gradient-orb orb-2"></div>
            <div class="gradient-orb orb-3"></div>
        </div>
        
        <div class="loader-content">
            <div class="logo-container">
                <img src="{{ asset('IMG/raz1.png') }}" alt="Raz Logo" class="loader-logo">
            </div>
            
            <div class="brand-text">
                <h1 class="brand-title">دەزگای میدیایی ڕاز</h1>
                <p class="brand-subtitle">چاودێری و پاڵپشتی و یەکڕیزی</p>
            </div>
            
            <div class="loading-indicator">
                <div class="progress-ring">
                    <svg class="progress-svg" viewBox="0 0 120 120">
                        <circle class="progress-bg" cx="60" cy="60" r="54"></circle>
                        <circle class="progress-bar" cx="60" cy="60" r="54"></circle>
                    </svg>
                    <div class="progress-text">0%</div>
                </div>
            </div>
            
            <div class="floating-elements">
                <div class="float-element fe-1"></div>
                <div class="float-element fe-2"></div>
                <div class="float-element fe-3"></div>
                <div class="float-element fe-4"></div>
            </div>
        </div>
    </div>
            <!-- Navigation -->
        <nav class="fixed top-0 w-full backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-700/50 z-50" dir="rtl" style="{{ $navbarCss ?? 'background-color: #ffffff; color: #374151;' }}">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-18">

                
                <!-- Left side - Navigation Links (appears on left due to RTL) -->
                <div class="hidden md:flex items-center gap-8 order-1">
                                            <a href="#home" class="transition-all duration-300 font-medium py-2 px-3 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">سەرەتا</a>
                        <a href="#about" class="transition-all duration-300 font-medium py-2 px-3 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">دەربارە</a>
                    
                    <!-- Categories Dropdown -->
                    <div class="relative group">
                                                    <button class="flex items-center gap-2 transition-all duration-300 font-medium py-2 px-3 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">
                            بەشەکان
                            <svg class="w-4 h-4 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        
                        <!-- Dropdown Menu -->
                        <div class="absolute right-0 mt-2 w-80 rounded-2xl shadow-xl border opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform translate-y-2 group-hover:translate-y-0 z-50" 
                             style="background-color: {{ $colorSettings['navbar_background'] ?? '#ffffff' }}; border-color: {{ $colorSettings['navbar_background'] ?? '#ffffff' }};">
                            <div class="p-4">
                                <div class="text-sm mb-3 font-medium" style="color: {{ $colorSettings['navbar_text_color'] ?? '#6b7280' }};">هەموو بەشەکان</div>
                                <div class="grid grid-cols-1 gap-2 max-h-96 overflow-y-auto">
                                    @foreach($categories as $category)
                                        <a href="{{ route('category.show', $category->slug) }}" class="group/item flex items-center gap-3 p-3 rounded-xl transition-all duration-200" 
                                           style="color: {{ $colorSettings['navbar_text_color'] ?? '#1f2937' }};" 
                                           onmouseover="this.style.backgroundColor='{{ $colorSettings['navbar_hover_color'] ?? '#f3f4f6' }}'" 
                                           onmouseout="this.style.backgroundColor='transparent'">
                                            <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold flex-shrink-0" style="background-color: {{ $category->color }}">
                                                @if($category->is_icon_url)
                                                    <img src="{{ $category->icon }}" alt="{{ $category->name }}" class="w-full h-full object-cover rounded-lg" />
                                                @elseif($category->icon)
                                                    {{ $category->icon }}
                                                @else
                                                    {{ substr($category->name, 0, 1) }}
                                                @endif
                                            </div>
                                            <div class="flex-1 min-w-0">
                                                <div class="font-medium transition-colors duration-200" style="color: {{ $colorSettings['navbar_text_color'] ?? '#1f2937' }};">{{ $category->name }}</div>
                                                @if($category->description)
                                                    <div class="text-xs mt-1 truncate" style="color: {{ $colorSettings['navbar_text_color'] ?? '#6b7280' }}; opacity: 0.7;">{{ $category->description }}</div>
                                                @endif
                                            </div>
                                            <svg class="w-4 h-4 transition-colors duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: {{ $colorSettings['navbar_text_color'] ?? '#9ca3af' }};">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                            </svg>
                                        </a>
                                    @endforeach
                                </div>
                                <div class="mt-4 pt-3 border-t transition-colors duration-200" style="border-color: {{ $colorSettings['navbar_text_color'] ?? '#e5e7eb' }}; opacity: 0.3;">
                                    <a href="{{ route('categories') }}" class="flex items-center justify-center gap-2 w-full py-2 px-4 rounded-xl transition-all duration-200 font-medium" 
                                       style="background: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }}; color: {{ $colorSettings['navbar_text_color'] ?? '#ffffff' }};" 
                                       onmouseover="this.style.background='{{ $colorSettings['navbar_hover_color'] ?? '#2563eb' }}'" 
                                       onmouseout="this.style.background='{{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }}'">
                                        دیتنی هەموو بەشەکان
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="w-px h-6 bg-gray-300 dark:bg-gray-600"></div>
                    <a href="{{ route('contact') }}" class="transition-all duration-300 font-medium py-2 px-3 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">پەیوەندی</a>
                </div>
                <!-- Right side - Logo with image (appears on right due to RTL) -->
                <div class="flex items-center gap-3 order-2">
                    <img src="{{ asset('IMG/raz1.png') }}" alt="Raz Logo" class="h-12 w-12 object-contain">
                </div>
                <!-- Mobile menu button -->
                <div class="md:hidden order-1">
                    <button onclick="toggleMobileMenu()" class="focus:outline-none p-2" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">
                        <svg id="menuIcon" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                        </svg>
                        <svg id="closeIcon" class="h-6 w-6 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
            
            <!-- Mobile menu -->
            <div id="mobileMenu" class="md:hidden hidden border-t border-gray-200 dark:border-gray-700" style="background-color: {{ $colorSettings['navbar_background'] ?? '#ffffff' }};">
                <div class="px-4 py-3 space-y-2">
                    <a href="#home" class="block py-2 font-medium" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">سەرەتا</a>
                    <a href="#about" class="block py-2 font-medium" style="color: {{ $colorSettings['navbar_text_color'] ?? '#374151' }}; hover:color: {{ $colorSettings['navbar_hover_color'] ?? '#3b82f6' }};">دەربارە</a>
                    
                    <!-- Mobile Categories Dropdown -->
                    <div class="py-2">
                        <button onclick="toggleMobileCategoriesDropdown()" class="flex items-center justify-between w-full text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium">
                            بەشەکان
                            <svg id="mobileDropdownIcon" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                        <div id="mobileCategoriesDropdown" class="hidden mt-2 space-y-1 pr-4">
                            @foreach($categories as $category)
                                <a href="{{ route('category.show', $category->slug) }}" class="flex items-center gap-2 py-2 px-3 text-sm text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800">
                                    <div class="w-6 h-6 rounded flex items-center justify-center text-white text-xs font-bold" style="background-color: {{ $category->color }}">
                                        @if($category->is_icon_url)
                                            <img src="{{ $category->icon }}" alt="{{ $category->name }}" class="w-full h-full object-cover rounded" />
                                        @elseif($category->icon)
                                            {{ $category->icon }}
                                        @else
                                            {{ substr($category->name, 0, 1) }}
                                        @endif
                                    </div>
                                    {{ $category->name }}
                                </a>
                            @endforeach
                            <a href="{{ route('categories') }}" class="block py-2 px-3 text-sm text-blue-600 dark:text-blue-400 font-medium rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/20">
                                دیتنی هەموو بەشەکان →
                            </a>
                        </div>
                    </div>
                    
                    <a href="{{ route('contact') }}" class="block text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 py-2 font-medium">پەیوەندی</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="pt-16 min-h-screen flex items-center relative overflow-hidden">
        <!-- Background Pattern -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 left-10 w-72 h-72 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl animate-pulse"></div>
            <div class="absolute top-0 right-4 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-2000"></div>
            <div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl animate-pulse animation-delay-4000"></div>
        </div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <!-- Left Content -->
                <div class="space-y-8">
                    <div class="space-y-6">
                        <h1 class="text-5xl lg:text-7xl font-bold leading-tight">
                            <span class="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
                                {{ \App\Models\WebsiteContent::getContent('hero_title', 'Welcome to Raz') }}
                            </span>
                            @if(\App\Models\WebsiteContent::getContent('hero_subtitle'))
                                <br>
                                <span class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
                                    {{ \App\Models\WebsiteContent::getContent('hero_subtitle', 'Your Amazing Digital Experience') }}
                                </span>
                            @endif
                        </h1>
                        <p class="text-xl max-w-2xl leading-relaxed" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
                            {{ \App\Models\WebsiteContent::getContent('hero_description', 'Discover cutting-edge solutions and innovative services that transform the way you work, learn, and connect with the world.') }}
                        </p>
                    </div>
                    
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="{{ route('about') }}" class="px-8 py-4 rounded-xl transition-all duration-200 font-semibold shadow-xl hover:shadow-2xl transform hover:-translate-y-1" 
                           style="background-color: {{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_bg'] ?? '#3b82f6' }}; color: {{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_text'] ?? '#ffffff' }};"
                           onmouseover="this.style.backgroundColor='{{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_hover_bg'] ?? '#2563eb' }}'"
                           onmouseout="this.style.backgroundColor='{{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_bg'] ?? '#3b82f6' }}'">
                            دەربارە
                        </a>
                        <a href="{{ route('categories') }}" class="px-8 py-4 rounded-xl transition-all duration-200 font-semibold shadow-xl hover:shadow-2xl transform hover:-translate-y-1"
                           style="background-color: {{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_bg'] ?? '#3b82f6' }}; color: {{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_text'] ?? '#ffffff' }};"
                           onmouseover="this.style.backgroundColor='{{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_hover_bg'] ?? '#2563eb' }}'"
                           onmouseout="this.style.backgroundColor='{{ $colorSettings['button' . substr($colorSettings['button_style'] ?? 'style1', -1) . '_bg'] ?? '#3b82f6' }}'">
                            بەشەکان
                        </a>
                    </div>

                </div>
                
                <!-- Right Side - Logo -->
                <div class="flex justify-center lg:justify-end">
                    <div class="relative">
                        <!-- Animated background circle -->
                        <div class="absolute inset-0 bg-gradient-to-r from-dark-400 to-gray-600 rounded-full animate-pulse blur-2xl opacity-30" style="background-color: {{ $colorSettings['floating_element1_color'] ?? '#3b82f6' }};"></div>
                        
                        <!-- Logo container -->
                        <div class="relative bg-white dark:bg-gray-800 p-8 rounded-full shadow-2xl">
                            <img src="{{ asset('IMG/raz1.png') }}" alt="Raz Logo" class="w-64 h-64 object-contain animate-bounce-slow">
                        </div>
                        
                        <!-- Floating elements -->
                        <div class="absolute -top-4 -right-4 w-8 h-8 rounded-full animate-ping shadow-lg" style="background-color: {{ $colorSettings['floating_element1_color'] ?? '#3b82f6' }}; z-index: 10;"></div>
                        <div class="absolute -bottom-4 -left-4 w-6 h-6 rounded-full animate-pulse shadow-lg" style="background-color: {{ $colorSettings['floating_element2_color'] ?? '#8b5cf6' }}; z-index: 10;"></div>
                        <div class="absolute top-1/2 -left-8 w-4 h-4 rounded-full animate-bounce shadow-lg" style="background-color: {{ $colorSettings['floating_element3_color'] ?? '#ec4899' }}; z-index: 10;"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- About Section -->
    <section id="about" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div class="text-center mb-16">
                    <h2 class="text-4xl lg:text-5xl font-bold mb-6">
                        <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">{{ \App\Models\WebsiteContent::getContent('about_title', 'About Raz') }}</span>
                        @if(\App\Models\WebsiteContent::getContent('about_subtitle'))
                            <br>
                            <span style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">{{ \App\Models\WebsiteContent::getContent('about_subtitle', 'Innovation Meets Excellence') }}</span>
                        @endif
                    </h2>
                    <p class="text-xl max-w-3xl mx-auto" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
                        {{ \App\Models\WebsiteContent::getContent('about_description', 'We are dedicated to providing exceptional digital experiences through cutting-edge technology and innovative solutions. Our team combines creativity with technical expertise to deliver results that exceed expectations.') }}
                    </p>
                </div>
            
            <div class="grid lg:grid-cols-3 gap-8">
                @php
                    $currentStyle = $colorSettings['button_style'] ?? 'style1';
                    $styleNumber = substr($currentStyle, -1);
                @endphp
                
                <!-- Feature 1 -->
                <div class="p-8 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" 
                     style="background-color: {{ $colorSettings['feature1_bg_' . $currentStyle] ?? '#dbeafe' }};">
                    <div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-6 mx-auto" style="background-color: {{ $colorSettings['feature1_icon_color'] ?? '#3b82f6' }};">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center" style="color: {{ $colorSettings['feature1_text_' . $currentStyle] ?? '#1e40af' }};"> {{ \App\Models\WebsiteContent::getContent('feature_1_title') }} </h3>
                    <p class="text-center" style="color: {{ $colorSettings['feature1_text_' . $currentStyle] ?? '#1e40af' }};"> {{ \App\Models\WebsiteContent::getContent('feature_1_description') }} </p>
                </div>
                
                <!-- Feature 2 -->
                <div class="p-8 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" 
                     style="background-color: {{ $colorSettings['feature2_bg_' . $currentStyle] ?? '#ede9fe' }};">
                    <div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-6 mx-auto" style="background-color: {{ $colorSettings['feature2_icon_color'] ?? '#7c3aed' }};">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center" style="color: {{ $colorSettings['feature2_text_' . $currentStyle] ?? '#7c3aed' }};"> {{ \App\Models\WebsiteContent::getContent('feature_2_title') }} </h3>
                    <p class="text-center" style="color: {{ $colorSettings['feature2_text_' . $currentStyle] ?? '#7c3aed' }};"> {{ \App\Models\WebsiteContent::getContent('feature_2_description') }} </p>
                </div>
                
                <!-- Feature 3 -->
                <div class="p-8 rounded-2xl hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2" 
                     style="background-color: {{ $colorSettings['feature3_bg_' . $currentStyle] ?? '#fce7f3' }};">
                    <div class="w-16 h-16 rounded-2xl flex items-center justify-center mb-6 mx-auto" style="background-color: {{ $colorSettings['feature3_icon_color'] ?? '#be185d' }};">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-4 text-center" style="color: {{ $colorSettings['feature3_text_' . $currentStyle] ?? '#be185d' }};"> {{ \App\Models\WebsiteContent::getContent('feature_3_title') }} </h3>
                    <p class="text-center" style="color: {{ $colorSettings['feature3_text_' . $currentStyle] ?? '#be185d' }};"> {{ \App\Models\WebsiteContent::getContent('feature_3_description') }} </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    <section id="categories" class="py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                            <div class="text-center mb-16">
                    <h2 class="text-4xl lg:text-5xl font-bold mb-6">
                        <span style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">Our</span>
                        <span class="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">Categories</span>
                    </h2>
                    <p class="text-xl max-w-3xl mx-auto" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">
                        Explore our diverse range of services and solutions designed to meet every need.
                    </p>
                </div>

            <div class="grid lg:grid-cols-2 xl:grid-cols-4 gap-8">
                @foreach($categories as $category)
                    <a href="{{ route('category.show', $category->slug) }}" class="group cursor-pointer block">
                        <div class="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-4 h-full">
                            <div class="w-20 h-20 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300 text-white text-3xl overflow-hidden" style="background-color: {{ $category->color }}">
                                @if($category->is_icon_url)
                                    <img src="{{ $category->icon }}" alt="{{ $category->name }}" class="w-full h-full object-cover rounded-2xl" />
                                @elseif($category->icon)
                                    {{ $category->icon }}
                                @else
                                    {{ substr($category->name, 0, 1) }}
        @endif
                            </div>
                                                            <h3 class="text-2xl font-bold mb-4" style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};">{{ $category->name }}</h3>
                                <p style="color: {{ $colorSettings['text_color'] ?? '#1f2937' }};" class="mb-6">{{ $category->description ?: 'Discover amazing content in this category.' }}</p>
                            <div class="font-semibold group-hover:opacity-80 transition-all duration-300" style="color: {{ $category->color }}">View Videos →</div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="text-white py-12">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h3 class="text-2xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
                    Raz
                </h3>
                <p class="text-gray-400 mb-6">Pretty Cool • Amazing • Modern</p>
                <div class="flex justify-center space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Privacy</a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Terms</a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">Support</a>
                </div>
                <div class="mt-8 pt-8 border-t border-gray-800 text-gray-400 text-sm">
                    © 2024 Raz. All rights reserved.
                </div>
            </div>
        </div>
    </footer>

    <script>
    // Beautiful Page Loader with Progress
    window.addEventListener('load', function() {
        const loader = document.getElementById('pageLoader');
        const progressBar = document.querySelector('.progress-bar');
        const progressText = document.querySelector('.progress-text');
        
        if (loader) {
            // Simulate progress loading
            let progress = 0;
            const progressInterval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress > 100) progress = 100;
                
                // Update progress bar
                const circumference = 2 * Math.PI * 54; // r=54
                const offset = circumference - (progress / 100) * circumference;
                progressBar.style.strokeDashoffset = offset;
                
                // Update progress text
                progressText.textContent = Math.round(progress) + '%';
                
                // When progress reaches 100%, start exit animation
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    
                    // Add fade-out class for smooth exit
                    setTimeout(() => {
                        loader.classList.add('fade-out');
                        
                        // Remove loader from DOM after animation
                        setTimeout(() => {
                            loader.remove();
                        }, 500);
                    }, 500); // Wait 500ms at 100% before fading out
                }
            }, 100); // Update every 100ms for smooth animation
        }
    });

    // Initialize page
    document.addEventListener('DOMContentLoaded', function() {
        // Ensure body is visible
        document.body.style.opacity = '1';
        document.body.style.visibility = 'visible';
    });
    
    function toggleMobileMenu() {
        const mobileMenu = document.getElementById('mobileMenu');
        const menuIcon = document.getElementById('menuIcon');
        const closeIcon = document.getElementById('closeIcon');
        
        if (mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.remove('hidden');
            menuIcon.classList.add('hidden');
            closeIcon.classList.remove('hidden');
        } else {
            mobileMenu.classList.add('hidden');
            menuIcon.classList.remove('hidden');
            closeIcon.classList.add('hidden');
        }
    }
    
    function toggleMobileCategoriesDropdown() {
        const dropdown = document.getElementById('mobileCategoriesDropdown');
        const icon = document.getElementById('mobileDropdownIcon');
        
        if (dropdown.classList.contains('hidden')) {
            dropdown.classList.remove('hidden');
            icon.style.transform = 'rotate(180deg)';
        } else {
            dropdown.classList.add('hidden');
            icon.style.transform = 'rotate(0deg)';
        }
    }
    </script>
    </div>
    </body>
</html>
