@extends('layouts.app')
@section('title', 'Your Career Results — CareerPath Pakistan')

@push('styles')
<style>
    .result-hero { padding:70px 5% 60px;text-align:center;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(108,63,232,.2) 0%,transparent 70%) }
    .result-badge { display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:rgba(0,212,161,.15);border:1px solid rgba(0,212,161,.3);border-radius:50px;font-size:.82rem;font-weight:700;color:#00D4A1;margin-bottom:20px }
    .score-bar { height:10px;background:var(--dark-3);border-radius:5px;overflow:hidden;margin-top:8px }
    .score-fill { height:100%;border-radius:5px;transition:width 1s ease }
    .career-result-card { background:var(--card);border:2px solid rgba(108,63,232,.25);border-radius:20px;padding:28px;text-decoration:none;transition:all .3s;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden }
    .career-result-card::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient) }
    .career-result-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(108,63,232,.2);border-color:var(--primary) }
    @media(max-width:640px){.result-hero{padding:50px 5% 40px}}
</style>
@endpush

@section('content')
<div class="result-hero">
    <div class="result-badge"><i class="fas fa-check-circle"></i> Analysis Complete!</div>
    <h1 style="font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;margin-bottom:14px">Your Career Matches 🎉</h1>
    <p style="color:var(--text-muted);max-width:520px;margin:0 auto;line-height:1.7">
        {{ $result->analysis ?? 'Based on your answers, we\'ve identified the best career paths that match your personality and interests.' }}
    </p>
</div>

<section class="section">
    <div class="container" style="max-width:900px">

        <!-- SCORE BREAKDOWN -->
        <div class="card" style="margin-bottom:40px">
            <h3 style="font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:800;margin-bottom:22px">🧠 Your Aptitude Profile</h3>
            <div style="display:flex;flex-direction:column;gap:16px">
                @php
                $colors = ['#6C3FE8','#00D4A1','#FF6B35','#FBBF24','#0EA5E9'];
                $ci = 0;
                @endphp
                @foreach($sortedScores as $category => $score)
                @php $maxScore = $sortedScores->first() ?: 1; $pct = $maxScore > 0 ? round(($score/$maxScore)*100) : 0; @endphp
                <div>
                    <div style="display:flex;justify-content:space-between;font-size:.875rem;margin-bottom:6px">
                        <span style="font-weight:600">{{ $category }}</span>
                        <span style="color:var(--text-muted)">{{ $pct }}%</span>
                    </div>
                    <div class="score-bar">
                        <div class="score-fill" style="width:{{ $pct }}%;background:{{ $colors[$ci++ % 5] }}"></div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- RECOMMENDED CAREERS -->
        <div style="margin-bottom:16px">
            <p style="color:var(--primary);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Top Matches</p>
            <h2 style="font-family:'Outfit',sans-serif;font-size:1.6rem;font-weight:800">Recommended Careers For You</h2>
        </div>

        <div style="display:grid;grid-template-columns:repeat({{ min($careers->count(), 3) }},1fr);gap:20px;margin-bottom:40px">
            @foreach($careers as $i => $career)
            <a href="{{ route('careers.show', $career->slug) }}" class="career-result-card">
                @if($i === 0)
                <div style="position:absolute;top:14px;right:14px;background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);border-radius:50px;padding:3px 10px;font-size:.72rem;font-weight:700;color:#FBBF24">⭐ Best Match</div>
                @endif
                <div style="font-size:2.5rem">{{ $career->icon ?? '💼' }}</div>
                <div>
                    <div style="font-weight:700;font-size:1.05rem">{{ $career->name }}</div>
                    <div style="font-size:.78rem;color:var(--text-muted);margin-top:3px">{{ $career->category }}</div>
                </div>
                <p style="font-size:.83rem;color:var(--text-muted);line-height:1.6">{{ Str::limit($career->description, 100) }}</p>
                <div style="display:flex;gap:8px;flex-wrap:wrap">
                    <span style="font-size:.75rem;padding:4px 10px;border-radius:6px;background:rgba(0,212,161,.1);color:#00D4A1;font-weight:600">💰 {{ $career->min_salary_pkr ?? '50k' }}–{{ $career->max_salary_pkr ?? '150k' }}/mo</span>
                </div>
                <div style="display:flex;gap:8px;margin-top:4px">
                    <span style="font-size:.8rem;color:#A78BFA"><i class="fas fa-arrow-right fa-xs"></i> View Career Path</span>
                </div>
            </a>
            @endforeach
        </div>

        <!-- ACTIONS -->
        <div style="background:linear-gradient(135deg,rgba(108,63,232,.15),rgba(0,212,161,.08));border:1px solid rgba(108,63,232,.2);border-radius:20px;padding:36px;text-align:center">
            <h3 style="font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:800;margin-bottom:10px">What's Next? 🚀</h3>
            <p style="color:var(--text-muted);font-size:.9rem;margin-bottom:24px;line-height:1.7">Explore detailed roadmaps, connect with counselors, or retake the quiz for different results.</p>
            <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
                <a href="{{ route('careers.index') }}" class="btn btn-primary"><i class="fas fa-compass"></i> Explore All Careers</a>
                <a href="{{ route('counselors.index') }}" class="btn btn-outline"><i class="fas fa-user-tie"></i> Book Counselor</a>
                <a href="{{ route('quiz.index') }}" class="btn btn-ghost"><i class="fas fa-rotate"></i> Retake Quiz</a>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
// Animate score bars on load
setTimeout(() => {
    document.querySelectorAll('.score-fill').forEach(bar => {
        bar.style.width = bar.style.width; // trigger animation
    });
}, 300);
</script>
@endpush
@endsection