@extends('frontend.layouts.app')

@section('content')

{{-- HERO SLIDER --}}
<section class="hero-swiper swiper relative">
    <div class="swiper-wrapper">
        @forelse($data['sliders'] as $slide)
        <div class="swiper-slide relative overflow-hidden">
            <img src="{{ asset($slide->image) }}" alt="{{ $slide->title }}" class="slide-img absolute inset-0">
            <div class="hero-overlay"></div>
            <div class="relative z-10 h-full flex items-center">
                <div class="max-w-7xl mx-auto px-6 w-full">
                    <div class="hero-text max-w-2xl text-white">
                        <div class="inline-flex items-center gap-2 bg-yellow-400/15 border border-yellow-400/35 text-yellow-300 text-xs font-bold uppercase tracking-widest px-4 py-1.5 rounded-full mb-5">
                            ⭐ NAAC A+ Accredited · Est. 1983
                        </div>
                        <h1 class="font-display text-4xl md:text-5xl lg:text-[3.25rem] font-bold leading-[1.1] mb-5">{{ $slide->title }}</h1>
                        @if($slide->subtitle)<p class="text-blue-100 text-lg leading-relaxed mb-8">{{ $slide->subtitle }}</p>@endif
                        <div class="flex flex-wrap gap-3">
                            @if($slide->button_text)
                            <a href="{{ $slide->button_url }}" class="inline-flex items-center gap-2 bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold px-7 py-3.5 rounded-xl transition shadow-lg shadow-yellow-500/30">
                                {{ $slide->button_text }} →
                            </a>
                            @endif
                            <a href="/admissions" class="inline-flex items-center gap-2 bg-white/15 hover:bg-white/25 backdrop-blur border border-white/30 text-white font-semibold px-7 py-3.5 rounded-xl transition">
                                Apply Now <i class="fas fa-graduation-cap"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="swiper-slide relative overflow-hidden bg-gradient-to-br from-primary-900 to-primary-700">
            <div class="hero-text flex items-center justify-center h-full text-white text-center px-6">
                <div class="max-w-2xl">
                    <div class="text-yellow-400 font-bold uppercase tracking-widest text-sm mb-4">NAAC A+ Accredited · Est. 1983</div>
                    <h1 class="font-display text-5xl font-bold mb-5">Excellence in<br>Engineering Education</h1>
                    <p class="text-blue-200 text-lg mb-8">82-Acre Campus · 7 Departments · TCS Priority College</p>
                    <a href="/admissions" class="inline-flex items-center gap-2 bg-yellow-500 text-gray-900 font-bold px-8 py-4 rounded-xl">Apply for Admission →</a>
                </div>
            </div>
        </div>
        @endforelse
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next !text-white !w-10 !h-10 bg-white/20 rounded-full backdrop-blur"></div>
    <div class="swiper-button-prev !text-white !w-10 !h-10 bg-white/20 rounded-full backdrop-blur"></div>
</section>

{{-- STATS BAR --}}
<div class="bg-gradient-to-r from-primary-900 to-primary-800 py-10">
    <div class="max-w-7xl mx-auto px-4 grid grid-cols-2 md:grid-cols-4 gap-0">
        @foreach([['1983','Est. Year','fas fa-calendar-alt'],['700+','Annual Intake','fas fa-user-graduate'],['297+','Research Papers','fas fa-book-open'],['63+','Industry MoUs','fas fa-handshake']] as [$val,$lbl,$icon])
        <div class="text-center py-4 px-2 border-r border-white/10 last:border-0" data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
            <i class="{{ $icon }} text-yellow-400 text-xl mb-2 block"></i>
            <div class="font-display text-3xl font-bold text-white">{{ $val }}</div>
            <div class="text-blue-300 text-xs mt-1 uppercase tracking-wide">{{ $lbl }}</div>
        </div>
        @endforeach
    </div>
</div>

{{-- NAAC STRIP --}}
<div class="bg-emerald-900/90 py-3">
    <div class="max-w-7xl mx-auto px-4 flex flex-wrap justify-center items-center gap-4">
        @foreach([['A+','NAAC Grade','Highest in India','#10b981'],['NBA','NBA Accredited','Select programs','#3b82f6'],['NIRF','NIRF Ranked','India Rankings 2024','#f59e0b'],['TCS','Priority College','Campus recruitment','#a855f7']] as [$tag,$name,$sub,$color])
        <div class="flex items-center gap-2.5 bg-white/5 border border-white/10 rounded-full px-4 py-2">
            <span class="font-display font-bold text-lg" style="color:{{ $color }}">{{ $tag }}</span>
            <div class="text-xs"><div class="text-white font-semibold">{{ $name }}</div><div class="text-gray-400">{{ $sub }}</div></div>
        </div>
        @endforeach
    </div>
