@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section Program Strategis --}}
    <section class="pt-44 pb-32 bg-sky-950 relative overflow-hidden">
        {{-- Background Image menggunakan Asset Lokal --}}
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('assets/img/bg-hero.webp') }}" class="w-full h-full object-cover opacity-20">
            <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-0 right-0 w-[500px] h-[500px] bg-sky-500/10 rounded-full blur-[120px] -mr-48 -mt-48"></div>
        
        <div class="relative z-10 max-w-7xl mx-auto px-6">
            <div class="max-w-3xl">
                <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">
                    Dedikasi Untuk Papua
                </span>
                <h1 class="text-4xl md:text-7xl font-extrabold text-white mb-8 leading-[1.1]">
                    Program Strategis <br>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-sky-200">& Pengembangan</span>
                </h1>
                <p class="text-sky-100/70 text-base md:text-xl leading-relaxed italic">
                    "Mewujudkan kemandirian pemuda Papua melalui rangkaian program yang terukur, inklusif, dan berkelanjutan."
                </p>
            </div>
        </div>
    </section>

    {{-- 2. Main Program Content --}}
    <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 space-y-32 md:space-y-48">
            
            {{-- 1. Program Kerja --}}
            <div class="grid lg:grid-cols-2 gap-16 items-start">
                <div class="order-2 lg:order-1">
                    <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">01. Strategic Plan</span>
                    </div>
                    <h2 class="text-3xl md:text-4xl font-black text-sky-950 mb-8 leading-tight">Program Kerja <br><span class="text-sky-600 italic font-serif">Yayasan</span></h2>
                    
                    {{-- CKEditor Content: Program Kerja --}}
                    <div class="prose prose-slate prose-lg max-w-none text-slate-600 
                                [&>p]:text-justify [&>p]:mb-6 [&>p]:pb-2 [&>p]:leading-relaxed
                                [&_ul]:list-disc [&_ul]:ml-5 [&_li]:mb-2">
                        {!! $setting->program_kerja ?? '<p class="italic text-slate-400">Data program kerja belum diatur.</p>' !!}
                    </div>
                </div>

                <div class="order-1 lg:order-2 relative lg:sticky lg:top-32">
                    <div class="absolute -inset-6 bg-slate-50 rounded-[4rem] -rotate-2 -z-10"></div>
                    <div class="relative rounded-[3.5rem] overflow-hidden shadow-2xl transform lg:rotate-2 hover:rotate-0 transition-transform duration-700 aspect-[4/3]">
                        <img src="{{ asset('assets/img/bg-hero-2.webp') }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-sky-950/40 to-transparent"></div>
                    </div>
                </div>
            </div>

            {{-- 2. Program Berjalan (The Dark Card) --}}
            <div class="bg-sky-950 rounded-[4rem] p-8 md:p-20 text-white relative overflow-hidden shadow-3xl">
                {{-- Glowing Effect --}}
                <div class="absolute top-0 right-0 w-[400px] h-[400px] bg-sky-500/20 rounded-full blur-[120px] -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-64 h-64 bg-yellow-400/5 rounded-full blur-[100px] -ml-20 -mb-20"></div>
                
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-8">
                        <span class="w-12 h-1 bg-yellow-400 rounded-full"></span>
                        <span class="text-yellow-400 font-black uppercase tracking-[0.3em] text-xs">02. Current Projects</span>
                    </div>
                    <h2 class="text-3xl md:text-5xl font-extrabold mb-12 leading-tight uppercase">Program yang Sedang <br><span class="text-sky-400 italic font-serif normal-case">Berjalan Saat Ini</span></h2>
                    
                    <div class="grid md:grid-cols-1 gap-10">
                        <div class="bg-white/5 backdrop-blur-sm border-l-8 border-sky-500 p-8 md:p-14 rounded-r-[3rem] rounded-l-xl hover:bg-white/10 transition-colors">
                            {{-- CKEditor Content: Program Berjalan --}}
                            <div class="prose prose-invert prose-lg max-w-none 
                                        [&>p]:text-justify [&>p]:mb-6 [&>p]:pb-2 [&>p]:leading-relaxed [&>p]:opacity-90">
                                {!! $setting->program_berjalan ?? '<p class="italic text-slate-500">Belum ada program berjalan yang ditampilkan.</p>' !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- 3. Call to Action (CTA) --}}
    <section class="py-24 px-6">
        <div class="max-w-5xl mx-auto bg-gradient-to-br from-sky-600 to-sky-800 p-12 md:p-20 rounded-[4rem] shadow-2xl shadow-sky-200 text-center relative overflow-hidden group">
            <div class="relative z-10">
                <h3 class="text-3xl md:text-4xl font-black text-white mb-6 leading-tight uppercase">Ingin Berkolaborasi Dalam <br>Program Kami?</h3>
                <p class="text-sky-100/80 mb-12 text-lg max-w-2xl mx-auto italic">"Sinergi membangun Papua Tengah melalui pemberdayaan yang nyata."</p>
                
                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $setting->phone) }}" class="inline-flex items-center gap-4 bg-white text-sky-700 px-12 py-5 rounded-[2rem] font-black text-sm uppercase tracking-widest hover:bg-sky-950 hover:text-white transition-all duration-500 shadow-xl active:scale-95">
                    Hubungi Kami Sekarang
                    <i class="fas fa-arrow-right text-xs"></i>
                </a>
            </div>
        </div>
    </section>
@endsection