@extends('layouts.app')
@section('title', $pageTitle . ' - ERAS')
@section('content')
<main class="relative">
    <section class="py-16 lg:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto mb-12">
                <nav class="text-sm text-gray-500 mb-4"><a href="{{ route('public.tax-types') }}" class="hover:text-emerald-600">Tax Types</a><span class="mx-2">/</span><span class="text-gray-900">Vehicle Registration</span></nav>
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">Vehicle Registration</h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
            </div>
            <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-8 max-w-4xl mx-auto">
                <div class="prose prose-gray max-w-none">
                    <p class="text-gray-600 leading-relaxed">Processes and manages motor license requests, reminders, notification and payments within the state for all categories of vehicles.</p>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Services</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2"><li>New vehicle registration</li><li>Annual license renewal</li><li>Change of ownership</li><li>Road worthiness certification</li></ul>
                    <div class="mt-8"><a href="{{ route('cbs.pay-taxes') }}" class="inline-flex items-center gap-2 bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700 transition">Pay Online<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection