@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. HERO SECTION (Dark Modern) --}}
    <section class="pt-44 pb-32 bg-sky-950 relative overflow-hidden">
        <div class="absolute inset-0 z-0">
            <div class="absolute inset-0 bg-gradient-to-b from-sky-950/50 via-sky-950/80 to-sky-950"></div>
            <div class="absolute top-0 right-0 w-[600px] h-[600px] bg-sky-500/10 rounded-full blur-[120px] -mr-64 -mt-64">
            </div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-6 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">
                Profil Yayasan
            </span>
            <h1 class="text-4xl md:text-7xl font-extrabold text-white mb-8 leading-[1.1]">
                Mengenal Lebih Dekat <br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-sky-200">
                    {{ $setting->website_name ?? 'YPTP Papua' }}
                </span>
            </h1>
            <p class="text-sky-100/60 max-w-3xl mx-auto text-base md:text-xl leading-relaxed">
                Dedikasi kami untuk menciptakan perubahan nyata melalui pemberdayaan talenta lokal dan pendidikan
                berkualitas di tanah Papua.
            </p>
        </div>
    </section>

    {{-- 2. SEJARAH & LATAR BELAKANG --}}
    <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="grid lg:grid-cols-12 gap-12 items-start mb-16">
                {{-- Foto Sticky di Samping --}}
                <div class="lg:col-span-5 lg:sticky lg:top-24">
                    <div class="relative">
                        <div class="absolute -inset-4 border-2 border-dashed border-slate-100 rounded-[4rem]"></div>
                        <div
                            class="relative z-10 bg-slate-50 p-4 rounded-[3.5rem] shadow-2xl overflow-hidden aspect-square md:aspect-[4/5]">
                            <img src="{{ asset('assets/img/profil.jpg') }}" alt="{{ $setting->website_name }}"
                                class="w-full h-full object-cover rounded-[2.5rem] transition-transform duration-700 hover:scale-105">

                            <div
                                class="absolute bottom-8 right-8 w-24 h-24 bg-white p-4 rounded-3xl shadow-2xl border border-slate-50">
                                <img src="{{ asset('assets/img/logo.webp') }}" alt="Logo YPTP"
                                    class="w-full h-full object-contain">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Teks Latar Belakang (Justify & Padded) --}}
                <div class="lg:col-span-7">
                    <div class="flex items-center gap-4 mb-6">
                        <span class="w-12 h-1 bg-sky-600 rounded-full"></span>
                        <span class="text-sky-600 font-black uppercase tracking-[0.3em] text-xs">Sejarah Kami</span>
                    </div>
                    <h2 class="text-3xl md:text-5xl font-black text-sky-950 mb-10 leading-tight">
                        Latar Belakang & <br> <span
                            class="text-sky-600 italic font-serif text-4xl md:text-6xl uppercase">Awal Mula</span>
                    </h2>

                    <div
                        class="prose prose-slate prose-lg max-w-none text-slate-600 
                            [&>p]:text-justify [&>p]:mb-8 [&>p]:pb-2 [&>p]:leading-relaxed">
                        {!! $setting->latar_belakang !!}
                    </div>
                </div>
            </div>

            {{-- Section Tujuan (Justify & Padded) --}}
            @if ($setting->tujuan)
                <div class="bg-sky-50 rounded-[3rem] p-8 md:p-16 border-l-[12px] border-sky-600 shadow-sm">
                    <h4 class="text-sky-900 font-black mb-8 uppercase text-sm tracking-[0.4em] flex items-center gap-4">
                        <i class="fas fa-bullseye text-2xl"></i> Tujuan Strategis
                    </h4>
                    <div
                        class="prose prose-slate prose-xl text-slate-700 italic 
                        [&>p]:text-justify [&>p]:mb-6 [&>p]:pb-2">
                        {!! $setting->tujuan !!}
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- 3. VISI & MISI --}}
    <section class="py-24 bg-slate-50 relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="grid md:grid-cols-2 gap-12">

                {{-- Visi --}}
                <div class="bg-white p-10 md:p-16 rounded-[4rem] shadow-xl border border-slate-100 group">
                    <div
                        class="w-20 h-20 bg-sky-950 text-yellow-400 rounded-[2rem] flex items-center justify-center mb-10 text-3xl">
                        <i class="fas fa-lightbulb"></i>
                    </div>
                    <h3 class="text-3xl font-black text-sky-950 mb-8 uppercase tracking-tight">Visi Kami</h3>
                    <div
                        class="prose prose-slate prose-lg text-slate-600 italic 
                            [&>p]:text-justify [&>p]:mb-4 [&>p]:pb-2">
                        {!! $setting->visi !!}
                    </div>
                </div>

                {{-- Misi --}}
                <div class="bg-white p-10 md:p-16 rounded-[4rem] shadow-xl border border-slate-100 group">
                    <div
                        class="w-20 h-20 bg-sky-600 text-white rounded-[2rem] flex items-center justify-center mb-10 text-3xl">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="text-3xl font-black text-sky-950 mb-8 uppercase tracking-tight">Misi Kami</h3>
                    <div
                        class="prose prose-slate prose-lg text-slate-600 
                            [&_p]:text-justify [&_p]:mb-6 [&_p]:pb-2
                            [&_li]:text-justify [&_li]:mb-6 [&_li]:pb-2
                            prose-ul:list-none prose-ul:p-0 
                            [&_li]:flex [&_li]:gap-5 [&_li]:items-start
                            [&_li]:before:content-['\f058'] [&_li]:before:font-['Font_Awesome_6_Free'] [&_li]:before:font-black [&_li]:before:text-emerald-500 [&_li]:before:text-xl">
                        {!! $setting->misi !!}
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- 4. CONTACT & SOCIAL MEDIA (No Embed Maps) --}}
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-6">
            <div class="bg-sky-950 rounded-[4rem] p-8 md:p-20 text-white relative overflow-hidden">
                <div class="grid lg:grid-cols-2 gap-16 items-center relative z-10">

                    {{-- Info Kontak --}}
                    <div>
                        <h2 class="text-3xl md:text-5xl font-black mb-10 leading-tight italic">
                            Hubungi <span class="text-yellow-400">Kami</span>
                        </h2>
                        <div class="space-y-8">
                            @if ($setting->address)
                                <div class="flex items-start gap-6 group">
                                    <div
                                        class="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center group-hover:bg-sky-500 transition-all shrink-0">
                                        <i class="fas fa-map-marker-alt text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sky-400 text-xs font-black uppercase mb-1">Alamat Kantor</p>
                                        <p class="text-sky-100/70 text-lg font-medium leading-relaxed italic">
                                            {{ $setting->address }}</p>
                                        @if ($setting->google_maps_link)
                                            <a href="{{ $setting->google_maps_link }}" target="_blank"
                                                class="mt-2 inline-block text-yellow-400 text-sm font-bold hover:underline italic uppercase tracking-tighter">Buka
                                                Petunjuk Arah →</a>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            @if ($setting->phone)
                                <div class="flex items-center gap-6 group">
                                    <div
                                        class="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center group-hover:bg-green-500 transition-all shrink-0">
                                        <i class="fab fa-whatsapp text-2xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sky-400 text-xs font-black uppercase mb-1">WhatsApp Chat</p>
                                        <p class="text-sky-100/70 text-lg font-medium">{{ $setting->phone }}</p>
                                    </div>
                                </div>
                            @endif

                            @if ($setting->email)
                                <div class="flex items-center gap-6 group">
                                    <div
                                        class="w-14 h-14 bg-white/10 rounded-2xl flex items-center justify-center group-hover:bg-red-400 transition-all shrink-0">
                                        <i class="fas fa-envelope text-xl"></i>
                                    </div>
                                    <div>
                                        <p class="text-sky-400 text-xs font-black uppercase mb-1">Email Resmi</p>
                                        <p class="text-sky-100/70 text-lg font-medium">{{ $setting->email }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    {{-- Sosial Media Grid Termasuk WA Channel --}}
                    <div class="bg-white/5 border border-white/10 p-10 rounded-[3.5rem] backdrop-blur-sm relative">
                        <h4 class="text-xl font-black mb-8 text-center uppercase tracking-widest text-sky-400 italic">Ikuti
                            Jejak Kami</h4>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-6">
                            @php
                                $sosmeds = [
                                    [
                                        'link' => $setting->wa_channel,
                                        'icon' => 'fa-whatsapp',
                                        'name' => 'WA',
                                        'color' => 'hover:bg-emerald-600 border-emerald-500/30',
                                    ],
                                    [
                                        'link' => $setting->instagram,
                                        'icon' => 'fa-instagram',
                                        'name' => 'Instagram',
                                        'color' => 'hover:bg-pink-600',
                                    ],
                                    [
                                        'link' => $setting->youtube,
                                        'icon' => 'fa-youtube',
                                        'name' => 'YouTube',
                                        'color' => 'hover:bg-red-600',
                                    ],
                                    [
                                        'link' => $setting->facebook,
                                        'icon' => 'fa-facebook-f',
                                        'name' => 'Facebook',
                                        'color' => 'hover:bg-blue-600',
                                    ],
                                    [
                                        'link' => $setting->tiktok,
                                        'icon' => 'fa-tiktok',
                                        'name' => 'TikTok',
                                        'color' => 'hover:bg-black',
                                    ],
                                    [
                                        'link' => $setting->linked,
                                        'icon' => 'fa-linkedin-in',
                                        'name' => 'LinkedIn',
                                        'color' => 'hover:bg-blue-700',
                                    ],
                                ];
                            @endphp

                            @foreach ($sosmeds as $sm)
                                @if ($sm['link'])
                                    <a href="{{ $sm['link'] }}" target="_blank"
                                        class="flex flex-col items-center justify-center p-6 bg-white/5 rounded-3xl transition-all group {{ $sm['color'] }} {{ isset($sm['name']) && $sm['name'] == 'WA Channel' ? 'border-2 border-emerald-500/20' : 'border border-white/5' }} hover:-translate-y-2 shadow-xl">
                                        <i class="fab {{ $sm['icon'] }} text-2xl mb-2"></i>
                                        <span
                                            class="text-[10px] font-bold uppercase tracking-widest">{{ $sm['name'] }}</span>

                                        {{-- Badge khusus untuk WA Channel --}}
                                        @if ($sm['name'] == 'WA Channel')
                                            <span
                                                class="absolute -top-2 -right-2 bg-emerald-500 text-[8px] px-2 py-1 rounded-full animate-pulse text-white font-black">NEW</span>
                                        @endif
                                    </a>
                                @endif
                            @endforeach
                        </div>
                    </div>

                </div>

                {{-- Watermark --}}
                <div
                    class="absolute -bottom-10 -left-10 text-[10rem] font-black text-white/5 pointer-events-none select-none uppercase tracking-tighter italic">
                    {{-- {{ substr($setting->website_name ?? 'YPTP', 0, 4) }} --}}
                </div>
            </div>
        </div>
    </section>
@endsection