@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/explore.css') }}">
@endpush

@section('content')
{{-- Hero Section --}}
<section class="explore-hero tokenomics-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">
                Tokenomics AsetQu V.2: Fondasi<br>
                <span class="text-gradient">Nilai & Pertumbuhan Berkelanjutan</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Data distribusi, suplai, dan alokasi token AsetQu V.2 yang<br>
                ditampilkan secara transparan dan mudah dipahami
            </p>
        </div>
    </div>
</section>

{{-- Tokenomics Overview Section --}}
<section class="tokenomics-section section">
    <div class="container">
        <div class="section-card" data-aos="fade-up">
            <div class="section-header text-center">
                <h2 class="section-title-cyan">TOKENOMICS</h2>
                <div class="title-underline"></div>
            </div>

            <div class="row align-items-center mt-5">
                {{-- Pie Chart --}}
                <div class="col-lg-5" data-aos="fade-right">
                    <div class="tokenomics-chart">
                        <canvas id="tokenomicsChart"></canvas>
                        <div class="chart-center">
                            <img src="{{ asset('assets/images/asetqu-coin.png') }}" alt="ASQ Token" class="coin-icon" onerror="handleImageError(this)">
                        </div>
                    </div>
                </div>

                {{-- Distribution Details --}}
                <div class="col-lg-7" data-aos="fade-left">
                    <div class="distribution-list">
                        <div class="distribution-item">
                            <div class="dist-color" style="background: #22d3ee;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">POOL MIGRASI</span>
                                    <span class="dist-percentage">: 55%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Menjamin transisi yang aman dari token sebelumnya dan menjaga likuiditas awal
                                </p>
                            </div>
                        </div>

                        <div class="distribution-item">
                            <div class="dist-color" style="background: #8b5cf6;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">PENGEMBANGAN EKOSISTEM</span>
                                    <span class="dist-percentage">: 17%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Dialokasikan untuk pengembangan fitur, modul RWA, dan infrastruktur jangka panjang
                                </p>
                            </div>
                        </div>

                        <div class="distribution-item">
                            <div class="dist-color" style="background: #3b82f6;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">TIM & PENASIHAT</span>
                                    <span class="dist-percentage">: 8%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Vesting bertahap untuk meminimalkan risiko tekanan jual dan memastikan komitmen jangka panjang
                                </p>
                            </div>
                        </div>

                        <div class="distribution-item">
                            <div class="dist-color" style="background: #10b981;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">MARKETING & PARTNERSHIP</span>
                                    <span class="dist-percentage">: 8%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Untuk kampanye pemasaran, kolaborasi strategis, dan ekspansi komunitas global
                                </p>
                            </div>
                        </div>

                        <div class="distribution-item">
                            <div class="dist-color" style="background: #f59e0b;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">STAKING REWARDS</span>
                                    <span class="dist-percentage">: 7%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Insentif bagi holder yang melakukan staking untuk mendukung stabilitas jaringan
                                </p>
                            </div>
                        </div>

                        <div class="distribution-item">
                            <div class="dist-color" style="background: #ef4444;"></div>
                            <div class="dist-info">
                                <div class="dist-header">
                                    <span class="dist-name">RESERVE FUND</span>
                                    <span class="dist-percentage">: 5%</span>
                                </div>
                                <p class="dist-desc">
                                    <i class="fas fa-arrow-right"></i>
                                    Dana cadangan untuk kebutuhan darurat dan stabilitas ekosistem
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Token Info Section --}}
{{-- <section class="token-info-section section">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="0">
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-coins"></i>
                    </div>
                    <h3>Total Supply</h3>
                    <p class="info-value">1,000,000,000</p>
                    <span class="info-unit">ASQ Token</span>
                </div>
            </div>
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-fire"></i>
                    </div>
                    <h3>Burn Mechanism</h3>
                    <p class="info-value">Quarterly</p>
                    <span class="info-unit">Deflationary Model</span>
                </div>
            </div>
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                <div class="info-card">
                    <div class="info-icon">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3>Blockchain</h3>
                    <p class="info-value">Solana</p>
                    <span class="info-unit">SPL Token Standard</span>
                </div>
            </div>
        </div>
    </div>
</section> --}}

