@extends('layouts.app')

@section('content')
<section class="relative overflow-hidden bg-white px-10 py-24 min-h-[90vh] flex items-center">
    <div class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/4 w-96 h-96 bg-orange-100 rounded-full blur-3xl opacity-50"></div>
    <div class="absolute bottom-0 left-0 translate-y-1/2 -translate-x-1/4 w-64 h-64 bg-yellow-100 rounded-full blur-3xl opacity-50"></div>

    <div class="container mx-auto flex flex-col md:flex-row items-center justify-between relative z-10">
        <div class="md:w-1/2 space-y-8">
            <span class="px-4 py-2 bg-orange-50 text-orange-700 text-sm font-bold rounded-full tracking-widest uppercase">AI Coffee Technology</span>
            <h1 class="text-6xl font-extrabold leading-[1.1] text-gray-900">
                Klasifikasi Tingkat <br> 
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-700 to-amber-500">Kematangan Kopi</span> <br>
                Roasted Robusta.
            </h1>
            <p class="text-gray-500 text-xl max-w-lg leading-relaxed">
                Identifikasi kematangan biji kopi Anda (Light, Medium, Dark) dengan akurasi tinggi menggunakan teknologi SVM berbasis Citra Digital.
            </p>
            <div class="flex flex-wrap gap-4">
    @auth
        <a href="{{ route('dashboard') }}" class="px-8 py-4 bg-orange-700 text-white rounded-full font-bold shadow-lg hover:bg-orange-800 transition">
            Buka Dashboard Anda
        </a>
    @else
        <a href="{{ route('login') }}" class="px-8 py-4 bg-gray-900 text-white rounded-full font-bold shadow-lg hover:bg-black transition">
            Mulai Sekarang
        </a>
    @endauth

    <a href="{{ route('karakteristik') }}" class="px-8 py-4 bg-white text-gray-900 border border-gray-200 rounded-full font-bold shadow-sm hover:bg-gray-50 hover:border-gray-300 transition">
        Pelajari Karakteristik
    </a>
</div>
        </div>

        <div class="md:w-1/2 mt-16 md:mt-0 flex justify-end relative">
            <div class="relative group">
                <div class="absolute -inset-4 bg-gradient-to-tr from-orange-500 to-amber-300 rounded-[2.5rem] blur opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                <div class="relative bg-white p-4 rounded-[2rem] shadow-2xl overflow-hidden">
                    <img src="{{ asset('img/roasting-process.jpg') }}" alt="Ilustrasi Kopi Roasted" class="rounded-2xl w-full max-w-[450px] object-cover hover:scale-105 transition-transform duration-700">
                </div>
            </div>
        </div>
    </div>
</section>

<section class="bg-gray-900 py-16">
    <div class="max-w-6xl mx-auto px-10 grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
        <div class="space-y-2">
            <h3 class="text-4xl font-black text-orange-500">95%</h3>
            <p class="text-white font-bold text-sm uppercase tracking-widest">Akurasi Tinggi</p>
            <p class="text-gray-400 text-xs">Dilatih dengan ratusan dataset pilihan</p>
        </div>
        <div class="space-y-2 border-y md:border-y-0 md:border-x border-gray-800 py-8 md:py-0">
            <h3 class="text-4xl font-black text-orange-500">Otomatis</h3>
            <p class="text-white font-bold text-sm uppercase tracking-widest">Deteksi Real-time</p>
            <p class="text-gray-400 text-xs">Sistem cerdas mengenali warna instan</p>
        </div>
        <div class="space-y-2">
            <h3 class="text-4xl font-black text-orange-500">Praktis</h3>
            <p class="text-white font-bold text-sm uppercase tracking-widest">Web-Based</p>
            <p class="text-gray-400 text-xs">Akses melalui browser laptop atau smartphone</p>
        </div>
    </div>
</section>

