@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">
        <nav class="mb-6 text-sm text-slate-500">
            <a href="{{ route('home') }}" class="hover:text-sky-700">Home</a>
            <span class="mx-2">/</span>
            <span>{{ $title }}</span>
        </nav>
        <div class="grid gap-8 lg:grid-cols-[.8fr_1.2fr]">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-sky-700">GPA calculator ecosystem</p>
                <h1 class="mt-3 text-4xl font-bold">{{ $title }}</h1>
                <p class="mt-4 leading-7 text-slate-600">Calculate your GPA, understand your academic standing, and get recommendations for colleges, programs, scholarships, transfer options, nursing pathways, and academic support.</p>
                <a href="{{ route('orders.create') }}" class="mt-5 inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-600/20"><i data-lucide="send" class="h-4 w-4"></i> Start My Order</a>
                <div class="mt-6 grid gap-3">
                    @foreach ($calculatorTypes as $slug => $label)
                        <a href="{{ route('calculators.show', $slug) }}" class="rounded-lg border px-4 py-3 text-sm font-semibold {{ $type === $slug ? 'border-sky-400 bg-sky-50 text-sky-800' : 'border-slate-200 text-slate-700' }}">{{ $label }}</a>
                    @endforeach
                </div>
            </div>
            <div class="rounded-lg border border-slate-200 bg-slate-50 p-5 academic-shadow">
                @include('partials.calculator-form', ['type' => $type, 'calculatorTypes' => $calculatorTypes])
            </div>
        </div>
    </div>
</section>
@endsection