</div>

{{-- DEPARTMENTS --}}
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-end justify-between mb-10">
            <div data-aos="fade-right">
                <p class="section-label">Academic Excellence</p>
                <h2 class="font-display text-3xl font-bold text-gray-900 mt-1">Our Departments</h2>
                <p class="text-gray-500 mt-2 max-w-lg">7 world-class engineering departments, 16 programs at UG, PG & doctoral levels.</p>
            </div>
            <a href="/departments" class="hidden sm:flex items-center gap-1 text-primary-700 font-semibold text-sm hover:text-primary-900 transition">All departments →</a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach($data['departments'] as $dept)
            <a href="/departments/{{ $dept->slug }}"
               class="dept-card bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-lg group"
               data-aos="fade-up" data-aos-delay="{{ $loop->index * 55 }}">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center text-white text-xl mb-4 transition-transform group-hover:scale-110"
                     style="background:{{ $dept->color }}">
                    <i class="{{ $dept->icon_class ?? 'fas fa-graduation-cap' }}"></i>
                </div>
                <h3 class="font-semibold text-gray-900 text-[15px] leading-snug group-hover:text-primary-700 transition mb-2">{{ $dept->name }}</h3>
                <div class="flex items-center gap-3 text-xs text-gray-400">
                    <span>Est. {{ $dept->established_year }}</span>
                    <span>·</span>
                    <span>{{ $dept->intake }} seats/yr</span>
                </div>
                <div class="mt-4 text-primary-600 text-xs font-semibold opacity-0 group-hover:opacity-100 transition flex items-center gap-1">
                    View Department →
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>

{{-- PLACEMENTS --}}
@if($data['placement_stat'])
@php $ps = $data['placement_stat']; @endphp
<section class="py-16 bg-gradient-to-br from-primary-900 to-gray-900 relative overflow-hidden">
    <div class="absolute top-0 right-0 w-96 h-96 bg-yellow-400/5 rounded-full -translate-y-32 translate-x-32"></div>
    <div class="absolute bottom-0 left-0 w-64 h-64 bg-sky-400/5 rounded-full translate-y-16 -translate-x-16"></div>
    <div class="relative max-w-7xl mx-auto px-4">
        <div class="text-center mb-10" data-aos="fade-up">
            <p class="section-label text-yellow-400">Placements {{ $ps->academic_year }}</p>
            <h2 class="font-display text-3xl font-bold text-white mt-1">Outstanding Placement Record</h2>
            <p class="text-blue-300 mt-2">TCS Priority College · 50+ leading companies recruit from SSGMCE every year</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10">
            @foreach([[$ps->ug_placed,'UG Students Placed','+'],[number_format($ps->highest_package_lpa,1),'Highest Package',' LPA'],[number_format($ps->median_package_lpa,1),'Median Package',' LPA'],[$ps->companies_visited,'Companies Visited','+']] as $i => [$val,$lbl,$suf])
            <div class="text-center bg-white/6 border border-white/10 rounded-2xl p-6" data-aos="zoom-in" data-aos-delay="{{ $i * 80 }}">
                <div class="font-display text-4xl font-bold {{ $i===1?'text-yellow-400':($i===2?'text-green-400':'text-white') }}">
                    {{ $val }}<span class="text-lg {{ $i===1?'text-yellow-400':($i===2?'text-green-400':'text-blue-300') }}">{{ $suf }}</span>
                </div>
                <div class="text-blue-300 text-xs mt-2 uppercase tracking-wider">{{ $lbl }}</div>
            </div>
            @endforeach
        </div>
        <div class="text-center mb-4 text-blue-400 text-xs uppercase tracking-wider">Top Recruiters</div>
        <div class="flex flex-wrap justify-center gap-2 mb-8">
            @foreach($data['top_recruiters'] as $co)
            <div class="bg-white/8 border border-white/10 rounded-lg px-4 py-2 text-sm text-blue-200 hover:bg-white/15 transition cursor-default">
                {{ $co->name }}
            </div>
            @endforeach
        </div>
        <div class="text-center">
            <a href="/placements" class="inline-flex items-center gap-2 bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold px-7 py-3.5 rounded-xl transition shadow-lg">View Full Placement Data →</a>
        </div>
    </div>
