@extends('layouts.app')

@section('content')
<section class="bg-white py-20">
    <div class="container mx-auto px-4 flex flex-col items-center text-center">
        <h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-6">
            Sampaikan <span class="text-blue-600">Aspirasi</span> Anda,<br>Kawal Masa Depan Bangsa.
        </h1>
        <p class="text-lg text-gray-600 max-w-2xl mb-10">
            Platform digital resmi untuk berpartisipasi dalam perumusan kebijakan publik dan memantau kinerja wakil rakyat secara transparan.
        </p>
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
            <a href="/tulis-aspirasi" class="bg-blue-600 text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-blue-700 shadow-lg shadow-blue-200 transition">Mulai Kirim Aspirasi</a>
            <a href="/aspirasi-publik" class="bg-white border-2 border-gray-200 text-gray-700 px-8 py-4 rounded-xl font-bold text-lg hover:bg-gray-50 transition">Lihat Aspirasi Publik</a>
        </div>
    </div>
</section>

<section class="py-16 container mx-auto px-4">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="bg-blue-50 p-8 rounded-2xl border border-blue-100 text-center">
            <p class="text-3xl font-bold text-blue-600 mb-2">1,240+</p>
            <p class="text-gray-600 font-medium">Aspirasi Masuk</p>
        </div>
        <div class="bg-green-50 p-8 rounded-2xl border border-green-100 text-center">
            <p class="text-3xl font-bold text-green-600 mb-2">850+</p>
            <p class="text-gray-600 font-medium">Dukungan Diberikan</p>
        </div>
        <div class="bg-purple-50 p-8 rounded-2xl border border-purple-100 text-center">
            <p class="text-3xl font-bold text-purple-600 mb-2">42</p>
            <p class="text-gray-600 font-medium">RUU Sedang Dibahas</p>
        </div>
    </div>
</section>
@endsection