@extends('layouts.website')

@section('title', 'Home - SMKS 16 Farmasi Bengkulu')

@section('content')

{{-- STYLE KHUSUS UNTUK HALAMAN HOME --}}
<style>
    /* --- HERO SECTION STYLE --- */
    .hero-section {
        background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 25%, rgba(255, 143, 0, 0.4)), url('{{ asset("images/$banner->foto") }} ');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: #ffffff; 
        padding: 100px 0 150px 0; 
        position: relative;
        overflow: visible; 
    }

    .hero-subtitle-border {
        border-left: 4px solid #ffc107; 
        padding-left: 15px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 0.9rem;
        margin-bottom: 20px;
        display: inline-block;
        color: #ffc107; 
    }

    .hero-title {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 25px;
        color: #ffffff; 
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
    }

    .hero-desc {
        font-size: 1.1rem;
        color: #e0e0e0; 
        margin-bottom: 40px;
        max-width: 600px;
        font-weight: 400; 
        line-height: 1.6;
    }

    .btn-hero-outline {
        border: 2px solid #ffffff; 
        color: #ffffff; 
        padding: 12px 30px;
        font-weight: 700;
        border-radius: 5px;
        text-transform: uppercase;
        transition: all 0.3s;
        background-color: transparent;
    }
    .btn-hero-outline:hover {
        background-color: #ffffff;
        color: #000000; 
    }

    .btn-hero-primary {
        background-color: #ffc107; 
        color: #000000; 
        border: 2px solid #ffc107;
        padding: 12px 30px;
        font-weight: 700;
        border-radius: 5px;
        text-transform: uppercase;
        margin-left: 15px;
        transition: all 0.3s;
    }
    .btn-hero-primary:hover {
        background-color: #ffca28;
        border-color: #ffca28;
        transform: translateY(-2px); 
    }

    /* GALLERY CIRCLES (Hero Right) */
    .gallery-circles {
        display: flex;
        align-items: center;
        margin-top: 10px; 
    }
    .gallery-circle-item {
        width: 80px; 
        height: 80px;
        border-radius: 50%;
        border: 3px solid #ffffff; 
        object-fit: cover;
        margin-left: -25px; 
        transition: transform 0.3s;
        cursor: pointer;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    }
    .gallery-circle-item:first-child {
        margin-left: 0;
    }
    .gallery-circle-item:hover {
        transform: scale(1.1);
        z-index: 10;
        border-color: #ffc107;
    }
    .gallery-link {
        margin-left: 20px;
        color: #ffffff; 
        text-decoration: none;
        font-weight: 700;
        font-size: 1rem;
        background-color: rgba(0, 0, 0, 0.3); 
        padding: 5px 10px;
        border-radius: 4px;
    }
    .gallery-link:hover {
        color: #ffc107;
        background-color: rgba(0, 0, 0, 0.6);
        text-decoration: none;
    }

    /* --- STATS SECTION (HARDCODE) --- */
    .stats-overlap {
        margin-top: -80px; 
        position: relative;
        z-index: 20;
    }
    .stats-card {
        background: #fff;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: space-around;
        text-align: center;
    }
    .stats-item {
        flex: 1;
        padding: 0 20px;
        border-right: 1px solid #eee;
    }
    .stats-item:last-child {
        border-right: none;
    }
    .stats-number {
        font-size: 3rem;
        font-weight: 800;
        color: #1a237e;
        line-height: 1;
        margin-bottom: 5px;
    }
    .stats-label {
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #777;
        letter-spacing: 1px;
    }
    .stats-icon {
        color: #ffc107;
        margin-bottom: 10px;
    }

    /* --- STYLE JUDUL TENGAH --- */
    .section-header-center {
        text-align: center;
        margin-bottom: 40px;
    }
    .section-header-center h3 {
        font-size: 2rem;
        font-weight: 800;
        color: #1a237e;
        text-transform: uppercase;
        display: inline-block;
        position: relative;
        padding-bottom: 15px;
        letter-spacing: 1px;
    }
    .section-header-center h3::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: #ffc107;
        border-radius: 2px;
    }
    .section-subtitle-center {
        text-align: center;
        color: #666;
        margin-top: -20px;
        margin-bottom: 40px;
        font-size: 1rem;
    }

    /* --- QUICK LINK CARD STYLE --- */
    .quick-link-card {
        border: none; 
        border-radius: 15px; 
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
        text-decoration: none; 
        color: #fff !important; 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%; 
        padding: 25px 20px;
        overflow: hidden;
        position: relative;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    }
    
    .quick-link-card:hover {
        transform: translateY(-10px) scale(1.02); 
        box-shadow: 0 15px 30px rgba(0,0,0,0.2); 
    }

    .quick-link-icon {
        background-color: rgba(255, 255, 255, 0.2); 
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        transition: all 0.4s ease;
    }
    
    .quick-link-card:hover .quick-link-icon {
        background-color: rgba(255, 255, 255, 0.3);
        transform: rotateY(180deg); 
    }

    .quick-link-icon i {
        font-size: 2.5rem;
        color: #fff;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); 
    }

    /* Gradasi Warna Kartu */
    .card-pengumuman { background: linear-gradient(135deg, #00c6ff, #0072ff); }
    .card-sambutan { background: linear-gradient(135deg, #11998e, #38ef7d); }
    .card-visi-misi { background: linear-gradient(135deg, #fc4a1a, #f7b733); }
    .card-ekskul { background: linear-gradient(135deg, #8e44ad, #c0392b); }

    /* --- PROGRAM STUDI CARD STYLE --- */
    .prodi-card {
        border: none;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
    }
    .prodi-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    }
    .prodi-image-wrapper {
        position: relative;
        height: 250px;
        overflow: hidden;
    }
    .prodi-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .prodi-card:hover .prodi-image-wrapper img {
        transform: scale(1.1);
    }
    .prodi-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.6) 50%, transparent 100%);
        color: white;
        z-index: 2;
    }
    .prodi-separator {
        width: 50px;
        height: 4px;
        background-color: #ffc107;
        margin-bottom: 10px;
        border-radius: 2px;
    }
    .prodi-title {
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    }
    .prodi-subtitle {
        font-size: 0.9rem;
        font-weight: 500;
        color: #e0e0e0;
        margin-bottom: 0;
    }
    .prodi-body {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        background-color: #ffffff;
    }
    .prodi-desc {
        font-size: 0.95rem;
        color: #555;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    .prodi-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .prodi-list li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 10px;
        font-size: 0.9rem;
        color: #444;
        font-weight: 500;
    }
    .prodi-list li i {
        color: #1a237e;
        margin-right: 10px;
        margin-top: 4px;
        font-size: 1rem;
    }

    /* --- TENAGA PENGAJAR SLIDER STYLE --- */
    .teacher-slider-container {
        position: relative;
        padding: 0 10px;
    }
    
    .teacher-slider-track {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 25px;
        padding: 20px 5px;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
    }
    .teacher-slider-track::-webkit-scrollbar { 
        display: none; 
    }

    .teacher-card {
        flex: 0 0 auto;
        width: 280px;
        scroll-snap-align: start;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        position: relative;
    }

    .teacher-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

    .teacher-img-box {
        height: 320px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    
    .teacher-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: transform 0.5s ease;
    }

    .teacher-card:hover .teacher-img-box img {
        transform: scale(1.05);
    }

    .teacher-info-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.95) 15%, rgba(0,0,0,0.7) 50%, transparent 100%);
        padding: 20px;
        color: white;
    }

    .teacher-line {
        width: 40px;
        height: 4px;
        background-color: #ffc107;
        margin-bottom: 8px;
        border-radius: 2px;
    }

    .teacher-name {
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 3px;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    }

    .teacher-position {
        font-size: 0.85rem;
        font-weight: 400;
        color: #ddd;
        margin: 0;
    }

    .slider-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 45px;
        height: 45px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        transition: all 0.3s ease;
        color: #1a237e;
    }
    .slider-nav-btn:hover {
        background-color: #1a237e;
        color: #fff;
    }
    .slider-prev { left: -10px; }
    .slider-next { right: -10px; }

    /* --- RUNNING LOGO ANIMATION --- */
    .running-logo-section {
        background-color: #ffffff;
        padding: 30px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        overflow: hidden; 
    }
    .running-logo-container {
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    .running-logo-track {
        display: flex; 
        width: max-content; 
        animation: scrollLogo 30s linear infinite; 
    }
    @keyframes scrollLogo {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } 
    }
    .running-logo-track img {
        height: 70px; 
        margin: 0 35px; 
        flex-shrink: 0; 
        filter: grayscale(100%); 
        opacity: 0.7;
        transition: all 0.3s ease;
        object-fit: contain;
    }
    .running-logo-track:hover {
        animation-play-state: paused;
    }
    .running-logo-track img:hover {
        filter: grayscale(0%); 
        opacity: 1;
        transform: scale(1.1);
        cursor: pointer;
    }
    
    .hover-shadow:hover {
        transform: translateY(-5px);
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }

    /* --- [GALERI FOTO MODERN] --- */
    .gallery-item-modern {
        border-radius: 15px;
        overflow: hidden;
        position: relative;
        height: 250px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        cursor: pointer;
        background-color: #f8f9fa;
    }
    .gallery-item-modern img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    .gallery-item-modern:hover img {
        transform: scale(1.15);
    }
    .gallery-item-overlay {
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(26, 35, 126, 0.4); 
        opacity: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease;
    }
    .gallery-item-modern:hover .gallery-item-overlay {
        opacity: 1;
    }
    .gallery-icon-eye {
        color: white;
        font-size: 2.5rem;
        transform: scale(0);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .gallery-item-modern:hover .gallery-icon-eye {
        transform: scale(1);
    }
    .gallery-caption-modern {
        position: absolute;
        bottom: 0; left: 0; width: 100%;
        padding: 15px;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        color: white;
        font-weight: 600;
        font-size: 1rem;
        transform: translateY(100%);
        transition: transform 0.4s ease;
    }
    .gallery-item-modern:hover .gallery-caption-modern {
        transform: translateY(0);
    }

    /* --- [BARU] VIDEO GALLERY MODERN STYLE --- */
    .video-card-modern {
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid #eee;
    }

    .video-card-modern:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }

    .video-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
        background-color: #000;
    }

    .video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .video-body {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .video-title-modern {
        font-weight: 700;
        font-size: 1.1rem;
        color: #1a237e;
        margin-bottom: 15px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .btn-video-modern {
        background-color: #ff0000;
        color: white;
        border-radius: 50px;
        padding: 8px 20px;
        font-weight: 600;
        font-size: 0.9rem;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
        width: 100%;
        box-shadow: 0 4px 10px rgba(255, 0, 0, 0.2);
    }

    .btn-video-modern:hover {
        background-color: #cc0000;
        color: white;
        transform: scale(1.02);
        box-shadow: 0 6px 15px rgba(255, 0, 0, 0.3);
    }

    /* MOBILE RESPONSIVE */
    @media (max-width: 768px) {
        .hero-section {
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 40%, rgba(255, 143, 0, 0.4)), url('{{ asset("images/$banner->foto") }}');
            background-size: cover;
            background-position: center;
        }
        .hero-title { font-size: 2.2rem; }
        .btn-hero-primary { margin-left: 0; margin-top: 10px; display: block; width: 100%; text-align: center; }
        .btn-hero-outline { display: block; width: 100%; text-align: center; }
        .stats-container { margin-top: 50px; padding-left: 0 !important; }
        
        .prodi-image-wrapper { height: 200px; }
        .prodi-title { font-size: 1.3rem; }

        .teacher-card { width: 240px; }
        .teacher-img-box { height: 280px; }
        .slider-nav-btn { display: none; }
        
        .running-logo-track img {
            height: 50px; 
            margin: 0 15px;
        }

        .stats-overlap { margin-top: 20px; }
        .stats-item { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
        .stats-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .stats-card { display: block; }
    }
</style>

{{-- BAGIAN 1: HERO SECTION --}}
<section class="hero-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-5 mb-lg-0" data-aos="fade-right" data-aos-duration="1000">
                <div class="hero-subtitle-border">
                    {{ $banner->judul}}
                </div>
                <h1 class="hero-title">
                    {{ $banner->slogan}}
                </h1>
                <p class="hero-desc">
                   {{ $banner->deskripsi}}
                </p>
                <div class="d-flex flex-wrap">
                    <a href="{{ url('/kategori/berita') }}" class="btn btn-hero-outline">Info Terbaru</a>
                    <!--<a href="{{ url('/pendaftaran-siswa-baru') }}" class="btn btn-hero-primary">Daftar Online</a>-->
                </div>
            </div>
            <div class="col-lg-5 ps-lg-5 stats-container d-flex align-items-center justify-content-center justify-content-lg-start" data-aos="fade-left" data-aos-duration="1000">
                <div>
                    <div class="mb-2 fw-bold" style="color: #ffffff; text-shadow: 1px 1px 2px black;">Galeri Kegiatan Terbaru:</div>
                    <div class="gallery-circles">
                        @if(isset($galleryWidget) && count($galleryWidget) > 0)
                            @foreach($galleryWidget as $foto)
                                <img src="{{ url('images/' . $foto->image) }}" class="gallery-circle-item" alt="{{ $foto->title }}" data-bs-toggle="tooltip" title="{{ $foto->title }}">
                            @endforeach
                        @else
                            <img src="https://via.placeholder.com/150/1a237e/FFFFFF?text=1" class="gallery-circle-item" alt="Foto 1">
                            <img src="https://via.placeholder.com/150/0d47a1/FFFFFF?text=2" class="gallery-circle-item" alt="Foto 2">
                            <img src="https://via.placeholder.com/150/283593/FFFFFF?text=3" class="gallery-circle-item" alt="Foto 3">
                            <img src="https://via.placeholder.com/150/1565c0/FFFFFF?text=4" class="gallery-circle-item" alt="Foto 4">
                        @endif
                        <a href="{{ route('galeri.foto.list') }}" class="gallery-link">Lihat Semua <i class="fas fa-chevron-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- [BARU] STATS SECTION (HARDCODED) --}}
<div class="container stats-overlap" data-aos="fade-up">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="stats-card">
                <div class="stats-item">
                    <div class="stats-icon"><i class="fas fa-user-graduate fa-3x"></i></div>
                    <div class="stats-number">0</div>
                    <div class="stats-label">Siswa Didik</div>
                </div>
                <div class="stats-item">
                    <div class="stats-icon"><i class="fas fa-chalkboard-teacher fa-3x"></i></div>
                    <div class="stats-number">0</div>
                    <div class="stats-label">Guru & Staff</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- BAGIAN 2: CONTAINER UTAMA --}}