</section>
@endif

{{-- NEWS & EVENTS --}}
@if($data['featured_news']->count())
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-end justify-between mb-10">
            <div data-aos="fade-right">
                <p class="section-label">Stay Updated</p>
                <h2 class="font-display text-3xl font-bold text-gray-900 mt-1">News & Events</h2>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                @foreach(['all'=>'All','news'=>'News','event'=>'Events','achievement'=>'Achievements'] as $val=>$lbl)
                <a href="/news?type={{ $val }}" class="text-xs px-3 py-1.5 rounded-full font-medium transition {{ request('type',$val==='all'?'all':'')===($val==='all'?'':$val)?'bg-primary-700 text-white':'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">{{ $lbl }}</a>
                @endforeach
                <a href="/news" class="text-primary-700 text-sm font-semibold ml-2">View all →</a>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($data['featured_news'] as $item)
            <article class="news-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition" data-aos="fade-up" data-aos-delay="{{ $loop->index * 75 }}">
                @if($item->image)
                <div class="news-img-wrap h-48">
                    <img src="{{ asset($item->image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover">
                </div>
                @else
                <div class="h-2 w-full" style="background:{{ ['news'=>'#2563eb','event'=>'#059669','achievement'=>'#d97706','announcement'=>'#7c3aed'][$item->type] ?? '#2563eb' }}"></div>
                @endif
                <div class="p-5">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="text-xs font-semibold px-2.5 py-1 rounded-full
                            {{ $item->type==='news'?'bg-blue-100 text-blue-700':($item->type==='event'?'bg-green-100 text-green-700':($item->type==='achievement'?'bg-yellow-100 text-yellow-700':'bg-purple-100 text-purple-700')) }}">
                            {{ ucfirst($item->type) }}
                        </span>
                        <span class="text-gray-400 text-xs">{{ $item->published_at?->format('d M Y') }}</span>
                    </div>
                    <h3 class="font-semibold text-gray-900 text-[15px] leading-snug hover:text-primary-700 transition">
                        <a href="/news/{{ $item->slug }}">{{ Str::limit($item->title, 75) }}</a>
                    </h3>
                    @if($item->excerpt)<p class="text-gray-500 text-sm mt-2 leading-relaxed">{{ Str::limit($item->excerpt,100) }}</p>@endif
                    <a href="/news/{{ $item->slug }}" class="inline-flex items-center gap-1 text-primary-600 text-sm font-semibold mt-4 hover:text-primary-800 transition">Read more →</a>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- GALLERY PREVIEW --}}
@if($data['gallery_items']->count())
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4">
        <div class="text-center mb-10" data-aos="fade-up">
            <p class="section-label">Campus Life</p>
            <h2 class="font-display text-3xl font-bold text-gray-900 mt-1">Photo Gallery</h2>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
            @foreach($data['gallery_items'] as $item)
            <a href="{{ asset($item->file_path) }}" data-fancybox="gallery" data-caption="{{ $item->title }}"
               class="group overflow-hidden rounded-xl aspect-square" data-aos="zoom-in" data-aos-delay="{{ $loop->index * 35 }}">
                <img src="{{ asset($item->thumbnail ?? $item->file_path) }}" alt="{{ $item->title }}"
                     class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
            </a>
            @endforeach
        </div>
        <div class="text-center mt-8">
            <a href="/gallery" class="inline-flex items-center gap-2 bg-primary-700 hover:bg-primary-800 text-white font-semibold px-7 py-3.5 rounded-xl transition shadow-md">
                <i class="fas fa-images"></i> View Full Gallery
            </a>
        </div>
    </div>
</section>
@endif

@endsection

@push('scripts')
<script>
new Swiper('.hero-swiper',{
    loop:true, autoplay:{delay:5000,disableOnInteraction:false},
    effect:'fade', fadeEffect:{crossFade:true},
    pagination:{el:'.swiper-pagination',clickable:true},
    navigation:{nextEl:'.swiper-button-next',prevEl:'.swiper-button-prev'},
});
</script>
@endpush