@extends('layouts.app')

@section('title', 'Cara Memilah Sampah - Edukasi Sampah')

@section('styles')
<style>
    /* Kids Stepper Styles */
    .adventure-step-card {
        border-radius: 1.5rem;
        background: #ffffff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
        border: 3px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
    }
    .adventure-step-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }
    
    .step-badge-lg {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        font-weight: 800;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    }

    .visual-flow-box {
        background: #f8fafc;
        border-radius: 1rem;
        padding: 1rem;
        margin-top: 1rem;
        border: 2px dashed #cbd5e1;
    }

    .animate-bounce-slow {
        animation: kidBounce 2s infinite;
    }
    .animate-float {
        animation: kidFloat 3s infinite ease-in-out;
    }
    .animate-wiggle {
        animation: kidWiggle 1.5s infinite ease-in-out;
    }

    @keyframes kidBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    @keyframes kidFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    @keyframes kidWiggle {
        0%, 100% { transform: rotate(-6deg); }
        50% { transform: rotate(6deg); }
    }

    /* Step Color Themes */
    .theme-step-1 { border-color: #10b981; }
    .theme-step-1 .step-badge-lg { background: #10b981; color: white; }
    
    .theme-step-2 { border-color: #f59e0b; }
    .theme-step-2 .step-badge-lg { background: #f59e0b; color: white; }
    
    .theme-step-3 { border-color: #3b82f6; }
    .theme-step-3 .step-badge-lg { background: #3b82f6; color: white; }
    
    .theme-step-4 { border-color: #8b5cf6; }
    .theme-step-4 .step-badge-lg { background: #8b5cf6; color: white; }
    
    .theme-step-5 { border-color: #ef4444; }
    .theme-step-5 .step-badge-lg { background: #ef4444; color: white; }

    .arrow-divider {
        font-size: 2rem;
        color: #cbd5e1;
        text-align: center;
        margin: 1rem 0;
    }
</style>
@endsection

@section('content')
<div class="container">
    <div class="text-center mb-5">
        <span class="badge bg-success bg-opacity-10 text-success font-heading px-3 py-2 rounded-pill mb-2">Materi Edukasi 2</span>
        <h2 class="fw-bold font-heading text-success">Peta Petualangan: Cara Memilah Sampah 🗺️✨</h2>
        <p class="text-muted col-lg-8 mx-auto mb-0">Mari ikuti 5 langkah seru di bawah ini agar rumah kita menjadi bersih, rapi, dan bebas penyakit!</p>
    </div>



    <!-- 5 STEPS VISUAL GRID -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
            
            <!-- STEP 1 -->
            <div class="adventure-step-card theme-step-1 p-4 mb-4">
                <div class="row align-items-center gy-3 text-center text-md-start">
                    <div class="col-md-2 text-center">
                        <div class="step-badge-lg">1</div>
                        <span class="fs-1 animate-float d-block">🔍🤠</span>
                    </div>
                    <div class="col-md-5">
                        <h4 class="fw-bold font-heading text-success mb-1">Detektif Sampah!</h4>
                        <p class="text-muted mb-0">Perhatikan sampah yang kamu pegang. Tebak apakah itu sisa makanan, plastik, atau baterai?</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center">
                            <span class="fs-4">🍎 <i class="fa-solid fa-arrow-right text-success"></i> 🥤 <i class="fa-solid fa-arrow-right text-success"></i> 🔋</span>
                            <small class="text-success fw-bold d-block mt-1">Cari Tahu Jenisnya!</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow"></i></div>

            <!-- STEP 2 -->
            <div class="adventure-step-card theme-step-2 p-4 mb-4">
                <div class="row align-items-center gy-3 text-center text-md-start">
                    <div class="col-md-2 text-center">
                        <div class="step-badge-lg">2</div>
                        <span class="fs-1 animate-wiggle d-block">📦✨</span>
                    </div>
                    <div class="col-md-5">
                        <h4 class="fw-bold font-heading text-warning mb-1">Siapkan Wadah Ajaib!</h4>
                        <p class="text-muted mb-0">Sediakan wadah terpisah di dapur agar sampah tidak bercampur dan berbau busuk.</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #f59e0b;">
                            <span class="fs-3">🟢</span> &nbsp; <span class="fs-3">🟡</span> &nbsp; <span class="fs-3">🔴</span>
                            <small class="text-warning fw-bold d-block mt-1">Pisahkan Wadahnya!</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow"></i></div>

            <!-- STEP 3 -->
            <div class="adventure-step-card theme-step-3 p-4 mb-4">
                <div class="row align-items-center gy-3 text-center text-md-start">
                    <div class="col-md-2 text-center">
                        <div class="step-badge-lg">3</div>
                        <span class="fs-1 animate-bounce-slow d-block">🎯🟢</span>
                    </div>
                    <div class="col-md-5">
                        <h4 class="fw-bold font-heading text-primary mb-1">Masukkan Sesuai Warna!</h4>
                        <p class="text-muted mb-0">Ingat warnanya: Hijau untuk sisa makanan, Kuning untuk botol, Merah untuk baterai!</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #3b82f6;">
                            <div class="row g-2">
                                <div class="col-4 small text-success fw-bold">🍎➔🟢</div>
                                <div class="col-4 small text-warning fw-bold">🥤➔🟡</div>
                                <div class="col-4 small text-danger fw-bold">🔋➔🔴</div>
                            </div>
                            <small class="text-primary fw-bold d-block mt-1">Jangan Salah Masuk Rumah!</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow"></i></div>

            <!-- STEP 4 -->
            <div class="adventure-step-card theme-step-4 p-4 mb-4">
                <div class="row align-items-center gy-3 text-center text-md-start">
                    <div class="col-md-2 text-center">
                        <div class="step-badge-lg">4</div>
                        <span class="fs-1 animate-float d-block">🚿🧼</span>
                    </div>
                    <div class="col-md-5">
                        <h4 class="fw-bold font-heading text-purple mb-1" style="color: #8b5cf6;">Mandikan Plastik Kotormu!</h4>
                        <p class="text-muted mb-0">Bilas botol susu atau kaleng soda dengan air bersih agar wangi, kering, dan tidak mengundang lalat.</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #8b5cf6;">
                            <span class="fs-4">🥤 + 🚿 ➔ ✨🥤✨</span>
                            <small class="fw-bold d-block mt-1" style="color: #8b5cf6;">Bersih dan Berkilau!</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow"></i></div>

            <!-- STEP 5 -->
            <div class="adventure-step-card theme-step-5 p-4">
                <div class="row align-items-center gy-3 text-center text-md-start">
                    <div class="col-md-2 text-center">
                        <div class="step-badge-lg">5</div>
                        <span class="fs-1 animate-wiggle d-block">🏦💰</span>
                    </div>
                    <div class="col-md-5">
                        <h4 class="fw-bold font-heading text-danger mb-1">Setor ke Bank Sampah!</h4>
                        <p class="text-muted mb-0">Bawa sampah anorganik yang bersih ke Bank Sampah desa untuk ditimbang jadi uang jajan tambahan!</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #ef4444;">
                            <span class="fs-4">✨🥤✨ ➔ 🏦 ➔ 💰🛍️</span>
                            <small class="text-danger fw-bold d-block mt-1">Dapat Koin Emas Tabungan!</small>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- QUICK ACTIONS -->
    <div class="row gy-3">
        <div class="col-md-6">
            <a href="{{ route('jadwal-lokasi') }}" class="btn btn-outline-success btn-lg w-100 rounded-pill fw-bold">
                <i class="fa-solid fa-location-dot me-2"></i> Cek Lokasi TPS & Bank Sampah Desa
            </a>
        </div>
        <div class="col-md-6">
            <a href="{{ route('quiz.index') }}" class="btn btn-warning btn-lg w-100 rounded-pill fw-bold text-dark">
                <i class="fa-solid fa-gamepad me-2"></i> Uji Pemahaman Lewat Kuis Game
            </a>
        </div>
    </div>
</div>
@endsection