@extends('public.layouts.app')
@section('title', 'Program Unggulan')

@section('content')

{{-- 
    DATA PROGRAM UNGGULAN PURUHITA
--}}
@php
    $programUnggulan = $programUnggulan ?? [
        [
            'title' => "Integrasi Al-Qur'an & IT", 
            'desc' => 'Kurikulum modern yang memadukan nilai-nilai Islam dan kecerdasan digital. Santri diajarkan menjadi pengguna sekaligus pencipta teknologi yang berakhlak.', 
            'icon' => 'fa-laptop-code', 
            'color_theme' => 'from-teal-400 to-teal-600', // Safe Tailwind class
            'icon_bg' => 'bg-teal-50 text-teal-600 group-hover:bg-teal-600 group-hover:text-white',
            'features' => ['Pemrograman Dasar (Coding)', 'Literasi Digital', 'Tahsin & Tahfidz Terstruktur']
        ],
        [
            'title' => "Pendidikan Karakter & Adab", 
            'desc' => 'Menjadikan semboyan "Beradab Sebelum Berilmu" sebagai napas pendidikan. Penanaman akhlak mulia dan kedisiplinan melalui pembiasaan sehari-hari.', 
            'icon' => 'fa-praying-hands', 
            'color_theme' => 'from-amber-400 to-orange-500',
            'icon_bg' => 'bg-amber-50 text-amber-500 group-hover:bg-amber-500 group-hover:text-white',
            'features' => ['Pembiasaan Ibadah Sunnah', 'Adab Harian Islami', 'Bimbingan Ibadah Khusus Remaja']
        ],
        [
            'title' => "Kepemimpinan Global", 
            'desc' => 'Program pengembangan kepemimpinan komprehensif untuk membentuk calon pemimpin masa depan yang tangguh, visioner, dan berdaya juang tinggi.', 
            'icon' => 'fa-globe-asia', 
            'color_theme' => 'from-blue-400 to-blue-600',
            'icon_bg' => 'bg-blue-50 text-blue-500 group-hover:bg-blue-500 group-hover:text-white',
            'features' => ['Public Speaking & Dakwah', 'Manajemen Organisasi (OSIS)', 'Latihan Kepemimpinan Dasar']
        ],
        [
            'title' => "Akademik Berbasis Riset", 
            'desc' => 'Mengasah keterampilan Abad 21 (4C). Siswa didorong untuk tidak hanya belajar teori, tetapi aktif mengembangkan riset, inovasi, dan kewirausahaan.', 
            'icon' => 'fa-microscope', 
            'color_theme' => 'from-rose-400 to-rose-600',
            'icon_bg' => 'bg-rose-50 text-rose-500 group-hover:bg-rose-600 group-hover:text-white',
            'features' => ['Critical Thinking & Problem Solving', 'Project-Based Learning', 'Pengembangan Entrepreneurship']
        ],
    ];
@endphp