<section id="informasi" class="py-24 bg-orange-50/50 border-y border-orange-100">
    <div class="max-w-6xl mx-auto px-10">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
            <div class="space-y-6">
                <span class="text-orange-700 font-black uppercase text-[10px] tracking-[0.3em]">Core Technology</span>
                <h2 class="text-4xl font-extrabold text-gray-900 leading-tight">Mengenal Metode <br> Support Vector Machine.</h2>
                <p class="text-gray-600 leading-relaxed text-lg">
                    Sistem ini menggunakan algoritma SVM untuk mencari hyperplane atau garis pemisah terbaik antara kategori warna biji kopi. 
                    Melalui proses ekstraksi fitur citra digital, setiap data piksel dianalisis secara objektif.
                </p>
                <div class="flex gap-4">
                    <div class="p-4 bg-white rounded-2xl shadow-sm border border-orange-100 flex-1">
                        <h4 class="font-bold text-gray-900 text-sm mb-1">Objektif</h4>
                        <p class="text-xs text-gray-500">Menghilangkan faktor subjektivitas mata manusia.</p>
                    </div>
                    <div class="p-4 bg-white rounded-2xl shadow-sm border border-orange-100 flex-1">
                        <h4 class="font-bold text-gray-900 text-sm mb-1">Akurat</h4>
                        <p class="text-xs text-gray-500">Klasifikasi berdasarkan data numerik warna nyata.</p>
                    </div>
                </div>
            </div>
            <div class="relative">
                
                <div class="bg-white p-6 rounded-[2.5rem] shadow-xl border border-gray-50 rotate-3 hover:rotate-0 transition-transform duration-500">
                    <div class="aspect-video bg-gray-900 rounded-2xl flex items-center justify-center text-orange-500 font-mono text-xs p-4 overflow-hidden">
                        SVM Model Output <br>
                        [Classifying: Dark Roast... 99.2%] <br>
                        [Result: SUCCESS]
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section id="panduan" class="py-24 bg-white">
    <div class="max-w-6xl mx-auto px-10">
        <div class="text-center mb-16">
            <h2 class="text-4xl font-extrabold text-gray-900">Panduan Pengujian</h2>
            <p class="text-gray-500 mt-4 italic">Ikuti prosedur berikut untuk menjamin akurasi klasifikasi citra digital.</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="p-10 bg-gray-50 rounded-[2.5rem] border border-gray-100 hover:bg-orange-50 hover:border-orange-200 transition-all duration-300 group">
                <div class="w-14 h-14 bg-white text-orange-700 rounded-2xl flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition">
                    <span class="text-xl font-black">01</span>
                </div>
                <h5 class="font-bold text-xl mb-3 text-gray-900">Alas Putih Polos</h5>
                <p class="text-gray-500 text-sm leading-relaxed">
                    Letakkan biji kopi di atas permukaan putih bersih agar sistem dapat melakukan segmentasi objek dengan sempurna tanpa *noise*.
                </p>
            </div>

            <div class="p-10 bg-gray-50 rounded-[2.5rem] border border-gray-100 hover:bg-orange-50 hover:border-orange-200 transition-all duration-300 group">
                <div class="w-14 h-14 bg-white text-orange-700 rounded-2xl flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition">
                    <span class="text-xl font-black">02</span>
                </div>
                <h5 class="font-bold text-xl mb-3 text-gray-900">Cahaya Terang</h5>
                <p class="text-gray-500 text-sm leading-relaxed">
                    Pastikan lingkungan pengujian memiliki intensitas cahaya yang cukup dan merata untuk menangkap fitur warna asli biji kopi.
                </p>
            </div>

            <div class="p-10 bg-gray-50 rounded-[2.5rem] border border-gray-100 hover:bg-orange-50 hover:border-orange-200 transition-all duration-300 group">
                <div class="w-14 h-14 bg-white text-orange-700 rounded-2xl flex items-center justify-center mb-6 shadow-sm group-hover:scale-110 transition">
                    <span class="text-xl font-black">03</span>
                </div>
                <h5 class="font-bold text-xl mb-3 text-gray-900">Fokus Kamera</h5>
                <p class="text-gray-500 text-sm leading-relaxed">
                    Posisikan satu biji kopi tepat di tengah kotak bidik. Sistem akan mengekstraksi nilai RGB dari area tersebut secara otomatis.
                </p>
            </div>
        </div>
    </div>
</section>

