<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{{ config('app.name', 'Laravel') }}</title>

        @fonts

        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <script src="https://cdn.tailwindcss.com"></script>
            <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
        @endif
    </head>
    <body class="bg-gray-50 min-h-screen antialiased">

        {{-- Navigation --}}
        <header class="bg-green-800 text-white shadow-lg">
            <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <svg class="w-7 h-7 text-green-300" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17 8C8 10 5.9 16.17 3.82 21H5.71C6.72 18.42 8.05 15.64 10.18 13.68C11.09 14.62 12 15.88 12 17H14C14 14.93 12.74 13.2 11.49 11.98C12.87 11.07 14.62 10.5 17 10.5V8Z"/>
                        <path d="M17 8C8 10 5.9 16.17 3.82 21H5.71C6.72 18.42 8.05 15.64 10.18 13.68C11.09 14.62 12 15.88 12 17H14C14 14.93 12.74 13.2 11.49 11.98C12.87 11.07 14.62 10.5 17 10.5V8Z"/>
                    </svg>
                    <span class="text-xl font-bold tracking-wide">Hutan Simpan Malaysia</span>
                </div>

                @if (Route::has('login'))
                    <div class="flex items-center gap-3">
                        @auth
                            <a href="{{ url('/dashboard') }}"
                               class="px-4 py-2 text-sm border border-green-400 rounded hover:bg-green-700 transition">
                                Dashboard
                            </a>
                        @else
                            <a href="{{ route('login') }}"
                               class="px-4 py-2 text-sm hover:text-green-200 transition">
                                Log in
                            </a>
                            @if (Route::has('register'))
                                <a href="{{ route('register') }}"
                                   class="px-4 py-2 text-sm border border-green-400 rounded hover:bg-green-700 transition">
                                    Daftar
                                </a>
                            @endif
                        @endauth
                    </div>
                @endif
            </nav>
        </header>

        {{-- Carousel --}}
        <div
            x-data="{
                current: 0,
                total: 3,
                next() { this.current = (this.current + 1) % this.total },
                prev() { this.current = (this.current - 1 + this.total) % this.total },
                init() { setInterval(() => this.next(), 5000) }
            }"
            class="relative w-full overflow-hidden h-[480px] sm:h-[560px]"
        >
            {{-- Slide 1 --}}
            <div
                x-show="current === 0"
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0"
            >
                <img
                    src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=1400&h=600&fit=crop&q=80"
                    alt="Hutan hujan tropika Malaysia"
                    class="w-full h-full object-cover"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
                    <div class="p-8 sm:p-12">
                        <h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Keindahan Hutan Hujan Tropika</h2>
                        <p class="text-green-200 text-sm sm:text-base">Warisan alam semula jadi yang perlu kita pelihara bersama</p>
                    </div>
                </div>
            </div>

            {{-- Slide 2 --}}
            <div
                x-show="current === 1"
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0"
            >
                <img
                    src="https://images.unsplash.com/photo-1511497584788-876760111969?w=1400&h=600&fit=crop&q=80"
                    alt="Hutan simpan yang dilindungi"
                    class="w-full h-full object-cover"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
                    <div class="p-8 sm:p-12">
                        <h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Hutan Simpan yang Dilindungi</h2>
                        <p class="text-green-200 text-sm sm:text-base">Ekosistem penting bagi keseimbangan alam dan kehidupan liar</p>
                    </div>
                </div>
            </div>

            {{-- Slide 3 --}}
            <div
                x-show="current === 2"
                x-transition:enter="transition ease-out duration-700"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="transition ease-in duration-500"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="absolute inset-0"
            >
                <img
                    src="https://images.unsplash.com/photo-1542401886-65d6c61db217?w=1400&h=600&fit=crop&q=80"
                    alt="Rimba tropika Malaysia"
                    class="w-full h-full object-cover"
                >
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent flex items-end">
                    <div class="p-8 sm:p-12">
                        <h2 class="text-white text-2xl sm:text-4xl font-bold mb-2">Rimba Tropika yang Kaya</h2>
                        <p class="text-green-200 text-sm sm:text-base">Kepelbagaian flora dan fauna yang unik di rantau Asia Tenggara</p>
                    </div>
                </div>
            </div>

            {{-- Prev Button --}}
            <button
                @click="prev()"
                class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white w-10 h-10 rounded-full flex items-center justify-center transition text-xl font-bold"
                aria-label="Sebelumnya"
            >
                &#8249;
            </button>

            {{-- Next Button --}}
            <button
                @click="next()"
                class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/40 hover:bg-black/60 text-white w-10 h-10 rounded-full flex items-center justify-center transition text-xl font-bold"
                aria-label="Seterusnya"
            >
                &#8250;
            </button>

            {{-- Dot Indicators --}}
            <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-2">
                <button @click="current = 0" :class="current === 0 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
                <button @click="current = 1" :class="current === 1 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
                <button @click="current = 2" :class="current === 2 ? 'bg-white scale-110' : 'bg-white/50'" class="w-2.5 h-2.5 rounded-full transition-all"></button>
            </div>
        </div>

        {{-- Forest Reserve Section --}}
        <section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
            <div class="text-center mb-12">
                <h2 class="text-3xl sm:text-4xl font-bold text-green-800 mb-3">Hutan Simpan Utama Malaysia</h2>
                <p class="text-gray-500 max-w-xl mx-auto">Kenali warisan alam semula jadi negara kita yang bernilai tinggi dan perlu dipelihara untuk generasi akan datang.</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

                {{-- Card: Royal Belum --}}
                <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
                    <div class="h-52 overflow-hidden">
                        <img
                            src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=600&h=300&fit=crop&q=80"
                            alt="Hutan Simpan Royal Belum"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        >
                    </div>
                    <div class="p-6">
                        <span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Perak</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Royal Belum</h3>
                        <p class="text-gray-500 text-sm leading-relaxed">
                            Salah satu hutan tertua di dunia berusia lebih 130 juta tahun dengan keluasan 117,500 hektar.
                            Merupakan habitat gajah, harimau belang, badak sumbu dan tapir yang dilindungi di bawah pemuliharaan ketat.
                        </p>
                    </div>
                </div>

                {{-- Card: Ayer Hitam --}}
                <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
                    <div class="h-52 overflow-hidden">
                        <img
                            src="https://images.unsplash.com/photo-1511497584788-876760111969?w=600&h=300&fit=crop&q=80"
                            alt="Hutan Simpan Ayer Hitam"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        >
                    </div>
                    <div class="p-6">
                        <span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Selangor</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Ayer Hitam</h3>
                        <p class="text-gray-500 text-sm leading-relaxed">
                            Hutan hujan tropika pamah seluas 1,100 hektar di kawasan Puchong, Selangor.
                            Berfungsi sebagai tapak penyelidikan, pendidikan alam sekitar, dan tarikan eko-pelancongan yang popular berhampiran Kuala Lumpur.
                        </p>
                    </div>
                </div>

                {{-- Card: Bukit Nanas --}}
                <div class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
                    <div class="h-52 overflow-hidden">
                        <img
                            src="https://images.unsplash.com/photo-1542401886-65d6c61db217?w=600&h=300&fit=crop&q=80"
                            alt="Hutan Simpan Bukit Nanas"
                            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                        >
                    </div>
                    <div class="p-6">
                        <span class="inline-block text-xs font-semibold text-green-600 uppercase tracking-widest mb-2">Kuala Lumpur</span>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">Hutan Simpan Bukit Nanas</h3>
                        <p class="text-gray-500 text-sm leading-relaxed">
                            Rizab hutan bandar tertua di Malaysia, digazet sejak tahun 1906 dan terletak di jantung Kuala Lumpur.
                            Menyimpan pelbagai spesies flora dan fauna unik di tengah-tengah persekitaran bandar yang sibuk.
                        </p>
                    </div>
                </div>

            </div>
        </section>

        {{-- Footer --}}
        <footer class="bg-green-900 text-white mt-8 py-8">
            <div class="max-w-7xl mx-auto px-4 text-center">
                <p class="text-green-300 text-sm">&copy; {{ date('Y') }} {{ config('app.name') }}. Hak Cipta Terpelihara.</p>
            </div>
        </footer>

    </body>
</html>
