@extends('layouts.public')

@section('title', 'Projetos | SecureVision — Casos de Sucesso em Segurança Eletrónica')
@section('meta_description', 'Conheça os projetos industriais, residenciais e comerciais de CCTV e segurança executados com sucesso pela equipa SecureVision.')

@section('content')
<div class="bg-navy-950 text-white min-h-screen py-24">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8" style="padding-top:2.5rem; display:flex; flex-direction:column; gap:4rem;">

        {{-- Intro --}}
        <div class="text-center mx-auto" style="max-width:48rem; display:flex; flex-direction:column; gap:1rem;">
            <span class="text-xs font-bold uppercase tracking-wider" style="color:#3b82f6;">Estudos de Caso</span>
            <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white">Projetos Executados com Sucesso</h1>
            <p class="text-lg" style="color:#94a3b8;">
                Conheça alguns dos projetos corporativos e residenciais implementados pelas nossas equipes técnicas especializadas.
            </p>
        </div>

        {{-- Projects Grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            @php
            $projects = [
                [
                    'title'    => 'Centro de Distribuição Logístico',
                    'desc'     => 'Instalação de 64 câmeras IP 4K de alta definição e barreiras laser infravermelhas perimetrais integradas com a nossa Central de Monitoramento.',
                    'type'     => 'Industrial',
                    'location' => 'Viana, Luanda',
                    'image'    => 'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=600&auto=format&fit=crop',
                ],
                [
                    'title'    => 'Condomínio Residencial Parque Real',
                    'desc'     => 'Sistema unificado de videovigilância e controle de acesso automático por leitura de matrículas (LPR) nos acessos principais e garagem.',
                    'type'     => 'Residencial',
                    'location' => 'Talatona, Luanda',
                    'image'    => 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?q=80&w=600&auto=format&fit=crop',
                ],
                [
                    'title'    => 'Escritórios Corporativos TechHub',
                    'desc'     => 'Implantação de fechaduras eletromagnéticas acionadas por reconhecimento facial com leitor térmico e integração de relógio de ponto.',
                    'type'     => 'Comercial',
                    'location' => 'Mutamba, Luanda',
                    'image'    => 'https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=600&auto=format&fit=crop',
                ],
                [
                    'title'    => 'Supermercado Alimentar Ideal',
                    'desc'     => 'Monitoramento contra roubos internos e CCTV de alta sensibilidade luminosa cobrindo corredores, caixas e cais de descarga.',
                    'type'     => 'Comercial',
                    'location' => 'Lobito, Benguela',
                    'image'    => 'https://images.unsplash.com/photo-1578916171728-46686eac8d58?q=80&w=600&auto=format&fit=crop',
                ],
            ];
            @endphp

            @foreach($projects as $proj)
            <div class="rounded-2xl overflow-hidden flex flex-col transition-all group"
                 style="border:1px solid #242d3d; background:#1a1f2e;"
                 onmouseenter="this.style.borderColor='rgba(59,130,246,0.3)'"
                 onmouseleave="this.style.borderColor='#242d3d'">

                {{-- Image --}}
                <div class="relative overflow-hidden" style="aspect-ratio:16/9; background:#0f1219;">
                    <img src="{{ $proj['image'] }}" alt="{{ $proj['title'] }}"
                         class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
                         style="height:100%; width:100%; object-fit:cover;">
                    <div class="absolute inset-0" style="background:linear-gradient(to top, rgba(15,18,25,0.8), transparent);"></div>
                    <div class="absolute top-4 left-4 rounded-full px-3 py-1 text-xs font-semibold backdrop-blur-sm"
                         style="background:rgba(59,130,246,0.2); border:1px solid rgba(59,130,246,0.45); color:#3b82f6;">
                        {{ $proj['type'] }}
                    </div>
                </div>

                {{-- Info --}}
                <div class="p-8 flex-grow flex flex-col justify-between" style="gap:1rem;">
                    <div style="display:flex; flex-direction:column; gap:0.5rem;">
                        <span class="text-xs font-semibold" style="color:#6b7280;">{{ $proj['location'] }}</span>
                        <h2 class="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">{{ $proj['title'] }}</h2>
                        <p class="text-sm leading-relaxed" style="color:#94a3b8;">{{ $proj['desc'] }}</p>
                    </div>
                    <div class="flex items-center gap-2 font-bold text-xs uppercase tracking-wider" style="color:#3b82f6;">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
                        Entregue e Funcional
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Stats row --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 py-12 rounded-3xl" style="background:rgba(26,31,46,0.5); border:1px solid #242d3d; padding:2rem 3rem;">
            @foreach([
                ['num'=>'200+','label'=>'Projetos Concluídos'],
                ['num'=>'10K+','label'=>'Câmeras Instaladas'],
                ['num'=>'15+','label'=>'Anos de Experiência'],
                ['num'=>'100%','label'=>'Satisfação Garantida'],
            ] as $s)
            <div class="text-center">
                <p class="text-3xl sm:text-4xl font-extrabold text-gradient">{{ $s['num'] }}</p>
                <p class="text-xs font-medium mt-1" style="color:#94a3b8;">{{ $s['label'] }}</p>
            </div>
            @endforeach
        </div>

        {{-- CTA --}}
        <div class="text-center">
            <p class="mb-4" style="color:#94a3b8;">Quer que o seu projeto faça parte desta lista?</p>
            <a href="{{ route('quote.create') }}" class="btn-primary">
                Solicitar Orçamento
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>

    </div>
</div>
@endsection