@extends('visitor.layout.tamplate')

@section('content')
    {{-- Load Assets via CDN atau Mix/Vite --}}
 
    

    <section class="relative h-[90vh] md:h-screen w-full overflow-hidden bg-slate-950">
        <div class="swiper heroSwiper h-full w-full">
            <div class="swiper-wrapper">

                <div class="swiper-slide relative flex items-center justify-center pt-32 md:pt-44">
                    <div class="slide-bg absolute inset-0 bg-cover bg-center"
                        style="background-image: url('assets/img/bg-hero.webp');">
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/40 via-slate-900/60 to-slate-950"></div>

                    <div class="relative z-10 container mx-auto px-6 text-center">
                        <h1
                            class="slide-title opacity-0 text-4xl md:text-7xl font-black text-white mb-6 leading-[1.1] drop-shadow-2xl">
                            Mewujudkan <span class="text-yellow-400">Kemandirian</span> <br class="hidden md:block">
                            Putra-Putri Amungme & Kamoro
                        </h1>
                        <p
                            class="slide-text opacity-0 max-w-2xl mx-auto text-white/90 text-base md:text-xl font-medium mb-10 leading-relaxed drop-shadow-lg">
                            Berlandaskan ketakwaan untuk mengangkat harkat, martabat, dan mencetak pemimpin masa depan
                            Mimika yang profesional.
                        </p>
                        <div class="slide-btns opacity-0 flex flex-wrap justify-center gap-4">
                            <a href="{{ route('donasi') }}"
                                class="bg-yellow-400 hover:bg-yellow-500 text-sky-950 px-8 md:px-12 py-4 rounded-full font-black shadow-2xl transition-all transform hover:-translate-y-1">
                                Donasi Sekarang
                            </a>
                            <a href="#program"
                                class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white border border-white/30 px-8 md:px-12 py-4 rounded-full font-bold transition-all">
                                Pelajari Program
                            </a>
                        </div>
                    </div>
                </div>

                <div class="swiper-slide relative flex items-center justify-center pt-32 md:pt-44">
                    <div class="slide-bg absolute inset-0 bg-cover bg-center"
                        style="background-image: url('assets/img/bg-hero-2.webp');">
                    </div>
                    <div class="absolute inset-0 bg-gradient-to-b from-slate-900/40 via-slate-900/60 to-slate-950"></div>

                    <div class="relative z-10 container mx-auto px-6 text-center">
                        <h1 class="slide-title opacity-0 text-4xl md:text-7xl font-black text-white mb-6 leading-tight">
                            Mencetak Generasi <span class="text-yellow-400">Profesional</span>
                        </h1>
                        <p
                            class="slide-text opacity-0 max-w-2xl mx-auto text-white/90 text-base md:text-xl mb-10 font-medium drop-shadow-lg">
                            Pendidikan berkualitas dan pelatihan skill nyata untuk masa depan Mimika yang lebih cerah.
                        </p>
                        <div class="slide-btns opacity-0">
                            <a href="{{ route('kontak') }}"
                                class="bg-yellow-400 hover:bg-yellow-500 text-sky-950 px-12 py-4 rounded-full font-black shadow-2xl transition-all transform hover:-translate-y-1 inline-block">
                                Gabung Sekarang
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- <div class="swiper-pagination !bottom-12"></div> --}}
        </div>
    </section>

    {{-- --- SEARCH SECTION --- --}}
    <div class="relative z-30 -mt-10 md:-mt-14 max-w-4xl mx-auto px-6">
        <form action="{{ route('search') }}" method="GET"
            class="search-glass p-3 rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.1)] flex flex-col md:flex-row items-center gap-2 border border-white">
            <div class="flex items-center gap-3 w-full px-5">
                <i class="fas fa-search text-slate-400"></i>
                <input type="text" name="query" placeholder="Cari berita atau artikel talenta Papua..."
                    class="w-full outline-none text-slate-700 font-medium bg-transparent py-3 text-sm md:text-base">
            </div>
            <button type="submit"
                class="w-full md:w-auto bg-sky-600 text-white px-10 py-4 rounded-[2rem] font-bold hover:bg-sky-700 transition-all shadow-lg shadow-sky-200">
                Cari
            </button>
        </form>
    </div>
    {{-- --- TENTANG SECTION --- --}}
    <section id="tentang" class="py-24 px-6 bg-white overflow-hidden">
        <div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 md:gap-20 items-center">

            {{-- Visual Section: Foto Pendiri --}}
            <div class="relative order-2 md:order-1">
                <div
                    class="absolute -z-10 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-sky-50 rounded-full blur-3xl opacity-60">
                </div>

                <div class="relative">
                    <div
                        class="relative z-10 overflow-hidden rounded-[2rem] md:rounded-[3rem] shadow-2xl border-[8px] md:border-[16px] border-white transition-all duration-500 hover:rotate-1">
                        <img src="{{ asset('assets/img/profil.jpg') }}" alt="{{ $setting->website_name ?? 'Pendiri YPTP' }}"
                            class="w-full h-auto object-cover aspect-[4/3]">

                        <div
                            class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-6 pt-20">
                            <p class="text-yellow-400 font-bold tracking-widest uppercase text-[10px] mb-1">Profil Pendiri
                            </p>
                            <p class="text-white/95 text-sm md:text-base font-medium italic leading-relaxed">
                                "Membangun kemandirian talenta Papua melalui pendidikan dan karakter."
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Text Section --}}
            <div class="order-1 md:order-2">
                <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 tracking-widest uppercase text-xs">Tentang
                        {{ $setting->website_name ?? 'YPTP' }}</span>
                </div>

                <h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-8 leading-[1.2]">
                    Membangun Talenta dari Jantung Papua Tengah
                </h2>

                {{-- Container Latar Belakang --}}
                <div class="mb-10">
                    {{-- Styling khusus untuk tag <p> dari CKEditor agar Justify dan Berjarak --}}
                    <div
                        class="prose prose-slate prose-lg max-w-none text-slate-600 text-justify 
                            [&>p]:mb-6 [&>p]:leading-relaxed">
                        {!! Str::limit($setting->latar_belakang ?? $setting->description, 600, '...') !!}
                    </div>

                    {{-- Box Visi Saja --}}
                    @if ($setting->visi)
                        <div
                            class="mt-8 bg-sky-50 p-8 rounded-3xl border-l-8 border-sky-600 shadow-sm relative overflow-hidden">
                            {{-- Watermark Icon --}}
                            <i class="fas fa-quote-right absolute top-4 right-4 text-sky-200/50 text-5xl"></i>

                            <h4
                                class="text-sky-900 font-bold uppercase text-xs tracking-[0.2em] mb-4 flex items-center gap-2">
                                <i class="fas fa-eye text-sky-600"></i> Visi Kami
                            </h4>

                            <div class="text-slate-700 text-lg leading-relaxed font-medium italic prose-p:m-0">
                                {!! $setting->visi !!}
                            </div>
                        </div>
                    @endif
                </div>

                <div class="flex flex-wrap gap-4">
                    <a href="{{ route('tentang') }}"
                        class="inline-flex items-center gap-4 bg-sky-600 text-white px-10 py-5 rounded-2xl font-bold hover:bg-sky-700 transition-all group shadow-xl shadow-sky-100">
                        Baca Selengkapnya
                        <i class="fas fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- --- PROGRAM SECTION --- --}}
    <section id="program" class="py-24 bg-slate-50">
        <div class="max-w-7xl mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
                <div class="max-w-xl">
                    <h2 class="text-4xl font-black text-slate-900 mb-2">Program Pelatihan</h2>
                    <p class="text-slate-500 font-medium">Membekali putra-putri daerah dengan keterampilan teknis standar
                        industri.</p>
                </div>
                <a href="{{ route('program') }}"
                    class="bg-white text-sky-600 border border-sky-100 px-8 py-3 rounded-full font-bold hover:bg-sky-600 hover:text-white transition-all shadow-sm">
                    Lihat Semua Program
                </a>
            </div>

            <div class="grid md:grid-cols-3 gap-8 md:gap-10">
                @foreach ($program_unggulan as $item)
                    <div
                        class="group bg-white rounded-[3rem] overflow-hidden shadow-sm hover:shadow-[0_30px_60px_-15px_rgba(0,0,0,0.1)] transition-all duration-500 border border-slate-100 flex flex-col">
                        {{-- Image Container --}}
                        <div class="h-64 overflow-hidden relative">
                            <img src="{{ asset('uploads/programs/' . $item->image) }}" alt="{{ $item->title }}"
                                class="w-full h-full object-cover group-hover:scale-110 transition duration-700"
                                loading="lazy">

                            <div
                                class="absolute top-6 left-6 bg-yellow-400 text-sky-950 text-[10px] font-black uppercase px-4 py-2 rounded-full shadow-lg">
                                {{ $item->category_program->name ?? 'New Program' }}
                            </div>
                        </div>

                        {{-- Content Container --}}
                        <div class="p-10 flex flex-col flex-grow">
                            <h4
                                class="text-2xl font-bold text-slate-900 mb-4 group-hover:text-sky-600 transition-colors leading-tight">
                                {{ $item->title }}
                            </h4>

                            {{-- CKEditor Description Handler --}}
                            <div class="text-slate-600 mb-8 flex-grow">
                                {{-- 
                            Note: strip_tags digunakan agar format HTML dari CKEditor 
                            tidak merusak tampilan card (seperti table atau heading besar).
                        --}}
                                <div class="line-clamp-3 leading-relaxed text-sm">
                                    {!! Str::limit(strip_tags($item->description), 150) !!}
                                </div>
                            </div>

                            <a href="{{ route('program') }}"
                                class="flex items-center justify-center w-full py-4 bg-slate-50 rounded-2xl font-bold text-slate-800 hover:bg-sky-600 hover:text-white transition-all group/btn">
                                Pelajari Detail
                                <i
                                    class="fas fa-arrow-right ml-2 text-[10px] opacity-0 -translate-x-2 group-hover/btn:opacity-100 group-hover/btn:translate-x-0 transition-all"></i>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>


    {{-- --- ORDER SOFA SECTION (Pemberdayaan) --- --}}
    <section class="py-24 bg-sky-950 text-white relative overflow-hidden">
        {{-- Dekorasi Background --}}
        <div class="absolute -top-24 -left-24 w-96 h-96 bg-sky-500/10 blur-[120px] rounded-full"></div>
        <div class="absolute -bottom-24 -right-24 w-96 h-96 bg-yellow-400/5 blur-[120px] rounded-full"></div>

        <div class="max-w-7xl mx-auto px-6 relative z-10">
            <div class="grid md:grid-cols-2 gap-12 items-center">

                {{-- Bagian Teks --}}
                <div>
                    <h3 class="text-yellow-400 font-bold uppercase tracking-widest text-sm mb-3">Karya Anak Bangsa</h3>
                    <h2 class="text-3xl md:text-5xl font-black mb-6 leading-tight">
                        Pesan Kursi Sofa <br>
                        Karya <span class="italic text-yellow-400">Talenta Papua</span>
                    </h2>
                    <p class="text-sky-100/80 text-lg mb-8 leading-relaxed">
                        Setiap kursi sofa yang Anda pesan adalah dukungan nyata bagi kemandirian anak didik kami. Dibuat
                        dengan ketelitian tinggi dan kualitas standar industri oleh tangan-tangan terampil pemuda Amungme &
                        Kamoro.
                    </p>

                    <div class="flex flex-wrap gap-6 mb-10">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                                <i class="fas fa-check text-yellow-400"></i>
                            </div>
                            <span class="font-medium">Kualitas Premium</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                                <i class="fas fa-check text-yellow-400"></i>
                            </div>
                            <span class="font-medium">Desain Custom</span>
                        </div>
                    </div>

                    {{-- Tombol WhatsApp --}}
                    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $setting->phone) }}?text=Halo%20YPTP%2C%20saya%20tertarik%20untuk%20memesan/tanya%20mengenai%20kursi%20sofa%20hasil%20karya%20anak%20didik."
                        target="_blank"
                        class="inline-flex items-center gap-4 bg-yellow-400 hover:bg-yellow-500 text-sky-950 px-10 py-5 rounded-2xl font-black text-lg shadow-2xl transition-all transform hover:-translate-y-1 active:scale-95">
                        <i class="fab fa-whatsapp text-2xl"></i>
                        Pesan Sekarang
                    </a>
                </div>

                {{-- Bagian Visual/Aksen --}}
                <div class="relative">
                    <div class="bg-white/5 border border-white/10 p-4 rounded-[3rem] backdrop-blur-sm relative z-10">
                        {{-- Placeholder untuk Gambar Produk (Bisa diganti assets/img/produk-sofa.jpg jika ada) --}}
                        <div
                            class="aspect-video bg-sky-900/50 rounded-[2.5rem] overflow-hidden flex items-center justify-center border border-white/5 group">

                            <img src="{{ asset('assets/img/kursi.jpg') }}" class="w-full h-full object-cover">
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </section>

