@extends('layouts.public')

@section('title', 'Sobre Nós | SecureVision — Empresa de Segurança Eletrónica em Angola')
@section('meta_description', 'Conheça a SecureVision — mais de 12 anos de experiência em CCTV, alarmes e controlo de acesso. Equipa certificada SIGISP com central de monitoramento 24/7.')

@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:5rem;">

        {{-- 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;">Nossa História</span>
            <h1 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white">Quem é a SecureVision?</h1>
            <p class="text-lg" style="color:#94a3b8;">
                Especialistas em segurança eletrônica e automação, nascemos com o propósito de redefinir a proteção patrimonial através da inovação, integridade e tecnologia de ponta.
            </p>
        </div>

        {{-- Story Grid --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            {{-- Text --}}
            <div style="display:flex; flex-direction:column; gap:1.5rem;">
                <h2 class="text-3xl font-bold tracking-tight text-white">Comprometidos com a sua tranquilidade</h2>
                <p class="leading-relaxed" style="color:#94a3b8;">
                    A SecureVision é uma empresa de segurança eletrônica e automação com sede em Camama, Belas, Angola, com mais de 12 anos de experiência acumulada no mercado de consultoria, conceção, instalação e manutenção de sistemas de videovigilância (CCTV), alarmes de intrusão, controle de acesso e monitoramento.
                </p>
                <p class="leading-relaxed" style="color:#94a3b8;">
                    Equipamos habitações privadas, edifícios residenciais, instalações comerciais e complexos industriais de alta segurança com soluções conectadas e inteligentes de última geração.
                </p>

                <div style="display:flex; flex-direction:column; gap:0.75rem;">
                    @foreach([
                        'Equipe técnica certificada e credenciada pelo SIGISP',
                        'Equipamentos com certificação europeia de Grau 2 e Grau 3',
                        'Central de monitoramento própria operacional 24/7/365',
                        'Suporte técnico prioritário e preventivo',
                    ] as $val)
                    <div class="flex items-center gap-3">
                        <svg class="h-5 w-5 shrink-0" style="color:#3b82f6;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span class="text-sm font-medium" style="color:#cbd5e1;">{{ $val }}</span>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Image --}}
            <div class="rounded-2xl overflow-hidden relative mx-auto" style="max-width:28rem; width:100%; aspect-ratio:1/1; border:1px solid #242d3d; background:#1a1f2e;">
                <img src="https://images.unsplash.com/photo-1557597774-9d273605dfa9?q=80&w=600&auto=format&fit=crop"
                     alt="Sala de controle operacional"
                     class="h-full w-full object-cover"
                     style="height:100%; width:100%; object-fit:cover;">
                <div class="absolute inset-0" style="background:linear-gradient(to top, rgba(15,18,25,0.7), transparent);"></div>
                <div class="absolute bottom-6 left-6 right-6">
                    <div class="glass rounded-xl px-4 py-3 flex items-center gap-3">
                        <span class="h-3 w-3 rounded-full shrink-0" style="background:#10b981; animation:pulse 2s cubic-bezier(0.4,0,0.6,1) infinite;"></span>
                        <span class="text-xs font-semibold text-white">Central Operacional • Online 24/7</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Core Values --}}
        <div style="border-top:1px solid #242d3d; padding-top:4rem;">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold tracking-tight text-white">Nossos Valores Fundamentais</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                {{-- Value 1 --}}
                <div class="rounded-2xl p-8 text-center space-y-4 transition-all group hover-lift"
                     style="border:1px solid #242d3d; background:#1a1f2e;"
                     onmouseenter="this.style.borderColor='rgba(59,130,246,0.3)'"
                     onmouseleave="this.style.borderColor='#242d3d'">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl" style="background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2);">
                        <svg class="h-8 w-8" style="color:#3b82f6;" 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>
                    <h3 class="text-lg font-bold text-white">Segurança Absoluta</h3>
                    <p class="text-sm leading-relaxed" style="color:#94a3b8;">
                        Priorizamos a integridade física e patrimonial de cada cliente com rigor técnico indiscutível.
                    </p>
                </div>

                {{-- Value 2 --}}
                <div class="rounded-2xl p-8 text-center space-y-4 transition-all group hover-lift"
                     style="border:1px solid #242d3d; background:#1a1f2e;"
                     onmouseenter="this.style.borderColor='rgba(16,185,129,0.3)'"
                     onmouseleave="this.style.borderColor='#242d3d'">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl" style="background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.2);">
                        <svg class="h-8 w-8" style="color:#10b981;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white">Inovação e Qualidade</h3>
                    <p class="text-sm leading-relaxed" style="color:#94a3b8;">
                        Trabalhamos apenas com marcas líderes e testadas contra falhas, introduzindo soluções de IA.
                    </p>
                </div>

                {{-- Value 3 --}}
                <div class="rounded-2xl p-8 text-center space-y-4 transition-all group hover-lift"
                     style="border:1px solid #242d3d; background:#1a1f2e;"
                     onmouseenter="this.style.borderColor='rgba(59,130,246,0.3)'"
                     onmouseleave="this.style.borderColor='#242d3d'">
                    <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl" style="background:rgba(59,130,246,0.1); border:1px solid rgba(59,130,246,0.2);">
                        <svg class="h-8 w-8" style="color:#3b82f6;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <h3 class="text-lg font-bold text-white">Foco no Cliente</h3>
                    <p class="text-sm leading-relaxed" style="color:#94a3b8;">
                        Suporte humanizado e ágil, focado na resolução imediata de qualquer problema.
                    </p>
                </div>
            </div>
        </div>

        {{-- Team / Stats --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center py-10 rounded-3xl px-8"
             style="background:rgba(26,31,46,0.5); border:1px solid #242d3d;">
            @foreach([
                ['num'=>'12+',    'label'=>'Anos de Experiência'],
                ['num'=>'50+',    'label'=>'Técnicos Certificados'],
                ['num'=>'10K+',   'label'=>'Clientes Satisfeitos'],
                ['num'=>'24/7',   'label'=>'Suporte Disponível'],
            ] as $s)
            <div>
                <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>

    </div>
</div>
@endsection