@section('title', 'Treinamento')

@push('head-scripts')
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap" rel="stylesheet">
<style>
    . {
        font-family: 'Syne', sans-serif;
    }

    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.3;
        }
    }

    @keyframes progressFill {
        from {
            width: 0%;
        }

        to {
            width: 62%;
        }
    }

    .animate-fade-up {
        animation: fadeUp 0.5s ease both;
    }

    .delay-100 {
        animation-delay: 0.10s;
    }

    .delay-150 {
        animation-delay: 0.15s;
    }

    .delay-200 {
        animation-delay: 0.20s;
    }

    .delay-250 {
        animation-delay: 0.25s;
    }

    .delay-300 {
        animation-delay: 0.30s;
    }

    .delay-350 {
        animation-delay: 0.35s;
    }

    .delay-400 {
        animation-delay: 0.40s;
    }

    .dot-blink {
        animation: blink 1.4s ease infinite;
    }

    .progress-bar {
        animation: progressFill 1.2s 0.4s cubic-bezier(.22, 1, .36, 1) both;
    }

    .module-row {
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    }

    .module-row:hover:not(.locked) {
        border-color: #1e3a8a !important;
        box-shadow: 0 6px 32px rgba(30, 58, 138, 0.10);
        transform: translateY(-2px);
    }
</style>
@endpush