<div class="container my-5" style="margin-top: 80px !important;"> 

    {{-- SECTION A: QUICK LINKS (TAMPILAN BARU YANG DIPERBAIKI) --}}
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 text-center mb-5">
        
        <div class="col" data-aos="fade-up" data-aos-delay="100">
            <a href="{{ url('/kategori/pengumuman') }}" class="quick-link-card card-pengumuman">
                <div class="quick-link-icon">
                    <i class="fas fa-bullhorn"></i> 
                </div>
                <p class="mb-0 fw-bold fs-5">Pengumuman</p>
            </a>
        </div>

        <div class="col" data-aos="fade-up" data-aos-delay="200">
            <a href="{{ url('/profil') }}" class="quick-link-card card-sambutan">
                <div class="quick-link-icon">
                    <i class="fas fa-user-tie"></i>
                </div>
                <p class="mb-0 fw-bold fs-5">Sambutan</p>
            </a>
        </div>

        <div class="col" data-aos="fade-up" data-aos-delay="300">
            <a href="{{ url('/visi-misi') }}" class="quick-link-card card-visi-misi">
                <div class="quick-link-icon">
                    <i class="fas fa-school"></i>
                </div>
                <p class="mb-0 fw-bold fs-5">Visi dan Misi</p>
            </a>
        </div>

        {{-- MENU EKSTRAKULIKULER (PEMICU MODAL) --}}
        <div class="col" data-aos="fade-up" data-aos-delay="400">
            <a href="#" class="quick-link-card card-ekskul" data-bs-toggle="modal" data-bs-target="#ekskulModal">
                <div class="quick-link-icon">
                        <i class="fas fa-basketball-ball"></i>
                </div>
                <p class="mb-0 fw-bold fs-5">Ekstrakulikuler</p>
            </a>
        </div>

    </div>

    {{-- SECTION B: BERITA TERBARU --}}
    <div class="section-header" data-aos="fade-up">
        <h3>Berita Terbaru</h3>
        <a href="{{ url('/kategori/berita') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
    </div>
    <div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
        @forelse ( $news as $k )
            <div class="col" data-aos="fade-up" data-aos-delay="100">
                <div class="card shadow-sm h-100">
                    <div style="position: relative;">
                        <img src="{{url('images')}}/{{$k->image}}" class="card-img-top" alt="{{ $k->title }}" style="height: 200px; object-fit: cover;">
                        <span class="card-category">Berita</span>
                    </div>
                    <div class="card-body">
                        <div class="card-date-time">
                            <i class="far fa-calendar-alt"></i> {{ \Carbon\Carbon::parse($k->created_at)->format('Y-m-d') }}
                            <i class="far fa-clock ms-2"></i> {{ \Carbon\Carbon::parse($k->created_at)->format('H:i') }} WIB
                        </div>
                        <h5 class="card-title">{{ Str::limit($k->title, 50) }}</h5>
                        <p class="card-text">{{ Str::limit(strip_tags($k->description), 90) }} ...</p>
                    </div>
                    <div class="card-footer-action">
                        <a href="{{ url('/berita/detail/'.$k->id) }}" class="btn btn-outline-primary btn-selengkapnya">Selengkapnya</a>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-4">
                <p class="text-muted">Belum ada berita terbaru.</p>
            </div>
        @endforelse       
    </div>

    {{-- SECTION C: PROGRAM STUDI --}}
    <section class="mb-5">
        <div class="section-header-center" data-aos="zoom-in">
            <h3>Program Studi</h3>
        </div>
        <div class="row row-cols-1 row-cols-md-2 g-4">
            
            <div class="col" data-aos="fade-right">
                <div class="prodi-card">
                    <div class="prodi-image-wrapper">
                        <img src="{{ asset('images/1.jpg') }}" alt="Farmasi Klinis dan Komunitas">
                        <div class="prodi-overlay">
                            <div class="prodi-separator"></div>
                            <h4 class="prodi-title">Farmasi Klinis & Komunitas</h4>
                            <p class="prodi-subtitle">Layanan Kesehatan Masyarakat</p>
                        </div>
                    </div>
                    <div class="prodi-body">
                        <p class="prodi-desc">
                            Membekali siswa dengan kompetensi pelayanan kefarmasian di apotek, puskesmas, dan rumah sakit dengan pendekatan humanis dan profesional.
                        </p>
                        <ul class="prodi-list">
                            <li><i class="fas fa-check-circle"></i> Pelayanan Resep & Konseling Obat</li>
                            <li><i class="fas fa-check-circle"></i> Manajemen Logistik Farmasi</li>
                            <li><i class="fas fa-check-circle"></i> Kewirausahaan Bidang Kesehatan</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="col" data-aos="fade-left">
                <div class="prodi-card">
                    <div class="prodi-image-wrapper">
                        <img src="{{ asset('images/2.jpg') }}" alt="Farmasi Industri">
                        <div class="prodi-overlay">
                            <div class="prodi-separator"></div>
                            <h4 class="prodi-title">Farmasi Industri</h4>
                            <p class="prodi-subtitle">Produksi & Pengendalian Mutu</p>
                        </div>
                    </div>
                    <div class="prodi-body">
                        <p class="prodi-desc">
                            Mencetak lulusan yang siap bersaing di dunia industri manufaktur obat, kosmetik, dan makanan dengan standar mutu tinggi.
                        </p>
                        <ul class="prodi-list">
                            <li><i class="fas fa-check-circle"></i> Teknologi Formulasi Sediaan</li>
                            <li><i class="fas fa-check-circle"></i> Quality Control (QC) & QA</li>
                            <li><i class="fas fa-check-circle"></i> Pemahaman CPOB & CPKB</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>

    {{-- SECTION D: TENAGA PENGAJAR (SLIDER OTOMATIS) --}}
    <section class="mb-5" data-aos="fade-up">
        <div class="section-header-center">
            <h3>Tenaga Pengajar</h3>
        </div>
        <div class="teacher-slider-container">
            {{-- Tombol Navigasi Kiri --}}
            <button class="slider-nav-btn slider-prev" onclick="scrollTeacher('left')">
                <i class="fas fa-chevron-left"></i>
            </button>

            {{-- Track Slider --}}
            <div class="teacher-slider-track" id="teacherTrack">
                
            @foreach($guru as $var)

                <div class="teacher-card">
                    <div class="teacher-img-box">
                        <img src="{{ url('images/' . $var->foto) }}" alt="Guru 1">
                        <div class="teacher-info-overlay">
                            <div class="teacher-line"></div>
                            <div class="teacher-name">{{$var->nama_lengkap}}</div>
                            <div class="teacher-position">{{$var->jabatan}}</div>
                        </div>
                    </div>
                </div>

            @endforeach
            
                
                

                <!--<div class="teacher-card">
                    <div class="teacher-img-box">
                        <img src="https://ui-avatars.com/api/?name=Siti&background=random&size=500" alt="Guru 6">
                        <div class="teacher-info-overlay">
                            <div class="teacher-line"></div>
                            <div class="teacher-name">Siti Aminah, S.Si</div>
                            <div class="teacher-position">Guru Produktif</div>
                        </div>
                    </div>
                </div>-->

            </div>

            {{-- Tombol Navigasi Kanan --}}
            <button class="slider-nav-btn slider-next" onclick="scrollTeacher('right')">
                <i class="fas fa-chevron-right"></i>
            </button>
        </div>
    </section>

    {{-- SECTION E: GALERI FOTO KEGIATAN MODERN --}}
    <section class="mb-5" data-aos="fade-up">
        <div class="section-header">
            <h3>Galeri Foto Kegiatan</h3>
            <a href="{{ route('galeri.foto.list') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
        </div>
        <div class="row row-cols-1 row-cols-md-3 row-cols-lg-3 g-4">
            {{-- Item 1 --}}

              @if(isset($galleryWidget) && count($galleryWidget) > 0)
                            @foreach($galleryWidget as $foto)

                            <div class="col">
                                <div class="gallery-item-modern" 
                                    data-bs-toggle="modal" data-bs-target="#imageModal" 
                                    data-bs-image-src="{{ url('images/' . $foto->image) }}" 
                                    data-bs-title="{{ $foto->title }}">
                                    
                                    <img src="{{ url('images/' . $foto->image) }}" alt="{{ $foto->title }}">
                                    
                                    {{-- Overlay Biru + Ikon Mata --}}
                                    <div class="gallery-item-overlay">
                                        <i class="fas fa-eye gallery-icon-eye"></i>
                                    </div>
                                    
                                    {{-- Caption Modern --}}
                                    <div class="gallery-caption-modern">{{ $foto->title }}</div>
                                </div>
                            </div>
                            
                                
                            @endforeach
                        @else
                           <div class="col">
                                <div class="gallery-item-modern" 
                                    data-bs-toggle="modal" data-bs-target="#imageModal" 
                                    data-bs-image-src="{{ asset('images/2.jpg') }}" 
                                    data-bs-title="Pentas Seni Sekolah">
                                    
                                    <img src="{{ asset('images/2.jpg') }}" alt="Pentas Seni Sekolah">
                                    <div class="gallery-item-overlay"><i class="fas fa-eye gallery-icon-eye"></i></div>
                                    <div class="gallery-caption-modern">Pentas Seni Sekolah</div>
                                </div>
                            </div>

                            {{-- Item 3 --}}
                            <div class="col">
                                <div class="gallery-item-modern" 
                                    data-bs-toggle="modal" data-bs-target="#imageModal" 
                                    data-bs-image-src="{{ asset('images/3.jpg') }}" 
                                    data-bs-title="Lomba Kebersihan Kelas">
                                    
                                    <img src="{{ asset('images/3.jpg') }}" alt="Lomba Kebersihan Kelas">
                                    <div class="gallery-item-overlay"><i class="fas fa-eye gallery-icon-eye"></i></div>
                                    <div class="gallery-caption-modern">Lomba Kebersihan Kelas</div>
                                </div>
                            </div>
                        @endif

            

            {{-- Item 2 --}}
           
        </div>
    </section>

    {{-- [PERUBAHAN] SECTION F: GALERI VIDEO (MODERN) --}}
    <section class="mb-5" data-aos="fade-up">
        <div class="section-header">
            <h3>Galeri Video Kegiatan</h3>
             <a href="{{ route('galeri.video.list') }}" class="btn btn-lihat-lainnya" style="background-color: #0f2a81; color: white;">Lainnya <i class="fas fa-chevron-right ms-1"></i></a>
        </div>
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
            {{-- Video Item --}}

             @if(isset($galleryVideo) && count($galleryVideo) > 0)
                            @foreach($galleryVideo as $video)

                            <div class="col">
                                <div class="video-card-modern">
                                    <div class="video-wrapper">
                                        <iframe src="https://www.youtube.com/embed/{{$video->youtube_id}}" title="Video Sambutan Kepala Sekolah" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    </div>
                                    <div class="video-body">
                                       <h5 class="video-title-modern">{{$video->title}}</h5>
                       			 <div class="mt-auto">
                             			<a href="https://www.youtube.com/watch?v={{$video->youtube_id}}" target="_blank" class="btn-video-modern">
                              			  <i class="fab fa-youtube me-2"></i> Tonton
                          			  </a>
                     			 </div>
                                    </div>
                                </div>
                            </div>
                            
                                
                            @endforeach
                        @else
                           <div class="col">
                                <div class="video-card-modern">
                                    <div class="video-wrapper">
                                        <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video Sambutan Kepala Sekolah" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    </div>
                                    <div class="video-body">
                                         <h5 class="video-title-modern">Video {{$var->title}}</h5>
                                        <div class="mt-auto">
                                            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="btn-video-modern">
                                                <i class="fab fa-youtube me-2"></i> Tonton
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif


            
        </div>
    </section>