{{-- Token Utility Section --}}
{{-- <section class="utility-section section">
    <div class="container">
        <div class="section-header text-center" data-aos="fade-up">
            <h2 class="section-title-gradient">UTILITAS TOKEN</h2>
            <p class="section-subtitle">Berbagai kegunaan token ASQ dalam ekosistem AsetQu V.2</p>
        </div>

        <div class="row g-4 mt-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-gavel"></i>
                    </div>
                    <h4>Governance</h4>
                    <p>Pemegang token dapat berpartisipasi dalam voting untuk keputusan penting ekosistem</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-percentage"></i>
                    </div>
                    <h4>Staking Rewards</h4>
                    <p>Dapatkan passive income dengan melakukan staking token ASQ di platform</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-tags"></i>
                    </div>
                    <h4>Fee Discount</h4>
                    <p>Nikmati potongan biaya transaksi saat menggunakan token ASQ sebagai pembayaran</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-unlock-alt"></i>
                    </div>
                    <h4>Premium Access</h4>
                    <p>Akses fitur eksklusif dan layanan premium di seluruh ekosistem AsetQu V.2</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="400">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-gamepad"></i>
                    </div>
                    <h4>In-Game Currency</h4>
                    <p>Gunakan token ASQ untuk transaksi dalam game dan marketplace NFT</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="500">
                <div class="utility-card">
                    <div class="utility-icon">
                        <i class="fas fa-building"></i>
                    </div>
                    <h4>RWA Investment</h4>
                    <p>Investasi dalam aset dunia nyata yang telah ditokenisasi di platform AsetBid</p>
                </div>
            </div>
        </div>
    </div>
</section> --}}

{{-- Vesting Schedule Section --}}
{{-- <section class="vesting-section section">
    <div class="container">
        <div class="section-card" data-aos="fade-up">
            <div class="section-header text-center">
                <h2 class="section-title-cyan">VESTING SCHEDULE</h2>
                <p class="section-subtitle">Jadwal pelepasan token untuk memastikan pertumbuhan yang berkelanjutan</p>
            </div>

            <div class="vesting-timeline mt-5">
                <div class="timeline-track"></div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="0">
                    <div class="timeline-marker">
                        <span>TGE</span>
                    </div>
                    <div class="timeline-content">
                        <h5>Token Generation Event</h5>
                        <p>Pool Migrasi: 100% unlocked</p>
                        <p>Marketing: 20% unlocked</p>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="100">
                    <div class="timeline-marker">
                        <span>3M</span>
                    </div>
                    <div class="timeline-content">
                        <h5>Bulan ke-3</h5>
                        <p>Tim: Mulai vesting linear</p>
                        <p>Ekosistem: 10% release</p>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="200">
                    <div class="timeline-marker">
                        <span>6M</span>
                    </div>
                    <div class="timeline-content">
                        <h5>Bulan ke-6</h5>
                        <p>Staking Rewards: Aktivasi penuh</p>
                        <p>Partnership: 30% release</p>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="300">
                    <div class="timeline-marker">
                        <span>12M</span>
                    </div>
                    <div class="timeline-content">
                        <h5>Bulan ke-12</h5>
                        <p>Tim: 50% vested</p>
                        <p>Reserve: Tersedia untuk emergency</p>
                    </div>
                </div>

                <div class="timeline-item" data-aos="fade-up" data-aos-delay="400">
                    <div class="timeline-marker">
                        <span>24M</span>
                    </div>
                    <div class="timeline-content">
                        <h5>Bulan ke-24</h5>
                        <p>Tim: 100% fully vested</p>
                        <p>Ekosistem: Full allocation</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> --}}

{{-- CTA Section --}}
{{-- <section class="cta-section section">
    <div class="container">
        <div class="cta-card" data-aos="fade-up">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h3>Siap Bergabung dengan Ekosistem AsetQu V.2?</h3>
                    <p>Mulai perjalanan investasi digital Anda dengan token ASQ sekarang</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="#" class="btn btn-gold">
                        <i class="fas fa-wallet me-2"></i>
                        Beli Token ASQ
                    </a>
                </div>
            </div>
        </div>
    </div>
</section> --}}
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function() {
    // Tokenomics Pie Chart
    const ctx = document.getElementById('tokenomicsChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Pool Migrasi', 'Pengembangan Ekosistem', 'Tim & Penasihat', 'Marketing & Partnership', 'Staking Rewards', 'Reserve Fund'],
                datasets: [{
                    data: [55, 17, 8, 8, 7, 5],
                    backgroundColor: [
                        '#22d3ee',
                        '#8b5cf6',
                        '#3b82f6',
                        '#10b981',
                        '#f59e0b',
                        '#ef4444'
                    ],
                    borderWidth: 0,
                    hoverOffset: 10
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                cutout: '60%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        backgroundColor: 'rgba(20, 15, 40, 0.95)',
                        titleColor: '#fff',
                        bodyColor: 'rgba(255, 255, 255, 0.8)',
                        borderColor: 'rgba(139, 92, 246, 0.3)',
                        borderWidth: 1,
                        padding: 12,
                        displayColors: true,
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.parsed + '%';
                            }
                        }
                    }
                },
                animation: {
                    animateRotate: true,
                    animateScale: true
                }
            }
        });
    }
});
</script>
@endpush