<section class="text-center text-white py-5" style="background: linear-gradient(135deg, #B71C1C, #7f1414); min-height: 70vh;">
    <div class="container py-5">
        @if ($desa->logo)
            <img src="{{ Storage::url($desa->logo) }}" alt="Logo {{ $desa->nama }}" style="height: 90px;" class="mb-3 rounded-circle bg-white p-2">
        @endif

        <h1 class="display-6 fw-bold mb-1">Desa {{ $desa->nama }}</h1>
        <p class="mb-1">{{ $kecamatanNama }}, {{ $kabupatenNama }}</p>
        <p class="text-white-50 mb-4">Media Informasi Resmi Pilkades</p>

        @if ($desa->countdown && $desa->countdown->is_active)
            <div x-data="countdownTimer('{{ $desa->countdown->target_datetime->toIso8601String() }}')" x-init="start()" class="mb-4">
                <div class="small text-uppercase text-white-50 mb-2">{{ $desa->countdown->label }}</div>
                <div class="d-flex justify-content-center gap-3 fs-4 fw-bold">
                    <div><span x-text="days"></span><div class="small fw-normal text-white-50">Hari</div></div>
                    <div><span x-text="hours"></span><div class="small fw-normal text-white-50">Jam</div></div>
                    <div><span x-text="minutes"></span><div class="small fw-normal text-white-50">Menit</div></div>
                    <div><span x-text="seconds"></span><div class="small fw-normal text-white-50">Detik</div></div>
                </div>
            </div>
        @endif

        <a href="#sambutan" class="btn btn-light btn-lg">Lihat Informasi</a>
    </div>
</section>

@push('scripts')
<script>
    function countdownTimer(target) {
        return {
            days: '00', hours: '00', minutes: '00', seconds: '00',
            start() {
                const targetDate = new Date(target).getTime();
                const tick = () => {
                    const distance = targetDate - Date.now();
                    if (distance < 0) { this.days = this.hours = this.minutes = this.seconds = '00'; return; }
                    this.days = String(Math.floor(distance / (1000 * 60 * 60 * 24))).padStart(2, '0');
                    this.hours = String(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))).padStart(2, '0');
                    this.minutes = String(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))).padStart(2, '0');
                    this.seconds = String(Math.floor((distance % (1000 * 60)) / 1000)).padStart(2, '0');
                };
                tick();
                setInterval(tick, 1000);
            },
        };
    }
</script>
@endpush