</div> {{-- PENUTUP CONTAINER UTAMA --}}

{{-- MODAL (Untuk Galeri Foto) --}}
<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header" style="background: transparent; border:none;">
                <h5 class="modal-title text-white" id="imageModalLabel"></h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <img src="" class="img-fluid" id="modalImage" alt="Modal Image">
            </div>
        </div>
    </div>
</div>

{{-- MODAL BARU: PILIHAN EKSTRAKULIKULER --}}
<div class="modal fade" id="ekskulModal" tabindex="-1" aria-labelledby="ekskulModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header" style="background: linear-gradient(to right, #1a237e, #283593); color: white;">
                <h5 class="modal-title fw-bold" id="ekskulModalLabel">
                    <i class="fas fa-basketball-ball me-2 text-warning"></i> Pilih Kegiatan Ekstrakulikuler
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                    @php
                        $ekskuls = [
                            ['name' => 'Futsal', 'slug' => 'futsal', 'icon' => 'fas fa-futbol'],
                            ['name' => 'Basket', 'slug' => 'basket', 'icon' => 'fas fa-basketball-ball'],
                            ['name' => 'Bola Voli', 'slug' => 'bola-voli', 'icon' => 'fas fa-volleyball-ball'],
                            ['name' => 'Bulu Tangkis', 'slug' => 'bulu-tangkis', 'icon' => 'fas fa-table-tennis'],
                            ['name' => 'PMR', 'slug' => 'pmr', 'icon' => 'fas fa-first-aid'],
                            ['name' => 'PASKIBRAKA', 'slug' => 'paskibraka', 'icon' => 'fas fa-flag'],
                            ['name' => 'PRAMUKA', 'slug' => 'pramuka', 'icon' => 'fas fa-campground'],
                            ['name' => 'PIK-R', 'slug' => 'pik-r', 'icon' => 'fas fa-users'],
                            ['name' => 'MUSIK', 'slug' => 'musik', 'icon' => 'fas fa-music'],
                            ['name' => 'TARI', 'slug' => 'tari', 'icon' => 'fas fa-theater-masks'],
                            ['name' => 'Marching Band', 'slug' => 'marching-band', 'icon' => 'fas fa-drum'],
                        ];
                    @endphp

                    @foreach($ekstrakurikuler as $eks)
                        <div class="col">
                            <a href="{{ url('/ekstrakulikuler/' . $eks['id']) }}" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-shadow" style="transition: all 0.3s; background-color: #f8f9fa;">
                                    <div class="card-body d-flex align-items-center p-3">
                                        <div class="rounded-circle bg-white p-3 shadow-sm me-3 text-primary">
                                            <i class="{{ $eks['icon'] }} fa-lg"></i>
                                        </div>
                                        <h6 class="mb-0 fw-bold text-dark">{{ $eks['name'] }}</h6>
                                        <i class="fas fa-chevron-right ms-auto text-muted"></i>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="modal-footer border-0 bg-light">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
            </div>
        </div>
    </div>