{{-- --- BERITA SECTION --- --}}
<section id="berita" class="py-24 px-6 max-w-7xl mx-auto">
    <div class="flex flex-col items-center text-center mb-16">
        <span class="bg-sky-100 text-sky-600 px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest mb-4">
            Update Terbaru
        </span>
        <h2 class="text-4xl md:text-5xl font-black text-slate-900 italic">Warta YPTP</h2>
    </div>

    {{-- Grid diubah ke md:grid-cols-3 untuk 3 kolom --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
        @foreach ($berita_terbaru as $news)
            <article class="bg-white rounded-[3rem] p-5 border border-slate-100 shadow-sm hover:shadow-2xl transition-all duration-500 group flex flex-col h-full">
                
                {{-- Container Gambar --}}
                <div class="h-64 rounded-[2.5rem] overflow-hidden mb-8 relative">
                    <img src="{{ $news->image && file_exists(public_path('uploads/news/' . $news->image))
                                ? asset('uploads/news/' . $news->image)
                                : 'https://ui-avatars.com/api/?name=' . urlencode($news->title) . '&background=f0f9ff&color=0ea5e9' }}"
                         alt="{{ $news->title }}"
                         class="w-full h-full object-cover group-hover:scale-110 transition duration-700"
                         loading="lazy">
                    
                    {{-- Badge Kategori --}}
                    <div class="absolute top-5 left-5">
                        <span class="bg-white/90 backdrop-blur-sm text-sky-600 px-4 py-2 rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-sm">
                            {{ $news->category->name ?? 'Update' }}
                        </span>
                    </div>
                </div>

                {{-- Konten Teks --}}
                <div class="px-4 pb-4 flex flex-col flex-grow">
                    <div class="flex items-center gap-3 mb-4">
                        <time class="text-slate-400 text-xs font-bold flex items-center gap-2">
                            <i class="far fa-calendar-alt text-sky-500"></i>
                            {{ $news->created_at->format('d M Y') }}
                        </time>
                    </div>

                    <h4 class="font-bold text-xl md:text-2xl text-slate-900 mb-6 leading-tight group-hover:text-sky-600 transition-colors flex-grow">
                        <a href="{{ route('baca-berita', $news->slug) }}">
                            {{ $news->title }}
                        </a>
                    </h4>

                    <div class="flex items-center justify-between pt-6 border-t border-slate-50">
                        <a href="{{ route('baca-berita', $news->slug) }}" class="text-sm font-bold text-slate-700 group-hover:text-sky-600 transition-colors">
                            Baca Selengkapnya
                        </a>
                        <a href="{{ route('baca-berita', $news->slug) }}"  class="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-400 group-hover:bg-sky-600 group-hover:text-white group-hover:rotate-[-45deg] transition-all duration-500">
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </article>
        @endforeach
    </div>
