@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="max-w-3xl">
            <p class="text-sm font-semibold uppercase tracking-wide text-sky-700">SEO learning hub</p>
            <h1 class="mt-3 text-4xl font-bold">{{ $title }}</h1>
            <p class="mt-4 text-lg leading-8 text-slate-600">{{ $description }}</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> Request Expert Assistance</a>
        </div>
        <div class="mt-8 grid gap-4 md:grid-cols-3">
            @foreach ($states as $state)
                <a href="{{ route('seo.local', ['topic' => $topic === 'ai' ? 'ethical-ai-study-tools' : ($topic === 'nursing' ? 'nursing-gpa-requirements' : 'transfer-gpa-requirements'), 'state' => str($state)->slug()]) }}" class="rounded-lg border border-slate-200 bg-slate-50 p-4 font-semibold hover:border-sky-300">
                    {{ $title }} in {{ $state }}
                </a>
            @endforeach
        </div>
        <div class="mt-12 grid gap-4 lg:grid-cols-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">Order Now <i data-lucide="arrow-right" class="h-4 w-4"></i></span>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endsection