</div>

{{-- RUNNING LOGO SECTION --}}
<section class="running-logo-section mt-5 mb-5" data-aos="fade-in" data-aos-delay="200">
    <div class="container">
        <div class="section-header-center mb-4">
             <h3>Partner Industri</h3>
        </div>
        <div class="running-logo-container">
            <div class="running-logo-track">
                {{-- GRUP 1: Logo Asli --}}
                <img src="{{ asset('images/bpom.jpg') }}" alt="Logo Mitra 1" loading="lazy">
                <img src="{{ asset('images/kimiafarmadis.png') }}" alt="Logo Mitra 2" loading="lazy">
                <img src="{{ asset('images/PT Enseval.png') }}" alt="Logo Mitra 3" loading="lazy">
                <img src="{{ asset('images/anugrahalam.jpg') }}" alt="Logo Mitra 4" loading="lazy">
                <img src="{{ asset('images/puskesad.png') }}" alt="Logo Mitra 5" loading="lazy">
                
                {{-- GRUP 2: Duplikat Logo (Agar Loop Seamless) --}}
                <img src="{{ asset('images/bpom.jpg') }}" alt="Logo Mitra 1" loading="lazy">
                <img src="{{ asset('images/kimiafarmadis.png') }}" alt="Logo Mitra 2" loading="lazy">
                <img src="{{ asset('images/PT Enseval.png') }}" alt="Logo Mitra 3" loading="lazy">
                <img src="{{ asset('images/anugrahalam.jpg') }}" alt="Logo Mitra 4" loading="lazy">
                <img src="{{ asset('images/puskesad.png') }}" alt="Logo Mitra 5" loading="lazy">
            </div>
        </div>
    </div>