</section>

  {{-- --- DONASI SECTION --- --}}
<section id="donasi" class="py-24 px-6 relative overflow-hidden bg-slate-950">
    <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-sky-600/10 blur-[150px] rounded-full"></div>
    <div class="max-w-6xl mx-auto relative z-10 text-center text-white">
        <h2 class="text-4xl md:text-7xl font-black mb-8 leading-tight italic tracking-tighter">
            Dukung <span class="text-yellow-400">Talenta Asli</span> Papua
        </h2>
        <p class="text-slate-400 text-lg md:text-xl mb-16 max-w-3xl mx-auto font-light leading-relaxed">
            Kontribusi Anda mendukung penuh pengadaan alat kerja workshop dan beasiswa pelatihan kemandirian putra-putri daerah.
        </p>

        <div class="max-w-2xl mx-auto mb-16">
            {{-- Card Bank --}}
            <div class="bg-white/5 p-8 md:p-12 rounded-[3rem] border border-white/10 backdrop-blur-md relative group">
                <h4 class="font-black text-yellow-400 text-xl mb-6 flex items-center justify-center gap-4 italic uppercase tracking-widest">
                    <i class="fas fa-university"></i> Transfer Bank
                </h4>
                
                <p class="text-slate-400 text-[10px] mb-3 uppercase tracking-[0.3em] font-bold">
                    {{ $setting->website_name ?? 'YPTP Papua' }}
                </p>

                {{-- Display Rekening & Salin --}}
                <div class="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-6 bg-black/20 p-6 rounded-3xl border border-white/5">
                    <span id="norek" class="text-3xl md:text-5xl font-mono font-black tracking-tighter text-white">
                        {{ $setting->rekening_donasi ?? '1540022345567' }}
                    </span>
                    
                    <button onclick="copyToClipboard()" class="flex items-center gap-2 bg-white/10 hover:bg-yellow-400 hover:text-sky-950 px-6 py-3 rounded-2xl transition-all font-bold text-sm group/copy">
                        <i class="far fa-copy" id="copyIcon"></i>
                        <span id="copyText">Salin</span>
                    </button>
                </div>
                
                <p class="mt-6 text-slate-500 text-sm italic">Silakan transfer sesuai dengan nomor rekening di atas</p>
            </div>
        </div>

        @php
            $wa_number = preg_replace('/[^0-9]/', '', $setting->phone ?? '628123456789');
            // Pastikan format diawali 62
            if (strpos($wa_number, '0') === 0) {
                $wa_number = '62' . substr($wa_number, 1);
            }
        @endphp

        <a href="https://wa.me/{{ $wa_number }}?text=Halo%20YPTP%2C%20saya%20ingin%20konfirmasi%20donasi."
            target="_blank"
            class="inline-flex items-center gap-4 bg-yellow-400 hover:bg-yellow-500 text-sky-950 px-12 py-6 rounded-full font-black text-xl shadow-[0_20px_50px_rgba(250,204,21,0.2)] transition-all transform hover:scale-105 active:scale-95">
            <i class="fab fa-whatsapp text-2xl"></i> Konfirmasi Donasi
        </a>
    </div>
