@extends('layout')

@section('title', 'Home')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">

    <!-- Hero Section -->
    <div class="relative py-16 shadow-xl bg-primary-800">
        <div class="absolute inset-0 bg-black/10"></div>
        <div class="relative px-6 mx-auto max-w-7xl">
            <div class="flex flex-col items-center justify-between gap-8 lg:flex-row">
                
                <!-- Logo & Basic Info -->
                <div class="flex flex-col items-center text-center lg:items-start lg:text-left lg:flex-1">
                    <div class="flex items-center justify-center w-32 h-32 p-4 mb-6 bg-white shadow-2xl rounded-2xl">
                        @if (!empty($setting?->logo))
                            <img src="{{ asset('storage/' . $setting->logo) }}" 
                                alt="Logo {{ $setting->institution_name }}" 
                                class="object-contain w-full h-full rounded-lg">
                        @else
                            <div class="flex items-center justify-center w-full h-full rounded-lg bg-primary-100">
                                <i class="text-4xl text-primary-600 fas fa-university"></i>
                            </div>
                        @endif
                    </div>

                    <h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">
                        {{ $setting->institution_name ?? 'Badan Riset dan Inovasi Daerah Jawa Timur' }}
                    </h1>
                    <p class="max-w-2xl mb-6 text-xl text-primary-100">
                        Layanan Pengetahuan Terintegrasi Badan Riset dan Inovasi Daerah Provinsi Jawa Timur
                    </p>
                </div>

                <!-- Stats Card -->
                <div class="max-w-md lg:flex-1">
                    <div class="p-8 border shadow-2xl bg-white/10 backdrop-blur-md rounded-2xl border-white/20">
                        <div class="grid grid-cols-2 gap-6">
                            <div class="text-center">
                                <div class="mb-1 text-3xl font-bold text-white">100+</div>
                                <div class="text-sm text-primary-100">Proyek Riset</div>
                            </div>
                            <div class="text-center">
                                <div class="mb-1 text-3xl font-bold text-white">50+</div>
                                <div class="text-sm text-primary-100">Peneliti Aktif</div>
                            </div>
                            <div class="text-center">
                                <div class="mb-1 text-3xl font-bold text-white">15+</div>
                                <div class="text-sm text-primary-100">Kategori</div>
                            </div>
                            <div class="text-center">
                                <div class="mb-1 text-3xl font-bold text-white">10+</div>
                                <div class="text-sm text-primary-100">Mitra</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- About Section -->
    <div class="relative px-6 py-16 mx-auto max-w-7xl">
        <div class="grid gap-12 lg:grid-cols-2">
            
            <!-- Main About -->
            <div class="space-y-8">
                <div class="p-8 bg-white border border-gray-100 shadow-lg rounded-2xl">
                    <div class="flex items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">Visi Kami</h2>
                    </div>
                    <p class="leading-relaxed text-justify text-gray-700">
                        Menjadi ekosistem penelitian digital terdepan di Indonesia yang mendorong inovasi, 
                        kolaborasi, dan berbagi pengetahuan untuk memacu pembangunan daerah dan kemajuan 
                        nasional melalui repositori penelitian yang mudah diakses dan berkualitas tinggi.
                    </p>
                </div>
                
                <div class="p-8 bg-white border border-gray-100 shadow-lg rounded-2xl">
                    <div class="flex items-center mb-6">
                        <h2 class="text-2xl font-bold text-gray-900">Misi Kami</h2>
                    </div>
                    <p class="leading-relaxed text-justify text-gray-700">
                        Menyediakan platform repositori digital yang mutakhir untuk memberdayakan peneliti, 
                        inovator, dan komunitas akademik di seluruh Jawa Timur untuk berbagi, berkolaborasi, 
                        dan mempercepat dampak karya mereka melalui akses terbuka dan teknologi modern.
                    </p>
                </div>
            </div>

            <!-- Values -->
            <div class="space-y-6">
                <div class="p-8 bg-white border border-gray-100 shadow-lg rounded-2xl">
                    <h3 class="mb-6 text-xl font-bold text-gray-900">Nilai Inti</h3>
                    <div class="space-y-4">
                        @foreach([
                            ['icon' => 'fas fa-shield-alt', 'title' => 'Integritas', 'desc' => 'Menjaga standar tertinggi etika penelitian dan transparansi'],
                            ['icon' => 'fas fa-rocket', 'title' => 'Inovasi', 'desc' => 'Terus berkembang dengan teknologi untuk melayani komunitas penelitian'],
                            ['icon' => 'fas fa-hands-helping', 'title' => 'Kolaborasi', 'desc' => 'Mendorong kemitraan antar institusi dan disiplin ilmu'],
                            ['icon' => 'fas fa-graduation-cap', 'title' => 'Keunggulan', 'desc' => 'Komitmen terhadap kualitas dalam penelitian dan berbagi pengetahuan']
                        ] as $value)
                        <div class="flex items-start gap-4 p-4 rounded-lg bg-gray-50">
                            <div class="flex items-center justify-center w-10 h-10 transition bg-blue-100 rounded-lg hover:bg-blue-200">
                                <i class="text-blue-600 {{ $value['icon'] }}"></i>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-900">{{ $value['title'] }}</h4>
                                <p class="mt-1 text-sm text-justify text-gray-600">{{ $value['desc'] }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Services Section -->
    <div class="px-6 py-16 bg-white">
        <div class="mx-auto max-w-7xl">
            <div class="mb-12 text-center">
                <h2 class="mb-4 text-3xl font-bold text-gray-900">Layanan Kami</h2>
                <p class="max-w-2xl mx-auto text-lg text-gray-600">
                    Solusi digital komprehensif untuk manajemen penelitian dan berbagi pengetahuan
                </p>
            </div>

            <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
                @foreach([
                    ['icon' => 'fas fa-database', 'title' => 'Repositori Digital', 'desc' => 'Penyimpanan cloud yang aman untuk dokumen dan dataset penelitian', 'color' => 'blue'],
                    ['icon' => 'fas fa-search', 'title' => 'Pencarian Lanjutan', 'desc' => 'Pencarian berbasis AI melintasi metadata dan konten penelitian', 'color' => 'green'],
                    ['icon' => 'fas fa-chart-line', 'title' => 'Dashboard Analitik', 'desc' => 'Wawasan real-time tentang dampak dan keterlibatan penelitian', 'color' => 'purple'],
                    ['icon' => 'fas fa-users-cog', 'title' => 'Alat Kolaborasi', 'desc' => 'Dukungan multi-penulis dan fitur manajemen tim', 'color' => 'orange'],
                    ['icon' => 'fas fa-shield-alt', 'title' => 'Keamanan Data', 'desc' => 'Keamanan tingkat perusahaan dan kontrol akses', 'color' => 'red'],
                    ['icon' => 'fas fa-mobile-alt', 'title' => 'Akses Mobile', 'desc' => 'Desain responsif untuk pengalaman mobile yang mulus', 'color' => 'indigo']
                ] as $service)
                <div class="p-6 transition-all duration-300 border border-gray-200 bg-gradient-to-br from-gray-50 to-white rounded-2xl hover:shadow-xl group">
                    <div class="flex items-center justify-center w-16 h-16 mb-4 transition-transform rounded-2xl bg-primary-100 group-hover:scale-110">
                        <i class="text-xl text-primary-600 {{ $service['icon'] }}"></i>
                    </div>
                    <h3 class="mb-3 text-xl font-semibold text-gray-900">{{ $service['title'] }}</h3>
                    <p class="leading-relaxed text-justify text-gray-600">{{ $service['desc'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <!-- Timeline Section -->
    {{-- <div class="px-6 py-16 bg-gray-50">
        <div class="max-w-4xl mx-auto">
            <div class="mb-12 text-center">
                <h2 class="mb-4 text-3xl font-bold text-gray-900">Perjalanan Kami</h2>
                <p class="text-lg text-gray-600">Tonggak sejarah dalam pertumbuhan dan perkembangan kami</p>
            </div>

            <div class="space-y-8">
                @foreach([
                    ['year' => '2024', 'title' => 'Peluncuran Platform', 'desc' => 'Berhasil meluncurkan platform repositori digital'],
                    ['year' => '2023', 'title' => 'Fase Penelitian', 'desc' => 'Melakukan penelitian pasar dan teknologi yang komprehensif'],
                    ['year' => '2022', 'title' => 'Perencanaan & Pengembangan', 'desc' => 'Perencanaan awal dan desain arsitektur sistem'],
                    ['year' => '2021', 'title' => 'Inisiasi Konsep', 'desc' => 'Mengidentifikasi kebutuhan repositori penelitian terpusat']
                ] as $milestone)
                <div class="flex items-center gap-6 p-6 bg-white border border-gray-100 shadow-lg rounded-2xl">
                    <div class="flex items-center justify-center flex-shrink-0 w-20 h-20 bg-primary-100 rounded-2xl">
                        <span class="text-2xl font-bold text-primary-600">{{ $milestone['year'] }}</span>
                    </div>
                    <div>
                        <h3 class="mb-2 text-xl font-semibold text-gray-900">{{ $milestone['title'] }}</h3>
                        <p class="text-gray-600">{{ $milestone['desc'] }}</p>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div> --}}

    {{-- <!-- Partners Section -->
    <div class="px-6 py-16 bg-gray-50">
        <div class="mx-auto max-w-7xl">
            <div class="mb-12 text-center">
                <h2 class="mb-4 text-3xl font-bold text-gray-900">Mitra Kami</h2>
                <p class="text-lg text-gray-600">Berkolaborasi dengan institusi terkemuka</p>
            </div>

            <div class="grid grid-cols-2 gap-8 md:grid-cols-4">
                @foreach([
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Jember', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Brawijaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                    ['name' => 'Universitas Negeri Surabaya', 'icon' => 'fas fa-university'],
                ] as $partner)
                <div class="flex flex-col items-center justify-center p-6 transition-all duration-300 bg-white border border-gray-200 rounded-xl hover:shadow-md">
                    <div class="flex items-center justify-center w-16 h-16 mb-3 rounded-lg bg-primary-100">
                        <i class="text-xl text-primary-600 {{ $partner['icon'] }}"></i>
                    </div>
                    <p class="text-sm font-medium text-center text-gray-700">{{ $partner['name'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div> --}}

    <!-- CTA Section -->
    <div class="px-6 py-16 bg-primary-800">
        <div class="max-w-4xl mx-auto text-center">
            <h2 class="mb-4 text-3xl font-bold text-white">
                Ingin Akses Laporan Penelitian Lengkap?
            </h2>
            <p class="mb-8 text-xl text-primary-100">
                Jelajahi berbagai penelitian unggulan yang telah dipublikasikan.
                Untuk kebutuhan data dan laporan penelitian lengkap, silakan hubungi tim kami.
            </p>
            <div class="flex flex-col justify-center gap-4 sm:flex-row">
                <a href="{{ route('browse.index') }}" 
                class="px-8 py-4 font-semibold transition-all duration-300 bg-white shadow-lg text-primary-600 rounded-xl hover:bg-gray-50 hover:scale-105">
                    <i class="mr-2 fas fa-search"></i> Cari Penelitian
                </a>
                <a href="mailto:{{ $setting->email ?? 'kontak@brida-jatim.go.id' }}" 
                class="px-8 py-4 font-semibold text-white transition-all duration-300 border-2 border-white rounded-xl hover:bg-white/10">
                    <i class="mr-2 fas fa-envelope"></i> Hubungi Kami
                </a>
            </div>
        </div>
    </div>

    <!-- Contact Info -->
    <div class="px-6 py-12 bg-white">
        <div class="mx-auto max-w-7xl">
            <div class="grid gap-8 md:grid-cols-3">
                <div class="p-6 text-center">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-primary-100 rounded-xl">
                        <i class="text-xl text-primary-600 fas fa-map-marker-alt"></i>
                    </div>
                    <h3 class="mb-2 font-semibold text-gray-900">Lokasi Kami</h3>
                    <p class="text-gray-600">Jl. Pahlawan No.110, Alun-alun Contong, Kec. Bubutan, Surabaya</p>
                </div>
                <div class="p-6 text-center">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-green-100 rounded-xl">
                        <i class="text-xl text-green-600 fas fa-phone"></i>
                    </div>
                    <h3 class="mb-2 font-semibold text-gray-900">Informasi Kontak</h3>
                    <p class="text-gray-600">
                        {{ $setting->email ?? 'info@brida-jatim.go.id' }}
                    </p>
                </div>
                <div class="p-6 text-center">
                    <div class="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-purple-100 rounded-xl">
                        <i class="text-xl text-purple-600 fas fa-clock"></i>
                    </div>
                    <h3 class="mb-2 font-semibold text-gray-900">Jam Operasional</h3>
                    <p class="text-gray-600">Senin - Jumat<br>08:00 - 17:00 WIB</p>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection