@extends('layouts.web')

@section('content')

<!-- Platform Manajemen Event Digital Total -->
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-blue-50 relative overflow-hidden home-typography">
    <!-- Animated Background Elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-[#7c3aed]/20 to-[#3b82f6]/20 rounded-full blur-3xl animate-pulse"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-tr from-[#7c3aed]/15 to-[#3b82f6]/25 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-r from-[#7c3aed]/10 to-[#3b82f6]/15 rounded-full blur-3xl animate-pulse" style="animation-delay: 4s;"></div>
    </div>

    <!-- Hero Section - Platform Manajemen Event Digital -->
    <section class="relative h-screen overflow-hidden flex items-center">
        @php
            $configuredHeroImages = [];
            $cfg1 = \App\Models\Setting::get('home_hero_background_1') ?? \App\Models\Setting::get('home_hero_background');
            $cfg2 = \App\Models\Setting::get('home_hero_background_2');
            $cfg3 = \App\Models\Setting::get('home_hero_background_3');
            foreach ([$cfg1, $cfg2, $cfg3] as $img) {
                if (!empty($img)) {
                    $fullPath = public_path($img);
                    // Cek apakah file exists, jika tidak gunakan default
                    if (file_exists($fullPath)) {
                        $configuredHeroImages[] = asset($img);
                    } else {
                        // Log untuk debugging (opsional)
                        // \Log::warning("Hero image not found: {$img}");
                    }
                }
            }
            // Jika tidak ada gambar yang valid, gunakan default
            if (empty($configuredHeroImages)) {
                $defaultHero = 'assets/images/hero/defoult.webp';
                if (file_exists(public_path($defaultHero))) {
                    $configuredHeroImages[] = asset($defaultHero);
                }
            }
        @endphp

        @if(!empty($configuredHeroImages))
            @foreach($configuredHeroImages as $index => $imageUrl)
                <div class="hero-slide absolute inset-0 transition-opacity duration-1000 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}" 
                     style="background-image: url('{{ $imageUrl }}'); background-size: cover; background-position: center;">
                    <div class="hero-gradient-overlay"></div>
                </div>
            @endforeach
            @php $slidesCount = count($configuredHeroImages); @endphp
        @elseif(isset($specialActivities) && $specialActivities->isNotEmpty())
            @foreach($specialActivities as $index => $activity)
                @php
                    $defaultHeroSetting = \App\Models\Setting::get('home_hero_background');
                    $defaultHero = $defaultHeroSetting ? asset($defaultHeroSetting) : asset('assets/images/hero/defoult.webp');
                    $imagePath = $defaultHero;
                    if (!empty($activity->image)) {
                        $path = 'activities/' . ltrim($activity->image, '/');
                        if (\Illuminate\Support\Facades\Storage::disk('public')->exists($path)) {
                            $imagePath = \Illuminate\Support\Facades\Storage::url($path);
                        } else {
                            $imagePath = $defaultHero;
                        }
                    }
                @endphp
                <div class="hero-slide absolute inset-0 transition-opacity duration-1000 {{ $index === 0 ? 'opacity-100' : 'opacity-0' }}" 
                     style="background-image: url('{{ $imagePath }}'); background-size: cover; background-position: center;">
                    <div class="hero-gradient-overlay"></div>
                    <div class="hero-gradient-overlay-top"></div>
                </div>
            @endforeach
            @php $slidesCount = $specialActivities->count(); @endphp
        @else
                <div class="hero-slide absolute inset-0 opacity-100 transition-opacity duration-1000" 
                 style="background-image: url('{{ asset('assets/images/hero/defoult.webp') }}'); background-size: cover; background-position: center;">
                <div class="hero-gradient-overlay"></div>
            </div>
            @php $slidesCount = 1; @endphp
        @endif

        <div class="relative z-10 h-full w-full px-[5%]">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center h-full">
                @php
                    $heroLogoPath = \App\Models\Setting::get('app_logo', 'assets/images/logo.png') ?? 'assets/images/logo.png';
                    $heroLogoExists = file_exists(public_path($heroLogoPath));
                    if (!$heroLogoExists && file_exists(public_path('assets/images/logo_1762164536.png'))) {
                        $heroLogoPath = 'assets/images/logo_1762164536.png';
                        $heroLogoExists = true;
                    }
                    $visualImage = null;
                    $visualSetting = \App\Models\Setting::get('home_hero_visual');
                    if ($visualSetting && file_exists(public_path($visualSetting))) {
                        $visualImage = asset($visualSetting);
                    } elseif (!empty($configuredHeroImages)) {
                        $visualImage = $configuredHeroImages[0];
                    } elseif(isset($specialActivities) && $specialActivities->isNotEmpty()) {
                        $first = $specialActivities->first();
                        $defaultVisual = 'assets/images/hero/defoult.webp';
                        $visualImage = file_exists(public_path($defaultVisual)) ? asset($defaultVisual) : asset('assets/images/hero/defoult.webp');
                        if (!empty($first->image)) {
                            $path = 'activities/' . ltrim($first->image, '/');
                            if (\Illuminate\Support\Facades\Storage::disk('public')->exists($path)) {
                                $visualImage = \Illuminate\Support\Facades\Storage::url($path);
                            }
                        }
                    } else {
                        $defaultVisual = 'assets/images/hero/defoult.webp';
                        $visualImage = file_exists(public_path($defaultVisual)) ? asset($defaultVisual) : asset('assets/images/hero/defoult.webp');
                    }
                @endphp

                <div class="max-w-4xl text-left lg:pr-8">
                    @if($heroLogoExists)
                        <img src="{{ asset($heroLogoPath) }}" alt="Logo {{ \App\Models\Setting::get('app_name', 'KOGTIK') ?? 'KOGTIK' }}" class="mb-6 h-20 w-20 rounded-full object-cover shadow-xl ring-2 ring-white/40" onerror="this.style.display='none'">
                    @endif
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold mb-4 animate-slide-up leading-tight text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.35)]" style="animation-delay: 0.2s;">
                        Komunitas Guru TIK dan Informatika Indonesia (KOGTIK)
                    </h1>
                    <p class="text-lg sm:text-xl text-white/90 mb-8 animate-slide-up leading-relaxed drop-shadow-[0_1px_4px_rgba(0,0,0,0.25)]" style="animation-delay: 0.35s;">
                        Wadah kolaborasi dan pengembangan kompetensi Guru TIK & Informatika di Indonesia.
                        Temukan kegiatan, pelatihan, dan berita resmi KOGTIK.
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 animate-slide-up" style="animation-delay: 0.55s;">
                        <a href="{{ route('activity.index') }}" class="inline-flex items-center px-8 py-4 rounded-2xl bg-white text-gray-900 font-semibold shadow-lg hover:shadow-xl hover:bg-gray-100 transition-all">
                            <i class="fas fa-calendar-alt mr-3 text-[#7c3aed]"></i>
                            <span>Lihat Kegiatan KOGTIK</span>
                        </a>
                        <a href="{{ route('news.index') }}" class="inline-flex items-center px-8 py-4 rounded-2xl bg-white/20 text-white font-semibold ring-1 ring-white/30 hover:bg-white/30 transition-all">
                            <i class="fas fa-newspaper mr-3"></i>
                            <span>Berita KOGTIK</span>
                        </a>
                        @guest
                            <a href="{{ route('auth.register') }}" class="inline-flex items-center px-8 py-4 rounded-2xl bg-[#7c3aed] text-white font-semibold shadow-lg hover:shadow-xl hover:bg-[#6d28d9] transition-all">
                                <i class="fas fa-user-plus mr-3"></i>
                                <span>Gabung sebagai Anggota</span>
                            </a>
                        @else
                            <a href="{{ url('/about#pengurus') }}" class="inline-flex items-center px-8 py-4 rounded-2xl bg-[#7c3aed] text-white font-semibold shadow-lg hover:shadow-xl hover:bg-[#6d28d9] transition-all">
                                <i class="fas fa-user-tie mr-3"></i>
                                <span>Pengurus</span>
                            </a>
                        @endguest
                    </div>
                </div>

                <div class="hidden lg:flex justify-end">
                    <div class="relative rounded-3xl overflow-hidden shadow-2xl ring-1 ring-white/10 w-[620px] ml-auto">
                        <img src="{{ $visualImage }}" alt="Visual KOGTIK" class="w-full h-[420px] object-cover" onerror="this.src='{{ asset('assets/images/hero/defoult.webp') }}'">
                        <div class="absolute inset-0 bg-gradient-to-l from-black/30 to-transparent"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slider Navigation Dots -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3 z-20">
            @for($i = 0; $i < ($slidesCount ?? 1); $i++)
                <button class="slider-dot w-3 h-3 rounded-full transition-all duration-300 {{ $i === 0 ? 'bg-white scale-125' : 'bg-white/50 hover:bg-white/75' }}" onclick="showSlide({{ $i }})"></button>
            @endfor
        </div>
    </section>

    <!-- Sekilas KOGTIK -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
                <div class="lg:col-span-2">
                    <h2 class="text-3xl md:text-4xl font-black text-gray-900 mb-4">Organisasi Guru TIK & Informatika Indonesia</h2>
                    <p class="text-gray-700 text-lg leading-relaxed mb-6">KOGTIK adalah wadah kolaborasi nasional bagi guru TIK & Informatika untuk memperkuat kompetensi, memperkaya kurikulum, mendorong literasi digital, dan mempertemukan inisiatif pembelajaran masa depan.</p>
                    <div class="flex flex-wrap gap-3">
                        <span class="px-4 py-2 rounded-full bg-indigo-50 text-indigo-700 text-sm font-semibold">Profesionalisme Guru</span>
                        <span class="px-4 py-2 rounded-full bg-blue-50 text-blue-700 text-sm font-semibold">Kurikulum Informatika</span>
                        <span class="px-4 py-2 rounded-full bg-violet-50 text-violet-700 text-sm font-semibold">Literasi Digital</span>
                        <span class="px-4 py-2 rounded-full bg-teal-50 text-teal-700 text-sm font-semibold">Jejaring & Kolaborasi</span>
                    </div>
                </div>
                <div class="bg-gradient-to-br from-indigo-500 to-blue-600 rounded-3xl p-6 text-white shadow-xl">
                    <h3 class="text-xl font-bold mb-2">Statistik Organisasi</h3>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="p-4 rounded-2xl bg-white/10">
                            <div class="text-2xl font-black">{{ number_format($stats['totalUsers'] ?? 0) }}</div>
                            <div class="text-sm">Anggota</div>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/10">
                            <div class="text-2xl font-black">{{ number_format($stats['totalActivities'] ?? 0) }}</div>
                            <div class="text-sm">Kegiatan</div>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/10">
                            <div class="text-2xl font-black">{{ number_format($stats['upcomingActivities'] ?? 0) }}</div>
                            <div class="text-sm">Agenda Terdekat</div>
                        </div>
                        <div class="p-4 rounded-2xl bg-white/10">
                            <div class="text-2xl font-black">{{ number_format($stats['totalPanitia'] ?? 0) }}</div>
                            <div class="text-sm">Pengurus</div>
                        </div>
                    </div>
                    <div class="mt-6">
                        <a href="{{ route('auth.register') }}" class="inline-flex items-center px-5 py-3 rounded-2xl bg-white text-indigo-700 font-semibold hover:bg-gray-100">
                            <i class="fas fa-user-plus mr-3"></i>
                            Bergabung sebagai Anggota
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Program KOGTIK -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl md:text-4xl font-black text-gray-900">Program Unggulan</h2>
                <p class="text-gray-600">Inisiatif untuk penguatan kompetensi dan ekosistem pembelajaran</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center mb-5">
                        <i class="fas fa-chalkboard-teacher text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Pelatihan & Workshop</h3>
                    <p class="text-gray-600">Pelatihan berkala untuk peningkatan kompetensi TIK & Informatika, materi terstandar dan praktik terbaik.</p>
                </div>
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center mb-5">
                        <i class="fas fa-users text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Komunitas & Forum</h3>
                    <p class="text-gray-600">Jejaring guru lintas wilayah, forum diskusi, berbagi praktik pembelajaran, dan kolaborasi proyek.</p>
                </div>
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-5">
                        <i class="fas fa-book text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Pengembangan Kurikulum</h3>
                    <p class="text-gray-600">Penguatan kurikulum Informatika dan TIK, panduan materi, dan sumber belajar digital.</p>
                </div>
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-violet-100 text-violet-600 flex items-center justify-center mb-5">
                        <i class="fas fa-certificate text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Sertifikat & Penghargaan</h3>
                    <p class="text-gray-600">Pemberian sertifikat kegiatan dan pengakuan kontribusi untuk guru berprestasi.</p>
                </div>
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-rose-100 text-rose-600 flex items-center justify-center mb-5">
                        <i class="fas fa-shield-alt text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Literasi & Keamanan Digital</h3>
                    <p class="text-gray-600">Kampanye literasi digital, etika siber, dan keamanan data di lingkungan sekolah.</p>
                </div>
                <div class="bg-white rounded-3xl p-8 shadow-md hover:shadow-lg transition">
                    <div class="w-14 h-14 rounded-2xl bg-amber-100 text-amber-600 flex items-center justify-center mb-5">
                        <i class="fas fa-handshake text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Kemitraan & Pendampingan</h3>
                    <p class="text-gray-600">Kolaborasi dengan lembaga dan industri, pendampingan sekolah untuk transformasi digital.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Agenda Terdekat -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative mb-8">
                <h2 class="text-3xl md:text-4xl font-black text-gray-900 text-center">Agenda Terdekat</h2>
                <a href="{{ route('activity.index') }}" class="absolute right-0 top-1/2 -translate-y-1/2 text-indigo-600 font-semibold hover:text-indigo-700">Lihat semua kegiatan</a>
            </div>
            <div class="relative">
            <div id="activityRow" class="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 px-1 no-scrollbar">
                @forelse($latestActivities ?? [] as $activity)
                    @php
                        $thumb = null;
                        if (!empty($activity->image)) {
                            $path = 'activities/' . ltrim($activity->image, '/');
                            if (\Illuminate\Support\Facades\Storage::disk('public')->exists($path)) {
                                $thumb = \Illuminate\Support\Facades\Storage::url($path);
                            }
                        }
                        $defaultThumb = asset('assets/images/begron/defoult.png');
                        $activityDate = \Carbon\Carbon::parse($activity->date ?? $activity->created_at);
                        $isUpcoming = $activityDate->isFuture();
                        $isOngoing = $activityDate->isToday() || ($activityDate->isPast() && $activityDate->diffInDays(now()) <= 7);
                    @endphp
                    <a href="{{ route('activity.detail', $activity->id) }}" class="flex-none w-80 bg-white rounded-3xl shadow-md hover:shadow-lg overflow-hidden group snap-start">
                        <div class="relative h-44 bg-gray-100">
                            <img src="{{ $thumb ?? $defaultThumb }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.02]" alt="{{ $activity->name ?? 'Kegiatan' }}" onerror="this.onerror=null; this.src='{{ $defaultThumb }}';">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                            <div class="absolute top-3 left-3 flex gap-2">
                                <span class="text-xs px-3 py-1 rounded-full bg-white/80 text-gray-800 font-semibold">AGENDA</span>
                                @if($isUpcoming)
                                    <span class="text-xs px-3 py-1 rounded-full bg-emerald-600 text-white font-semibold">UPCOMING</span>
                                @elseif($isOngoing)
                                    <span class="text-xs px-3 py-1 rounded-full bg-orange-500 text-white font-semibold">ONGOING</span>
                                @endif
                            </div>
                        </div>
                        <div class="p-6">
                            <div class="text-sm text-gray-500 mb-1">{{ \Carbon\Carbon::parse($activity->date ?? $activity->created_at)->translatedFormat('d F Y') }}</div>
                            <h3 class="text-lg font-bold text-gray-900 mb-2 truncate">{{ $activity->name ?? $activity->title ?? 'Kegiatan KOGTIK' }}</h3>
                            @if(!empty($activity->location))
                                <div class="text-sm text-gray-600 truncate"><i class="fas fa-map-marker-alt mr-2"></i>{{ $activity->location }}</div>
                            @endif
                        </div>
                    </a>
                @empty
                    <div class="text-gray-600">Belum ada kegiatan terbaru.</div>
                @endforelse
                </div>
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center">
                    <button type="button" onclick="scrollContainer('activityRow', -1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-gray-700 hover:bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                </div>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center">
                    <button type="button" onclick="scrollContainer('activityRow', 1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-gray-700 hover:bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Berita Terkini -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative mb-8">
                <h2 class="text-3xl md:text-4xl font-black text-gray-900 text-center">Berita Terkini</h2>
                <a href="{{ route('news.index') }}" class="absolute right-0 top-1/2 -translate-y-1/2 text-indigo-600 font-semibold hover:text-indigo-700">Lihat semua berita</a>
            </div>
            <div class="relative">
            <div id="newsRow" class="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-2 px-1 no-scrollbar">
                @forelse($latestNews ?? [] as $news)
                    @php
                        $cover = null;
                        if (!empty($news->image)) {
                            // Image field already contains path like 'news/images/filename.jpg'
                            // Use asset() directly like in show.blade.php
                            $cover = asset('storage/' . $news->image);
                        }
                        $defaultCover = asset('assets/images/begron/defoult.png');
                        $isNew = \Carbon\Carbon::parse($news->created_at)->diffInDays(now()) <= 7;
                    @endphp
                    <a href="{{ route('news.show', $news->slug) }}" class="flex-none w-72 bg-white rounded-3xl shadow-md hover:shadow-lg overflow-hidden group snap-start">
                        <div class="relative h-36 bg-gray-100">
                            <img src="{{ $cover ?? $defaultCover }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-[1.02]" alt="{{ $news->title }}" onerror="this.onerror=null; this.src='{{ $defaultCover }}';">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                            <div class="absolute top-3 left-3 flex gap-2">
                                <span class="text-xs px-3 py-1 rounded-full bg-white/80 text-gray-800 font-semibold">BERITA</span>
                                @if($isNew)
                                    <span class="text-xs px-3 py-1 rounded-full bg-blue-600 text-white font-semibold">NEW</span>
                                @endif
                            </div>
                        </div>
                        <div class="p-5">
                            <div class="text-xs text-gray-500 mb-1">{{ \Carbon\Carbon::parse($news->created_at)->translatedFormat('d F Y') }}</div>
                            <h3 class="text-base font-bold text-gray-900 line-clamp-2">{{ $news->title }}</h3>
                        </div>
                    </a>
                @empty
                    <div class="text-gray-600">Belum ada berita terbaru.</div>
                @endforelse
                </div>
                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center">
                    <button type="button" onclick="scrollContainer('newsRow', -1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-gray-700 hover:bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                </div>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center">
                    <button type="button" onclick="scrollContainer('newsRow', 1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-gray-700 hover:bg-gray-100 flex items-center justify-center">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </section>

    <!-- Mitra KOGTIK -->
    <section class="py-16 bg-gradient-to-br from-indigo-50 via-blue-50 to-sky-50 relative" data-edit-dynamic="true">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="relative mb-8">
                <h3 class="text-3xl font-black text-gray-900 text-center">Mitra KOGTIK</h3>
                <a href="{{ route('partners.index') }}" class="absolute right-0 top-1/2 -translate-y-1/2 text-indigo-600 hover:text-indigo-700">Lihat semua</a>
            </div>

            @if(isset($mitras) && $mitras->count())
                <div class="relative">
                    <div id="mitraSlider" class="flex justify-start w-full overflow-x-auto gap-6 snap-x snap-mandatory py-2 scroll-smooth pl-4 pr-4 no-scrollbar">
                        @foreach($mitras as $mitra)
                            <a href="{{ $mitra->website ? $mitra->website : '#' }}" target="{{ $mitra->website ? '_blank' : '_self' }}" class="flex-none w-56 snap-start group">
                            <div class="bg-white rounded-2xl p-4 border-2 border-indigo-100 hover:border-indigo-200 transition-all duration-300 hover:scale-[1.02] shadow-sm hover:shadow-md">
                                <div class="h-28 w-full flex items-center justify-center overflow-hidden rounded-xl bg-indigo-50">
                                    @if($mitra->logo)
                                        <img src="{{ asset('storage/' . $mitra->logo) }}" alt="Logo {{ $mitra->company_name }}" class="max-h-24 object-contain" onerror="this.style.display='none'">
                                    @else
                                        <i class="fas fa-building text-4xl text-indigo-400"></i>
                                    @endif
                                </div>
                                <div class="mt-3 text-center">
                                    <p class="text-sm font-semibold text-gray-900 truncate" title="{{ $mitra->company_name }}">{{ $mitra->company_name }}</p>
                                    @if($mitra->industry)
                                        <p class="text-xs text-gray-500 truncate">{{ $mitra->industry }}</p>
                                    @endif
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center">
                        <button type="button" onclick="scrollContainer('mitraSlider', -1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-indigo-700 hover:bg-indigo-50 ring-1 ring-indigo-200 flex items-center justify-center">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center">
                        <button type="button" onclick="scrollContainer('mitraSlider', 1)" class="pointer-events-auto w-10 h-10 rounded-full bg-white shadow-md text-indigo-700 hover:bg-indigo-50 ring-1 ring-indigo-200 flex items-center justify-center">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
                
            @else
                <p class="text-gray-300">Belum ada mitra terdaftar.</p>
            @endif
        </div>
    </section>

    <!-- Keanggotaan -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-10">
                <h2 class="text-3xl md:text-4xl font-black text-gray-900">Keanggotaan KOGTIK</h2>
                <p class="text-gray-600">Manfaat menjadi bagian dari jaringan guru TIK & Informatika</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-10">
                <div class="bg-gray-50 rounded-3xl p-8">
                    <div class="w-12 h-12 rounded-2xl bg-indigo-100 text-indigo-600 flex items-center justify-center mb-4">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Jejaring Nasional</h3>
                    <p class="text-gray-600">Terhubung dengan guru dari berbagai daerah untuk kolaborasi dan berbagi praktik.</p>
                </div>
                <div class="bg-gray-50 rounded-3xl p-8">
                    <div class="w-12 h-12 rounded-2xl bg-blue-100 text-blue-600 flex items-center justify-center mb-4">
                        <i class="fas fa-graduation-cap"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Pengembangan Kompetensi</h3>
                    <p class="text-gray-600">Akses pelatihan, materi kurikulum, dan pendampingan untuk penguatan pembelajaran.</p>
                </div>
                <div class="bg-gray-50 rounded-3xl p-8">
                    <div class="w-12 h-12 rounded-2xl bg-teal-100 text-teal-600 flex items-center justify-center mb-4">
                        <i class="fas fa-award"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2">Pengakuan & Sertifikat</h3>
                    <p class="text-gray-600">Sertifikat kegiatan dan penghargaan untuk kontribusi dalam pengembangan ekosistem.</p>
                </div>
            </div>
            <div class="text-center">
                <a href="{{ route('auth.register') }}" class="inline-flex items-center px-8 py-4 rounded-2xl bg-indigo-600 text-white font-semibold shadow-lg hover:bg-indigo-700">
                    <i class="fas fa-user-plus mr-3"></i>
                    Daftar Anggota KOGTIK
                </a>
            </div>
        </div>
    </section>

@push('styles')
@endpush

@push('scripts')
<script src="{{ asset('js/home.js') }}"></script>
@endpush
<style>
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
.home-typography h1, .home-typography h2, .home-typography h3, .home-typography h4 {
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-weight: 700;
}
.home-typography, .home-typography p, .home-typography a, .home-typography span, .home-typography div {
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.home-typography .section-lead { font-weight: 500; }
</style>

    <!-- Fitur Utama Platform -->
    <section class="py-24 bg-white relative overflow-hidden">
        <div class="absolute inset-0 opacity-5">
            <div class="absolute inset-0" style="background-image: radial-gradient(circle at 2px 2px, #7c3aed 1px, transparent 0); background-size: 40px 40px;"></div>
        </div>
        
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center mb-20">
                <div class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-[#7c3aed]/10 to-[#3b82f6]/10 rounded-2xl mb-6 backdrop-blur-sm border border-[#7c3aed]/30">
                    <div class="w-2 h-2 bg-[#7c3aed] rounded-full mr-3 animate-pulse"></div>
                    <span class="text-[#7c3aed] font-semibold tracking-wide">FITUR KEANGGOTAAN KOGTIK</span>
                </div>
                <h2 class="text-5xl sm:text-6xl font-black text-gray-900 mb-6 leading-tight">
                    <span class="text-gray-900">Manajemen Keanggotaan</span>
                    <span class="text-[#7c3aed]"> Modern & Terintegrasi</span>
                </h2>
                <p class="text-xl text-gray-700 max-w-3xl mx-auto leading-relaxed">
                    Semua kebutuhan pengelolaan keanggotaan KOGTIK dalam satu platform
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Fitur 1: Pendaftaran Digital -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-user-check text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Pendaftaran Anggota Digital</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Pendaftaran anggota KOGTIK yang mudah dan cepat. Proses verifikasi sederhana dan tercatat secara digital.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Form pendaftaran otomatis
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Validasi data real-time
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Tracking status pendaftaran
                        </li>
                    </ul>
                </div>

                <!-- Fitur 2: Manajemen Peserta & Panitia -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-users-cog text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Basis Data Anggota & Pengurus</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Kelola anggota dan pengurus dalam satu sistem terpusat. Import/Export data, pencarian cepat, dan pengaturan peran.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Manajemen database peserta
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Penugasan panitia event
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Import/Export Excel
                        </li>
                    </ul>
                </div>

                <!-- Fitur 3: Kartu Peserta Digital -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-id-card text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Kartu Anggota Digital</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Kartu anggota digital dengan QR code. Desain fleksibel, siap cetak, dan mudah diakses.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            QR Code untuk absensi
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Desain customizable
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Print batch atau individual
                        </li>
                    </ul>
                </div>

                <!-- Fitur 4: Sertifikat Digital -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-certificate text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Sertifikat & Penghargaan</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Sertifikat kegiatan untuk anggota serta penghargaan atas kontribusi. Verifikasi digital dan pengiriman otomatis.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Generate otomatis
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Desain profesional
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Verifikasi digital
                        </li>
                    </ul>
                </div>

                <!-- Fitur 5: Sistem Absensi Digital -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-qrcode text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Partisipasi & Kehadiran Anggota</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Pencatatan kehadiran dan partisipasi anggota dalam kegiatan KOGTIK dengan QR code atau manual.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Scan QR Code
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Realtime tracking
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Export laporan absensi
                        </li>
                    </ul>
                </div>

                <!-- Fitur 6: Semua Ter-record Digital -->
                <div class="group bg-gradient-to-br from-white to-indigo-50 rounded-3xl p-8 border-2 border-gray-200 hover:border-[#7c3aed] transition-all duration-500 transform hover:-translate-y-1 shadow-lg hover:shadow-xl">
                    <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-[#7c3aed] to-[#3b82f6] rounded-3xl mb-6 group-hover:from-[#6d28d9] group-hover:to-[#2563eb] transition-all duration-500 transform hover:-translate-y-1 shadow-lg group-hover:shadow-indigo-500/40">
                        <i class="fas fa-database text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-black text-gray-900 mb-4 group-hover:text-[#7c3aed] transition-colors duration-300">Riwayat & Dokumentasi Anggota</h3>
                    <p class="text-gray-700 text-lg leading-relaxed mb-4">
                        Riwayat keanggotaan, kegiatan, pelatihan, dan kontribusi tercatat digital. Data aman dan mudah diakses.
                    </p>
                    <ul class="text-sm text-gray-600 space-y-2">
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            History lengkap
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Backup otomatis
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-check-circle text-[#7c3aed] mr-2"></i>
                            Analytics & reporting
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

</div>

@endsection