@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-emerald-700">Academic services</p>
            <h1 class="mt-3 text-4xl font-bold">High-converting academic support services for students across the USA.</h1>
            <p class="mt-4 leading-7 text-slate-600">Admissions, essays, nursing, tutoring, research, SPSS, statistics, Excel, Power BI, certification prep, and GPA improvement coaching.</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 hover:bg-emerald-700"><i data-lucide="send" class="h-4 w-4"></i> Get Academic Help</a>
        </div>
        <div class="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            @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="text-lg 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">View service <i data-lucide="arrow-right" class="h-4 w-4"></i></span>
                    <span class="ml-3 mt-4 inline-flex items-center gap-2 text-sm font-semibold text-sky-700">Order Now</span>
                </a>
            @endforeach
        </div>
    </div>
</section>
@endsection