@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="grid gap-8 lg:grid-cols-[.85fr_1.15fr]">
            <div class="rounded-lg bg-slate-950 p-6 text-white academic-shadow">
                <p class="text-sm font-semibold uppercase tracking-wide text-sky-300">Your GPA result</p>
                <p class="mt-4 text-6xl font-bold">{{ number_format($result['gpa'], 2) }}</p>
                <p class="mt-4 text-xl font-semibold">{{ $result['standing'] }}</p>
                <p class="mt-3 leading-7 text-slate-300">{{ $result['interpretation'] }}</p>
                <div class="mt-6 rounded-lg bg-white/10 p-4">
                    <p class="font-semibold">Next improvement steps</p>
                    <ul class="mt-3 grid gap-2 text-sm leading-6 text-slate-200">
                        @foreach ($result['recommendations'] as $item)
                            <li class="flex gap-2"><i data-lucide="check-circle" class="mt-1 h-4 w-4 shrink-0 text-emerald-300"></i>{{ $item }}</li>
                        @endforeach
                    </ul>
                </div>
                @auth
                    <form action="{{ route('dashboard.gpa.store') }}" method="post" class="mt-5">
                        @csrf
                        <input type="hidden" name="calculator_type" value="{{ $payload['type'] }}">
                        <input type="hidden" name="gpa" value="{{ $result['gpa'] }}">
                        <input type="hidden" name="credits_attempted" value="{{ $result['credits'] }}">
                        <input type="hidden" name="academic_standing" value="{{ $result['standing'] }}">
                        <button class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white"><i data-lucide="save" class="h-4 w-4"></i> Save to Dashboard</button>
                    </form>
                @else
                    <a href="{{ route('register') }}" class="mt-5 inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-4 py-2 text-sm font-semibold text-white"><i data-lucide="user-plus" class="h-4 w-4"></i> Create Account to Track GPA</a>
                @endauth
            </div>
            <div class="grid gap-5">
                <div class="rounded-lg border border-emerald-200 bg-emerald-50 p-5">
                    <p class="text-lg font-semibold text-emerald-950">Need help improving your GPA or preparing strong college admission documents?</p>
                    <p class="mt-2 text-sm leading-6 text-emerald-900">Our academic experts can help with admission essays, tutoring, nursing support, research guidance, SPSS/statistics help, scholarship essays, and academic planning.</p>
                    <a href="{{ route('orders.create') }}" class="mt-4 inline-flex w-full items-center justify-center gap-2 rounded-lg bg-emerald-600 px-4 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-600/20"><i data-lucide="send" class="h-4 w-4"></i> Place Order</a>
                    @include('partials.lead-form')
                </div>
                <div>
                    <h2 class="text-2xl font-bold">Recommended colleges and pathways</h2>
                    <div class="mt-4 grid gap-4 md:grid-cols-2">
                        @forelse ($related['colleges'] as $college)
                            <div class="rounded-lg border border-slate-200 bg-white p-4">
                                <p class="font-semibold">{{ $college->name }}</p>
                                <p class="mt-1 text-sm text-slate-600">{{ $college->city }}, {{ $college->state }} · Min GPA {{ $college->minimum_gpa }}</p>
                                <p class="mt-2 text-sm leading-6 text-slate-600">{{ $college->transfer_policy_summary }}</p>
                            </div>
                        @empty
                            <p class="text-sm text-slate-600">No exact matches yet. Try a broader state or program interest.</p>
                        @endforelse
                    </div>
                </div>
                <div>
                    <h2 class="text-2xl font-bold">Relevant services</h2>
                    <div class="mt-4 grid gap-3">
                        @foreach ($related['services'] as $service)
                            <a href="{{ route('services.show', $service->slug) }}" class="rounded-lg border border-slate-200 bg-white p-4 hover:border-sky-300">
                                <span class="font-semibold">{{ $service->title }}</span>
                                <span class="mt-1 block text-sm text-slate-600">{{ $service->summary }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection