@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 architecture-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-cyan">Arsitektur dan Teknologi</span><br>
                <span class="text-gradient-gold">AsetQu V.2</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                Struktur sistem dan teknologi inti yang menjadi fondasi keamanan,<br>
                skalabilitas, dan kinerja ekosistem AsetQu V.2
            </p>
        </div>
    </div>
</section>

{{-- Architecture Content Section --}}
<section class="architecture-section section">
    <div class="container">
        <div class="row g-4 mb-4">
            <div class="col-lg-8 col-md-6" data-aos="fade-up" data-aos-delay="0">
            {{-- System Overview Card --}}
                    <div class="arch-card system-card" data-aos="fade-up">
                        <h3 class="arch-card-title gold">BAGAIMANA SISTEM ASETQU V.2?</h3>
                        <p class="arch-card-desc">
                            AsetQu V.2 dirancang sebagai token utilitas multi-fungsi di ekosistem dengan fokus pada bidding aset (AsetBid), insentif staking, governance on-chain, serta integrasi RWA—menggabungkan kecepatan tinggi dan biaya rendah Solana dengan kegunaan ekonomi yang luas
                        </p>
                    </div>

                    {{-- Architecture & Technology Card --}}
                    <div class="arch-card tech-card" data-aos="fade-up" data-aos-delay="100">
                        <div class="row">
                            <div class="col-lg-12">
                                <h3 class="arch-card-title gold">ARSITEKTUR DAN TEKNOLOGI</h3>
                                <p class="arch-card-intro">
                                    Pemilihan Solana sebagai infrastruktur utama didasarkan pada sejumlah keunggulan teknologi strategis, antara lain
                                </p>

                                <div class="tech-features">
                                    <div class="row">
                                        {{-- Left Column --}}
                                        <div class="col-md-6">
                                            <div class="tech-feature-item">
                                                <span class="feature-number">1</span>
                                                <div class="feature-content">
                                                    <h5>Kecepatan Transaksi Sangat Tinggi</h5>
                                                    <p>Mampu memproses hingga 65.000 TPS, memungkinkan transaksi real-time.</p>
                                                </div>
                                            </div>

                                            <div class="tech-feature-item">
                                                <span class="feature-number">2</span>
                                                <div class="feature-content">
                                                    <h5>Biaya Transaksi Yang Sangat Rendah</h5>
                                                    <p>Biaya rata-rata sekitar $0.00025 per transaksi, mendukung aktivitas berfrekuensi tinggi</p>
                                                </div>
                                            </div>

                                            <div class="tech-feature-item">
                                                <span class="feature-number">3</span>
                                                <div class="feature-content">
                                                    <h5>Proof Of History (PoH)</h5>
                                                    <p>Sistem timestamp kriptografis yang memastikan urutan transaksi akurat dan tidak dapat dimanipulasi</p>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Right Column --}}
                                        <div class="col-md-6">
                                            <div class="tech-feature-item">
                                                <span class="feature-number">4</span>
                                                <div class="feature-content">
                                                    <h5>Tower BFT</h5>
                                                    <p>Mekanisme konsensus yang mempercepat finalitas dan meningkatkan skalabilitas tanpa mengurangi keamanan</p>
                                                </div>
                                            </div>

                                            <div class="tech-feature-item">
                                                <span class="feature-number">5</span>
                                                <div class="feature-content">
                                                    <h5>Ekosistem Developer Aktif</h5>
                                                    <p>Didukung komunitas developer yang matang untuk inovasi berkelanjutan</p>
                                                </div>
                                            </div>

                                            <div class="tech-feature-item">
                                                <span class="feature-number">6</span>
                                                <div class="feature-content">
                                                    <h5>Stabil Dan Skalabel</h5>
                                                    <p>Dirancang untuk pertumbuhan ekosistem besar dengan performa tetap optimal</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="arch-logo-wrapper" data-aos="zoom-in" data-aos-delay="300">
                    <img src="{{ asset('assets/images/asetqu-logo-alt.png') }}" alt="AsetQu V.2" class="arch-logo" onerror="this.src='{{ asset('assets/images/asetqu-logo-alt.png') }}'">
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Add hover effects
    $('.tech-feature-item').hover(
        function() {
            $(this).find('.feature-number').addClass('active');
        },
        function() {
            $(this).find('.feature-number').removeClass('active');
        }
    );
});
</script>
@endpush