@extends('layouts.app')

@section('head')
<style>
    body { background: #0b0e1a; }
    .gx { background: #0b0e1a; color: #e6e9f2; min-height: 100vh; font-family: 'Plus Jakarta Sans', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; }
    .gx-nav-link { color: #cfd5e4; font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: 999px; transition: .2s; white-space: nowrap; }
    .gx-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
    .gx-btn-dark { background: #141829; border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 700; border-radius: 14px; padding: 10px 26px; font-size: 14px; transition: .2s; display: inline-flex; align-items: center; gap: 8px; }
    .gx-btn-dark:hover { background: #1c2238; }
    .gx-btn-purple { background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff; font-weight: 700; border-radius: 14px; padding: 10px 26px; font-size: 14px; transition: .2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 8px 24px -8px rgba(168,85,247,.6); }
    .gx-btn-purple:hover { filter: brightness(1.08); }
    .gx-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; }
    .gx-muted { color: #9aa3b8; }
    .gx-input { background: #141829; border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 12px; }
    .gx-input::placeholder { color: #6b7390; }
    .gx-input:focus { outline: none; border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168,85,247,.2); }
    /* Dark adapter for inner pages/auth built with light utilities (keeps all functionality) */
    .gx .bg-white { background-color: #151a30; }
    .gx .bg-gray-50 { background-color: #10142a; }
    .gx .bg-gray-100 { background-color: rgba(255,255,255,.08); }
    .gx .bg-indigo-50 { background-color: rgba(168,85,247,.15); }
    .gx .border-gray-200, .gx .border-gray-300 { border-color: rgba(255,255,255,.1); }
    .gx .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255,255,255,.08); }
    .gx .text-gray-900 { color: #fff; }
    .gx .text-gray-700 { color: #d5dae8; }
    .gx .text-gray-600 { color: #b6bdd0; }
    .gx .text-gray-500 { color: #9aa3b8; }
    .gx .text-indigo-600 { color: #c084fc; }
    .gx .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,.05); }
    .gx .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,.09); }
    .gx .hover\:text-gray-900:hover { color: #fff; }
    .gx input[type=text], .gx input[type=email], .gx input[type=password], .gx input[type=number], .gx input[type=url], .gx textarea, .gx select { background-color: #121627; color: #fff; }
    .gx input::placeholder, .gx textarea::placeholder { color: #6b7390; }
    .gx .prose { color: #d5dae8; }
    .gx .prose h1, .gx .prose h2, .gx .prose h3, .gx .prose h4, .gx .prose strong { color: #fff; }
    .gx .prose a { color: #c084fc; }
    .gx-auth-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 22px; padding: 28px; }
    .gx-bottombar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: none; background: rgba(13,17,32,.96); backdrop-filter: blur(12px); border-top: 1px solid rgba(255,255,255,.1); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
    .gx-bottombar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #9aa3b8; font-size: 11px; font-weight: 700; padding: 6px 0; border-radius: 10px; }
    .gx-bottombar a:hover, .gx-bottombar a.gx-active { color: #fff; }
    .gx-bottombar svg { width: 20px; height: 20px; }
    @media (max-width: 639px) { .gx-bottombar { display: flex; } .gx { padding-bottom: 70px; } }
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">
@endsection

@section('body')
<div class="gx">
<header class="sticky top-0 z-40" style="background:rgba(11,14,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08);">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="flex justify-between items-center h-[72px] gap-4">
            <a href="{{ route('home') }}" class="flex items-center gap-2 shrink-0">
                @if(!empty($settings) && $settings->get('logo'))
                    <img src="{{ asset($settings->get('logo')) }}" alt="{{ config('app.name') }}" class="h-9">
                @else
                    <span class="leading-none">
                        <span class="block text-[26px] font-extrabold tracking-tight text-white" style="letter-spacing:.02em;">PANEL</span>
                        <span class="block text-[10px] font-semibold tracking-[.35em] gx-muted">{{ strtoupper(config('app.name', 'SMM')) }}</span>
                    </span>
                @endif
            </a>
            <nav class="hidden lg:flex items-center gap-1">
                <a href="{{ route('services') }}" class="gx-nav-link">{{ __('Services') }}</a>
                @foreach(\App\Models\Page::inHeader()->get() as $page)
                    <a href="{{ route('page', $page) }}" class="gx-nav-link">{{ $page->title }}</a>
                @endforeach
                <a href="{{ route('blog') }}" class="gx-nav-link">{{ __('Blog') }}</a>
                <a href="{{ route('faq') }}" class="gx-nav-link">{{ __('FAQ') }}</a>
                <a href="{{ route('contact') }}" class="gx-nav-link">{{ __('Contact Us') }}</a>
            </nav>

            <div class="hidden sm:flex items-center gap-3">
                @auth
                    <a href="{{ route('user.dashboard') }}" class="gx-btn-purple">{{ __('Dashboard') }}</a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="text-sm font-semibold gx-muted hover:text-white">{{ __('Logout') }}</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="gx-btn-dark">{{ __('Sign in') }}</a>
                    <a href="{{ route('register') }}" class="gx-btn-purple">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        {{ __('Sign up') }}
                    </a>
                @endauth
            </div>

            <button id="gx-menu-btn" class="sm:hidden p-2 rounded-lg text-white" aria-label="Menu">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
        </div>
        <div id="gx-mobile-menu" class="hidden sm:hidden pb-4 flex flex-col gap-1">
            <a href="{{ route('services') }}" class="gx-nav-link">{{ __('Services') }}</a>
            @foreach(\App\Models\Page::inHeader()->get() as $page)
                <a href="{{ route('page', $page) }}" class="gx-nav-link">{{ $page->title }}</a>
            @endforeach
            <a href="{{ route('blog') }}" class="gx-nav-link">{{ __('Blog') }}</a>
            <a href="{{ route('faq') }}" class="gx-nav-link">{{ __('FAQ') }}</a>
            <a href="{{ route('contact') }}" class="gx-nav-link">{{ __('Contact Us') }}</a>
            <div class="flex gap-3 pt-2">
                @auth
                    <a href="{{ route('user.dashboard') }}" class="gx-btn-purple">{{ __('Dashboard') }}</a>
                @else
                    <a href="{{ route('login') }}" class="gx-btn-dark">{{ __('Sign in') }}</a>
                    <a href="{{ route('register') }}" class="gx-btn-purple">{{ __('Sign up') }}</a>
                @endauth
            </div>
        </div>
    </div>
</header>

<main>
    {{ $slot ?? '' }}
    @yield('content')
</main>

<footer class="mt-20" style="border-top:1px solid rgba(255,255,255,.08);background:#0a0d18;">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-12">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div>
                <h3 class="font-extrabold text-lg mb-3 text-white">{{ config('app.name') }}</h3>
                <p class="text-sm gx-muted">{{ $seo['description'] ?? '' }}</p>
                <p class="mt-3 text-sm font-bold text-white">★★★★★ <span class="gx-muted font-semibold">4.7/5</span></p>
            </div>
            <div>
                <h3 class="font-bold text-sm mb-3 text-white">{{ __('Quick Links') }}</h3>
                <ul class="space-y-2 text-sm gx-muted">
                    <li><a href="{{ route('services') }}" class="hover:text-white">{{ __('Services') }}</a></li>
                    <li><a href="{{ route('faq') }}" class="hover:text-white">{{ __('FAQ') }}</a></li>
                    <li><a href="{{ route('blog') }}" class="hover:text-white">{{ __('Blog') }}</a></li>
                    <li><a href="{{ route('contact') }}" class="hover:text-white">{{ __('Contact Us') }}</a></li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-sm mb-3 text-white">{{ __('Legal') }}</h3>
                <ul class="space-y-2 text-sm gx-muted">
                    @foreach(\App\Models\Page::inFooter()->get() as $page)
                        <li><a href="{{ route('page', $page) }}" class="hover:text-white">{{ $page->title }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-sm mb-3 text-white">{{ __('Newsletter') }}</h3>
                <form action="{{ route('newsletter.subscribe') }}" method="POST" class="flex gap-2">
                    @csrf
                    <input type="email" name="email" placeholder="you@email.com" required
                           class="gx-input flex-1 min-w-0 px-3 py-2 text-sm">
                    <button type="submit" class="gx-btn-purple !px-4 !py-2">{{ __('Go') }}</button>
                </form>
            </div>
        </div>
        <div class="mt-8 pt-6 text-center text-sm gx-muted" style="border-top:1px solid rgba(255,255,255,.08);">
            © {{ date('Y') }} {{ config('app.name') }}. All rights reserved.
        </div>
    </div>
</footer>
</div>

<nav class="gx-bottombar">
    <a href="{{ route('services') }}">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M9 8h6M5 3h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2z"/></svg>
        {{ __('Services') }}
    </a>
    @auth
        <a href="{{ route('user.dashboard') }}">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
            {{ __('Dashboard') }}
        </a>
    @else
        <a href="{{ route('register') }}">
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
            {{ __('Sign up') }}
        </a>
    @endauth
    <a href="{{ auth()->check() ? route('user.dashboard') : route('login') }}">
        <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg>
        {{ __('Sign in') }}
    </a>
</nav>

<script>
document.getElementById('gx-menu-btn')?.addEventListener('click', function () {
    document.getElementById('gx-mobile-menu')?.classList.toggle('hidden');
});
</script>
@endsection