@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-16 px-6">
    <div class="text-center mb-16">
        <h1 class="text-4xl font-black text-gray-900 tracking-tight">Halo, <span class="text-orange-700">{{ Auth::user()->name }}!</span></h1>
        <p class="text-gray-500 mt-2">Siap untuk melakukan klasifikasi biji kopi hari ini?</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
        <div class="group p-8 bg-white border border-gray-100 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-all duration-500 text-center">
            <div class="w-16 h-16 bg-orange-50 text-orange-700 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:rotate-6 transition">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path></svg>
            </div>
            <h4 class="font-bold text-lg mb-2">1. Persiapkan Sampel</h4>
            <p class="text-gray-500 text-sm leading-relaxed">Letakkan satu biji kopi Robusta di atas alas putih polos dengan cahaya yang terang.</p>
        </div>

        <div class="group p-8 bg-orange-700 rounded-[2.5rem] shadow-xl text-center text-white relative overflow-hidden">
            <div class="w-16 h-16 bg-white/20 text-white rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>
            <h4 class="font-bold text-lg mb-2">2. Jalankan Analisis</h4>
            <p class="text-orange-100 text-sm leading-relaxed text-balance">Buka kamera dan ambil gambar. Sistem akan melakukan ekstraksi fitur warna secara instan.</p>
            <div class="absolute -right-4 -bottom-4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>
        </div>

        <div class="group p-8 bg-white border border-gray-100 rounded-[2.5rem] shadow-sm hover:shadow-xl transition-all duration-500 text-center">
            <div class="w-16 h-16 bg-orange-50 text-orange-700 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:-rotate-6 transition">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
            </div>
            <h4 class="font-bold text-lg mb-2">3. Lihat Hasil SVM</h4>
            <p class="text-gray-500 text-sm leading-relaxed">Dapatkan hasil klasifikasi tingkat kematangan beserta skor akurasi model.</p>
        </div>
    </div>

    <div class="flex flex-col md:flex-row items-center justify-center gap-6">
        <a href="{{ route('klasifikasi') }}" class="w-full md:w-auto inline-flex items-center justify-center gap-4 px-12 py-5 bg-gray-900 text-white rounded-3xl font-bold shadow-2xl hover:bg-black hover:-translate-y-2 transition-all duration-300 group">
            <span>Buka Kamera Klasifikasi</span>
            <svg class="w-5 h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
        
        <a href="{{ route('history') }}" class="w-full md:w-auto inline-flex items-center justify-center gap-4 px-10 py-5 bg-white border border-gray-200 text-gray-900 rounded-3xl font-bold hover:bg-gray-50 hover:-translate-y-1 transition-all duration-300 shadow-sm">
            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            <span>Lihat Riwayat Data</span>
        </a>
    </div>
</div>
@endsection