@php
use App\Models\Score;
use App\Models\CompanySubmission;
use App\Models\InstitutionalSubmission;

$allScores = Score::whereNotNull('published_at')
    ->where('is_final', true)
    ->with('scorable')
    ->orderByDesc('itse_score')
    ->get();

$hasResults = $allScores->isNotEmpty();
$total = $allScores->count();

$top3 = $allScores->take(3);
$mencaoHonrosa = $total >= 4 ? $allScores->get(3) : null;
$piorScore = $total >= 5 ? $allScores->last() : null;

$featuredIds = collect([$top3->pluck('id'), collect([$mencaoHonrosa?->id, $piorScore?->id])])->flatten()->filter()->unique();
$remaining = $allScores->filter(fn($s) => !$featuredIds->contains($s->id))->values();
$hasMore = $remaining->isNotEmpty();
@endphp
<x-layouts::public title="Resultados ITSE 6ª Edição">

    {{-- Hero --}}
    <section class="relative overflow-hidden py-16" style="background: linear-gradient(135deg, #0e1a30 0%, #1d3461 60%, #0e1a30 100%);">
        <div class="pointer-events-none absolute inset-0">
            <div class="absolute -top-32 -right-32 h-96 w-96 rounded-full opacity-20" style="background:radial-gradient(circle, #f2a900, transparent 70%);"></div>
            <div class="absolute -bottom-24 -left-24 h-80 w-80 rounded-full opacity-15" style="background:radial-gradient(circle, #3b6fd4, transparent 70%);"></div>
        </div>
        <div class="relative max-w-6xl mx-auto px-6 text-center">
            {{-- Logo CIP --}}
            <div class="flex justify-center mb-8">
                <div class="flex items-center gap-4 px-6 py-3 rounded-2xl" style="background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);">
                    <img src="{{ asset('images/cip-logo.png') }}" alt="CIP" class="h-14 w-auto" style="filter: brightness(0) invert(1);" />
                    <div style="width:1px;height:40px;background:rgba(255,255,255,0.2);"></div>
                    <div class="text-left">
                        <div class="text-xs font-bold tracking-widest uppercase" style="color:#f2a900;">CIP</div>
                        <div class="text-sm font-medium text-white">Centro de Integridade Pública</div>
                        <div class="text-xs" style="color:#8ca3c8;">Boa Governação · Transparência · Integridade</div>
                    </div>
                </div>
            </div>
            <span class="inline-flex items-center gap-2 text-xs font-semibold px-3 py-1.5 rounded-full mb-6" style="background:rgba(242,169,0,.15);color:#f2a900;border:1px solid rgba(242,169,0,.3);">
                {{ __('6ª Edição · Moçambique · 2026') }}
            </span>
            <h1 class="text-3xl sm:text-4xl font-bold text-white leading-tight mb-4">
                {{ __('Índice de Transparência do Sector Extractivo') }}
            </h1>
            <p class="text-base max-w-xl mx-auto" style="color:#8ca3c8;">
                {{ __('Avaliação independente da transparência de empresas e instituições do sector extractivo moçambicano, coordenada pelo CIP.') }}
            </p>

            @if($hasResults)
            <div class="mt-8 flex flex-wrap justify-center gap-6">
                <div class="text-center">
                    <div class="text-3xl font-bold text-white">{{ $allScores->count() }}</div>
                    <div class="text-xs mt-1" style="color:#8ca3c8;">{{ __('Entidades avaliadas') }}</div>
                </div>
                <div class="w-px self-stretch opacity-20 bg-white hidden sm:block"></div>
                <div class="text-center">
                    <div class="text-3xl font-bold" style="color:#f2a900;">{{ number_format($allScores->avg('itse_score') * 100, 1) }}%</div>
                    <div class="text-xs mt-1" style="color:#8ca3c8;">{{ __('Média ITSE') }}</div>
                </div>
                <div class="w-px self-stretch opacity-20 bg-white hidden sm:block"></div>
                <div class="text-center">
                    <div class="text-3xl font-bold" style="color:#4ade80;">{{ number_format($allScores->max('itse_score') * 100, 1) }}%</div>
                    <div class="text-xs mt-1" style="color:#8ca3c8;">{{ __('Melhor pontuação') }}</div>
                </div>
            </div>
            @endif
        </div>
    </section>

    <div class="max-w-6xl mx-auto px-6 py-12">

        @if(!$hasResults)
        {{-- Estado vazio --}}
        <div class="text-center py-20">
            <div class="inline-flex items-center justify-center w-20 h-20 rounded-full mb-6" style="background:#e8f0fe;">
                <svg class="w-10 h-10" style="color:#3b6fd4;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6v6l4 2m6-2a10 10 0 11-20 0 10 10 0 0120 0z"/>
                </svg>
            </div>
            <h2 class="text-2xl font-bold text-zinc-800 mb-2">{{ __('Resultados em preparação') }}</h2>
            <p class="text-zinc-500 max-w-md mx-auto">{{ __('Os resultados serão publicados após conclusão do processo de avaliação e validação pelo CIP.') }}</p>
        </div>

        @else
        {{-- Ranking --}}
        <div class="mb-10">
            <h2 class="text-xl font-bold text-zinc-800 mb-1">{{ __('Ranking ITSE') }} {{ date('Y') }}</h2>
            <p class="text-sm text-zinc-500">{{ __('Classificação por pontuação global — média geométrica das 4 dimensões') }}</p>
        </div>

        {{-- Top 3 --}}
        <div class="flex flex-col gap-4 mb-4">
            @foreach($top3 as $i => $score)
            @php
                $isCompany = $score->scorable_type === CompanySubmission::class;
                $name = $isCompany
                    ? ($score->scorable?->company?->name ?? '—')
                    : (($score->scorable?->institution?->acronym ? $score->scorable->institution->acronym . ' — ' : '') . ($score->scorable?->institution?->name ?? '—'));
                $type = $isCompany ? 'Empresa' : 'Instituição';
                $pct  = fn($v) => $v !== null ? number_format($v * 100, 1) . '%' : '—';
                $itse  = $score->itse_score * 100;
                $color = $itse >= 75 ? '#16a34a' : ($itse >= 50 ? '#d97706' : '#dc2626');
                $bg    = $itse >= 75 ? '#f0fdf4' : ($itse >= 50 ? '#fffbeb' : '#fef2f2');
                $medals = ['🥇','🥈','🥉'];
            @endphp
            <div class="bg-white rounded-2xl border border-zinc-200 p-5 sm:p-6 hover:shadow-md transition-shadow">
                <div class="flex items-start gap-4">
                    <div class="shrink-0 flex items-center justify-center w-12 h-12 rounded-xl text-xl" style="background:#f1f5f9;">
                        {{ $medals[$i] }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex flex-wrap items-center gap-2 mb-1">
                            <h3 class="font-semibold text-zinc-900 text-base">{{ $name }}</h3>
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $isCompany ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">{{ $type }}</span>
                        </div>
                        <div class="mt-3 mb-3">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs text-zinc-500">{{ __('Pontuação ITSE') }}</span>
                                <span class="text-sm font-bold" style="color:{{ $color }};">{{ number_format($itse, 1) }}%</span>
                            </div>
                            <div class="w-full h-2 rounded-full bg-zinc-100 overflow-hidden">
                                <div class="h-2 rounded-full" style="width:{{ $itse }}%;background:{{ $color }};"></div>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
                            @foreach([['Fiscal', $score->fiscal_score], ['Governação', $score->governacao_score], ['Social', $score->social_score], ['Ambiental', $score->ambiental_score]] as [$label, $val])
                            <div class="rounded-lg px-3 py-2 text-center" style="background:#f8fafc;">
                                <div class="text-xs text-zinc-400 mb-0.5">{{ $label }}</div>
                                <div class="text-sm font-semibold text-zinc-700">{{ $pct($val) }}</div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="shrink-0 hidden sm:flex flex-col items-center justify-center w-20 h-20 rounded-2xl text-center" style="background:{{ $bg }};">
                        <div class="text-xl font-bold leading-none" style="color:{{ $color }};">{{ number_format($itse, 0) }}<span class="text-sm">%</span></div>
                        <div class="text-xs mt-1" style="color:{{ $color }};opacity:.7;">ITSE</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        {{-- Menção Honrosa --}}
        @if($mencaoHonrosa)
        @php
            $score = $mencaoHonrosa;
            $isCompany = $score->scorable_type === CompanySubmission::class;
            $name = $isCompany
                ? ($score->scorable?->company?->name ?? '—')
                : (($score->scorable?->institution?->acronym ? $score->scorable->institution->acronym . ' — ' : '') . ($score->scorable?->institution?->name ?? '—'));
            $type = $isCompany ? 'Empresa' : 'Instituição';
            $pct  = fn($v) => $v !== null ? number_format($v * 100, 1) . '%' : '—';
            $itse  = $score->itse_score * 100;
            $color = $itse >= 75 ? '#16a34a' : ($itse >= 50 ? '#d97706' : '#dc2626');
            $bg    = $itse >= 75 ? '#f0fdf4' : ($itse >= 50 ? '#fffbeb' : '#fef2f2');
        @endphp
        <div class="bg-white rounded-2xl border border-amber-300 p-5 sm:p-6 hover:shadow-md transition-shadow mb-4">
            <div class="flex items-start gap-4">
                <div class="shrink-0 flex flex-col items-center justify-center w-12 h-12 rounded-xl text-xl" style="background:#fff7e6;">
                    🏅
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <h3 class="font-semibold text-zinc-900 text-base">{{ $name }}</h3>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $isCompany ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">{{ $type }}</span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-amber-100 text-amber-700 border border-amber-300">{{ __('Menção Honrosa') }}</span>
                    </div>
                    <div class="mt-3 mb-3">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-zinc-500">{{ __('Pontuação ITSE') }}</span>
                            <span class="text-sm font-bold" style="color:{{ $color }};">{{ number_format($itse, 1) }}%</span>
                        </div>
                        <div class="w-full h-2 rounded-full bg-zinc-100 overflow-hidden">
                            <div class="h-2 rounded-full" style="width:{{ $itse }}%;background:{{ $color }};"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
                        @foreach([['Fiscal', $score->fiscal_score], ['Governação', $score->governacao_score], ['Social', $score->social_score], ['Ambiental', $score->ambiental_score]] as [$label, $val])
                        <div class="rounded-lg px-3 py-2 text-center" style="background:#fffbeb;">
                            <div class="text-xs text-zinc-400 mb-0.5">{{ $label }}</div>
                            <div class="text-sm font-semibold text-zinc-700">{{ $pct($val) }}</div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="shrink-0 hidden sm:flex flex-col items-center justify-center w-20 h-20 rounded-2xl text-center" style="background:{{ $bg }};">
                    <div class="text-xl font-bold leading-none" style="color:{{ $color }};">{{ number_format($itse, 0) }}<span class="text-sm">%</span></div>
                    <div class="text-xs mt-1" style="color:{{ $color }};opacity:.7;">ITSE</div>
                </div>
            </div>
        </div>
        @endif

        {{-- Pior pontuação --}}
        @if($piorScore)
        @php
            $score = $piorScore;
            $isCompany = $score->scorable_type === CompanySubmission::class;
            $name = $isCompany
                ? ($score->scorable?->company?->name ?? '—')
                : (($score->scorable?->institution?->acronym ? $score->scorable->institution->acronym . ' — ' : '') . ($score->scorable?->institution?->name ?? '—'));
            $type = $isCompany ? 'Empresa' : 'Instituição';
            $pct  = fn($v) => $v !== null ? number_format($v * 100, 1) . '%' : '—';
            $itse  = $score->itse_score * 100;
            $color = '#dc2626';
            $bg    = '#fef2f2';
        @endphp
        <div class="bg-white rounded-2xl border border-red-200 p-5 sm:p-6 hover:shadow-md transition-shadow mb-6">
            <div class="flex items-start gap-4">
                <div class="shrink-0 flex items-center justify-center w-12 h-12 rounded-xl text-xl" style="background:#fef2f2;">
                    📉
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <h3 class="font-semibold text-zinc-900 text-base">{{ $name }}</h3>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $isCompany ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">{{ $type }}</span>
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700 border border-red-200">{{ __('Pior pontuação') }}</span>
                    </div>
                    <div class="mt-3 mb-3">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs text-zinc-500">{{ __('Pontuação ITSE') }}</span>
                            <span class="text-sm font-bold" style="color:{{ $color }};">{{ number_format($itse, 1) }}%</span>
                        </div>
                        <div class="w-full h-2 rounded-full bg-zinc-100 overflow-hidden">
                            <div class="h-2 rounded-full" style="width:{{ $itse }}%;background:{{ $color }};"></div>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
                        @foreach([['Fiscal', $score->fiscal_score], ['Governação', $score->governacao_score], ['Social', $score->social_score], ['Ambiental', $score->ambiental_score]] as [$label, $val])
                        <div class="rounded-lg px-3 py-2 text-center" style="background:#fef2f2;">
                            <div class="text-xs text-zinc-400 mb-0.5">{{ $label }}</div>
                            <div class="text-sm font-semibold text-zinc-700">{{ $pct($val) }}</div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="shrink-0 hidden sm:flex flex-col items-center justify-center w-20 h-20 rounded-2xl text-center" style="background:{{ $bg }};">
                    <div class="text-xl font-bold leading-none" style="color:{{ $color }};">{{ number_format($itse, 0) }}<span class="text-sm">%</span></div>
                    <div class="text-xs mt-1" style="color:{{ $color }};opacity:.7;">ITSE</div>
                </div>
            </div>
        </div>
        @endif

        @if($hasMore)
        {{-- Lista completa colapsável --}}
        <div x-data="{ open: false }">
            <div x-show="open" x-collapse class="flex flex-col gap-4 mb-4">
                @foreach($remaining as $i => $score)
                @php
                    $isCompany = $score->scorable_type === CompanySubmission::class;
                    $name = $isCompany
                        ? ($score->scorable?->company?->name ?? '—')
                        : (($score->scorable?->institution?->acronym ? $score->scorable->institution->acronym . ' — ' : '') . ($score->scorable?->institution?->name ?? '—'));
                    $type = $isCompany ? 'Empresa' : 'Instituição';
                    $pct  = fn($v) => $v !== null ? number_format($v * 100, 1) . '%' : '—';
                    $itse  = $score->itse_score * 100;
                    $color = $itse >= 75 ? '#16a34a' : ($itse >= 50 ? '#d97706' : '#dc2626');
                    $bg    = $itse >= 75 ? '#f0fdf4' : ($itse >= 50 ? '#fffbeb' : '#fef2f2');
                    $pos   = $i + 5;
                @endphp
                <div class="bg-white rounded-2xl border border-zinc-200 p-5 sm:p-6 hover:shadow-md transition-shadow">
                    <div class="flex items-start gap-4">
                        <div class="shrink-0 flex items-center justify-center w-12 h-12 rounded-xl font-bold text-base" style="background:#f1f5f9;color:#64748b;">
                            {{ $pos }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex flex-wrap items-center gap-2 mb-1">
                                <h3 class="font-semibold text-zinc-900 text-base">{{ $name }}</h3>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ $isCompany ? 'bg-amber-100 text-amber-700' : 'bg-blue-100 text-blue-700' }}">{{ $type }}</span>
                            </div>
                            <div class="mt-3 mb-3">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="text-xs text-zinc-500">{{ __('Pontuação ITSE') }}</span>
                                    <span class="text-sm font-bold" style="color:{{ $color }};">{{ number_format($itse, 1) }}%</span>
                                </div>
                                <div class="w-full h-2 rounded-full bg-zinc-100 overflow-hidden">
                                    <div class="h-2 rounded-full" style="width:{{ $itse }}%;background:{{ $color }};"></div>
                                </div>
                            </div>
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-2 mt-3">
                                @foreach([['Fiscal', $score->fiscal_score], ['Governação', $score->governacao_score], ['Social', $score->social_score], ['Ambiental', $score->ambiental_score]] as [$label, $val])
                                <div class="rounded-lg px-3 py-2 text-center" style="background:#f8fafc;">
                                    <div class="text-xs text-zinc-400 mb-0.5">{{ $label }}</div>
                                    <div class="text-sm font-semibold text-zinc-700">{{ $pct($val) }}</div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <div class="shrink-0 hidden sm:flex flex-col items-center justify-center w-20 h-20 rounded-2xl text-center" style="background:{{ $bg }};">
                            <div class="text-xl font-bold leading-none" style="color:{{ $color }};">{{ number_format($itse, 0) }}<span class="text-sm">%</span></div>
                            <div class="text-xs mt-1" style="color:{{ $color }};opacity:.7;">ITSE</div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="flex justify-center mb-10">
                <button @click="open = !open" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 hover:bg-zinc-50 hover:shadow-sm transition">
                    <span x-text="open ? '{{ __('Ver menos') }}' : '{{ __('Ver todos os resultados') }}'"></span>
                    <svg class="w-4 h-4 transition-transform" :class="open ? 'rotate-180' : ''" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
            </div>
        </div>
        @else
        <div class="mb-6"></div>
        @endif

        {{-- Nota metodológica --}}
        <div class="rounded-2xl border border-blue-100 bg-blue-50 p-5 flex gap-4 mb-12">
            <svg class="w-5 h-5 text-blue-400 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"/>
            </svg>
            <p class="text-sm text-blue-800">
                <strong>{{ __('Nota metodológica:') }}</strong> {{ __('O ITSE é calculado pela média geométrica de 4 dimensões — Fiscal, Governação, Social e Ambiental. Uma pontuação de 0% em qualquer dimensão resulta num ITSE de 0%.') }}
            </p>
        </div>
        @endif

        {{-- Cards informativos --}}
        <div class="grid grid-cols-1 md:grid-cols-4 gap-5 mb-12">
            <a href="{{ route('login') }}" class="block bg-white rounded-2xl border border-zinc-200 p-6 hover:shadow-md hover:border-amber-300 transition-all group cursor-pointer">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#fff7e6;">
                    <svg class="w-5 h-5" style="color:#d97706;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                    </svg>
                </div>
                <h3 class="font-semibold text-zinc-800 mb-2 group-hover:text-amber-700 transition-colors">{{ __('Questionário de Empresas') }}</h3>
                <p class="text-sm text-zinc-500 leading-relaxed">{{ __('45 indicadores distribuídos por 4 dimensões: Fiscal, Governação, Social e Ambiental.') }}</p>
            </a>
            <a href="{{ route('login') }}" class="block bg-white rounded-2xl border border-zinc-200 p-6 hover:shadow-md hover:border-blue-300 transition-all group cursor-pointer">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#eff6ff;">
                    <svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"/>
                    </svg>
                </div>
                <h3 class="font-semibold text-zinc-800 mb-2 group-hover:text-blue-700 transition-colors">{{ __('Questionário das Instituições Públicas') }}</h3>
                <p class="text-sm text-zinc-500 leading-relaxed">{{ __('Avaliação de instituições públicas com mandato sobre o sector extractivo.') }}</p>
            </a>
            <div class="bg-white rounded-2xl border border-zinc-200 p-6 hover:shadow-md transition-shadow">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#f0fdf4;">
                    <svg class="w-5 h-5 text-green-600" 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 0z"/>
                    </svg>
                </div>
                <h3 class="font-semibold text-zinc-800 mb-2">{{ __('Percepção Pública') }}</h3>
                <p class="text-sm text-zinc-500 leading-relaxed mb-4">{{ __('Inquéritos sobre transparência do sector extractivo junto da população.') }}</p>
                <div class="flex gap-2 flex-wrap">
                    <a href="{{ route('perception.urban') }}" class="text-xs px-3 py-1.5 rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-50 transition font-medium">{{ __('E1 Urbano') }}</a>
                    <a href="{{ route('perception.community') }}" class="text-xs px-3 py-1.5 rounded-lg border border-zinc-200 text-zinc-600 hover:bg-zinc-50 transition font-medium">{{ __('E2 Comunitário') }}</a>
                </div>
            </div>
            <a href="{{ route('login') }}" class="block bg-white rounded-2xl border border-zinc-200 p-6 hover:shadow-md hover:border-purple-300 transition-all group cursor-pointer">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-4" style="background:#f5f3ff;">
                    <svg class="w-5 h-5 text-purple-600" 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>
                </div>
                <h3 class="font-semibold text-zinc-800 mb-2 group-hover:text-purple-700 transition-colors">{{ __('Avaliadores') }}</h3>
                <p class="text-sm text-zinc-500 leading-relaxed">{{ __('Área reservada aos avaliadores CIP para pontuação dos questionários submetidos.') }}</p>
            </a>
        </div>

        {{-- CTA --}}
        <div class="rounded-2xl p-8 text-center" style="background:linear-gradient(135deg,#0e1a30,#1d3461);">
            <h3 class="text-xl font-bold text-white mb-2">{{ __('Área reservada') }}</h3>
            <p class="text-sm mb-6" style="color:#8ca3c8;">{{ __('Acesso para empresas, instituições e avaliadores CIP') }}</p>
            <a href="{{ route('login') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl font-semibold text-sm text-white transition hover:opacity-90" style="background:#f2a900;color:#0e1a30;">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/>
                </svg>
                {{ __('Iniciar sessão') }}
            </a>
        </div>

    </div>
</x-layouts::public>