<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="<?php echo $__env->yieldContent('meta_description', 'SecureVision — Soluções inteligentes de CCTV, alarmes e controlo de acesso para empresas e residências. Monitorização 24/7.'); ?>">
    <title><?php echo $__env->yieldContent('title', 'SecureVision | Segurança Eletrónica Profissional'); ?></title>

    <!-- Fonts -->
    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>
    <?php echo $__env->yieldContent('head'); ?>
</head>
<body class="bg-navy-950 text-slate-200 antialiased" style="font-family:'Inter',sans-serif;" x-data="{ mobileMenuOpen: false }">

    <!-- ====== NAVBAR ====== -->
    <nav class="sticky top-0 z-50 glass border-b border-slate-800/50">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex h-16 items-center justify-between">

                <!-- Logo -->
                <a href="<?php echo e(route('home')); ?>" class="flex items-center gap-3 hover-glow rounded-lg">
                    <div class="flex h-9 w-9 items-center justify-center rounded-lg" style="background: linear-gradient(to bottom right, #3b82f6, #10b981);">
                        <svg class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                    </div>
                    <span class="text-xl font-bold text-white">Secure<span style="color:#3b82f6;">Vision</span></span>
                </a>

                <!-- Desktop Nav -->
                <div class="hidden items-center gap-8 md:flex">
                    <a href="<?php echo e(route('home')); ?>" class="text-sm font-medium transition-colors duration-200 <?php echo e(request()->routeIs('home') ? 'text-white' : 'text-slate-300 hover:text-white'); ?>">Início</a>
                    <a href="<?php echo e(route('servicos')); ?>" class="text-sm font-medium transition-colors duration-200 <?php echo e(request()->routeIs('servicos') ? 'text-white' : 'text-slate-300 hover:text-white'); ?>">Serviços</a>
                    <a href="<?php echo e(route('projetos')); ?>" class="text-sm font-medium transition-colors duration-200 <?php echo e(request()->routeIs('projetos') ? 'text-white' : 'text-slate-300 hover:text-white'); ?>">Projetos</a>
                    <a href="<?php echo e(route('sobre')); ?>" class="text-sm font-medium transition-colors duration-200 <?php echo e(request()->routeIs('sobre') ? 'text-white' : 'text-slate-300 hover:text-white'); ?>">Sobre</a>
                    <a href="<?php echo e(route('contactos')); ?>" class="text-sm font-medium transition-colors duration-200 <?php echo e(request()->routeIs('contactos') ? 'text-white' : 'text-slate-300 hover:text-white'); ?>">Contactos</a>
                </div>

                <!-- Desktop CTA -->
                <div class="hidden gap-3 md:flex items-center">
                    <?php if(auth()->guard()->check()): ?>
                        <?php if(in_array(Auth::user()->role, ['Admin','Manager','Technician'])): ?>
                            <a href="<?php echo e(route('admin.dashboard')); ?>" class="btn-ghost text-sm">Dashboard</a>
                        <?php else: ?>
                            <a href="<?php echo e(route('client.dashboard')); ?>" class="btn-ghost text-sm">Minha Área</a>
                        <?php endif; ?>
                    <?php else: ?>
                        <a href="<?php echo e(route('login')); ?>" class="btn-ghost text-sm">Login</a>
                    <?php endif; ?>
                    <a href="<?php echo e(route('quote.create')); ?>" class="btn-primary text-sm">Orçamento</a>
                </div>

                <!-- Mobile Menu Button -->
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="md:hidden p-2 text-white" aria-label="Menu">
                    <svg x-show="!mobileMenuOpen" 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 x-show="mobileMenuOpen" x-cloak 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="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            <!-- Mobile Menu -->
            <div x-show="mobileMenuOpen" x-cloak x-transition class="border-t border-slate-800/50 pb-4 md:hidden">
                <div class="space-y-1 py-4">
                    <a href="<?php echo e(route('home')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Início</a>
                    <a href="<?php echo e(route('servicos')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Serviços</a>
                    <a href="<?php echo e(route('projetos')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Projetos</a>
                    <a href="<?php echo e(route('sobre')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Sobre</a>
                    <a href="<?php echo e(route('contactos')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Contactos</a>
                    <div class="border-t border-slate-800/50 pt-4 space-y-2 px-3">
                        <?php if(auth()->guard()->check()): ?>
                            <?php if(in_array(Auth::user()->role, ['Admin','Manager','Technician'])): ?>
                                <a href="<?php echo e(route('admin.dashboard')); ?>" class="block py-2 text-base font-medium text-slate-300 hover:text-white">Dashboard</a>
                            <?php else: ?>
                                <a href="<?php echo e(route('client.dashboard')); ?>" class="block py-2 text-base font-medium text-slate-300 hover:text-white">Minha Área</a>
                            <?php endif; ?>
                        <?php else: ?>
                            <a href="<?php echo e(route('login')); ?>" class="block rounded-lg py-2 text-base font-medium text-slate-300 hover:bg-slate-800/50 hover:text-white transition-colors">Login</a>
                        <?php endif; ?>
                        <a href="<?php echo e(route('quote.create')); ?>" @click="mobileMenuOpen=false" class="block rounded-lg px-3 py-2 text-base font-medium text-white transition-colors" style="background:#3b82f6;">Orçamento</a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- ====== MAIN CONTENT ====== -->
    <main>
        <?php echo $__env->yieldContent('content'); ?>
    </main>

    <!-- ====== FOOTER ====== -->
    <footer class="border-t border-slate-800/50" style="background: linear-gradient(to bottom, rgba(26,31,46,0.5), #0f1219);">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
            <!-- Main Grid -->
            <div class="grid grid-cols-1 gap-12 md:grid-cols-5">
                <!-- Brand -->
                <div class="md:col-span-2 space-y-6">
                    <div class="flex items-center gap-3">
                        <div class="flex h-10 w-10 items-center justify-center rounded-lg" style="background:linear-gradient(to bottom right, #3b82f6, #10b981);">
                            <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                        </div>
                        <span class="text-xl font-bold text-white">Secure<span style="color:#3b82f6;">Vision</span></span>
                    </div>
                    <p class="text-slate-400 leading-relaxed max-w-sm">Soluções inteligentes de segurança eletrónica para proteger o que é mais importante para você.</p>
                    <div class="flex gap-3">
                        <a href="#" class="h-10 w-10 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition-colors" style="background:rgba(30,41,59,0.5);">
                            <svg class="h-5 w-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>
                        <a href="#" class="h-10 w-10 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition-colors" style="background:rgba(30,41,59,0.5);">
                            <svg class="h-5 w-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.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 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>
                        <a href="#" class="h-10 w-10 rounded-lg flex items-center justify-center text-slate-300 hover:text-white transition-colors" style="background:rgba(30,41,59,0.5);">
                            <svg class="h-5 w-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>
                    </div>
                </div>

                <!-- Links: Serviços -->
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Serviços</h4>
                    <ul class="space-y-3">
                        <li><a href="#servicos" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">CCTV</a></li>
                        <li><a href="#servicos" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Alarmes</a></li>
                        <li><a href="#servicos" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Controle de Acesso</a></li>
                        <li><a href="#servicos" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Monitorização 24h</a></li>
                    </ul>
                </div>

                <!-- Links: Empresa -->
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Empresa</h4>
                    <ul class="space-y-3">
                        <li><a href="#sobre" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Sobre Nós</a></li>
                        <li><a href="#projetos" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Projetos</a></li>
                        <li><a href="#contacto" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Contactos</a></li>
                    </ul>
                </div>

                <!-- Links: Legal -->
                <div>
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-4">Legal</h4>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Política de Privacidade</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Termos de Serviço</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-white transition-colors text-sm" style="color:#94a3b8; transition:color 0.2s;">Política de Cookies</a></li>
                    </ul>
                </div>
            </div>

            <div class="divider my-12"></div>

            <!-- Bottom: Contact + Newsletter -->
            <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
                <!-- Contact Info -->
                <div class="space-y-4">
                    <div class="flex gap-3 text-sm">
                        <svg class="h-5 w-5 flex-shrink-0 mt-0.5" style="color:#3b82f6;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        <div>
                            <p class="text-slate-300 font-medium">+244 222 123 456</p>
                            <p class="text-xs" style="color:#6b7280;">Segunda a Sexta, 08:00 - 18:00</p>
                        </div>
                    </div>
                    <div class="flex gap-3 text-sm">
                        <svg class="h-5 w-5 flex-shrink-0 mt-0.5" style="color:#3b82f6;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
                        <div>
                            <p class="text-slate-300 font-medium">info@securevision.ao</p>
                            <p class="text-xs" style="color:#6b7280;">Resposta em até 2 horas</p>
                        </div>
                    </div>
                    <div class="flex gap-3 text-sm">
                        <svg class="h-5 w-5 flex-shrink-0 mt-0.5" style="color:#3b82f6;" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        <div>
                            <p class="text-slate-300 font-medium">Luanda, Angola</p>
                            <p class="text-xs" style="color:#6b7280;">Av. Principal, Talatona</p>
                        </div>
                    </div>
                </div>

                <!-- Newsletter -->
                <div class="glass rounded-xl p-6">
                    <h4 class="text-sm font-semibold text-white uppercase tracking-wider mb-2">Newsletter</h4>
                    <p class="text-sm mb-4" style="color:#94a3b8;">Receba as últimas atualizações sobre segurança e inovação.</p>
                    <form class="flex gap-2">
                        <?php echo csrf_field(); ?>
                        <input type="email" placeholder="seu@email.com" class="flex-1 rounded-lg px-3 py-2 text-sm text-white placeholder-slate-500 focus:outline-none transition-colors" style="background:rgba(30,41,59,0.5); border:1px solid #334155;" onfocus="this.style.borderColor='#3b82f6'" onblur="this.style.borderColor='#334155'">
                        <button type="submit" class="btn-primary text-sm py-2 px-4">Subscrever</button>
                    </form>
                </div>
            </div>

            <!-- Copyright -->
            <div class="mt-12 border-t border-slate-800/50 pt-8 text-center">
                <p class="text-sm" style="color:#6b7280;">© <?php echo e(date('Y')); ?> SecureVision. Todos os direitos reservados. | Desenvolvido com excelência em segurança</p>
            </div>
        </div>
    </footer>

    <!-- ====== WHATSAPP FLOATING BUTTON ====== -->
    <a href="https://wa.me/244976463372?text=Olá!%20Gostaria%20de%20saber%20mais%20sobre%20os%20serviços%20de%20segurança%20e%20CCTV."
       target="_blank"
       rel="noopener noreferrer"
       class="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full text-white shadow-2xl transition-all duration-300 hover:scale-110 focus:outline-none"
       style="background:#25d366;"
       aria-label="Falar pelo WhatsApp">
        <!-- Ping ring -->
        <span class="absolute inline-flex h-full w-full rounded-full opacity-75" style="background:#4ade80; animation: ping-slow 2s cubic-bezier(0,0,0.2,1) infinite;"></span>
        <svg class="relative z-10 h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
    </a>

    <style>
        [x-cloak] { display: none !important; }
        a:hover { color: inherit; }
    </style>
</body>
</html>
<?php /**PATH C:\laragon\www\secure-vision-app\resources\views\layouts\public.blade.php ENDPATH**/ ?>