@extends('layouts.app')
@section('title', 'Home')
@section('content')
<style>
    @keyframes landing-hero-vertigo {
        0% {
            transform: scale(1.04) translate3d(0, 0, 0);
        }
        25% {
            transform: scale(1.08) translate3d(-0.8%, -0.6%, 0);
        }
        50% {
            transform: scale(1.1) translate3d(0.8%, 0.5%, 0);
        }
        75% {
            transform: scale(1.07) translate3d(-0.5%, 0.7%, 0);
        }
        100% {
            transform: scale(1.04) translate3d(0, 0, 0);
        }
    }

    .landing-hero-image {
        animation: landing-hero-vertigo 18s ease-in-out infinite alternate;
        filter: blur(1.8px);
        transform-origin: center center;
        will-change: transform;
    }

    .landing-hero-glass {
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
</style>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8 md:space-y-10">
    <section class="surface-card rounded-4xl overflow-hidden">
        <div class="grid lg:grid-cols-3 gap-0">
            <div class="lg:col-span-2 relative min-h-[360px] p-5 sm:p-7 md:min-h-[420px] md:p-10 flex flex-col justify-between overflow-hidden">
                <div class="absolute inset-0">
                    <img
                        src="{{ asset('images/kameras/Untuk Landing Page.jpg') }}"
                        alt="Background landing page"
                        class="landing-hero-image absolute inset-0 h-full w-full object-cover"
                    >
                    <div class="absolute inset-0 bg-black/74"></div>
                    <div class="landing-hero-glass absolute inset-0 bg-black/20"></div>
                    <div class="absolute inset-y-6 left-6 right-6 rounded-[1.6rem] border border-white/10 bg-linear-to-br from-black/68 via-black/40 to-[#edc039]/14"></div>
                    <div class="absolute inset-x-8 bottom-8 h-44 rounded-[1.4rem] bg-linear-to-t from-black/88 via-black/58 to-transparent"></div>
                </div>
                <div class="relative z-10 -translate-y-2 sm:-translate-y-3">
                    <div class="inline-flex items-center gap-2 rounded-full border border-white/70 bg-white/70 px-4 py-2 text-xs font-medium uppercase tracking-[0.2em] text-gray-600 backdrop-blur">
                        <i class="bi bi-stars text-[#edc039]"></i>
                        Jember Kamera Mangli
                    </div>
                </div>
                <div class="relative z-10 max-w-2xl rounded-[1.8rem] bg-black/30 p-4 sm:p-5 md:p-6 text-white shadow-[0_20px_45px_rgba(0,0,0,0.28)]">
                    <h1 class="mt-2 text-2xl font-bold leading-tight text-white [text-shadow:0_3px_18px_rgba(0,0,0,0.7)] sm:text-3xl md:text-5xl">Temukan Kamera Terbaik Sesuai Kebutuhanmu</h1>
                    <p class="mt-4 text-sm text-white/95 [text-shadow:0_2px_12px_rgba(0,0,0,0.65)] sm:text-base md:text-lg max-w-2xl">
                        Sistem rekomendasi berbasis TOPSIS membantu kamu memilih kamera secara objektif, cepat, dan mudah dipahami untuk kebutuhan foto maupun video.
                    </p>
                    <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:flex-wrap">
                    @auth
                        @if(auth()->user()->isAdmin())
                            <a href="{{ route('dashboard') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Buka Dashboard Admin</a>
                        @else
                            <a href="{{ route('form') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Mulai Rekomendasi</a>
                            <a href="{{ route('profile') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Lihat Profile User</a>
                        @endif
                    @else
                        <a href="{{ route('login') }}" class="btn-dark px-5 py-3 text-center font-semibold shadow-sm">Login Untuk Mulai</a>
                    @endauth
                    </div>
                </div>
            </div>
            <div class="bg-white p-4 sm:p-6 md:p-7">
                <div class="rounded-[1.6rem] border border-gray-200 bg-white p-5 shadow-[0_18px_40px_rgba(15,23,42,0.08)]">
                <h2 class="text-xl font-bold text-gray-900">Coba Rekomendasi Cepat</h2>
                <p class="text-sm text-gray-600 mt-1">Isi form ringkas untuk mulai cari kamera terbaik dengan tampilan yang lebih simpel dan nyaman.</p>

                @auth
                    <form action="{{ route('proses') }}" method="POST" class="mt-5 space-y-3">
                        @csrf
                        <div>
                            <label class="text-sm font-medium text-gray-700">Jenis Penggunaan</label>
                            <select name="penggunaan" class="mt-1 w-full rounded-full border-gray-200 bg-[#fbfbfa] px-4 py-3 focus:border-[#edc039] focus:ring-[#edc039]">
                                <option value="outdoor_day">Outdoor - Day</option>
                                <option value="outdoor_night">Outdoor - Night</option>
                                <option value="indoor_cerah">Indoor - Cerah</option>
                                <option value="indoor_gelap">Indoor - Gelap</option>
                                <option value="all">Semua Kondisi</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">Merek Kamera</label>
                            <select name="merek" class="mt-1 w-full rounded-full border-gray-200 bg-[#fbfbfa] px-4 py-3 focus:border-[#edc039] focus:ring-[#edc039]">
                                <option value="semua">Semua Merek</option>
                                @foreach($merekList as $merek)
                                    <option value="{{ $merek }}">{{ $merek }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="w-full btn-dark py-3 font-semibold hover:opacity-95">
                            Proses Rekomendasi
                        </button>
                    </form>
                @else
                    <form action="{{ route('login') }}" method="GET" class="mt-5 space-y-3">
                        <div>
                            <label class="text-sm font-medium text-gray-700">Jenis Penggunaan</label>
                            <select disabled class="mt-1 w-full rounded-full border-gray-200 bg-[#f6f6f4] px-4 py-3 text-gray-500">
                                <option>Outdoor - Day</option>
                            </select>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-700">Merek Kamera</label>
                            <select disabled class="mt-1 w-full rounded-full border-gray-200 bg-[#f6f6f4] px-4 py-3 text-gray-500">
                                <option>Semua Merek</option>
                                @foreach($merekList as $merek)
                                    <option>{{ $merek }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="w-full btn-dark py-3 font-semibold hover:opacity-95">
                            Login Untuk Coba Rekomendasi
                        </button>
                        <a href="{{ route('register') }}" class="block text-center text-sm text-[#edc039] hover:underline">Belum punya akun? Register dulu</a>
                    </form>
                @endauth
                </div>
            </div>
        </div>
    </section>

    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="surface-card rounded-[1.6rem] p-5 text-center">
            <p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-bullseye"></i></p>
            <h3 class="font-semibold text-gray-800">Rekomendasi Objektif</h3>
            <p class="text-sm text-gray-600 mt-1">Perhitungan berbasis metode TOPSIS.</p>
        </div>
        <div class="surface-card rounded-[1.6rem] p-5 text-center">
            <p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-hand-thumbs-up"></i></p>
            <h3 class="font-semibold text-gray-800">Mudah Digunakan</h3>
            <p class="text-sm text-gray-600 mt-1">Input preferensi dalam beberapa langkah.</p>
        </div>
        <div class="surface-card rounded-[1.6rem] p-5 text-center">
            <p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-lightning-charge"></i></p>
            <h3 class="font-semibold text-gray-800">Cepat & Efisien</h3>
            <p class="text-sm text-gray-600 mt-1">Hasil rekomendasi tampil dalam hitungan detik.</p>
        </div>
        <div class="surface-card rounded-[1.6rem] p-5 text-center">
            <p class="text-2xl mb-2 text-[#edc039]"><i class="bi bi-mortarboard"></i></p>
            <h3 class="font-semibold text-gray-800">Cocok Untuk Pemula</h3>
            <p class="text-sm text-gray-600 mt-1">Panduan pilihan kamera jadi lebih terarah.</p>
        </div>
    </section>

    <section class="surface-card rounded-[1.8rem] p-5 md:p-8">
        <h2 class="text-xl md:text-2xl font-bold text-gray-900">Cara Kerja Rekomendasi</h2>
        <p class="text-gray-600 mt-2">Alur singkat agar kamu tahu bagaimana sistem menentukan kamera terbaik.</p>
        <div class="mt-5 grid gap-4 text-sm md:grid-cols-3">
            <div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
                <p class="font-semibold text-[#edc039]">1. Isi Kebutuhan</p>
                <p class="text-gray-600 mt-1">Tentukan tujuan penggunaan, merek favorit, dan prioritas kualitas.</p>
            </div>
            <div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
                <p class="font-semibold text-[#edc039]">2. Proses TOPSIS</p>
                <p class="text-gray-600 mt-1">Sistem melakukan normalisasi, pembobotan, dan perhitungan nilai preferensi.</p>
            </div>
            <div class="rounded-[1.2rem] border border-[#f2df9c] bg-[#fffcf0] p-4">
                <p class="font-semibold text-[#edc039]">3. Hasil Rekomendasi</p>
                <p class="text-gray-600 mt-1">Kamu mendapatkan kamera terbaik berikut lensa yang paling sesuai.</p>
            </div>
        </div>
    </section>
</div>
@endsection