@extends('layouts.front')

@section('title', 'Asosiasi Arsiparis Indonesia — PN-AAI')
@section('meta_description', 'PN-AAI menyatukan para profesional dan institusi di sektor arsip. Arsip penting agar setiap orang dapat memiliki akses terhadap informasi.')

@section('content')
<!-- Minimalist Hero -->
<section class="relative pt-24 pb-12 lg:pt-32 lg:pb-16 bg-slate-50 dark:bg-slate-950 text-center px-4 transition-colors duration-300">
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 dark:opacity-[0.03]"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-2xl h-[300px] bg-amber-500/10 blur-[120px] pointer-events-none"></div>

    <div class="max-w-4xl mx-auto relative z-10">
        <h1 class="font-heading font-black text-4xl sm:text-5xl lg:text-7xl tracking-tighter text-slate-900 dark:text-white leading-[1.1] mb-6">
            Menyatukan Profesional <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-500 to-amber-600 dark:from-amber-400 dark:to-yellow-600">Sektor Arsip Indonesia</span>
        </h1>
        <p class="text-slate-600 dark:text-slate-400 text-lg sm:text-xl font-normal leading-relaxed max-w-2xl mx-auto">
            Arsip adalah jejak peradaban. Kami memastikan setiap orang memiliki akses informasi untuk merekonstruksi masa lalu, hari ini, dan masa depan.
        </p>
    </div>
</section>

