@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">Land Use Charge</span>
                </nav>
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">Land Use Charge</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">Manages the computation and notification of three different laws grouped as Land Use Charge: tenement rate, property tax, and ground rent.</p>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Components</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Tenement Rate - based on property value</li>
                        <li>Property Tax - based on property classification</li>
                        <li>Ground Rent - annual land holding charge</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