@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-[1.05fr_.95fr] lg:px-8 lg:py-16">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-sky-700">USA academic success platform</p>
            <h1 class="mt-4 max-w-4xl text-4xl font-bold leading-tight text-slate-950 sm:text-5xl">Calculate, track, improve, and achieve academic excellence.</h1>
            <p class="mt-5 max-w-2xl text-lg leading-8 text-slate-600">{{ config('academic.positioning') }}</p>
            <div class="mt-8 flex flex-wrap gap-3">
                <a href="#calculator" class="inline-flex items-center gap-2 rounded-lg bg-slate-950 px-5 py-3 text-sm font-semibold text-white"><i data-lucide="calculator" class="h-4 w-4"></i> Start GPA Calculator</a>
                <a href="{{ route('orders.create') }}" class="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> Request Expert Assistance</a>
                <a href="{{ route('matching.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-800"><i data-lucide="search" class="h-4 w-4"></i> Match Colleges</a>
            </div>
            <div class="mt-8 grid gap-3 text-sm text-slate-700 sm:grid-cols-3">
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4"><strong class="block text-slate-950">Lead-ready calculators</strong> GPA, nursing, transfer, final grade, and improvement planning.</div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4"><strong class="block text-slate-950">Local SEO pages</strong> State, city, nursing, AI, transfer, and service landing pages.</div>
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4"><strong class="block text-slate-950">Premium support</strong> Admissions, tutoring, research, SPSS, nursing, and exam prep.</div>
            </div>
        </div>
        <div id="calculator" class="rounded-lg border border-slate-200 bg-slate-50 p-5 academic-shadow">
            <div class="mb-4 flex items-center justify-between gap-3">
                <div>
                    <p class="text-sm font-semibold text-sky-700">Flagship GPA Calculator</p>
                    <h2 class="text-2xl font-bold">Get your result and next steps</h2>
                </div>
                <i data-lucide="line-chart" class="h-8 w-8 text-emerald-600"></i>
            </div>
            @include('partials.calculator-form', ['type' => 'college', 'calculatorTypes' => $calculatorTypes])
        </div>
    </div>
</section>

<section class="border-y border-slate-200 bg-slate-100">
    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        <div class="grid gap-4 md:grid-cols-4">
            @foreach ($calculatorTypes as $slug => $label)
                <a href="{{ route('calculators.show', $slug) }}" class="rounded-lg border border-slate-200 bg-white p-4 text-sm font-semibold text-slate-800 hover:border-sky-300 hover:text-sky-700">{{ $label }}</a>
            @endforeach
        </div>
    </div>
</section>

<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-10 px-4 py-12 sm:px-6 lg:grid-cols-3 lg:px-8">
        <div class="lg:col-span-1">
            <p class="text-sm font-semibold uppercase tracking-wide text-emerald-700">Academic services ecosystem</p>
            <h2 class="mt-3 text-3xl font-bold">Every tool connects to practical support.</h2>
            <p class="mt-4 text-slate-600">GPA results, local SEO pages, college recommendations, and articles route students toward the right service at the right time.</p>
        </div>
        <div class="grid gap-4 sm:grid-cols-2 lg:col-span-2">
            @foreach ($services as $service)
                <a href="{{ route('services.show', $service->slug) }}" class="rounded-lg border border-slate-200 p-5 hover:border-emerald-300">
                    <p class="font-semibold">{{ $service->title }}</p>
                    <p class="mt-2 text-sm leading-6 text-slate-600">{{ $service->summary }}</p>
                    <span class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-emerald-700">Start My Order <i data-lucide="arrow-right" class="h-4 w-4"></i></span>
                </a>
            @endforeach
        </div>
    </div>
</section>

<section class="bg-slate-950 text-white">
    <div class="mx-auto grid max-w-7xl gap-8 px-4 py-12 sm:px-6 md:grid-cols-3 lg:px-8">
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-sky-300">Nursing</p>
            <h2 class="mt-3 text-2xl font-bold">Support for nursing students.</h2>
            <p class="mt-3 text-sm leading-6 text-slate-300">Nursing GPA requirements, TEAS, HESI, NCLEX, CNA, RN/LPN, pharmacology, anatomy, physiology, and assignment support.</p>
        </div>
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-emerald-300">Transfer</p>
            <h2 class="mt-3 text-2xl font-bold">Transfer pathways by state.</h2>
            <p class="mt-3 text-sm leading-6 text-slate-300">Community college transfer guidance, credit equivalency, GPA requirements, and transfer-friendly college discovery.</p>
        </div>
        <div>
            <p class="text-sm font-semibold uppercase tracking-wide text-amber-300">Ethical AI</p>
            <h2 class="mt-3 text-2xl font-bold">Student productivity tools.</h2>
            <p class="mt-3 text-sm leading-6 text-slate-300">AI study planning, note summarization, exam prep, research organization, scheduling, and nursing study workflows.</p>
        </div>
    </div>
</section>
@endsection