@extends('layouts.app')

@section('content')
<section class="bg-white">
    <div class="mx-auto grid max-w-7xl gap-10 px-4 py-10 sm:px-6 lg:grid-cols-[1fr_390px] lg:px-8">
        <article>
            <p class="text-sm font-semibold uppercase tracking-wide text-sky-700">Local academic success</p>
            <h1 class="mt-3 text-4xl font-bold">{{ $title }}</h1>
            <p class="mt-4 text-lg leading-8 text-slate-600">Students in {{ $place }} can use GPA calculators, college matching, transfer guidance, nursing support, ethical AI workflows, tutoring, and admissions services to plan stronger academic outcomes.</p>
            <a href="{{ route('orders.create') }}" class="mt-6 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-8 grid gap-5">
                <section class="rounded-lg border border-slate-200 bg-slate-50 p-5">
                    <h2 class="text-2xl font-bold">What this page helps with</h2>
                    <ul class="mt-4 grid gap-3 text-sm leading-6 text-slate-700">
                        <li>GPA interpretation and improvement recommendations for {{ $place }} students.</li>
                        <li>College, university, program, transfer, nursing, scholarship, and course planning options.</li>
                        <li>Academic services including admission essays, personal statements, assignment guidance, research, SPSS, tutoring, and nursing support.</li>
                        <li>Ethical AI study planning, note summarization, exam preparation, and academic productivity workflows.</li>
                    </ul>
                </section>
                <section>
                    <h2 class="text-2xl font-bold">Related colleges and pathways</h2>
                    <div class="mt-4 grid gap-4 md:grid-cols-2">
                        @forelse ($colleges as $college)
                            <div class="rounded-lg border border-slate-200 p-4">
                                <p class="font-semibold">{{ $college->name }}</p>
                                <p class="mt-1 text-sm text-slate-600">{{ $college->city }}, {{ $college->state }} · Minimum GPA {{ $college->minimum_gpa }}</p>
                            </div>
                        @empty
                            <p class="text-sm text-slate-600">The admin dashboard can add localized colleges, programs, GPA requirements, and transfer policies for this market.</p>
                        @endforelse
                    </div>
                </section>
                <section>
                    <h2 class="text-2xl font-bold">FAQs</h2>
                    <div class="mt-4 grid gap-3">
                        @foreach ($faqs as $faq)
                            <details class="rounded-lg border border-slate-200 p-4">
                                <summary class="cursor-pointer font-semibold">{{ $faq['question'] }}</summary>
                                <p class="mt-2 text-sm leading-6 text-slate-600">{{ $faq['answer'] }}</p>
                            </details>
                        @endforeach
                    </div>
                </section>
            </div>
        </article>
        <aside class="rounded-lg border border-emerald-200 bg-emerald-50 p-5">
            <p class="text-xl font-semibold text-emerald-950">Get academic help in {{ $place }}</p>
            <p class="mt-2 text-sm leading-6 text-emerald-900">Request essay help, GPA coaching, nursing tutoring, research support, statistics assistance, or transfer 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')
        </aside>
    </div>
</section>
@endsection