@extends('layouts.app')

@section('title', $formacao->titulo . ' | AMD-TOPOGRAFIA, LDA.')

@section('content')
<div class="min-h-screen bg-white text-slate-800 pt-36 pb-24 px-6 md:px-12 relative z-10">
    <div class="max-w-[1440px] mx-auto">
        
        {{-- Breadcrumb --}}
        <div class="mb-8 flex items-center gap-2 text-xs font-bold text-[#636D7D] uppercase tracking-wider fade-in-up">
            <a href="{{ route('formacoes.index') }}" class="hover:text-[#06458F] transition-colors">{{ __('formacoes.breadcrumb_formacoes') }}</a>
            <span class="text-slate-300">/</span>
            <span class="text-[#06458F]">{{ $formacao->titulo }}</span>
        </div>

        {{-- Capa / Imagem Principal do Curso --}}
        <div class="relative w-full h-[32rem] bg-slate-50 rounded-3xl overflow-hidden mb-12 shadow-[0_20px_50px_-12px_rgba(6,69,143,0.08)] border border-slate-100 fade-in-up">
            @if($formacao->imagem)
                <img src="{{ asset('storage/' . $formacao->imagem) }}" alt="{{ $formacao->titulo }}" class="w-full h-full object-cover">
            @else
                <div class="w-full h-full bg-gradient-to-tr from-slate-100 to-slate-200 flex items-center justify-center">
                    <svg class="w-24 h-24 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-black/35 via-transparent to-transparent"></div>
        </div>

        {{-- Layout Principal: Conteúdo (Esquerda) + Barra de Destaque (Direita) --}}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
            
            {{-- Detalhes da Formação --}}
            <div class="lg:col-span-2 space-y-10 fade-in-up">
                <div>
                    <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-[#06458F] tracking-tight leading-tight mb-6 uppercase">
                        {{ $formacao->titulo }}
                    </h1>
                    <div class="h-1 w-20 bg-[#06458F] rounded-full"></div>
                </div>

                {{-- Sobre o Curso --}}
                <div class="prose max-w-none">
                    <h2 class="text-xl font-bold text-[#06458F] uppercase tracking-wide mb-4">{{ __('formacoes.about_course') }}</h2>
                    <p class="text-[#636D7D] leading-relaxed text-base font-light whitespace-pre-line">{{ $formacao->descricao }}</p>
                </div>

                {{-- Conteúdo Programático --}}
                @if($formacao->conteudo)
                    <div class="p-8 bg-slate-50 border border-slate-100 rounded-3xl">
                        <h2 class="text-xl font-bold text-[#06458F] uppercase tracking-wide mb-6">{{ __('formacoes.program_content') }}</h2>
                        <div class="text-[#636D7D] leading-relaxed text-sm space-y-3 font-light">
                            {!! nl2br(e($formacao->conteudo)) !!}
                        </div>
                    </div>
                @endif

                {{-- Como Funciona --}}
                <div class="p-8 bg-slate-50 border border-slate-100 rounded-3xl">
                    <h2 class="text-xl font-bold text-[#06458F] uppercase tracking-wide mb-6">{{ __('formacoes.enrollment_process') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <div class="flex gap-4">
                            <span class="flex-shrink-0 w-8 h-8 rounded-xl bg-[#06458F] text-white flex items-center justify-center font-bold text-sm">1</span>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm mb-1">{{ __('formacoes.step1_title') }}</h4>
                                <p class="text-xs text-[#636D7D] leading-relaxed">{{ __('formacoes.step1_desc') }}</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <span class="flex-shrink-0 w-8 h-8 rounded-xl bg-[#06458F] text-white flex items-center justify-center font-bold text-sm">2</span>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm mb-1">{{ __('formacoes.step2_title') }}</h4>
                                <p class="text-xs text-[#636D7D] leading-relaxed">{{ __('formacoes.step2_desc') }}</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <span class="flex-shrink-0 w-8 h-8 rounded-xl bg-[#06458F] text-white flex items-center justify-center font-bold text-sm">3</span>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm mb-1">{{ __('formacoes.step3_title') }}</h4>
                                <p class="text-xs text-[#636D7D] leading-relaxed">{{ __('formacoes.step3_desc') }}</p>
                            </div>
                        </div>
                        <div class="flex gap-4">
                            <span class="flex-shrink-0 w-8 h-8 rounded-xl bg-[#06458F] text-white flex items-center justify-center font-bold text-sm">4</span>
                            <div>
                                <h4 class="font-bold text-slate-800 text-sm mb-1">{{ __('formacoes.step4_title') }}</h4>
                                <p class="text-xs text-[#636D7D] leading-relaxed">{{ __('formacoes.step4_desc') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Bloco Lateral de Conversão com fundo Azul Marinho (#06458F) --}}
            <div class="lg:col-span-1 sticky top-32 fade-in-up">
                <div class="bg-[#06458F] text-white p-8 rounded-3xl shadow-[0_20px_50px_-12px_rgba(6,69,143,0.25)] border border-white/10 space-y-6">
                    <div class="pb-6 border-b border-white/15">
                        <span class="text-xs uppercase tracking-widest text-[#A9B8C9] block mb-1">{{ __('formacoes.course_investment') }}</span>
                        <h3 class="text-3xl font-bold text-white">
                            {{ number_format($formacao->preco, 2, ',', '.') }} <small class="text-sm font-normal text-white/70">Kz</small>
                        </h3>
                    </div>

                    <div class="space-y-4">
                        <div class="flex items-center justify-between py-1 border-b border-white/5">
                            <span class="text-xs text-white/70">{{ __('formacoes.duration_label') }}</span>
                            <span class="text-sm font-bold text-white">{{ $formacao->duracao }}</span>
                        </div>
                        @if($formacao->instrutor)
                            <div class="flex items-center justify-between py-1 border-b border-white/5">
                                <span class="text-xs text-white/70">{{ __('formacoes.instructor_label') }}</span>
                                <span class="text-sm font-bold text-white">{{ $formacao->instrutor }}</span>
                            </div>
                        @endif
                        <div class="flex items-center justify-between py-1 border-b border-white/5">
                            <span class="text-xs text-white/70">{{ __('formacoes.certification_label') }}</span>
                            <span class="text-sm font-bold text-white">{{ __('formacoes.certification_included') }}</span>
                        </div>
                    </div>

                    <div class="pt-4 flex flex-col gap-3">
                        <a href="{{ route('formacoes.inscricao', $formacao->id) }}" class="w-full inline-flex items-center justify-center bg-white text-[#06458F] hover:bg-slate-50 text-xs font-bold uppercase tracking-widest py-4 rounded-xl transition-smooth shadow-lg font-bold">
                            {{ __('formacoes.enroll_course_btn') }}
                        </a>
                        <a href="{{ route('formacoes.index') }}" class="w-full inline-flex items-center justify-center bg-transparent border border-white/20 text-white hover:bg-white/5 text-xs font-semibold uppercase tracking-widest py-4 rounded-xl transition-smooth">
                            {{ __('formacoes.back_to_list') }}
                        </a>
                    </div>

                    <div class="pt-6 border-t border-white/10 text-center">
                        <p class="text-[10px] text-white/50 leading-relaxed uppercase">
                            {{ __('formacoes.questions_whatsapp') }}<br>
                            <a href="https://wa.me/{{ preg_replace('/\D/', '', $empresaConfig->telefone ?? '+244 948 944 582') }}" target="_blank" class="text-white hover:underline">{{ $empresaConfig->telefone ?? '+244 948 944 582' }}</a>
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection