<?php
$backBaseUrl = env('BACK_BASE_URL');
?>
<?php echo view ('header.php') ?>
     <style>
        .dept-hero {
            background: linear-gradient(135deg, rgba(30, 64, 175, 0.9), rgba(59, 130, 246, 0.8)), 
                        url('/assets/images/departments/anatomy-hero.jpg') center/cover;
            height: 300px;
        }
        .sidebar-nav {
            position: sticky;
            top: 120px;
            max-height: calc(100vh - 140px);
            overflow-y: auto;
        }
        .nav-item {
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }
        .nav-item:hover, .nav-item.active {
            background: rgba(30, 64, 175, 0.1);
            border-left-color: #1e40af;
        }
        .faculty-table {
            font-size: 0.875rem;
        }
        .faculty-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
        }
        .download-btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.75rem;
        }
    </style>
    <!-- Department Hero Section -->
    <section class="dept-hero flex items-center justify-center text-white text-center pt-28">
        <div class="max-w-4xl mx-auto px-4">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Anatomy</h1>
            <p class="text-xl opacity-90">Foundation of Medical Knowledge</p>
            <div class="mt-6 flex flex-wrap justify-center gap-4 text-sm">
                <span class="bg-white/20 px-3 py-1 rounded-full">
                    <i class="ri-team-line mr-1"></i>12 Faculty
                </span>
                <span class="bg-white/20 px-3 py-1 rounded-full">
                    <i class="ri-graduation-cap-line mr-1"></i>180 Students
                </span>
                <span class="bg-white/20 px-3 py-1 rounded-full">
                    <i class="ri-hospital-line mr-1"></i>8 Services
                </span>
            </div>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <div class="grid lg:grid-cols-4 gap-8">
            <!-- Left Sidebar Navigation -->
            <div class="lg:col-span-1">
                <div class="sidebar-nav bg-white rounded-lg shadow-sm border border-gray-200 p-4">
                    <h3 class="font-semibold text-gray-900 mb-4 flex items-center">
                        <i class="ri-navigation-line mr-2 text-blue-600"></i>
                        Quick Navigation
                    </h3>
                    <nav class="space-y-1">
                        <a href="#overview" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-information-line mr-2"></i>Overview
                        </a>
                        <a href="#academics" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-book-open-line mr-2"></i>Academic Programs
                        </a>
                        <a href="#faculty" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-team-line mr-2"></i>Faculty Directory
                        </a>
                        <a href="#research" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-microscope-line mr-2"></i>Research & Publications
                        </a>
                        <a href="#services" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-hospital-line mr-2"></i>Clinical Services
                        </a>
                        <a href="#outcomes" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-trophy-line mr-2"></i>Student Outcomes
                        </a>
                        <a href="#outreach" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-community-line mr-2"></i>Outreach & Inclusivity
                        </a>
                        <a href="#gallery" class="nav-item block px-3 py-2 text-sm text-gray-700 rounded hover:text-blue-600">
                            <i class="ri-gallery-line mr-2"></i>Events & Gallery
                        </a>
                    </nav>

                    <!-- Other Departments (if space permits) -->
                    <div class="mt-8 pt-6 border-t border-gray-200">
                        <h4 class="font-medium text-gray-900 mb-3 text-sm">Other Departments</h4>
                        <div class="space-y-1">
                                                                                                                                                        <a href="?dept=physiology" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                    Physiology                                </a>
                                                                                                                            <a href="?dept=biochemistry" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                    Biochemistry                                </a>
                                                                                                                            <a href="?dept=medicine" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                    Department of Medicine                                </a>
                                                                                                                            <a href="?dept=surgery" class="block px-2 py-1 text-xs text-gray-600 hover:text-blue-600 hover:bg-gray-50 rounded">
                                    Department of Surgery                                </a>
                                                                                        <a href="/faculty-directory.php" class="block px-2 py-1 text-xs text-blue-600 hover:bg-gray-50 rounded font-medium">
                                View All Departments →
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="lg:col-span-3 space-y-8">
                
                <!-- Department Overview -->
                <section id="overview" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-information-line mr-3 text-blue-600"></i>
                        About the Department
                    </h2>
                   
                    <div class="grid md:grid-cols-2 gap-6">
                        <?php echo $department_details['departments']['department_info']?>
                        
                        <?php echo $department_details['departments']['department_vision']?>
                    </div>
                </section>

                <!-- Academic Programs -->
                <section id="academics" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-book-open-line mr-3 text-blue-600"></i>
                        Academic Programs
                    </h2>
                    
                    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                                                <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg hover-lift">
                            <div class="flex items-center mb-2">
                                <i class="ri-graduation-cap-line text-2xl text-blue-600 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-gray-900">MBBS</h4>
                                    <p class="text-sm text-gray-600">18 months</p>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">Comprehensive anatomy curriculum for undergraduate medical students</p>
                            <p class="text-xs text-gray-500">Intake: 150 students</p>
                        </div>
                                                <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg hover-lift">
                            <div class="flex items-center mb-2">
                                <i class="ri-graduation-cap-line text-2xl text-blue-600 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-gray-900">MD Anatomy</h4>
                                    <p class="text-sm text-gray-600">3 years</p>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">Postgraduate program in anatomical sciences</p>
                            <p class="text-xs text-gray-500">Intake: 3 students</p>
                        </div>
                                                <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg hover-lift">
                            <div class="flex items-center mb-2">
                                <i class="ri-graduation-cap-line text-2xl text-blue-600 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-gray-900">PhD</h4>
                                    <p class="text-sm text-gray-600">3-5 years</p>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">Doctoral research program in anatomy</p>
                            <p class="text-xs text-gray-500">Intake: 2 students</p>
                        </div>
                                                <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg hover-lift">
                            <div class="flex items-center mb-2">
                                <i class="ri-graduation-cap-line text-2xl text-blue-600 mr-3"></i>
                                <div>
                                    <h4 class="font-semibold text-gray-900">Diploma</h4>
                                    <p class="text-sm text-gray-600">2 years</p>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600 mb-2">Diploma in anatomical sciences</p>
                            <p class="text-xs text-gray-500">Intake: 1 student</p>
                        </div>
                                            </div>

                    <!-- Infrastructure & Resources -->
                    <div class="mt-8 grid md:grid-cols-3 gap-6">
                        <?php echo $department_details['departments']['infrastructure']?>
                        <?php echo $department_details['departments']['equipment']?>
                        <?php echo $department_details['departments']['library_resources']?>
                    </div>
                </section>

                <!-- Faculty Directory -->
                <section id="faculty" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-team-line mr-3 text-blue-600"></i>
                        Faculty Directory
                    </h2>

                    <!-- Teaching Staff -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Teaching Staff</h3>
                        <div class="overflow-x-auto">
                            <table class="faculty-table w-full border border-gray-200 rounded-lg">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">#</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Image</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Registration No.</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Designation</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Publications</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Services</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <?php
                                    if(!empty($department_details['faculty'])){
                                        foreach($department_details['faculty'] as $faculty){
                                            ?>
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-4 py-4 text-sm font-medium text-gray-900">1</td>
                                                <td class="px-4 py-4">
                                                    <img src="<?php echo $backBaseUrl?><?php echo $faculty['image']?>" alt="Faculty" class="faculty-img rounded">
                                                </td>
                                                <td class="px-4 py-4">
                                                    <div class="text-sm font-medium text-gray-900"><?php echo $faculty['name']?></div>
                                                    
                                                </td>
                                                <td class="px-4 py-4 text-sm text-gray-900"><?php echo $faculty['registration_no']?></td>
                                                <td class="px-4 py-4 text-sm text-gray-900"><?php echo $faculty['designation']?></td>
                                                <td class="px-4 py-4">
                                                    <a href="mailto:sudeshnamajumdar.2007@rediffmail.com" class="text-sm text-blue-600 hover:underline">
                                                        <?php echo $faculty['email']?>                                           </a>
                                                </td>
                                                <td class="px-4 py-4">
                                                    <a href="<?php echo $backBaseUrl?><?php echo $faculty['publication']?>" class="download-btn bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                                                        Download / View
                                                    </a>
                                                </td>
                                                <td class="px-4 py-4">
                                                    <a href="<?php echo $backBaseUrl?><?php echo $faculty['services']?>"  class="download-btn bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                                                        Download / View
                                                    </a>
                                                </td>
                                            </tr>
                                            <?php
                                        }
                                    }
                                    ?>
                                    
                                                                
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Resident Doctors -->
                    <div class="mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Resident Doctors</h3>
                        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <img src="/assets/images/residents/rahul-kumar.jpg" alt="Resident" class="w-12 h-12 rounded-full mr-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900 text-sm">Dr. Rahul Kumar</h4>
                                        <p class="text-xs text-gray-600">2nd Year MD</p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500">Specialization: Neuroanatomy</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <img src="/assets/images/residents/priya-singh.jpg" alt="Resident" class="w-12 h-12 rounded-full mr-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900 text-sm">Dr. Priya Singh</h4>
                                        <p class="text-xs text-gray-600">1st Year MD</p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500">Specialization: Embryology</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg">
                                <div class="flex items-center mb-2">
                                    <img src="/assets/images/residents/amit-das.jpg" alt="Resident" class="w-12 h-12 rounded-full mr-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900 text-sm">Dr. Amit Das</h4>
                                        <p class="text-xs text-gray-600">3rd Year MD</p>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-500">Specialization: Histology</p>
                            </div>
                                                    </div>
                    </div>

                    <!-- Non-Teaching Staff -->
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 mb-4">Non-Teaching Staff</h3>
                        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg text-center">
                                <img src="/assets/images/staff/rajesh-kumar.jpg" alt="Staff" class="w-16 h-16 rounded-full mx-auto mb-2">
                                <h4 class="font-medium text-gray-900 text-sm">Mr. Rajesh Kumar</h4>
                                <p class="text-xs text-gray-600">Lab Technician</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg text-center">
                                <img src="/assets/images/staff/sunita-devi.jpg" alt="Staff" class="w-16 h-16 rounded-full mx-auto mb-2">
                                <h4 class="font-medium text-gray-900 text-sm">Ms. Sunita Devi</h4>
                                <p class="text-xs text-gray-600">Museum Curator</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg text-center">
                                <img src="/assets/images/staff/vijay-singh.jpg" alt="Staff" class="w-16 h-16 rounded-full mx-auto mb-2">
                                <h4 class="font-medium text-gray-900 text-sm">Mr. Vijay Singh</h4>
                                <p class="text-xs text-gray-600">Dissection Hall Assistant</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg text-center">
                                <img src="/assets/images/staff/kavita-sharma.jpg" alt="Staff" class="w-16 h-16 rounded-full mx-auto mb-2">
                                <h4 class="font-medium text-gray-900 text-sm">Ms. Kavita Sharma</h4>
                                <p class="text-xs text-gray-600">Administrative Assistant</p>
                            </div>
                                                    </div>
                    </div>
                </section>

                <!-- Research & Publications -->
                <section id="research" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-microscope-line mr-3 text-blue-600"></i>
                        Research & Publications
                    </h2>
                    
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Ongoing Research Projects</h3>
                                <?php
                                if(!empty($department_details['projects'])){
                                    foreach($department_details['projects'] as $project){
                                        ?>
                                         <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-4">
                                            <h4 class="font-medium text-gray-900 mb-2"><?php echo $project['heading']?></h4>
                                            <?php echo $project['description']?>
                                        </div>
                                        <?php
                                    }
                                }
                                ?>                                    
                               
                                                       
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Recent Publications</h3>
                             <?php
                                if(!empty($department_details['publications'])){
                                    foreach($department_details['publications'] as $publication){
                                        ?>
                                         <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-4">
                                            <h4 class="font-medium text-gray-900 mb-2"><?php echo $publication['heading']?></h4>
                                            <?php echo $publication['description']?>
                                        </div>
                                        <?php
                                    }
                                }
                            ?> 
                                                        
                                                        
                        </div>
                    </div>

                    <!-- Research Statistics -->
                    <div class="mt-8 grid md:grid-cols-4 gap-4">
                        <div class="text-center p-4 bg-blue-50 rounded-lg">
                            <div class="text-2xl font-bold text-blue-600">45</div>
                            <div class="text-sm text-gray-600">Publications</div>
                        </div>
                        <div class="text-center p-4 bg-green-50 rounded-lg">
                            <div class="text-2xl font-bold text-green-600">320</div>
                            <div class="text-sm text-gray-600">Citations</div>
                        </div>
                        <div class="text-center p-4 bg-purple-50 rounded-lg">
                            <div class="text-2xl font-bold text-purple-600">12</div>
                            <div class="text-sm text-gray-600">H-Index</div>
                        </div>
                        <div class="text-center p-4 bg-orange-50 rounded-lg">
                            <div class="text-2xl font-bold text-orange-600">5</div>
                            <div class="text-sm text-gray-600">Active Projects</div>
                        </div>
                    </div>
                </section>

                <!-- Clinical Services -->
                <section id="services" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-hospital-line mr-3 text-blue-600"></i>
                        Clinical Services
                    </h2>
                    
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                        <?php
                        if(!empty($department_details['clinical_services'])){
                            foreach($department_details['clinical_services'] as $clinicrow){
                                ?>
                                <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg hover-lift">
                                    <div class="flex items-center mb-3">
                                        <i class="ri-stethoscope-line text-2xl text-green-600 mr-3"></i>
                                        <h4 class="font-semibold text-gray-900"><?php echo $clinicrow['heading']?></h4>
                                    </div>
                                   <?php echo $clinicrow['description']?>
                                </div>
                                <?php
                            }
                        }
                        ?>
                        
                                                
                                               
                                                
                    </div>
                </section>

                <!-- Student Outcomes -->
                <section id="outcomes" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-trophy-line mr-3 text-blue-600"></i>
                        Student Outcomes
                    </h2>
                    
                    <div class="grid md:grid-cols-3 gap-6">
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Academic Performance</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Pass Rate</span>
                                    <span class="font-medium">95%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">First Class</span>
                                    <span class="font-medium">78%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">University Rank Holders</span>
                                    <span class="font-medium">8</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Career Outcomes</h3>
                            <div class="space-y-3">
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Higher Studies</span>
                                    <span class="font-medium">25%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Employment</span>
                                    <span class="font-medium">92%</span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">Research Scholars</span>
                                    <span class="font-medium">12</span>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Success Stories</h3>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-3">
                                <h4 class="font-medium text-gray-900 text-sm">Dr. Amit Kumar (Batch 2019)</h4>
                                <p class="text-xs text-gray-600">Gold Medalist in MD Anatomy, Currently Assistant Professor at AIIMS</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-3">
                                <h4 class="font-medium text-gray-900 text-sm">Dr. Sneha Ghosh (Batch 2020)</h4>
                                <p class="text-xs text-gray-600">Best Paper Award at National Anatomy Conference 2023</p>
                            </div>
                                                        <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-3">
                                <h4 class="font-medium text-gray-900 text-sm">Dr. Rajesh Sharma (Batch 2018)</h4>
                                <p class="text-xs text-gray-600">Published 5 research papers, Pursuing PhD at Oxford University</p>
                            </div>
                                                    </div>
                    </div>
                </section>

                <!-- Outreach & Inclusivity -->
                <section id="outreach" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-community-line mr-3 text-blue-600"></i>
                        Outreach & Inclusivity
                    </h2>
                    
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Community Programs</h3>
                            <?php
                            if(!empty($department_details['community_programs'])){
                                foreach($department_details['community_programs'] as $cp){
                                    ?>
                                    <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-4">
                                        <h4 class="font-medium text-gray-900 mb-2"><?php echo $cp['heading']?></h4>
                                        <?php echo $cp['description']?>
                                    </div>
                                    <?php
                                }
                            }
                            ?>
                            
                                                        
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Diversity Statistics</h3>
                            <div class="space-y-4">
                                <div class="p-4 bg-pink-50 rounded-lg">
                                    <div class="text-2xl font-bold text-pink-600">62%</div>
                                    <div class="text-sm text-gray-600">Women Students</div>
                                </div>
                                <div class="p-4 bg-blue-50 rounded-lg">
                                    <div class="text-2xl font-bold text-blue-600">35%</div>
                                    <div class="text-sm text-gray-600">Other States/Countries</div>
                                </div>
                                <div class="p-4 bg-green-50 rounded-lg">
                                    <div class="text-2xl font-bold text-green-600">28%</div>
                                    <div class="text-sm text-gray-600">Economically Challenged</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Events & Gallery -->
                <section id="gallery" class="compact-section bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="ri-gallery-line mr-3 text-blue-600"></i>
                        Events & Gallery
                    </h2>
                    
                    <div class="grid md:grid-cols-2 gap-8">
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Recent Events</h3>
                            <?php
                            if(!empty($department_details['events'])){
                                foreach($department_details['events'] as $events){
                                    ?>
                                    <div class="compact-card bg-gray-50 border border-gray-200 rounded-lg mb-4">
                                        <div class="flex items-start">
                                            <img src="<?php echo $backBaseUrl?><?php echo $events['image']?>" alt="Event" class="w-20 h-16 object-cover rounded mr-4">
                                            <div>
                                                <h4 class="font-medium text-gray-900 mb-1"><?php echo $events['heading']?></h4>
                                                <?php echo $events['description']?>
                                            </div>
                                        </div>
                                    </div>
                                    <?php
                                }
                            }
                            ?>
                            
                                                        
                                                        
                        </div>
                        
                        <div>
                            <h3 class="font-semibold text-gray-900 mb-4">Photo Gallery</h3>
                            <div class="grid grid-cols-2 gap-3">
                                <?php
                                if(!empty($department_details['gallery'])){
                                    foreach($department_details['gallery'] as $gallery){
                                        ?>
                                        <div class="aspect-square rounded-lg overflow-hidden hover-lift cursor-pointer">
                                            <img src="<?php echo $backBaseUrl?><?php echo $gallery['file']?>" alt="Modern Dissection Hall" 
                                                class="w-full h-full object-cover hover:scale-105 transition-transform">
                                        </div>
                                        <?php
                                    }
                                }
                                ?>
                               
                            </div>
                            <button class="mt-4 w-full py-2 text-blue-600 border border-blue-600 rounded hover:bg-blue-50 transition-colors">
                                View Full Gallery
                            </button>
                        </div>
                    </div>
                </section>

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

    <?php echo view ('footer.php') ?>

    <!-- Smooth Scrolling Script -->
    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('.sidebar-nav a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                    
                    // Update active state
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    this.classList.add('active');
                }
            });
        });

        // Update active navigation on scroll
        window.addEventListener('scroll', () => {
            const sections = document.querySelectorAll('section[id]');
            const scrollPos = window.scrollY + 150;
            
            sections.forEach(section => {
                const top = section.offsetTop;
                const bottom = top + section.offsetHeight;
                const id = section.getAttribute('id');
                
                if (scrollPos >= top && scrollPos <= bottom) {
                    document.querySelectorAll('.sidebar-nav a').forEach(link => {
                        link.classList.remove('active');
                    });
                    const activeLink = document.querySelector(`.sidebar-nav a[href="#${id}"]`);
                    if (activeLink) {
                        activeLink.classList.add('active');
                    }
                }
            });
        });
    </script>
</body>
</html>