<!-- Magazine Bento Grid Layout -->
<section class="py-12 bg-slate-50 dark:bg-slate-950 px-4 sm:px-6 lg:px-8 max-w-[90rem] mx-auto mb-20 transition-colors duration-300">
    <div class="space-y-6">
        
        <!-- Section 1: About (Full Width Symmetric) -->
        <div class="glass-card rounded-3xl p-8 lg:p-10 relative overflow-hidden group border-slate-200 dark:border-slate-800/80 hover:border-amber-500/30 flex flex-col md:flex-row items-start md:items-center justify-between gap-8">
            <div class="absolute inset-0 bg-gradient-to-br from-amber-500/5 to-transparent mix-blend-overlay"></div>
            <!-- Decorative Background -->
            <div class="absolute top-0 right-0 w-64 h-64 bg-slate-200/50 dark:bg-slate-800/50 rounded-bl-full -mr-20 -mt-20 border-l border-b border-slate-300/50 dark:border-slate-700/50"></div>
            
            <div class="relative z-10 flex-1">
                <span class="inline-block px-3 py-1 rounded-full bg-amber-500/10 text-amber-600 dark:text-amber-400 text-xs font-bold uppercase tracking-widest mb-4 border border-amber-500/20">Tentang AAI</span>
                <h2 class="font-heading font-bold text-3xl sm:text-4xl text-slate-900 dark:text-white leading-tight mb-4 group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors">Pengurus Nasional <br>Asosiasi Arsiparis</h2>
                <p class="text-slate-600 dark:text-slate-400 text-sm sm:text-base leading-relaxed max-w-2xl">
                    Dideklarasikan pada 14 Agustus 1998, mewadahi komunitas profesional kearsipan ASN maupun swasta dari Sabang sampai Merauke.
                </p>
            </div>
            <div class="relative z-10 shrink-0 mt-4 md:mt-0">
                <a href="{{ route('front.about') }}" class="inline-flex items-center gap-2 font-bold text-sm text-slate-900 dark:text-white hover:text-amber-600 dark:hover:text-amber-400 transition-colors group/link bg-white/50 dark:bg-slate-900/50 backdrop-blur-sm px-6 py-4 rounded-xl border border-slate-200 dark:border-slate-700/50 shadow-sm hover:shadow-md">
                    Baca Selengkapnya 
                    <span class="bg-slate-200 dark:bg-slate-800 group-hover/link:bg-amber-500 text-amber-600 dark:text-amber-400 group-hover/link:text-white dark:group-hover:text-slate-950 w-6 h-6 rounded-full flex items-center justify-center transition-colors">
                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                    </span>
                </a>
            </div>
        </div>

        <!-- Section 2: 4 Equal Columns Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
            <!-- Box 1: Pertemuan -->
            <div class="glass-card rounded-3xl p-6 relative overflow-hidden border-slate-200 dark:border-slate-800/80 hover:border-blue-500/30 flex flex-col h-full">
                <div class="w-10 h-10 rounded-full bg-blue-500/10 text-blue-500 dark:text-blue-400 flex items-center justify-center mb-4 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <div>
                    <h3 class="font-heading font-bold text-lg text-slate-900 dark:text-white mb-2">Pertemuan</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-xs sm:text-sm leading-relaxed">Berpartisipasi dalam diskusi dan kolaborasi antar profesional.</p>
                </div>
            </div>

            <!-- Box 2: Profesionalisasi -->
            <div class="glass-card rounded-3xl p-6 relative overflow-hidden border-slate-200 dark:border-slate-800/80 hover:border-emerald-500/30 flex flex-col h-full">
                <div class="w-10 h-10 rounded-full bg-emerald-500/10 text-emerald-500 dark:text-emerald-400 flex items-center justify-center mb-4 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                </div>
                <div>
                    <h3 class="font-heading font-bold text-lg text-slate-900 dark:text-white mb-2">Profesionalisasi</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-xs sm:text-sm leading-relaxed">Peningkatan kompetensi melalui pembelajaran seumur hidup.</p>
                </div>
            </div>

            <!-- Box 3: Meneliti -->
            <div class="glass-card rounded-3xl p-6 relative overflow-hidden border-slate-200 dark:border-slate-800/80 hover:border-purple-500/30 flex flex-col h-full">
                <div class="w-10 h-10 rounded-full bg-purple-500/10 text-purple-500 dark:text-purple-400 flex items-center justify-center mb-4 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                </div>
                <div>
                    <h3 class="font-heading font-bold text-lg text-slate-900 dark:text-white mb-2">Riset</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-xs sm:text-sm leading-relaxed">Kajian dampak regulasi baru terhadap tata kelola dan privasi arsip.</p>
                </div>
            </div>

            <!-- Box 4: Lobi -->
            <div class="glass-card rounded-3xl p-6 relative overflow-hidden border-slate-200 dark:border-slate-800/80 hover:border-rose-500/30 flex flex-col h-full">
                <div class="w-10 h-10 rounded-full bg-rose-500/10 text-rose-500 dark:text-rose-400 flex items-center justify-center mb-4 shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>
                </div>
                <div>
                    <h3 class="font-heading font-bold text-lg text-slate-900 dark:text-white mb-2">Advokasi & Lobi</h3>
                    <p class="text-slate-600 dark:text-slate-400 text-xs sm:text-sm leading-relaxed">Memantau dan memberikan pengaruh pada UU kearsipan.</p>
                </div>
            </div>
        </div>

        <!-- Section 3: Kabar & Sorotan Kearsipan -->
        <div class="mb-10 pt-10 border-t border-slate-200 dark:border-slate-800">
            <div class="flex items-end justify-between mb-8">
                <div>
                    <h2 class="font-heading font-black text-3xl sm:text-4xl text-slate-900 dark:text-white leading-tight">Sorotan & Kabar</h2>
                    <p class="text-slate-600 dark:text-slate-400 mt-2">Informasi terkini dan aktivitas seputar kearsipan.</p>
                </div>
                <a href="{{ route('front.news.index') }}" class="hidden sm:inline-flex items-center gap-2 font-bold text-sm text-amber-600 dark:text-amber-500 hover:text-amber-700 dark:hover:text-amber-400 transition-colors">
                    Lihat Semua <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                </a>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
                @foreach($latestNews as $index => $news)
                    @if($news->is_featured && $index === 0)
                        <!-- Highlighted/Featured News (Takes up 2 columns on Desktop) -->
                        <div class="lg:col-span-2 glass-card rounded-3xl p-6 md:p-8 relative overflow-hidden group border-amber-500/30 flex flex-col justify-end min-h-[400px]">
                            @if($news->getFirstMediaUrl('featured_image'))
                                <img src="{{ $news->getFirstMediaUrl('featured_image') }}" alt="{{ $news->title }}" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 z-0">
                                <div class="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-900/60 to-transparent z-10"></div>
                            @else
                                <div class="absolute inset-0 bg-gradient-to-br from-amber-600 to-slate-900 z-0"></div>
                            @endif

                            <div class="absolute top-6 left-6 z-20">
                                <span class="px-3 py-1.5 rounded-full bg-amber-500 text-white text-xs font-black uppercase tracking-widest shadow-lg flex items-center gap-1.5">
                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                                    Sorotan
                                </span>
                            </div>

                            <div class="relative z-20">
                                <div class="flex items-center gap-2 text-sm text-slate-300 mb-3">
                                    <span class="text-amber-400 font-bold">{{ $news->category->name ?? 'Informasi' }}</span>
                                    <span>&bull;</span>
                                    <time>{{ $news->published_at?->format('d M Y') }}</time>
                                </div>
                                <h3 class="font-heading font-black text-2xl md:text-3xl text-white mb-3 group-hover:text-amber-400 transition-colors">
                                    <a href="{{ route('front.news.show', $news->slug) }}" class="before:absolute before:inset-0">{{ $news->title }}</a>
                                </h3>
                                <p class="text-slate-300 text-sm md:text-base line-clamp-2">{{ $news->excerpt ?: Str::limit(strip_tags($news->content), 120) }}</p>
                            </div>
                        </div>
                    @else
                        <!-- Regular News -->
                        <div class="glass-card rounded-3xl p-6 relative overflow-hidden group border-slate-200 dark:border-slate-800 flex flex-col justify-between">
                            <div>
                                <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400 mb-3">
                                    <span class="font-bold text-amber-600 dark:text-amber-500">{{ $news->category->name ?? 'Informasi' }}</span>
                                    <span>&bull;</span>
                                    <time>{{ $news->published_at?->format('d M Y') }}</time>
                                </div>
                                <h3 class="font-heading font-bold text-xl text-slate-900 dark:text-white leading-tight mb-3 group-hover:text-amber-600 transition-colors line-clamp-3">
                                    <a href="{{ route('front.news.show', $news->slug) }}" class="before:absolute before:inset-0">{{ $news->title }}</a>
                                </h3>
                                <p class="text-slate-600 dark:text-slate-400 text-sm line-clamp-3">{{ $news->excerpt ?: Str::limit(strip_tags($news->content), 100) }}</p>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
            <div class="mt-6 text-center sm:hidden">
                <a href="{{ route('front.news.index') }}" class="inline-flex items-center justify-center px-6 py-3 w-full bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white rounded-xl font-bold text-sm">Lihat Semua Berita</a>
            </div>
        </div>

        <!-- Section 4: Membership CTA (Full Width Symmetric) -->
        <div class="bg-gradient-to-r from-amber-500 to-amber-600 dark:from-slate-900 dark:to-slate-800 dark:border dark:border-amber-500/30 rounded-3xl p-8 sm:p-10 flex flex-col lg:flex-row items-center justify-between gap-8 shadow-xl shadow-amber-500/10 dark:shadow-none">
            <div class="flex-1">
                <h2 class="font-heading font-black text-2xl sm:text-3xl mb-3 text-slate-900 dark:text-white">Jadilah Bagian dari Jaringan Kami</h2>
                <p class="font-medium opacity-90 max-w-2xl mb-6 text-slate-800 dark:text-slate-300">
                    Mulai dari buletin eksklusif, sesi pertemuan rutin, jurnal gratis, hingga sertifikasi yang diakui.
                </p>
                <div class="flex flex-wrap gap-2 sm:gap-4 font-bold text-xs text-slate-800 dark:text-amber-400">
                    <span class="px-3 py-1.5 bg-black/10 dark:bg-amber-500/10 dark:border dark:border-amber-500/20 rounded-lg">✅ Jaringan Luas</span>
                    <span class="px-3 py-1.5 bg-black/10 dark:bg-amber-500/10 dark:border dark:border-amber-500/20 rounded-lg">✅ Buletin 6x Setahun</span>
                    <span class="px-3 py-1.5 bg-black/10 dark:bg-amber-500/10 dark:border dark:border-amber-500/20 rounded-lg">✅ Dokumen Bantuan</span>
                </div>
            </div>
            <div class="w-full lg:w-auto shrink-0 flex flex-col sm:flex-row gap-3">
                <a href="{{ route('front.membership.register') }}" class="px-8 py-4 bg-slate-900 dark:bg-amber-500 hover:bg-slate-800 dark:hover:bg-amber-400 text-amber-500 dark:text-slate-900 font-bold text-sm text-center rounded-xl transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
                    Daftar Sekarang
                </a>
                <a href="{{ route('front.membership.verify') }}" class="px-8 py-4 bg-black/10 dark:bg-slate-800 hover:bg-black/20 dark:hover:bg-slate-700 border border-black/20 dark:border-slate-700 text-slate-900 dark:text-slate-200 font-bold text-sm text-center rounded-xl transition-all">
                    Cek KTA Saya
                </a>
            </div>
        </div>

    </div>
</section>
@endsection