</section>

{{-- SCRIPT UNTUK AUTO SLIDE & MANUAL SCROLL GURU --}}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const container = document.getElementById('teacherTrack');
        const scrollAmount = 305; // Lebar kartu (280) + Gap (25)
        let autoScroll; // Variable untuk menyimpan interval

        // Fungsi Manual Scroll (Klik Tombol)
        window.scrollTeacher = function(direction) {
            if (direction === 'left') {
                container.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
            } else {
                container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
            }
        };

        // Fungsi Memulai Auto Scroll
        function startAutoScroll() {
            autoScroll = setInterval(() => {
                // Cek apakah sudah sampai ujung kanan
                if (container.scrollLeft + container.clientWidth >= container.scrollWidth - 10) {
                    // Jika sudah mentok kanan, kembali ke awal (kiri)
                    container.scrollTo({ left: 0, behavior: 'smooth' });
                } else {
                    // Jika belum, scroll ke kanan
                    container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
                }
            }, 3000); // Berjalan setiap 3000ms (3 detik)
        }

        // Fungsi Menghentikan Auto Scroll
        function stopAutoScroll() {
            clearInterval(autoScroll);
        }

        // Jalankan Auto Scroll saat halaman dimuat
        startAutoScroll();

        // Event Listener: Berhenti saat mouse di atas slider (Pause on Hover)
        container.addEventListener('mouseenter', stopAutoScroll);
        
        // Event Listener: Jalan lagi saat mouse pergi
        container.addEventListener('mouseleave', startAutoScroll);
        
        // Event Listener: Berhenti juga saat mouse di atas tombol navigasi
        const btns = document.querySelectorAll('.slider-nav-btn');
        btns.forEach(btn => {
            btn.addEventListener('mouseenter', stopAutoScroll);
            btn.addEventListener('mouseleave', startAutoScroll);
        });
    });

    // Script Modal Foto
    document.addEventListener("DOMContentLoaded", function(){
        var imageModal = document.getElementById('imageModal');
        imageModal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            var imgSrc = button.getAttribute('data-bs-image-src');
            var imgTitle = button.getAttribute('data-bs-title'); // Jika ingin menampilkan judul
            var modalImage = imageModal.querySelector('#modalImage');
            var modalTitle = imageModal.querySelector('#imageModalLabel');
            
            modalImage.src = imgSrc;
            if(modalTitle) modalTitle.textContent = imgTitle;
        });
    });
</script>

@endsection