{{-- =======================================================================
   1. HERO HEADER SECTION
======================================================================== --}}
<div class="relative w-full h-[350px] md:h-[450px] bg-[#042f2e] flex items-center justify-center overflow-hidden">
    {{-- Background Accents --}}
    <div class="absolute inset-0 bg-[url('https://source.unsplash.com/1920x1080/?study,quran,technology')] opacity-20 bg-cover bg-center"></div>
    <div class="absolute inset-0 bg-gradient-to-t from-[#042f2e] via-[#0f766e]/80 to-transparent"></div>
    
    <div class="absolute top-10 right-10 w-64 h-64 bg-yellow-500/20 rounded-full mix-blend-screen filter blur-[60px] animate-blob"></div>
    <div class="absolute bottom-10 left-10 w-48 h-48 bg-teal-400/20 rounded-full mix-blend-screen filter blur-[60px] animate-blob animation-delay-2000"></div>

    <div class="relative z-10 text-center px-6 pt-10 max-w-3xl mx-auto">
        <span class="inline-block py-1.5 px-4 rounded-full bg-white/10 border border-white/20 text-yellow-400 text-[10px] md:text-xs font-bold uppercase tracking-widest mb-4 backdrop-blur-md shadow-sm">
            Kurikulum Terpadu
        </span>
        <h1 class="text-3xl md:text-5xl lg:text-6xl font-black text-white mb-6 drop-shadow-2xl tracking-tight leading-tight">
            Program <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Keunggulan</span>
        </h1>
        <p class="text-teal-50 max-w-2xl mx-auto text-sm md:text-lg font-medium leading-relaxed drop-shadow-md">
            Mengenal lebih dekat pilar-pilar pendidikan di Puruhita Islamic School yang dirancang untuk mencetak pemimpin masa depan berdaya saing global.
        </p>

        {{-- Breadcrumb --}}
        <nav class="flex justify-center mt-8 text-xs text-teal-200 font-medium">
            <ol class="flex items-center space-x-2">
                <li><a href="{{ route('home') }}" class="hover:text-yellow-400 transition-colors">Beranda</a></li>
                <li><span class="text-teal-400/50">/</span></li>
                <li class="text-white font-bold">Program Unggulan</li>
            </ol>
        </nav>
    </div>

    <div class="absolute bottom-0 left-0 w-full leading-none text-[#FAFAFA] pointer-events-none">
        <svg class="block w-full h-10 md:h-16" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="currentColor"></path>
        </svg>
    </div>
</div>

{{-- =======================================================================
   2. MAIN CONTENT (GRID DETAIL)
======================================================================== --}}
<section class="w-full pb-24 pt-16 md:pt-20 bg-[#FAFAFA]">
    <div class="container mx-auto px-6 lg:px-12">
        
        <div class="text-center mb-16 md:mb-20">
            <h4 class="text-orange-500 font-bold tracking-widest uppercase text-sm mb-2">Fokus Pembelajaran Kami</h4>
            <h2 class="text-3xl md:text-4xl font-black text-gray-900 tracking-tight">Pilar Pendidikan Puruhita</h2>
            <div class="w-24 h-1.5 bg-gradient-to-r from-teal-400 to-teal-600 mx-auto mt-6 rounded-full"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12">
            @foreach($programUnggulan as $index => $prog)
            
            {{-- Card Program --}}
            <div class="bg-white rounded-[2.5rem] p-8 md:p-12 shadow-[0_15px_30px_rgba(0,0,0,0.04)] border border-gray-100 hover:shadow-[0_20px_50px_rgba(15,118,110,0.12)] transition-all duration-500 transform hover:-translate-y-2 relative overflow-hidden group flex flex-col h-full cursor-default">
                
                {{-- Decorative Line Top --}}
                <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r {{ $prog['color_theme'] }}"></div>

                {{-- Background Decor Icon --}}
                <div class="absolute -bottom-10 -right-10 text-9xl text-gray-50 opacity-40 group-hover:opacity-100 transition-all duration-700 pointer-events-none z-0 transform group-hover:rotate-12 group-hover:scale-110">
                    <i class="fas {{ $prog['icon'] }}"></i>
                </div>

                <div class="flex flex-col sm:flex-row items-start gap-6 md:gap-8 relative z-10 flex-grow">
                    {{-- Icon Box --}}
                    <div class="flex-shrink-0">
                        <div class="w-16 h-16 md:w-20 md:h-20 rounded-[1.5rem] {{ $prog['icon_bg'] }} flex items-center justify-center text-3xl md:text-4xl shadow-sm group-hover:scale-110 transition-all duration-500 group-hover:-rotate-6 border border-gray-100">
                            <i class="fas {{ $prog['icon'] }}"></i>
                        </div>
                    </div>

                    {{-- Content --}}
                    <div class="flex-1 w-full">
                        <h3 class="text-2xl md:text-3xl font-black text-gray-900 mb-4 group-hover:text-teal-700 transition-colors leading-tight">
                            {{ $prog['title'] }}
                        </h3>
                        <p class="text-gray-500 font-medium leading-relaxed mb-8 text-sm md:text-base">
                            {{ $prog['desc'] }}
                        </p>

                        {{-- Fitur List --}}
                        @if(isset($prog['features']))
                        <div class="bg-gray-50/80 backdrop-blur-sm rounded-2xl p-5 md:p-6 border border-gray-100 mt-auto">
                            <h4 class="text-[10px] md:text-xs font-black text-gray-400 uppercase tracking-widest mb-4">Cakupan Program:</h4>
                            <ul class="space-y-3">
                                @foreach($prog['features'] as $feature)
                                <li class="flex items-start gap-3 text-sm text-gray-700 font-medium">
                                    <i class="fas fa-check-circle text-teal-500 mt-1"></i>
                                    <span class="leading-snug">{{ $feature }}</span>
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>

    </div>
