@extends('layouts.app')

@section('title', __('formacoes.title') . ' | AMD-Topografia')
@section('meta_description', 'Formações profissionais e especializações práticas em Topografia, Pilotagem de Drones DJI, Agrimensura, AutoCAD Civil 3D e GNSS RTK em Luanda, Angola.')
@section('og_image', asset('backgound_sobre.jpg'))

@section('schema')
<script type="application/ld+json">
{
  "@@context": "https://schema.org",
  "@@type": "ItemList",
  "name": "Catálogo de Formações AMD-Topografia",
  "description": "Formações profissionais em topografia e engenharia geográfica em Angola",
  "numberOfItems": {{ isset($formacoes) ? $formacoes->total() : 0 }},
  "itemListElement": [
    @if(isset($formacoes))
      @foreach($formacoes as $idx => $f)
      {
        "@@type": "Course",
        "position": {{ $idx + 1 }},
        "name": "{{ $f->titulo }}",
        "description": "{{ addslashes(Str::limit(strip_tags($f->descricao), 200)) }}",
        "provider": {
          "@@type": "Organization",
          "name": "AMD-II TOPOGRAFIA ENGENHARIA & PROJECTOS, LDA",
          "sameAs": "{{ url('/') }}"
        }
      }{{ !$loop->last ? ',' : '' }}
      @endforeach
    @endif
  ]
}
</script>
@endsection

@section('content')

{{-- HERO SECTION --}}
<section class="relative h-[45vh] min-h-[350px] flex items-center justify-center overflow-hidden">
    {{-- Imagem de fundo com overlay --}}
    <div class="absolute inset-0 bg-black">
        <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-45 filter contrast-125 brightness-90"
            style="background-image: url('{{ asset('backgound_sobre.jpg') }}');">
        </div>
        <div class="absolute inset-0 bg-gradient-to-r from-black/75 via-black/45 to-transparent"></div>
    </div>
    <div class="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-[#06458F]/40"></div>

    <div class="relative z-10 text-center px-6 fade-in-up max-w-5xl mx-auto">
        <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold text-white tracking-tight leading-tight">
            {{ __('formacoes.hero_title') }}
        </h1>
        <p class="text-white/80 text-xs sm:text-sm mt-4 font-light tracking-widest uppercase flex items-center justify-center gap-2">
            <a href="{{ route('welcome') }}" class="hover:text-white transition duration-200">{{ __('formacoes.breadcrumb_home') }}</a>
            <span>/</span>
            <span class="text-white/50">{{ __('formacoes.breadcrumb_formacoes') }}</span>
        </p>
    </div>
</section>

