<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}" dir="{{ locale_direction() }}" class="scroll-smooth" data-theme-scope="public">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'Nivex' }}</title>
    <meta name="description" content="Nivex builds software, systems, and digital growth experiences.">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
    <script>
        (() => {
            document.documentElement.classList.add('dark');
            localStorage.setItem('nivex-theme', 'dark');
        })();
    </script>
    <link rel="stylesheet" href="{{ asset('build/assets/app-DC79b1AS.css') }}">
    <link rel="stylesheet" href="{{ asset('build/assets/app-DvB2Xm2x.css') }}">
    <script type="module" src="{{ asset('build/assets/app-Iyknztod.js') }}"></script>
</head>
<body class="public-site {{ locale_font_class() }} overflow-x-hidden">
    <div class="pointer-events-none fixed inset-0 -z-10 bg-[radial-gradient(circle_at_top_left,rgba(79,152,255,0.18),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(139,214,191,0.18),transparent_30%),linear-gradient(180deg,rgba(255,255,255,0.8),rgba(251,247,239,1))] dark:bg-[radial-gradient(circle_at_top_left,rgba(79,152,255,0.12),transparent_35%),radial-gradient(circle_at_bottom_right,rgba(239,131,84,0.12),transparent_35%),linear-gradient(180deg,#09111f,#050914)]"></div>
    <div class="pointer-events-none fixed inset-0 -z-10 bg-grid opacity-50"></div>

    <header class="sticky top-0 z-50 border-b border-white/40 bg-white/65 backdrop-blur-2xl dark:border-white/10 dark:bg-slate-950/55">
        <div class="shell flex items-center justify-between gap-4 py-4">
            <a href="{{ route('home') }}" class="flex items-center gap-3">
                <img src="{{ asset('images/logo Nivex All.png') }}" alt="Nivex" class="shrink-0 object-contain" style="height: 100px; width: 200px;">
            </a>

            <nav class="flex items-center gap-6">
                @foreach ([['label' => __('Home'), 'route' => 'home'], ['label' => __('About'), 'route' => 'about'], ['label' => __('Services'), 'route' => 'services'], ['label' => __('Industries'), 'route' => 'industries'], ['label' => __('Clients'), 'route' => 'clients'], ['label' => __('Contact'), 'route' => 'contact']] as $item)
                    <a href="{{ route($item['route']) }}" class="nav-link {{ request()->routeIs($item['route']) ? 'is-active' : '' }}">{{ $item['label'] }}</a>
                @endforeach
            </nav>

            <div class="flex items-center gap-2 sm:gap-3">
                <form method="POST" action="{{ route('locale.update', app()->getLocale() === 'ar' ? 'en' : 'ar') }}">
                    @csrf
                    <button type="submit" class="btn-secondary px-4 py-2">{{ locale_switch_label() }}</button>
                </form>

                <a href="{{ route('contact') }}" class="btn-primary hidden sm:inline-flex">{{ __('Contact') }}</a>
            </div>
        </div>
    </header>

    <main>
        @yield('content')
    </main>

    <footer class="mt-20 border-t border-slate-200/70 bg-white/70 py-16 dark:border-white/10 dark:bg-white/5">
        <div class="shell grid gap-10 md:grid-cols-2 xl:grid-cols-4">
            <div>
                <div class="flex items-center gap-3">
                    <img src="{{ asset('images/logo Nivex All.png') }}" alt="Nivex" class="h-7 w-auto shrink-0 object-contain">
                </div>
                <p class="mt-4 max-w-xs text-sm leading-7 text-slate-600 dark:text-slate-300">{{ __('Your trusted partner in digital transformation') }}</p>
            </div>

            <div>
                <p class="mb-4 text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">{{ __('Services') }}</p>
                <div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
                    <p>Web</p>
                    <p>Mobile</p>
                    <p>Systems</p>
                    <p>UI/UX</p>
                    <p>Marketing</p>
                </div>
            </div>

            <div>
                <p class="mb-4 text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">{{ __('Quick Links') }}</p>
                <div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
                    <a href="{{ route('about') }}" class="block hover:text-brand-600 dark:hover:text-brand-300">{{ __('About') }}</a>
                    <a href="{{ route('services') }}" class="block hover:text-brand-600 dark:hover:text-brand-300">{{ __('Services') }}</a>
                    <a href="{{ route('home') }}#workflow" class="block hover:text-brand-600 dark:hover:text-brand-300">{{ __('Workflow') }}</a>
                    <a href="{{ route('contact') }}" class="block hover:text-brand-600 dark:hover:text-brand-300">{{ __('Contact') }}</a>
                </div>
            </div>

            <div>
                <p class="mb-4 text-sm font-bold uppercase tracking-[0.2em] text-slate-500 dark:text-slate-400">{{ __('Contact Info') }}</p>
                <div class="space-y-3 text-sm text-slate-600 dark:text-slate-300">
                    <a href="https://wa.me/201280600515" class="block hover:text-brand-600 dark:hover:text-brand-300">+20 128 060 0515</a>
                    <a href="mailto:info@nivex.technology" class="block hover:text-brand-600 dark:hover:text-brand-300">info@nivex.technology</a>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>