@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section Tim (Gaya Dark & Modern) --}}
    <section class="pt-44 pb-32 bg-sky-950 relative overflow-hidden">
        {{-- Background Image Overlay --}}
        <div class="absolute inset-0 z-0">
            <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2000"
                class="w-full h-full object-cover opacity-10">
            <div class="absolute inset-0 bg-gradient-to-b from-sky-950/50 via-sky-950/80 to-sky-950"></div>
        </div>

        {{-- Elemen Dekoratif --}}
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-yptp-blue/20 rounded-full blur-[120px]"></div>

        <div class="max-w-7xl mx-auto px-6 relative z-10 text-center">
            <span
                class="bg-yellow-400 text-sky-950 px-6 py-2 rounded-full text-[10px] md:text-xs font-black uppercase tracking-widest mb-8 inline-block shadow-xl shadow-yellow-400/20 animate-fade-in">
                Struktur Organisasi
            </span>
            <h1 class="text-4xl md:text-7xl font-extrabold text-white mb-8 leading-[1.1]">
                Orang-Orang di Balik <br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-yptp-blue to-sky-300">Dedikasi YPTP</span>
            </h1>
            <p class="text-sky-100/60 max-w-2xl mx-auto text-base md:text-xl leading-relaxed">
                Sinergi tenaga profesional dan putra daerah yang berdedikasi tinggi untuk memajukan talenta di Papua Tengah.
            </p>
        </div>
    </section>
    {{-- 2. Pimpinan Utama / Ketua Yayasan --}}
    <section class="py-24 bg-white relative -mt-12 rounded-t-[3rem] md:rounded-t-[5rem] z-20">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col items-center">
                <div class="relative group">
                    <div
                        class="absolute -inset-4 bg-gradient-to-tr from-yptp-blue to-yellow-400 rounded-[4rem] blur opacity-20 group-hover:opacity-40 transition duration-1000">
                    </div>

                    {{-- Pengganti Image: Ikon Kepemimpinan --}}
                    <div
                        class="relative w-72 h-72 md:w-80 md:h-80 bg-sky-950 rounded-[3.5rem] shadow-2xl border border-slate-100 flex items-center justify-center overflow-hidden">
                        <div class="text-white opacity-20 transform scale-[4] absolute">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="relative z-10 text-yellow-400 text-7xl md:text-8xl">
                            <i class="fas fa-user-shield"></i>
                        </div>
                    </div>
                </div>

                <div class="text-center mt-12">
                    <div class="inline-flex items-center gap-2 mb-4">
                        <span class="h-[1px] w-8 bg-yptp-blue"></span>
                        <p class="text-yptp-blue font-black uppercase tracking-[0.3em] text-xs">Ketua Pengurus</p>
                        <span class="h-[1px] w-8 bg-yptp-blue"></span>
                    </div>
                    <h3 class="text-3xl md:text-4xl font-black text-sky-950 mb-4">Didimus Kosi</h3>
                    <p class="text-slate-500 max-w-xl mx-auto italic font-medium">"Pendiri sekaligus Ketua Pengurus yang
                        berdedikasi untuk kemajuan Amungme & Kamoro."</p>
                </div>
            </div>
        </div>
    </section>

    {{-- 3. Grid Tim (Pembina, Pengawas & Pengurus) --}}
    <section class="py-24 bg-slate-50/50 border-y border-slate-100">
        <div class="max-w-7xl mx-auto px-6">

            {{-- Bagian Pembina --}}
            <div class="text-center mb-16">
                <h2 class="text-3xl font-black text-sky-950 uppercase tracking-widest">Dewan Pembina</h2>
                <div class="w-20 h-1.5 bg-yptp-blue mx-auto mt-4 rounded-full"></div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8 mb-24">
                @php
                    $pembina = [
                        ['name' => 'Abraham Timang', 'role' => 'Ketua Pembina'],
                        ['name' => 'Dominggus Kapiyau', 'role' => 'Anggota Pembina'],
                        ['name' => 'Elisabeth Cenawatin', 'role' => 'Anggota Pembina'],
                        ['name' => 'Gabriel Kosay', 'role' => 'Anggota Pembina'],
                        ['name' => 'Yafet Hisage', 'role' => 'Anggota Pembina'],
                    ];
                @endphp

                @foreach ($pembina as $member)
                    <div class="group text-center">
                        <div
                            class="relative w-20 h-20 mx-auto mb-6 bg-white rounded-full shadow-md flex items-center justify-center border border-slate-100 group-hover:bg-sky-950 transition-all duration-500">
                            <i class="fas fa-user text-slate-300 group-hover:text-yellow-400 transition-colors"></i>
                        </div>
                        <h4 class="text-sm font-bold text-sky-950">{{ $member['name'] }}</h4>
                        <p class="text-yptp-blue/60 text-[9px] font-black uppercase tracking-widest mt-1">
                            {{ $member['role'] }}</p>
                    </div>
                @endforeach
            </div>

            {{-- Bagian Pengawas & Pengurus Inti --}}
            <div class="grid lg:grid-cols-2 gap-16 mt-24">
                {{-- Kolom Pengawas --}}
                <div class="bg-white p-12 rounded-[3rem] shadow-xl shadow-sky-900/5 border border-slate-50">
                    <h3 class="text-xl font-black text-sky-950 mb-10 flex items-center gap-4">
                        <div
                            class="w-10 h-10 bg-yellow-400 rounded-xl flex items-center justify-center text-sky-950 shadow-lg shadow-yellow-200">
                            <i class="fas fa-search"></i>
                        </div>
                         Pengawas
                    </h3>
                    <div class="space-y-8">
                        @php
                            $pengawas = [
                                ['name' => 'Isak Lokobal', 'role' => 'Ketua Pengawas'],
                                ['name' => 'David Daud Kossay', 'role' => 'Anggota Pengawas'],
                                ['name' => 'Ignasius Valuk', 'role' => 'Anggota Pengawas'],
                            ];
                        @endphp
                        @foreach ($pengawas as $p)
                            <div class="flex items-center gap-6 group">
                                <div
                                    class="w-14 h-14 shrink-0 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-400 group-hover:bg-sky-950 group-hover:text-white transition-all border border-slate-100">
                                    <i class="fas fa-user-check"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-sky-950">{{ $p['name'] }}</h4>
                                    <p class="text-xs text-yptp-blue font-bold uppercase tracking-tighter">
                                        {{ $p['role'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                {{-- Kolom Pengurus Harian --}}
                <div class="bg-sky-950 p-12 rounded-[3rem] shadow-xl text-white relative overflow-hidden">
                    {{-- Dekorasi background --}}
                    <div class="absolute top-0 right-0 p-8 opacity-5">
                        <i class="fas fa-users-cog text-9xl"></i>
                    </div>

                    <h3 class="text-xl font-black mb-10 flex items-center gap-4 text-white relative z-10">
                        <div
                            class="w-10 h-10 bg-yptp-blue rounded-xl flex items-center justify-center text-white shadow-lg shadow-sky-900">
                            <i class="fas fa-sitemap"></i>
                        </div>
                        Pengurus 
                    </h3>
                    <div class="space-y-8 relative z-10">
                        @php
                            $pengurus = [
                                ['name' => 'Yulina M. Jeujanan', 'role' => 'Sekretaris Umum'],
                                ['name' => 'Inosensius Yoga Pribadi', 'role' => 'Sekretaris'],
                                ['name' => 'Rosalia Woso', 'role' => 'Bendahara'],
                            ];
                        @endphp
                        @foreach ($pengurus as $p)
                            <div class="flex items-center gap-6 group">
                                <div
                                    class="w-14 h-14 shrink-0 bg-white/10 rounded-2xl flex items-center justify-center text-sky-300 group-hover:bg-yptp-blue group-hover:text-white transition-all border border-white/5">
                                    <i class="fas fa-user-edit"></i>
                                </div>
                                <div>
                                    <h4 class="font-bold text-white group-hover:text-yellow-400 transition-colors">
                                        {{ $p['name'] }}</h4>
                                    <p class="text-xs text-sky-300 font-bold uppercase tracking-tighter">{{ $p['role'] }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </section>

    </div>
    </section>
@endsection