</section>

    {{-- Scripts --}}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script>

          function copyToClipboard() {
        const norek = document.getElementById('norek').innerText;
        const copyText = document.getElementById('copyText');
        const copyIcon = document.getElementById('copyIcon');

        navigator.clipboard.writeText(norek).then(() => {
            // Feedback Visual
            copyText.innerText = 'Tersalin!';
            
            setTimeout(() => {
                copyText.innerText = 'Salin';
            }, 2000);
        });
    }

    
        document.addEventListener('DOMContentLoaded', function() {
            const swiper = new Swiper('.heroSwiper', {
                loop: true,
                speed: 1500,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },
                autoplay: {
                    delay: 7000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                on: {
                    init: runAnimation,
                    slideChange: runAnimation
                }
            });

            function runAnimation() {
                const activeSlide = this.slides[this.activeIndex];
                const els = activeSlide.querySelectorAll('.slide-title, .slide-text, .slide-btns');

                // Reset all
                document.querySelectorAll('.slide-title, .slide-text, .slide-btns').forEach(el => {
                    el.classList.remove('animate__animated', 'animate__fadeInUp', 'opacity-100');
                    el.classList.add('opacity-0');
                });

                // Animate Active with staggered delay
                els.forEach((el, i) => {
                    setTimeout(() => {
                        el.classList.add('animate__animated', 'animate__fadeInUp', 'opacity-100');
                        el.classList.remove('opacity-0');
                    }, i * 250 + 200);
                });
            }
        });
    </script>
@endsection