@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 audit-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">Audit & Security</span><br>
                <span class="text-gradient-gold">AsetQu V.2</span>
            </h1>
            <p class="hero-subtitle" data-aos="fade-up" data-aos-delay="100">
                AsetQu V.2 menghadirkan ekosistem yang aman dan transparan<br>
                untuk menjaga kepercayaan jangka panjang komunitas
            </p>
        </div>
    </div>
</section>

{{-- Audit & Security Content Section --}}
<section class="audit-section section">
    <div class="container">
        {{-- Security Features Row --}}
        <div class="row g-4 mb-4">
            <div class="col-lg-7 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div class="row g-4 mb-4">
                    {{-- Feature Cards --}}
                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
                        <div class="security-card">
                            <div class="security-icon">
                                <i class="fas fa-network-wired"></i>
                            </div>
                            <h4>Dibangun di Solana</h4>
                            <p>Dikembangkan menggunakan Rust dengan Anchor Framework, seluruh smart contract dirancang modular dan security by design</p>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="security-card">
                            <div class="security-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h4>Validasi yang Ketat</h4>
                            <p>Menggunakan Program Derived Address (PDA) dan validasi otoritas untuk perlindungan terhadap manipulasi logika dan kesalahan teknis</p>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
                        <div class="security-card">
                            <div class="security-icon">
                                <i class="fas fa-key"></i>
                            </div>
                            <h4>Proteksi Multi-Signature</h4>
                            <p>Pengelolaan dana dan likuiditas diamankan melalui skema multi-signature dan penguncian waktu</p>
                        </div>
                    </div>


                </div>

                {{-- Audit Activities Section --}}
                <h3 class="audit-section-title" data-aos="fade-up">Aktivitas Audit dan Pemantauan</h3>

                <div class="row g-4 mb-4">
                    {{-- Kesiapan Audit --}}
                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="0">
                        <div class="audit-activity-card purple">
                            <h4>Kesiapan Audit</h4>
                            <ul class="audit-checklist">
                                <li>
                                    <span class="status-icon success"><i class="fas fa-check-circle"></i></span>
                                    <span>Audit Eksternal <strong class="text-success">Selesai</strong></span>
                                </li>
                                <li>
                                    <span class="status-icon warning"><i class="fas fa-fire"></i></span>
                                    <span>Audit Internal <strong class="text-warning">Berkelanjutan</strong></span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Sistem Monitoring --}}
                    <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                        <div class="audit-activity-card dark">
                            <h4>Sistem Monitoring On-Chain</h4>
                            <ul class="monitoring-list">
                                <li>Pemantauan aktivitas dan transaksi secara real-time di blockchain.</li>
                                <li>Pemeriksaan otomatis untuk deteksi anomali dan risiko.</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <img src="{{ asset('assets/images/auditsec.png') }}" alt="AsetQu V.2 Token" class="coin-image w-100" onerror="handleImageError(this)">
            </div>

        </div>



        {{-- Bottom Cards --}}
        <div class="row g-4">
            {{-- Laporan Audit Publik --}}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="0">
                <div class="audit-info-card">
                    <h4>Laporan Audit Publik</h4>
                    <p>Seluruh laporan audit eksternal tersedia untuk umum.</p>
                </div>
            </div>

            {{-- Transparansi On-Chain --}}
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                <div class="audit-info-card">
                    <h4>Transparansi On-Chain</h4>
                    <p>Semua aktivitas dapat diverifikasi secara langsung di blockchain.</p>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Add hover animation to security cards
    $('.security-card').hover(
        function() {
            $(this).find('.security-icon').addClass('pulse');
        },
        function() {
            $(this).find('.security-icon').removeClass('pulse');
        }
    );
});
</script>
@endpush