{{-- FILTROS POR NÍVEL --}}
<section class="bg-white border-b border-slate-100 py-5 px-6 md:px-12">
    <div class="max-w-[1440px] mx-auto flex flex-wrap items-center gap-2">
        @php
            $nivelAtual = request('nivel', '');
            $filtros = [
                ''           => __('formacoes.filter_all'),
                'iniciante'  => __('formacoes.filter_beginner'),
                'avancado'   => __('formacoes.filter_advanced'),
            ];
        @endphp
        @foreach($filtros as $key => $label)
            <a href="{{ route('formacoes.index', $key ? ['nivel' => $key] : []) }}"
               class="px-5 py-2.5 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all duration-200
               {{ $nivelAtual === $key
                  ? 'bg-[#06458F] text-white shadow-md'
                  : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>
</section>

{{-- GRID DE FORMAÇÕES --}}
<section class="bg-[#F4F6F8] py-16 px-6 md:px-12 min-h-[50vh]">
    <div class="max-w-[1440px] mx-auto">

        @if($formacoes->isEmpty())
            <div class="py-24 text-center border border-dashed border-slate-300 rounded-3xl bg-white fade-in">
                <svg class="w-14 h-14 text-slate-300 mx-auto mb-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                </svg>
                <h4 class="text-slate-700 font-bold uppercase tracking-wider text-sm mb-2">{{ __('formacoes.no_training_title') }}</h4>
                <p class="text-slate-400 text-xs font-light max-w-xs mx-auto">{{ __('formacoes.no_training_desc') }}</p>
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($formacoes as $formacao)
                    <div class="group bg-white rounded-2xl overflow-hidden hover-lift flex flex-col shadow-sm border border-slate-100 transition-all duration-300 reveal">

                        {{-- Capa --}}
                        <div class="relative h-52 bg-slate-100 overflow-hidden">
                            @if($formacao->imagem_hero ?? $formacao->imagem ?? null)
                                <img src="{{ asset('storage/' . ($formacao->imagem_hero ?? $formacao->imagem)) }}"
                                     alt="{{ $formacao->titulo }}"
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                            @else
                                <div class="w-full h-full bg-slate-50 flex items-center justify-center">
                                    <svg class="w-14 h-14 text-slate-200" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                                    </svg>
                                </div>
                            @endif
                            <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                            {{-- Badge de nível --}}
                            @if($formacao->nivel && $formacao->nivel !== 'todos')
                                <span class="absolute top-3 left-3 px-2.5 py-1 bg-[#06458F] text-white text-[8px] font-bold uppercase tracking-wider rounded-lg">
                                    {{ ucfirst($formacao->nivel) }}
                                </span>
                            @endif
                        </div>

                        {{-- Conteúdo --}}
                        <div class="p-7 flex flex-col flex-grow">

                            {{-- Badges de metadados --}}
                            <div class="flex flex-wrap items-center gap-2 mb-4">
                                @if($formacao->duracao)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-slate-100 text-slate-600 text-[9px] font-bold uppercase tracking-wider rounded-lg">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke-width="2"/><path d="M12 6v6l3 2" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                                        {{ $formacao->duracao }}
                                    </span>
                                @endif
                                @if($formacao->modalidade)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-slate-100 text-slate-600 text-[9px] font-bold uppercase tracking-wider rounded-lg">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                                        {{ $formacao->modalidade }}
                                    </span>
                                @endif
                                @if($formacao->certificado)
                                    <span class="inline-flex items-center gap-1 px-2.5 py-1 bg-[#EAF6DB] text-[#4C7A23] text-[9px] font-bold uppercase tracking-wider rounded-lg border border-[#8BCB4A]/40">
                                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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>
                                        {{ __('formacoes.certificate_badge') }}
                                    </span>
                                @endif
                            </div>

                            <h3 class="text-lg font-bold text-[#06458F] mb-3 leading-snug uppercase">
                                {{ $formacao->titulo }}
                            </h3>

                            @if($formacao->descricao)
                                <p class="text-slate-500 text-sm font-light leading-relaxed mb-6 line-clamp-3">
                                    {{ $formacao->descricao }}
                                </p>
                            @endif

                            <div class="mt-auto pt-5 border-t border-slate-100 flex items-center justify-between gap-4">
                                <div>
                                    @if($formacao->preco)
                                        <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest block mb-0.5">{{ __('formacoes.investment_label') }}</span>
                                        <span class="text-base font-bold text-[#06458F]">
                                            {{ number_format($formacao->preco, 2, ',', '.') }} <small class="text-[10px] font-normal">Kz</small>
                                        </span>
                                    @else
                                        <span class="text-xs font-semibold text-slate-400">{{ __('formacoes.price_on_request') }}</span>
                                    @endif
                                </div>
                                @if(isset($formacao->id))
                                    <a href="{{ route('formacoes.inscricao', $formacao->id) }}"
                                       class="px-5 py-3 bg-[#06458F] text-white text-[10px] font-bold uppercase tracking-widest rounded-xl hover:bg-[#052C56] transition-smooth shadow-sm">
                                        {{ __('formacoes.enroll_btn') }}
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-14 reveal">
                {{ $formacoes->links() }}
            </div>
        @endif
    </div>
</section>

{{-- BLOCO B2B IN-COMPANY --}}
<section class="bg-white py-16 px-6 md:px-12 border-t border-slate-100 reveal">
    <div class="max-w-3xl mx-auto text-center">
        {{-- span decorativo removido --}}
        <h2 class="text-2xl sm:text-3xl font-bold text-[#06458F] uppercase tracking-tight mb-4">
            {{ __('formacoes.in_company_title') }}
        </h2>
        <p class="text-slate-500 text-sm font-light leading-relaxed max-w-xl mx-auto mb-8">
            {{ __('formacoes.in_company_desc') }}
        </p>
        <a href="{{ route('contactos.create') }}"
           class="inline-block px-8 py-4 bg-[#06458F] hover:bg-[#052C56] text-white font-bold uppercase tracking-widest text-[10px] rounded-xl transition-smooth shadow-md">
            {{ __('formacoes.request_b2b') }}
        </a>
    </div>
</section>

@endsection