<div class="min-h-screen bg-gray-50">

    {{-- ════════════════════════════════════════
    HERO
    ════════════════════════════════════════ --}}
    <section class="relative overflow-hidden bg-blue-950 text-white">

        {{-- decorative blobs --}}
        <div class="pointer-events-none absolute inset-0">
            <div class="absolute -top-20 -right-20 w-96 h-96 rounded-full bg-blue-800 opacity-30 blur-3xl"></div>
            <div class="absolute bottom-0 left-0 w-72 h-72 rounded-full bg-blue-600 opacity-20 blur-3xl"></div>
        </div>

        <div class="relative max-w-6xl mx-auto px-6 md:px-10 py-16 md:py-20">
            <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-10 animate-fade-up">

                {{-- Left --}}
                <div>
                    {{-- badge --}}
                    <div
                        class="inline-flex items-center gap-2 mb-5 px-4 py-1.5 rounded-full border border-blue-400/40 bg-blue-400/10 text-blue-300 text-xs font-semibold tracking-widest uppercase">
                        <span class="dot-blink w-2 h-2 rounded-full bg-blue-300 inline-block"></span>
                        Programa Ativo
                    </div>

                    <h1 class="  text-4xl md:text-5xl font-extrabold leading-tight tracking-tight mb-4">
                        Centro de<br>
                        <span class="text-blue-300">Treinamento</span>
                    </h1>
                    <p class="text-blue-200/70 text-base md:text-lg font-light leading-relaxed max-w-md">
                        Desenvolve competências profissionais ao teu ritmo. Cada módulo prepara-te para o mercado de
                        trabalho.
                    </p>
                </div>

                {{-- Stats --}}
                <div class="flex gap-4 flex-wrap">
                    <div class="bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-center min-w-[110px]">
                        <div class="  text-3xl font-extrabold text-white">62<span class="text-blue-300 text-xl">%</span>
                        </div>
                        <div class="text-blue-300/60 text-xs uppercase tracking-widest mt-1">Concluído</div>
                    </div>
                    <div class="bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-center min-w-[110px]">
                        <div class="  text-3xl font-extrabold text-white">14<span class="text-blue-300 text-xl">h</span>
                        </div>
                        <div class="text-blue-300/60 text-xs uppercase tracking-widest mt-1">Estudadas</div>
                    </div>
                    <div class="bg-white/5 border border-white/10 rounded-2xl px-6 py-4 text-center min-w-[110px]">
                        <div class="  text-3xl font-extrabold text-white">5</div>
                        <div class="text-blue-300/60 text-xs uppercase tracking-widest mt-1">Módulos</div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    {{-- ════════════════════════════════════════
    MAIN GRID
    ════════════════════════════════════════ --}}
    <div class="max-w-6xl mx-auto px-6 md:px-10 py-10 grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">

        {{-- ── LEFT (modules) ─────────────────── --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Progress card --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-fade-up delay-100">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">Progresso Geral</p>
                <div class="flex justify-between items-end mb-3">
                    <h2 class="  text-lg font-bold text-gray-900">Teu percurso de aprendizagem</h2>
                    <span class="  text-2xl font-extrabold text-blue-700">62%</span>
                </div>
                <div class="w-full h-2.5 bg-gray-100 rounded-full overflow-hidden">
                    <div class="progress-bar h-full rounded-full bg-gradient-to-r from-blue-700 to-blue-400"></div>
                </div>
                <div class="flex flex-wrap gap-5 mt-4 text-sm text-gray-500">
                    <span><span class="font-semibold text-gray-800">8</span> concluídos</span>
                    <span><span class="font-semibold text-gray-800">5</span> em progresso</span>
                    <span><span class="font-semibold text-gray-800">3</span> por iniciar</span>
                </div>
            </div>

            {{-- Section label --}}
            <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest animate-fade-up delay-150">Módulos
                do Programa</p>

            {{-- Module cards --}}
            <div class="space-y-3">

                {{-- Active module --}}
                <a href="#"
                    class="module-row flex items-center gap-4 bg-white border-2 border-blue-600 rounded-2xl px-5 py-4 shadow-sm animate-fade-up delay-150 block no-underline">
                    <div
                        class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center text-2xl flex-shrink-0">
                        🎯</div>
                    <div class="flex-1 min-w-0">
                        <h3 class="  font-bold text-gray-900 text-sm">Elaboração de Curriculum Vitae</h3>
                        <p class="text-xs text-gray-400 mt-0.5 truncate">Redação profissional · Portfólio · Carta de
                            motivação</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span
                            class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-blue-100 text-blue-700">Em
                            curso</span>
                        <p class="text-xs text-gray-400 mt-1">45 min restantes</p>
                    </div>
                </a>

                {{-- Done --}}
                <a href="#"
                    class="module-row flex items-center gap-4 bg-white border-2 border-transparent rounded-2xl px-5 py-4 shadow-sm border border-gray-100 animate-fade-up delay-200 block no-underline">
                    <div
                        class="w-12 h-12 rounded-xl bg-green-50 flex items-center justify-center text-2xl flex-shrink-0">
                        💼</div>
                    <div class="flex-1 min-w-0">
                        <h3 class="  font-bold text-gray-900 text-sm">Preparação para Entrevistas</h3>
                        <p class="text-xs text-gray-400 mt-0.5 truncate">Técnicas de comunicação · Simulações · Feedback
                        </p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span
                            class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-green-100 text-green-700">Concluído</span>
                        <p class="text-xs text-gray-400 mt-1">2h 30min</p>
                    </div>
                </a>

                {{-- New --}}
                <a href="#"
                    class="module-row flex items-center gap-4 bg-white border-2 border-transparent rounded-2xl px-5 py-4 shadow-sm border border-gray-100 animate-fade-up delay-250 block no-underline">
                    <div
                        class="w-12 h-12 rounded-xl bg-yellow-50 flex items-center justify-center text-2xl flex-shrink-0">
                        🌐</div>
                    <div class="flex-1 min-w-0">
                        <h3 class="  font-bold text-gray-900 text-sm">Networking Profissional</h3>
                        <p class="text-xs text-gray-400 mt-0.5 truncate">LinkedIn · Eventos · Contactos estratégicos</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span
                            class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-yellow-100 text-yellow-700">Novo</span>
                        <p class="text-xs text-gray-400 mt-1">1h 15min</p>
                    </div>
                </a>

                {{-- Done --}}
                <a href="#"
                    class="module-row flex items-center gap-4 bg-white border-2 border-transparent rounded-2xl px-5 py-4 shadow-sm border border-gray-100 animate-fade-up delay-300 block no-underline">
                    <div
                        class="w-12 h-12 rounded-xl bg-pink-50 flex items-center justify-center text-2xl flex-shrink-0">
                        📊</div>
                    <div class="flex-1 min-w-0">
                        <h3 class="  font-bold text-gray-900 text-sm">Competências Digitais</h3>
                        <p class="text-xs text-gray-400 mt-0.5 truncate">Office · Ferramentas de produtividade · IA
                            aplicada</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span
                            class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-green-100 text-green-700">Concluído</span>
                        <p class="text-xs text-gray-400 mt-1">3h 00min</p>
                    </div>
                </a>

                {{-- Locked --}}
                <div
                    class="module-row locked flex items-center gap-4 bg-white border-2 border-transparent rounded-2xl px-5 py-4 border border-gray-100 opacity-50 cursor-not-allowed animate-fade-up delay-350">
                    <div
                        class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-2xl flex-shrink-0">
                        🔒</div>
                    <div class="flex-1 min-w-0">
                        <h3 class="  font-bold text-gray-900 text-sm">Empreendedorismo e Inovação</h3>
                        <p class="text-xs text-gray-400 mt-0.5 truncate">Conclui os módulos anteriores para desbloquear
                        </p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <span
                            class="inline-block text-xs font-semibold px-3 py-1 rounded-full bg-gray-100 text-gray-500">Bloqueado</span>
                        <p class="text-xs text-gray-400 mt-1">2h 00min</p>
                    </div>
                </div>

            </div>
        </div>

        {{-- ── SIDEBAR ─────────────────────────── --}}
        <div class="space-y-6">

            {{-- CV Generator --}}
            <div class="bg-blue-950 rounded-2xl p-6 text-white relative overflow-hidden animate-fade-up delay-100">
                {{-- decorative --}}
                <div
                    class="pointer-events-none absolute -right-6 -bottom-6 text-8xl opacity-[0.07] select-none leading-none">
                    📄</div>

                <p class="text-xs font-semibold text-blue-300/60 uppercase tracking-widest mb-3">Gerador de CV</p>
                <h3 class="  text-lg font-bold mb-2">Gerar o meu CV</h3>
                <p class="text-blue-200/60 text-sm leading-relaxed mb-5">
                    Com base no teu progresso, geramos um CV profissional personalizado pronto a enviar.
                </p>

                {{-- Checklist --}}
                <ul class="space-y-2.5 mb-6">
                    <li class="flex items-center gap-3 text-sm text-blue-100/80">
                        <span
                            class="w-5 h-5 rounded-full bg-green-400 flex items-center justify-center text-xs text-blue-950 font-bold flex-shrink-0">✓</span>
                        Dados pessoais completos
                    </li>
                    <li class="flex items-center gap-3 text-sm text-blue-100/80">
                        <span
                            class="w-5 h-5 rounded-full bg-green-400 flex items-center justify-center text-xs text-blue-950 font-bold flex-shrink-0">✓</span>
                        Experiência profissional
                    </li>
                    <li class="flex items-center gap-3 text-sm text-blue-100/80">
                        <span
                            class="w-5 h-5 rounded-full bg-green-400 flex items-center justify-center text-xs text-blue-950 font-bold flex-shrink-0">✓</span>
                        Formação académica
                    </li>
                    <li class="flex items-center gap-3 text-sm text-blue-200/40">
                        <span class="w-5 h-5 rounded-full border border-white/20 flex-shrink-0"></span>
                        Competências digitais (62%)
                    </li>
                    <li class="flex items-center gap-3 text-sm text-blue-200/40">
                        <span class="w-5 h-5 rounded-full border border-white/20 flex-shrink-0"></span>
                        Carta de motivação
                    </li>
                </ul>

                <button wire:click="gerarCV"
                    class="w-full flex items-center justify-center gap-2 bg-white text-blue-950   font-bold text-sm py-3 rounded-xl hover:bg-blue-50 transition active:scale-95 cursor-pointer border-0">
                    ⚡ Gerar CV Agora
                </button>
            </div>

            {{-- Upcoming sessions --}}
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 animate-fade-up delay-200">
                <p class="text-xs font-semibold text-gray-400 uppercase tracking-widest mb-4">Próximas Sessões</p>
                <div class="space-y-4">

                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-50 flex flex-col items-center justify-center flex-shrink-0">
                            <span class="  font-extrabold text-blue-800 text-base leading-none">22</span>
                            <span class="text-blue-400 text-[10px] uppercase">Mar</span>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Workshop: CV em 60 min</p>
                            <p class="text-xs text-gray-400 mt-0.5">14h00 · Online via Zoom</p>
                        </div>
                    </div>

                    <div class="h-px bg-gray-50"></div>

                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-50 flex flex-col items-center justify-center flex-shrink-0">
                            <span class="  font-extrabold text-blue-800 text-base leading-none">27</span>
                            <span class="text-blue-400 text-[10px] uppercase">Mar</span>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Simulação de Entrevista</p>
                            <p class="text-xs text-gray-400 mt-0.5">10h00 · Sala 3 · Presencial</p>
                        </div>
                    </div>

                    <div class="h-px bg-gray-50"></div>

                    <div class="flex items-center gap-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-blue-50 flex flex-col items-center justify-center flex-shrink-0">
                            <span class="  font-extrabold text-blue-800 text-base leading-none">03</span>
                            <span class="text-blue-400 text-[10px] uppercase">Abr</span>
                        </div>
                        <div>
                            <p class="text-sm font-semibold text-gray-800">Feira de Emprego 2025</p>
                            <p class="text-xs text-gray-400 mt-0.5">09h00 · Centro de Luanda</p>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>
</div>