<!DOCTYPE html>
<html lang="en" class="scroll-smooth scroll-pt-24">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <x-seo-tags :page="$active_page ?? null" />

    <link rel="icon" type="image/png" href="{{ asset('ecs-favicon.png') }}">
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.14.8/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'fade-in-up': 'fadeInUp 1s ease-out forwards',
                        'typing': 'typing 2.5s steps(12) forwards, blink 1s infinite',
                        'wave': 'wave 2.5s infinite',
                    },
                    keyframes: {
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        typing: {
                            'from': { width: '0' },
                            'to': { width: '100%' },
                        },
                        blink: {
                            '0%, 100%': { 'border-color': 'transparent' },
                            '50%': { 'border-color': '#3C3566' },
                        },
                        wave: {
                            '0%': { transform: 'rotate(0.0deg)' },
                            '10%': { transform: 'rotate(14.0deg)' },
                            '20%': { transform: 'rotate(-8.0deg)' },
                            '30%': { transform: 'rotate(14.0deg)' },
                            '40%': { transform: 'rotate(-4.0deg)' },
                            '50%': { transform: 'rotate(10.0deg)' },
                            '60%': { transform: 'rotate(0.0deg)' },
                            '100%': { transform: 'rotate(0.0deg)' },
                        }
                    },
                    colors: {
                        brand: {
                            dark: '#1F1B2E',
                            primary: '#3C3566',
                            accent: '#8B80F9',
                            light: '#F5F3FF',
                            secondary: '#F97316',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
        body { font-family: 'Inter', sans-serif; }
        [x-cloak] { display: none !important; }
        .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }
    </style>
    @stack('extra_head')
</head>
<body class="bg-white text-slate-800 antialiased" 
      x-data="{ 
          loading: true,
          scrolled: false, 
          backToTop: false,
          activeSection: '{{ $active_page ?? 'home' }}',
          scrollProgress: 0,
          scrollY: 0,
          init() {
              setTimeout(() => this.loading = false, 800);
              this.checkScroll();
          },
          checkScroll() {
              this.scrollY = window.pageYOffset;
              this.scrolled = window.pageYOffset > 20;
              this.backToTop = window.pageYOffset > 300;
              const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
              const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
              this.scrollProgress = (winScroll / height) * 100;
          }
      }" 
      @scroll.window="checkScroll()">

    <!-- Loading Spinner -->
    <div x-show="loading" x-cloak
         x-transition:leave="transition ease-in duration-500"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-white">
        <div class="w-16 h-16 border-4 border-brand-primary/30 border-t-brand-primary rounded-full animate-spin mb-4"></div>
        <p class="text-brand-primary font-bold text-lg animate-pulse">Welcome to ECS</p>
    </div>

    <!-- Scroll Progress Bar -->
    <div class="fixed top-0 left-0 h-1 bg-brand-accent z-[60] transition-all duration-100 ease-out" :style="'width: ' + scrollProgress + '%'"></div>

    <!-- Navigation -->
    <nav x-data="{ mobileMenu: false }" 
         :class="{ 'bg-white/90 backdrop-blur-md shadow-sm py-4': scrolled, 'bg-transparent py-6': !scrolled }" 
         class="fixed w-full z-50 top-0 transition-all duration-300">
        <div class="container mx-auto px-6 flex justify-between items-center">
            <!-- Logo -->
            <a href="{{ route('home') }}" class="flex items-center gap-3 group">
                <img src="{{ asset('ecs-logo.png') }}" alt="ECS Logo" class="h-12 w-auto object-contain">
                <div class="flex flex-col" :class="{ 'text-slate-800': scrolled, 'text-slate-900': !scrolled }">
                    <span class="text-xl font-bold tracking-tight leading-none">ECS</span>
                    <span class="text-[10px] uppercase tracking-widest opacity-80">Extensive Creativity</span>
                </div>
            </a>

            <!-- Desktop Menu -->
            <div class="hidden md:flex space-x-8 items-center font-medium text-sm" :class="{ 'text-slate-600': scrolled, 'text-slate-700': !scrolled }">
                @php
                    $navClasses = fn($page) => ($active_page ?? 'home') === $page ? 'text-brand-accent font-bold' : 'hover:text-brand-accent transition';
                @endphp
                <a href="{{ route('home') }}" class="{{ $navClasses('home') }}">Home</a>
                <a href="{{ route('about') }}" class="{{ $navClasses('about') }}">About</a>
                <a href="{{ route('services') }}" class="{{ $navClasses('services') }}">Services</a>
                <a href="{{ route('home') }}#divisions" class="{{ $navClasses('divisions') }}">Divisions</a>
                <a href="{{ route('home') }}#portfolio" class="{{ $navClasses('portfolio') }}">Portfolio</a>
                <a href="{{ route('news') }}" class="{{ $navClasses('news') }}">News</a>
                <a href="{{ route('contact') }}" class="px-6 py-2.5 rounded-full hover:bg-brand-accent hover:border-transparent transition-all {{ ($active_page ?? '') === 'contact' ? 'bg-brand-accent text-white shadow-lg shadow-brand-accent/30' : 'bg-brand-primary text-white' }}">Contact Us</a>
            </div>

            <!-- Mobile Menu Button -->
            <button @click="mobileMenu = !mobileMenu" class="md:hidden focus:outline-none" :class="{ 'text-slate-800': scrolled, 'text-slate-900': !scrolled }">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </button>
        </div>

        <!-- Mobile Menu Dropdown -->
        <div x-show="mobileMenu" x-collapse class="md:hidden bg-white border-t border-slate-100 absolute w-full left-0 top-full shadow-xl">
            <div class="flex flex-col p-6 space-y-4">
                <a href="{{ route('home') }}" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? 'home') === 'home' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">Home</a>
                <a href="{{ route('about') }}" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? '') === 'about' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">About</a>
                <a href="{{ route('services') }}" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? '') === 'services' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">Services</a>
                <a href="{{ route('home') }}#divisions" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? '') === 'divisions' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">Divisions</a>
                <a href="{{ route('home') }}#portfolio" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? '') === 'portfolio' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">Portfolio</a>
                <a href="{{ route('news') }}" @click="mobileMenu = false" class="font-medium {{ ($active_page ?? '') === 'news' ? 'text-brand-primary font-bold' : 'text-slate-800' }}">News</a>
                <a href="{{ route('contact') }}" @click="mobileMenu = false" class="font-bold text-brand-primary">Contact Us</a>
            </div>
        </div>
    </nav>

    <!-- MAIN CONTENT INJECTION -->
    @yield('content')

    <!-- Back to Top Button -->
    <div x-show="backToTop" x-cloak
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-300"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-4"
         class="fixed bottom-8 right-8 z-50">
        <button @click="window.scrollTo({top: 0, behavior: 'smooth'})"
                class="relative p-3 bg-brand-primary text-white rounded-full shadow-lg hover:bg-brand-accent transition-colors focus:outline-none"
                aria-label="Back to Top">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
        </button>
    </div>

    <!-- Footer -->
    <footer class="bg-slate-900 text-slate-400 py-12 border-t border-slate-800">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center gap-8">
                <!-- Brand -->
                <div class="flex items-center gap-3">
                    <img src="{{ asset('ecs-logo.png') }}" alt="ECS Logo" class="h-10 w-auto opacity-80 grayscale hover:grayscale-0 transition">
                    <span class="font-bold text-white tracking-tight">ECS</span>
                </div>

                <!-- Social Media Links -->
                <div class="flex items-center gap-4">
                    @if (!empty($settings['social_linkedin']))
                    <a href="{{ $settings['social_linkedin'] }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-brand-primary hover:border-brand-primary transition-all" aria-label="LinkedIn">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                    </a>
                    @endif
                    @if (!empty($settings['social_instagram']))
                    <a href="{{ $settings['social_instagram'] }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-gradient-to-br hover:from-purple-500 hover:to-pink-500 hover:border-transparent transition-all" aria-label="Instagram">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
                    </a>
                    @endif
                    @if (!empty($settings['social_twitter']))
                    <a href="{{ $settings['social_twitter'] }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-700 hover:border-slate-600 transition-all" aria-label="X (Twitter)">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                    </a>
                    @endif
                    @if (!empty($settings['social_facebook']))
                    <a href="{{ $settings['social_facebook'] }}" target="_blank" rel="noopener noreferrer" class="w-10 h-10 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-slate-400 hover:text-white hover:bg-blue-600 hover:border-blue-500 transition-all" aria-label="Facebook">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                    </a>
                    @endif
                </div>

                <!-- Copyright & Links -->
                <div class="flex flex-col md:flex-row items-center gap-4 text-sm">
                    <span>&copy; {{ date('Y') }} {{ $settings['company_name'] ?? 'Extensive Creativity Services Limited' }}.</span>
                    <div class="flex gap-6">
                        <a href="#" class="hover:text-white transition">Privacy</a>
                        <a href="#" class="hover:text-white transition">Terms</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Scroll Reveal Animation Script -->
    <script>
        const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 };
        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('active');
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
    </script>
    @stack('extra_scripts')
</body>
</html>
