@extends('layouts.app')

@section('title', 'Konsep 3R - Edukasi Sampah')

@section('styles')
<style>
    .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); }
    }

    .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; }

    .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 3</span>
        <h2 class="fw-bold font-heading text-success">Mengenal Konsep 3R: Reduce, Reuse, Recycle ♻️✨</h2>
        <p class="text-muted col-lg-8 mx-auto mb-0">Tiga pilar dasar mengelola sampah untuk menyelamatkan bumi kita tercinta!</p>
    </div>

    <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
            
            <!-- 1. REDUCE -->
            <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">Reduce (Mengurangi Sampah)</h4>
                        <p class="text-muted mb-0">Mengurangi pemakaian barang sekali pakai yang berpotensi menjadi sampah agar bumi tidak kepenuhan plastik!</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #10b981;">
                            <span class="fs-4">🛍️ ➔ ❌ ➔ 🎒👜</span>
                            <small class="text-success fw-bold d-block mt-1">Bawa Tas Belanja Sendiri!</small>
                        </div>
                    </div>
                </div>
                <div class="mt-3 p-3 bg-light rounded-3">
                    <strong class="text-dark d-block mb-1">💡 Contoh Aksi Keren Reduce:</strong>
                    <ul class="mb-0 text-secondary">
                        <li>Membawa botol minum (*tumbler*) sendiri saat sekolah atau bermain.</li>
                        <li>Menolak penggunaan sedotan plastik saat jajan minuman.</li>
                        <li>Menggunakan sapu tangan kain daripada terus-menerus memakai tisu.</li>
                    </ul>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow" style="color: #10b981;"></i></div>

            <!-- 2. REUSE -->
            <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">Reuse (Menggunakan Kembali)</h4>
                        <p class="text-muted mb-0">Menggunakan kembali barang bekas yang masih layak pakai untuk fungsi yang sama atau disulap menjadi benda baru!</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #f59e0b;">
                            <span class="fs-4">🏺 ➔ 🎨 ➔ 🪴✏️</span>
                            <small class="text-warning fw-bold d-block mt-1" style="color: #b45309 !important;">Botol Bekas Jadi Pot Bunga!</small>
                        </div>
                    </div>
                </div>
                <div class="mt-3 p-3 bg-light rounded-3">
                    <strong class="text-dark d-block mb-1">💡 Contoh Aksi Keren Reuse:</strong>
                    <ul class="mb-0 text-secondary">
                        <li>Menyulap botol plastik air mineral bekas menjadi pot tanaman hias atau celengan lucu.</li>
                        <li>Menggunakan sisi kertas yang masih kosong untuk menggambar atau mencoret-coret.</li>
                        <li>Memakai wadah/kaleng bekas biskuit menjadi tempat pensil atau wadah jahit di rumah.</li>
                    </ul>
                </div>
            </div>

            <div class="arrow-divider"><i class="fa-solid fa-circle-arrow-down animate-bounce-slow" style="color: #f59e0b;"></i></div>

            <!-- 3. RECYCLE -->
            <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">Recycle (Mendaur Ulang)</h4>
                        <p class="text-muted mb-0">Mengolah kembali sampah menjadi bahan baku baru atau produk baru yang bermanfaat di pabrik atau rumah!</p>
                    </div>
                    <div class="col-md-5">
                        <div class="visual-flow-box text-center" style="border-color: #3b82f6;">
                            <span class="fs-4">🍂 ➔ 🐛 ➔ 🌱 Kompos</span>
                            <small class="text-primary fw-bold d-block mt-1">Dedaunan Kering Jadi Pupuk Kompos!</small>
                        </div>
                    </div>
                </div>
                <div class="mt-3 p-3 bg-light rounded-3">
                    <strong class="text-dark d-block mb-1">💡 Contoh Aksi Keren Recycle:</strong>
                    <ul class="mb-0 text-secondary">
                        <li>Mengolah sisa sayuran dan daun kering menjadi pupuk organik cair atau kompos subur.</li>
                        <li>Mengumpulkan botol plastik bersih untuk diserahkan ke Bank Sampah agar diolah pabrik menjadi kaos kaki/jaket!</li>
                        <li>Mendaur ulang kertas koran bekas menjadi bubur kertas untuk kerajinan tangan yang cantik.</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>

    <!-- QUICK ACTIONS -->
    <div class="row gy-3">
        <div class="col-md-6">
            <a href="{{ route('cara-memilah') }}" class="btn btn-outline-success btn-lg w-100 rounded-pill fw-bold">
                <i class="fa-solid fa-list-check me-2"></i> Lanjut Ke Panduan Cara Memilah Sampah
            </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> Main Kuis Uji Pemahaman 🎮
            </a>
        </div>
    </div>
</div>
@endsection