@extends('visitor.layout.tamplate')

@section('content')
    {{-- 1. Hero Section Donasi (Premium & Modern) --}}
    <section class="pt-44 pb-32 bg-[#020617] relative overflow-hidden">
        {{-- Layer 1: Background Image dengan Overlay Gelap --}}
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('assets/img/profil.jpg') }}" class="w-full h-full object-cover opacity-20">
            <div class="absolute inset-0 bg-gradient-to-b from-[#020617]/50 via-[#020617] to-[#020617]"></div>
        </div>

        {{-- Layer 2: Dekorasi Elemen Cahaya --}}
        <div class="absolute -top-24 -right-24 w-96 h-96 bg-sky-500/20 rounded-full blur-[120px]"></div>
        <div class="absolute -bottom-24 -left-24 w-72 h-72 bg-yellow-400/10 rounded-full blur-[100px]"></div>
        
        <div class="max-w-7xl mx-auto px-6 relative z-10 text-center">
            {{-- Badge --}}
            <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">
                Uluran Tangan Anda Berarti
            </span>

            {{-- Judul Utama --}}
            <h1 class="text-4xl md:text-7xl font-extrabold text-white mb-8 leading-[1.1]">
                Investasi Masa Depan <br>
                <span class="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-sky-200">Generasi Papua</span>
            </h1>

            {{-- Sub-deskripsi --}}
            <p class="text-slate-400 max-w-3xl mx-auto text-base md:text-xl leading-relaxed">
                Setiap donasi yang Anda berikan akan disalurkan langsung untuk beasiswa, pelatihan keterampilan, dan fasilitas belajar pemuda di Papua Tengah.
            </p>
        </div>
    </section>

    {{-- 2. Detail Pembayaran Section --}}
    <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-2 gap-12 items-center">
                
                {{-- Kiri: Informasi Rekening (Dinamis dari Database) --}}
                <div class="space-y-8">
                    <div>
                        <h2 class="text-3xl md:text-4xl font-black text-sky-950 mb-4">Saluran Donasi</h2>
                        <p class="text-slate-500 text-lg">Gunakan nomor rekening resmi yayasan di bawah ini:</p>
                    </div>

                    @if($setting->rekening_donasi)
                    <div class="bg-slate-50 p-8 md:p-12 rounded-[3rem] border border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-8 hover:shadow-2xl hover:shadow-sky-900/5 transition-all duration-500 group">
                        <div class="text-center sm:text-left">
                            <p class="text-[10px] font-black text-sky-600 uppercase tracking-[0.2em] mb-3">Nomor Rekening Resmi</p>
                            <h3 class="text-3xl md:text-4xl font-black text-sky-950 tracking-wider mb-2" id="norek-value">
                                {{ $setting->rekening_donasi }}
                            </h3>
                            <p class="text-lg text-slate-500 font-bold uppercase tracking-tight">A.N {{ $setting->name ?? 'Yayasan Talenta Papua Tengah' }}</p>
                        </div>
                        
                        <button onclick="copyNorek('{{ $setting->rekening_donasi }}')" 
                                class="w-20 h-20 rounded-3xl bg-white text-sky-600 hover:bg-sky-600 hover:text-white transition-all flex items-center justify-center shadow-lg group-hover:scale-110 active:scale-95 border border-slate-100">
                            <i class="far fa-copy text-2xl"></i>
                        </button>
                    </div>
                    @else
                    <div class="p-8 bg-orange-50 border border-orange-100 rounded-3xl text-orange-700">
                        <i class="fas fa-info-circle mr-2"></i> Informasi rekening belum tersedia. Silakan hubungi admin.
                    </div>
                    @endif

                    {{-- Tombol Konfirmasi WA --}}
                    <div class="bg-emerald-50 p-8 rounded-[2.5rem] border border-emerald-100 relative overflow-hidden group">
                        <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
                            <div>
                                <h4 class="font-black text-emerald-950 text-xl mb-2 flex items-center gap-2">
                                    <i class="fab fa-whatsapp text-2xl text-emerald-600"></i> Konfirmasi Donasi
                                </h4>
                                <p class="text-emerald-900/60 text-sm">Kirim bukti transfer agar dapat kami catat dalam laporan akuntabilitas.</p>
                            </div>
                            <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $setting->phone) }}?text=Halo%20YPTP%2C%20saya%20sudah%20mentransfer%20donasi.%20Berikut%20bukti%20transfernya." 
                               target="_blank"
                               class="whitespace-nowrap bg-emerald-600 text-white px-8 py-4 rounded-2xl font-bold hover:bg-emerald-700 transition-all shadow-lg active:scale-95">
                                Kirim Bukti Transfer
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Kanan: Visual/Illustrasi --}}
                <div class="hidden lg:block">
                    <div class="relative">
                        <div class="absolute inset-0 bg-sky-200 rounded-full blur-[100px] opacity-30"></div>
                        <img src="{{ asset('assets/img/profil.jpg') }}" 
                             class="relative z-10 rounded-[4rem] shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-700">
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- 3. 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-16 items-center">

                {{-- Bagian Teks --}}
                <div class="order-2 md:order-1">
                    <span class="text-yellow-400 font-bold uppercase tracking-[0.3em] text-xs mb-4 block">Ekonomi Kreatif</span>
                    <h2 class="text-4xl md:text-6xl font-black mb-8 leading-tight">
                        Pesan Kursi Sofa <br>
                        Karya <span class="italic text-yellow-400">Talenta Papua</span>
                    </h2>
                    <p class="text-sky-100/70 text-lg mb-10 leading-relaxed">
                        Setiap kursi sofa yang Anda pesan adalah dukungan nyata bagi kemandirian anak didik kami. Dibuat dengan ketelitian tinggi oleh tangan-tangan terampil pemuda Amungme & Kamoro.
                    </p>

                    <div class="grid grid-cols-2 gap-6 mb-12">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center border border-white/10">
                                <i class="fas fa-check text-yellow-400 text-sm"></i>
                            </div>
                            <span class="font-bold text-sm">Kualitas Premium</span>
                        </div>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center border border-white/10">
                                <i class="fas fa-check text-yellow-400 text-sm"></i>
                            </div>
                            <span class="font-bold text-sm">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%20atau%20bertanya%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 w-full sm:w-auto justify-center">
                        <i class="fab fa-whatsapp text-2xl"></i>
                        Pesan Sekarang
                    </a>
                </div>

                {{-- Bagian Visual --}}
                <div class="relative order-1 md:order-2">
                    <div class="bg-white/5 border border-white/10 p-4 rounded-[4rem] backdrop-blur-sm relative z-10 shadow-2xl">
                        <div class="aspect-[4/3] bg-sky-900/50 rounded-[3rem] overflow-hidden border border-white/10">
                            <img src="{{ asset('assets/img/kursi.jpg') }}" 
                                 alt="Karya Sofa YPTP"
                                 class="w-full h-full object-cover hover:scale-110 transition-transform duration-1000">
                        </div>
                    </div>
                    {{-- Decorative Tag --}}
                    <div class="absolute -bottom-6 -right-6 bg-yellow-400 text-sky-950 p-6 rounded-3xl shadow-2xl z-20 animate-bounce">
                        <p class="font-black text-2xl leading-none">100%</p>
                        <p class="text-[10px] font-bold uppercase tracking-widest">Handmade</p>
                    </div>
                </div>

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

    {{-- Script Copy to Clipboard --}}
    <script>
        function copyNorek(text) {
            navigator.clipboard.writeText(text).then(() => {
                // Menggunakan Toast sederhana (bisa diganti SweetAlert)
                alert('Nomor rekening ' + text + ' berhasil disalin!');
            });
        }
    </script>
@endsection