@extends('layouts.app')

@section('title', 'Services — '.config('site.full_name'))
@section('meta_description', 'Education and migration services: student enrolment, visa applications, skilled migration, professional year, health insurance and more.')

@section('content')

<x-page-hero
    title="Everything you need, "
    accent="under one roof"
    crumb="Services"
    subtitle="From your first course enquiry to permanent residency, our services cover every stage of your education and migration journey." />

{{-- Services grid --}}
<section class="container-x py-20 md:py-24">
    <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        @foreach ($services as $s)
            <div class="reveal group relative overflow-hidden rounded-3xl border border-slate-100 bg-white p-7 transition-all duration-300 hover:-translate-y-1 hover:border-brand-200 hover:shadow-xl hover:shadow-brand-600/5">
                <span class="absolute -right-6 -top-6 h-20 w-20 rounded-full bg-brand-50 transition-transform duration-300 group-hover:scale-150"></span>
                <span class="relative grid h-14 w-14 place-items-center rounded-2xl bg-brand-600 text-white shadow-lg shadow-brand-600/25">
                    <svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="{{ $s->icon ?: 'M4 5h16M4 12h16M4 19h16' }}"/></svg>
                </span>
                <h3 class="relative mt-6 text-lg font-bold text-ink group-hover:text-brand-700">{{ $s->title }}</h3>
                <p class="relative mt-2 text-sm leading-relaxed text-slate-500">{{ $s->description }}</p>
            </div>
        @endforeach
    </div>
</section>

{{-- Process --}}
<section class="bg-slate-50/70 py-20 md:py-24">
    <div class="container-x">
        <div class="reveal mx-auto max-w-2xl text-center">
            <x-eyebrow class="justify-center">How it works</x-eyebrow>
            <h2 class="mt-4 text-3xl font-bold text-ink md:text-4xl">A simple, guided <span class="accent">4-step process</span></h2>
        </div>
        <div class="mt-14 grid gap-6 md:grid-cols-4">
            @php
                $steps = [
                    ['n'=>'01','t'=>'Free consultation','d'=>'We listen to your goals and assess your options honestly.'],
                    ['n'=>'02','t'=>'Tailored plan','d'=>'A clear roadmap for your course, visa or migration pathway.'],
                    ['n'=>'03','t'=>'We handle it','d'=>'Applications, documents and lodgement — done properly.'],
                    ['n'=>'04','t'=>'Ongoing support','d'=>'We stay with you through outcomes, renewals and next steps.'],
                ];
            @endphp
            @foreach ($steps as $i => $step)
                <div class="reveal relative rounded-3xl border border-slate-100 bg-white p-7">
                    <span class="font-serif text-5xl font-semibold text-brand-100">{{ $step['n'] }}</span>
                    <h3 class="mt-3 text-lg font-bold text-ink">{{ $step['t'] }}</h3>
                    <p class="mt-2 text-sm text-slate-500">{{ $step['d'] }}</p>
                    @if ($i < 3)
                        <svg class="absolute -right-3 top-1/2 hidden h-6 w-6 -translate-y-1/2 text-brand-200 md:block" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- Resources cross-links --}}
<section class="container-x py-20 md:py-24">
    <div class="grid gap-6 md:grid-cols-2">
        <a href="{{ route('points') }}" class="reveal group relative overflow-hidden rounded-4xl bg-gradient-to-br from-brand-700 to-brand-900 p-10 text-white">
            <div class="pointer-events-none absolute -right-8 -top-8 h-40 w-40 rounded-full bg-white/10 blur-2xl"></div>
            <h3 class="text-2xl font-bold">Skilled migration points calculator</h3>
            <p class="mt-3 max-w-sm text-brand-100">Estimate your points for the skilled migration visa in under two minutes.</p>
            <span class="mt-6 inline-flex items-center gap-2 font-semibold">Calculate now <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
        </a>
        <a href="{{ route('citizenship') }}" class="reveal group relative overflow-hidden rounded-4xl border border-slate-100 bg-slate-50 p-10">
            <div class="pointer-events-none absolute -right-8 -top-8 h-40 w-40 rounded-full bg-brand-100/60 blur-2xl"></div>
            <h3 class="text-2xl font-bold text-ink">Citizenship application</h3>
            <p class="mt-3 max-w-sm text-slate-500">Ready to become an Australian citizen? See the requirements and how we help.</p>
            <span class="mt-6 inline-flex items-center gap-2 font-semibold text-brand-700">Learn more <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
        </a>
    </div>
</section>

<x-cta-band title="Not sure which service you need?" text="Book a free consultation and we'll point you to the right pathway — no obligation, no pressure." />

@endsection