<section class="py-24 bg-gray-50">
    <div class="max-w-4xl mx-auto px-10"> 
        <div class="bg-gray-900 rounded-[3rem] p-16 text-center text-white shadow-2xl relative overflow-hidden group">
            <div class="relative z-10">
                <span class="text-orange-500 font-black uppercase text-[10px] tracking-[0.4em] mb-4 block">Ready to Test?</span>
                <h2 class="text-4xl font-bold mb-6">Siap Menguji Biji Kopi Anda?</h2>
                <p class="text-gray-400 mb-10 max-w-md mx-auto leading-relaxed">
                    Gunakan teknologi <strong>SVM</strong> kami untuk standarisasi tingkat kematangan produksi kopi Anda secara instan.
                </p>
                
                @auth
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-3 px-10 py-4 bg-orange-700 text-white rounded-2xl font-bold hover:bg-orange-800 hover:-translate-y-1 transition-all shadow-lg">
                        <span>Buka Dashboard</span>
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                    </a>
                @else
                    <a href="{{ route('login') }}" class="inline-flex items-center gap-3 px-10 py-4 bg-orange-700 text-white rounded-2xl font-bold hover:bg-orange-800 hover:-translate-y-1 transition-all shadow-lg text-sm uppercase tracking-widest">
                        <span>Mulai Sekarang</span>
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                    </a>
                    
                @endauth
            </div>
            
            <div class="absolute top-0 right-0 w-64 h-64 bg-orange-700/10 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl group-hover:bg-orange-700/20 transition duration-1000"></div>
            <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-1/2 -translate-x-1/2 blur-2xl"></div>
        </div>
    </div>
</section>

<footer class="py-12 bg-white border-t border-gray-100">
    <div class="max-w-6xl mx-auto px-10 flex flex-col md:flex-row justify-between items-center gap-6">
        <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-orange-700 rounded-lg"></div>
            <div class="text-xl font-bold italic tracking-tighter">RobustaMeter.id</div>
        </div>
        <p class="text-gray-400 text-xs">© 2026 RobustaMeter — Tugas Akhir Klasifikasi SVM Berbasis Citra Digital.</p>
        <div class="flex gap-6 text-[10px] font-black uppercase tracking-widest text-gray-500">
    <a href="{{ route('landingpage') }}" class="hover:text-orange-700 transition">Beranda</a>
    <a href="{{ route('karakteristik') }}" class="hover:text-orange-700 transition">Karakteristik</a>
    <a href="#informasi" class="hover:text-orange-700 transition">Informasi</a>
    <a href="{{ route('dashboard') }}" class="hover:text-orange-700 transition">Panduan</a>
</div>
    </div>
</footer>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.dot');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        let currentIndex = 0;

        if (!nextBtn || !prevBtn) return;

        function showSlide(index) {
            slides.forEach((slide, i) => {
                slide.classList.remove('opacity-100', 'scale-100');
                slide.classList.add('opacity-0', 'scale-105');
                
                dots[i].classList.remove('bg-orange-700', 'w-10');
                dots[i].classList.add('bg-gray-300', 'w-3');
            });

            slides[index].classList.remove('opacity-0', 'scale-105');
            slides[index].classList.add('opacity-100', 'scale-100');
            
            dots[index].classList.remove('bg-gray-300', 'w-3');
            dots[index].classList.add('bg-orange-700', 'w-10');
        }

        nextBtn.addEventListener('click', () => {
            currentIndex = (currentIndex + 1) % slides.length;
            showSlide(currentIndex);
        });

        prevBtn.addEventListener('click', () => {
            currentIndex = (currentIndex - 1 + slides.length) % slides.length;
            showSlide(currentIndex);
        });

        let autoSlide = setInterval(() => {
            currentIndex = (currentIndex + 1) % slides.length;
            showSlide(currentIndex);
        }, 6000);

        const resetInterval = () => {
            clearInterval(autoSlide);
            autoSlide = setInterval(() => {
                currentIndex = (currentIndex + 1) % slides.length;
                showSlide(currentIndex);
            }, 6000);
        };

        nextBtn.addEventListener('click', resetInterval);
        prevBtn.addEventListener('click', resetInterval);
    });
</script>
@endpush