@extends('layouts.app')

@section('content')
<section class="relative pt-16 pb-16 bg-white overflow-hidden border-b border-gray-100">
    <div class="absolute top-0 left-0 w-96 h-96 bg-orange-50 rounded-full blur-3xl opacity-50 -translate-x-1/2 -translate-y-1/2"></div>
    
    <div class="container mx-auto px-10 relative z-10 text-center max-w-3xl">
        <span class="px-4 py-2 bg-orange-50 text-orange-700 text-sm font-bold rounded-full tracking-widest uppercase mb-4 inline-block">Edukasi Kopi</span>
        
        <h1 class="text-5xl font-extrabold text-gray-900 leading-tight mb-4">
            Karakteristik <span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-700 to-amber-500">Tingkat Roasting</span>
        </h1>
        
        <p class="text-gray-500 text-lg leading-relaxed">
            Kenali perbedaan warna, profil rasa, dan karakteristik kafein dari setiap tingkatan kematangan biji kopi robusta untuk menemukan preferensi seduhan terbaik Anda.
        </p>
    </div>
</section>

<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-10 max-w-6xl">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            
            <div class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100 hover:shadow-xl hover:border-orange-200 transition-all duration-300 group">
                <div class="aspect-square bg-gray-100 rounded-3xl mb-8 overflow-hidden relative">
                    <img src="{{ asset('img/light-roast.jpg') }}" alt="Light Roast" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-gray-900">180°C - 205°C</div>
                </div>
                <h3 class="text-2xl font-black text-gray-900 mb-2">Light Roast</h3>
                <p class="text-orange-700 font-bold text-sm uppercase tracking-widest mb-6">Sangrai Rendah</p>
                
                <div class="space-y-4 text-sm">
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                        <p><span class="font-bold text-gray-900">Warna Fisik:</span> Cokelat muda cerah, permukaan sangat kering tanpa kilau minyak.</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <p><span class="font-bold text-gray-900">Profil Rasa:</span> Keasaman (acidity) tinggi, cita rasa khas daerah tanam (fruity/herbal) sangat menonjol.</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        <p><span class="font-bold text-gray-900">Kadar Kafein:</span> Sangat tinggi.</p>
                    </div>
                    <div class="p-4 bg-orange-50 rounded-2xl mt-4">
                        <span class="block text-xs font-bold text-orange-700 uppercase mb-1">Rekomendasi Seduh</span>
                        <p class="text-gray-700 font-medium">Manual Brew (V60, Chemex, AeroPress)</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100 hover:shadow-xl hover:border-orange-200 transition-all duration-300 group">
                <div class="aspect-square bg-gray-100 rounded-3xl mb-8 overflow-hidden relative">
                    <img src="{{ asset('img/medium-roast.jpg') }}" alt="Medium Roast" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-gray-900">210°C - 220°C</div>
                </div>
                <h3 class="text-2xl font-black text-gray-900 mb-2">Medium Roast</h3>
                <p class="text-orange-700 font-bold text-sm uppercase tracking-widest mb-6">Sangrai Sedang</p>
                
                <div class="space-y-4 text-sm">
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                        <p><span class="font-bold text-gray-900">Warna Fisik:</span> Cokelat sedang (seperti cokelat batangan), permukaan mulai terlihat sedikit berminyak.</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <p><span class="font-bold text-gray-900">Profil Rasa:</span> Sangat seimbang (balanced). Keasaman berkurang, muncul aroma manis seperti karamel atau kacang (nutty).</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        <p><span class="font-bold text-gray-900">Kadar Kafein:</span> Sedang.</p>
                    </div>
                    <div class="p-4 bg-orange-50 rounded-2xl mt-4">
                        <span class="block text-xs font-bold text-orange-700 uppercase mb-1">Rekomendasi Seduh</span>
                        <p class="text-gray-700 font-medium">Americano, Long Black, Syphon</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-[2.5rem] p-8 shadow-sm border border-gray-100 hover:shadow-xl hover:border-orange-200 transition-all duration-300 group">
                <div class="aspect-square bg-gray-100 rounded-3xl mb-8 overflow-hidden relative">
                    <img src="{{ asset('img/dark-roast.jpg') }}" alt="Dark Roast" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    <div class="absolute top-4 right-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-gray-900">225°C - 240°C</div>
                </div>
                <h3 class="text-2xl font-black text-gray-900 mb-2">Dark Roast</h3>
                <p class="text-orange-700 font-bold text-sm uppercase tracking-widest mb-6">Sangrai Tinggi</p>
                
                <div class="space-y-4 text-sm">
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
                        <p><span class="font-bold text-gray-900">Warna Fisik:</span> Cokelat sangat tua hingga kehitaman, permukaan mengkilap dan sangat berminyak (oily).</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <p><span class="font-bold text-gray-900">Profil Rasa:</span> Rasa pahit dominan, body sangat tebal. Aroma panggangan (smoky, dark chocolate) sangat pekat.</p>
                    </div>
                    <div class="flex gap-3">
                        <svg class="w-5 h-5 text-orange-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                        <p><span class="font-bold text-gray-900">Kadar Kafein:</span> Paling rendah.</p>
                    </div>
                    <div class="p-4 bg-orange-50 rounded-2xl mt-4">
                        <span class="block text-xs font-bold text-orange-700 uppercase mb-1">Rekomendasi Seduh</span>
                        <p class="text-gray-700 font-medium">Espresso, Café Latte, Kopi Susu Aren</p>
                    </div>
                </div>
            </div>

        </div>

        <div class="mt-20 text-center">
            @auth
                <a href="{{ route('klasifikasi') }}" class="inline-flex items-center gap-3 px-10 py-4 bg-gray-900 text-white rounded-full font-bold hover:bg-black transition-all shadow-xl">
                    <span>Coba Klasifikasi 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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            @else
                <a href="{{ route('login') }}" class="inline-flex items-center gap-3 px-10 py-4 bg-gray-900 text-white rounded-full font-bold hover:bg-black transition-all shadow-xl">
                    <span>Login untuk Klasifikasi</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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
                </a>
            @endauth
        </div>
    </div>
</section>
@endsection