@extends('visitor.layout.tamplate')

@section('meta')
    <title>{{ $program->title }} - YPTP Program</title>
    <meta name="description" content="{{ Str::limit(strip_tags($program->description), 160) }}">
    <meta property="og:image" content="{{ asset('uploads/programs/meta/' . $program->image_meta) }}">
    <meta property="og:title" content="{{ $program->title }}">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta name="twitter:card" content="summary_large_image">
@endsection

@section('content')
    {{-- 1. Hero Section Program (Gaya Dark & Modern) --}}
    <section class="pt-44 pb-20 bg-sky-950 relative overflow-hidden">
        {{-- Background Image Overlay --}}
        <div class="absolute inset-0 opacity-10">
            <img src="{{ asset('uploads/programs/' . $program->image) }}" class="w-full h-full object-cover">
        </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-6 inline-block animate-fade-in">
                {{ $program->category_program->name }}
            </span>
            <h1 class="text-3xl md:text-6xl font-extrabold text-white mb-6 leading-tight">
                {{ $program->title }}
            </h1>
            
            <div class="flex items-center justify-center gap-2 text-sky-100/60 text-sm font-medium">
                <i class="fas fa-layer-group text-yptp-blue"></i>
                <span>Kategori Program</span>
            </div>
        </div>
    </section>

    {{-- 2. Main Content Section --}}
    <div class="bg-white pb-24">
        <div class="max-w-7xl mx-auto px-6">
            
            {{-- Breadcrumbs --}}
            <div class="py-10 border-b border-slate-100 mb-12">
                <nav class="flex items-center gap-3 text-[10px] md:text-xs font-bold uppercase tracking-widest">
                    <a href="{{ route('home') }}" class="text-slate-400 hover:text-yptp-blue transition">Home</a>
                    <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                    <a href="{{ route('program') }}" class="text-slate-400 hover:text-yptp-blue transition">Program</a>
                    <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                    <span class="text-yptp-blue">{{ $program->category_program->name }}</span>
                </nav>
            </div>

            <div class="grid lg:grid-cols-3 gap-16">
                
                {{-- KOLOM KIRI: Konten Utama --}}
                <div class="lg:col-span-2">
                    <article>
                        {{-- Main Featured Image --}}
                        <div class="rounded-[3rem] overflow-hidden mb-12 shadow-2xl shadow-sky-900/10 border border-slate-100">
                            <img src="{{ asset('uploads/programs/' . $program->image) }}" 
                                 class="w-full h-auto object-cover hover:scale-105 transition-transform duration-1000">
                        </div>

                        {{-- Description --}}
                        <div class="prose prose-lg max-w-none text-slate-600 leading-relaxed prose-headings:text-sky-950 prose-a:text-yptp-blue prose-img:rounded-3xl">
                            {!! $program->description !!}
                        </div>

                        {{-- Social Share --}}
                        <div class="mt-16 p-8 bg-slate-50 rounded-[2.5rem] border border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 bg-yptp-blue/10 rounded-full flex items-center justify-center text-yptp-blue">
                                    <i class="fas fa-share-alt"></i>
                                </div>
                                <h4 class="font-bold text-sky-950">Bagikan Program</h4>
                            </div>
                            <div class="flex gap-4">
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="w-12 h-12 bg-white text-[#1877F2] rounded-2xl flex items-center justify-center hover:bg-[#1877F2] hover:text-white transition-all shadow-sm border border-slate-200 group">
                                    <i class="fab fa-facebook-f group-hover:scale-110 transition"></i>
                                </a>
                                <a href="https://api.whatsapp.com/send?text={{ urlencode($program->title . ' - ' . url()->current()) }}" target="_blank" class="w-12 h-12 bg-white text-[#25D366] rounded-2xl flex items-center justify-center hover:bg-[#25D366] hover:text-white transition-all shadow-sm border border-slate-200 group">
                                    <i class="fab fa-whatsapp group-hover:scale-110 transition"></i>
                                </a>
                            </div>
                        </div>
                    </article>
                </div>

                {{-- KOLOM KANAN: Sidebar --}}
                <div class="lg:col-span-1">
                    <aside class="sticky top-32 space-y-12">
                        
                        {{-- Widget Program Lainnya --}}
                        <div class="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-xl shadow-sky-900/5">
                            <h3 class="text-xl font-bold text-sky-950 mb-8 flex items-center gap-3">
                                <span class="w-2 h-8 bg-yptp-blue rounded-full"></span> Program Lain
                            </h3>
                            <div class="space-y-8">
                                @foreach($recommendations as $rec)
                                    <a href="{{ route('show_program', $rec->slug) }}" class="group flex gap-4 items-start">
                                        <div class="w-20 h-20 shrink-0 rounded-2xl overflow-hidden shadow-md">
                                            <img src="{{ asset('uploads/programs/' . $rec->image) }}" 
                                                 class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                        </div>
                                        <div class="flex-grow">
                                            <span class="text-[9px] font-black text-yptp-blue uppercase tracking-widest">
                                                {{ $rec->category_program->name }}
                                            </span>
                                            <h4 class="font-bold text-sky-950 text-sm leading-tight group-hover:text-yptp-blue transition mt-1">
                                                {{ $rec->title }}
                                            </h4>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>

                        {{-- Banner Donasi Sidebar --}}
                        <div class="p-8 bg-gradient-to-br from-yptp-blue to-sky-900 rounded-[2.5rem] text-white shadow-2xl shadow-sky-900/20 relative overflow-hidden group">
                            <div class="relative z-10">
                                <h4 class="font-bold text-xl text-blac mb-3 italic text-black">Dukung <br>Talenta Papua</h4>
                                <p class="text-xs text-black leading-relaxed mb-8">Partisipasi Anda sangat berarti bagi pengembangan program ini.</p>
                                <a href="{{ route('donasi') }}" class="block text-center bg-yellow-400 text-sky-950 py-4 rounded-2xl font-black text-sm hover:bg-white hover:scale-105 transition-all shadow-lg">
                                    DONASI SEKARANG
                                </a>
                            </div>
                            <div class="absolute -right-10 -bottom-10 w-40 h-40 bg-white/10 rounded-full blur-3xl group-hover:scale-150 transition-all duration-700"></div>
                        </div>

                    </aside>
                </div>

            </div>
        </div>
    </div>
@endsection