</section>

{{-- =======================================================================
   3. CTA SECTION
======================================================================== --}}
<section class="w-full py-20 md:py-28 bg-white border-t border-gray-100 relative overflow-hidden">
    <div class="absolute top-0 left-0 w-[500px] h-[500px] bg-teal-50 rounded-full mix-blend-multiply filter blur-[80px] opacity-70 pointer-events-none"></div>

    <div class="container mx-auto px-6 lg:px-12 relative z-10">
        <div class="bg-gradient-to-br from-[#0f766e] to-[#042f2e] rounded-[3rem] p-10 md:p-16 lg:p-20 text-center relative overflow-hidden shadow-2xl border border-teal-800">
            
            {{-- Decor --}}
            <div class="absolute inset-0 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')]"></div>
            <div class="absolute -top-32 -right-32 w-80 h-80 bg-white opacity-5 rounded-full blur-2xl pointer-events-none"></div>
            <div class="absolute -bottom-20 -left-20 w-60 h-60 bg-yellow-500 opacity-10 rounded-full blur-2xl pointer-events-none"></div>

            <div class="relative z-10 max-w-4xl mx-auto">
                <span class="inline-block py-1.5 px-4 rounded-full bg-white/10 text-yellow-400 text-[10px] md:text-xs font-bold uppercase tracking-widest mb-6 border border-white/20 backdrop-blur-md">
                    Tahun Ajaran Baru
                </span>
                <h2 class="text-3xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
                    Mulai Perjalanan Pendidikan Terbaik <br class="hidden lg:block"><span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-orange-400">Untuk Buah Hati Anda</span>
                </h2>
                <p class="text-teal-100/90 text-base md:text-xl mb-12 font-medium leading-relaxed max-w-2xl mx-auto">
                    Bergabunglah dengan Puruhita Islamic School dan rasakan lingkungan belajar yang memadukan kedalaman ilmu agama dan kemajuan teknologi.
                </p>
                <div class="flex flex-col sm:flex-row justify-center items-center gap-4 md:gap-6">
                    <a href="{{ route('ppdb.index') }}" class="w-full sm:w-auto px-8 py-4 md:px-10 md:py-5 bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-white rounded-full font-black text-sm md:text-lg shadow-[0_10px_20px_rgba(245,158,11,0.3)] hover:shadow-[0_15px_30px_rgba(245,158,11,0.4)] transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3">
                        <i class="fas fa-user-plus text-xl"></i> Daftar Sekarang
                    </a>
                    
                    @php
                        // Format nomor WA dari setting global (jika ada, jika tidak fallback)
                        $rawTelp = $setting->no_telp ?? '085179743232';
                        $waLink = 'https://wa.me/' . preg_replace('/[^0-9]/', '', $rawTelp);
                    @endphp

                    <a href="{{ $waLink }}" target="_blank" class="w-full sm:w-auto px-8 py-4 md:px-10 md:py-5 bg-transparent border-2 border-white/30 hover:bg-white hover:text-teal-900 text-white rounded-full font-bold text-sm md:text-lg transition-all flex items-center justify-center gap-3 backdrop-blur-sm">
                        <i class="fab fa-whatsapp text-xl text-green-400 group-hover:text-green-600"></i> Konsultasi via WA
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection