@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">PAYE</span>
                </nav>
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    PAYE - Pay As You Earn
                </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">
                        Pay As You Earn (PAYE) is the taxation of income of individuals derived from employment. This income includes salaries, wages, bonuses, allowances, and other benefits received in the course of employment.
                    </p>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Key Features</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Deducted at source by employers</li>
                        <li>Calculated based on graduated tax rates</li>
                        <li>Remitted monthly to the revenue service</li>
                        <li>Covers all employment income including allowances</li>
                    </ul>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Who is Liable?</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Employees earning above the minimum taxable income</li>
                        <li>Contract workers with employment-like arrangements</li>
                        <li>Directors receiving remuneration</li>
                    </ul>
                    <h3 class="text-lg font-semibold text-gray-900 mt-6 mb-3">Employer Obligations</h3>
                    <ul class="list-disc list-inside text-gray-600 space-y-2">
                        <li>Register as a tax agent with the revenue service</li>
                        <li>Deduct PAYE from employee salaries monthly</li>
                        <li>Remit deducted taxes within prescribed timeframes</li>
                        <li>File annual returns and provide tax certificates to employees</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 PAYE 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