@extends('core::layouts.master')

@section('title', $title . ' - ASETQU V.2')
@section('meta_description', $meta_description)

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/pages/token-dashboard.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="explore-hero token-hero">
    <div class="hero-bg-overlay"></div>
    <div class="hero-particles"></div>
    <div class="container">
        <div class="hero-content text-center">
            <h1 class="hero-title" data-aos="fade-up">
                <span class="text-gradient-gold">Staking</span> <span class="text-white">Dashboard</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Kunci aset digital Anda untuk mendukung stabilitas jaringan
            </p>
        </div>
    </div>
</section>

{{-- Staking Info Section --}}
<section class="staking-section section">
    <div class="container">
        {{-- Info Cards Row --}}
        <div class="row g-4 mb-4">
            {{-- Apa itu Staking --}}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="0">
                <div class="staking-info-card">
                    <h4 class="card-title">Apa itu Staking?</h4>
                    <p class="card-desc">
                        Staking adalah mekanisme dalam ekosistem blockchain yang memungkinkan pemegang token mengunci aset digital mereka dalam periode tertentu untuk mendukung stabilitas dan operasional jaringan.
                    </p>
                </div>
            </div>

            {{-- Cara Kerja --}}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                <div class="staking-info-card purple">
                    <h4 class="card-title">Cara Kerja</h4>
                    <p class="card-desc">
                        Proses staking dijalankan melalui smart contract yang mengatur penguncian token, perhitungan imbal hasil, serta distribusi reward secara otomatis dan transparan
                    </p>
                </div>
            </div>
        </div>

        {{-- Keuntungan Staking Card --}}
        <div class="row">
            <div class="col-12" data-aos="fade-up" data-aos-delay="200">
                <div class="staking-benefits-card">
                    <h4 class="benefits-title text-center">Keuntungan Staking</h4>
                    <div class="row mt-4">
                        <div class="col-md-6">
                            <ul class="benefits-list">
                                <li>Mengurangi tekanan jual token di pasar</li>
                                <li>Meningkatkan keterlibatan jangka panjang pemegang aset</li>
                            </ul>
                        </div>
                        <div class="col-md-6">
                            <ul class="benefits-list">
                                <li>Memperkuat keamanan jaringan</li>
                                <li>Mendukung pertumbuhan ekosistem secara berkelanjutan</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Any staking-specific JS can go here
});
</script>
@endpush