<x-app-layout>
<!-- Hero fullpage -->
<div class="pes-home-hero" style="min-height:calc(100vh - 64px);background:linear-gradient(160deg,#f8faff 0%,#eff6ff 50%,#f0f9ff 100%);display:flex;align-items:center;margin:-28px -28px 0">
    <div style="max-width:1100px;margin:0 auto;padding:40px 20px;width:100%">
        <div class="row align-items-center g-4">
            <div class="col-lg-6">
                <div style="display:inline-flex;align-items:center;gap:8px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#1d4ed8;margin-bottom:20px">
                    <span style="width:8px;height:8px;background:#16a34a;border-radius:50%;animation:pulse 2s infinite"></span>
                    Beta Season 1 Sudah Live!
                </div>
                <h1 style="font-size:clamp(1.7rem,5vw,3.2rem);font-weight:900;color:#0f172a;line-height:1.1;margin-bottom:16px;font-family:'Plus Jakarta Sans',sans-serif">
                    Kompetisi <span style="color:#1d4ed8">PES 2026 PS2</span><br>Serius Dimulai
                </h1>
                <p style="font-size:15px;color:#64748b;line-height:1.7;margin-bottom:28px;max-width:480px">
                    Platform pertama untuk komunitas PES 2026 PS2. Matchmaking, ELO ranking, Discord room, dan turnamen — semua dalam satu tempat.
                </p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="{{ route('auth.discord') }}" class="btn-pes-primary" style="text-decoration:none;padding:12px 24px;font-size:14px">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03z"/></svg>
                        Mulai dengan Discord
                    </a>
                    <a href="{{ route('leaderboard.index') }}" class="btn-pes-secondary" style="text-decoration:none;padding:12px 24px;font-size:14px">
                        Lihat Leaderboard →
                    </a>
                </div>

                <!-- Stats -->
                <div class="row g-2 mt-3" style="max-width:420px">
                    @foreach([['1.2K+','Pemain Terdaftar'],['8.4K+','Total Match'],['42','Turnamen'],['1200','Rata-rata ELO']] as [$v,$l])
                    <div class="col-6">
                        <div class="pes-card p-3 text-center">
                            <div style="font-size:20px;font-weight:900;color:#1d4ed8;font-family:'Plus Jakarta Sans',sans-serif">{{ $v }}</div>
                            <div style="font-size:11px;color:#64748b;font-weight:600">{{ $l }}</div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <!-- How it works -->
            <div class="col-lg-6">
                <div style="font-size:13px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px">Cara Bermain</div>
                @foreach([
                    ['01','Login Discord','Hubungkan akun Discord kamu — satu klik, tanpa formulir.','ti-brand-discord','#eff6ff','#1d4ed8'],
                    ['02','Cari Lawan','Klik Find Match. Sistem menemukan lawan dengan ELO terdekat.','ti-bolt','#fef9c3','#ca8a04'],
                    ['03','Room Discord','Room pertandingan privat dibuat otomatis di server Discord kami.','ti-message-2','#f0fdf4','#16a34a'],
                    ['04','Submit Skor','Setelah game, kedua pemain submit skor. ELO langsung diperbarui.','ti-circle-check','#f3e8ff','#7c3aed'],
                ] as [$n,$t,$d,$ic,$bg,$c])
                <div class="d-flex align-items-start gap-3 mb-3 p-3" style="background:#fff;border-radius:14px;border:1px solid #e8edf5;box-shadow:0 1px 6px rgba(15,23,42,.05)">
                    <div style="width:40px;height:40px;border-radius:12px;background:{{ $bg }};color:{{ $c }};display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px">
                        <i class="ti {{ $ic }}"></i>
                    </div>
                    <div>
                        <div style="font-size:10px;font-weight:800;color:#94a3b8;letter-spacing:.06em">STEP {{ $n }}</div>
                        <div style="font-size:13px;font-weight:700;color:#0f172a">{{ $t }}</div>
                        <div style="font-size:12px;color:#64748b;margin-top:2px">{{ $d }}</div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

<!-- Division showcase -->
<div class="pes-home-divs" style="background:#fff;padding:40px 20px;border-top:1px solid #e8edf5;margin:0 -28px">
    <div style="max-width:900px;margin:0 auto;text-align:center">
        <div style="font-size:22px;font-weight:800;color:#0f172a;margin-bottom:4px;font-family:'Plus Jakarta Sans',sans-serif">Sistem Divisi</div>
        <div style="font-size:13px;color:#64748b;margin-bottom:24px">Naiki ranking dari Bronze hingga Legend</div>
        <div class="row g-2 justify-content-center">
            @foreach([['👑','Legend','2500+'],['💎','Master','2200+'],['🔷','Diamond','1900+'],['🔵','Platinum','1600+'],['🥇','Gold','1300+'],['🥈','Silver','1000+'],['🥉','Bronze','0+']] as [$ic,$nm,$rng])
            <div class="col-auto">
                <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px;text-align:center;min-width:80px;transition:all .2s" onmouseover="this.style.transform='translateY(-4px)';this.style.boxShadow='0 8px 24px rgba(15,23,42,.1)'" onmouseout="this.style.transform='';this.style.boxShadow=''">
                    <div style="font-size:26px;margin-bottom:4px">{{ $ic }}</div>
                    <div style="font-size:12px;font-weight:700;color:#0f172a">{{ $nm }}</div>
                    <div style="font-size:10px;color:#94a3b8;font-weight:600">{{ $rng }}</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

@push('styles')
<style>
@@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@media(max-width:991px) {
    .pes-home-hero { margin: -20px -16px 0 !important; }
    .pes-home-divs { margin: 0 -16px !important; }
}
@media(max-width:575px) {
    .pes-home-hero { margin: -16px -12px 0 !important; }
    .pes-home-hero > div { padding: 32px 16px !important; }
    .pes-home-divs { margin: 0 -12px !important; padding: 32px 16px !important; }
}
</style>
@endpush
</x-app-layout>
