
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barasat Government Medical College &amp; Hospital</title>
<meta name="description" content="BGMCH - Premier medical education and healthcare since 1854">

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com/3.4.16"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#2D295F',
        secondary: '#6B5B95'
      },
      borderRadius: {
        'button': '8px'
      }
    }
  }
}
</script>

<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">

<!-- Remix Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="../../assets/css/style.css">
<script src="../../assets/js/main.js"></script>


<style>
body { font-family: 'Open Sans', sans-serif; }
.hero-gradient { background: linear-gradient(135deg, rgba(45, 41, 95, 0.8) 0%, rgba(107, 91, 149, 0.6) 100%); }
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.1); }
.compact-section { padding: 2rem 0; }
.compact-card { padding: 1rem; }
.dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 1000; }
.dropdown:hover .dropdown-content { max-height: 500px; }
</style>
</head>
<body class="bg-gray-50">
    <div class="fixed top-0 w-full bg-white z-50 shadow-sm border-b">
    <!-- Top utility bar -->
    <div class="bg-gray-50 text-sm py-2">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <select class="bg-transparent border border-gray-300 rounded px-2 py-1 text-xs text-gray-600">
                    <option value="en">English</option>
                    <option value="bn">বাংলা</option>
                    <option value="hi">हिंदी</option>
                </select>
                
                <button id="themeToggle" class="flex items-center space-x-2 text-gray-600 hover:text-primary text-xs">
                    <i class="ri-moon-line text-sm"></i>
                    <span>Dark Mode</span>
                </button>
                <div class="flex items-center space-x-1 text-gray-600">
                    <span class="text-xs">Font:</span>
                    <button id="fontDecrease" class="w-6 h-6 flex items-center justify-center hover:text-primary">
                        <i class="ri-subtract-line text-xs"></i>
                    </button>
                    <button id="fontIncrease" class="w-6 h-6 flex items-center justify-center hover:text-primary">
                        <i class="ri-add-line text-xs"></i>
                    </button>
                </div>
            </div>
            <div class="flex items-center space-x-6">
                <div class="flex items-center space-x-2 text-gray-600 text-xs">
                    <i class="ri-phone-line text-sm"></i>
                    <span><?php echo $header['mobile']?></span>
                </div>
                <div class="flex items-center space-x-2 text-gray-600 text-xs">
                    <i class="ri-mail-line text-sm"></i>
                    <span><?php echo $header['email']?></span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main header -->
    <div class="bg-white py-3 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
            <div class="flex items-center space-x-4">
                <div class="w-12 h-12 bg-primary text-white rounded-lg flex items-center justify-center font-bold text-lg">BG</div>
                <div>
                    <h1 class="text-lg font-bold text-primary"><?php echo $header['company_name']?></h1>
                    <p class="text-sm text-gray-600"><?php echo $header['small_description']?></p>
                    <p class="text-xs text-gray-500"><?php echo $header['long_description']?></p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Navigation -->
    <nav class="bg-primary border-b border-primary">
    <div class="max-w-7xl mx-auto px-4">
        <div class="flex items-center justify-between h-12">
            <div class="flex space-x-3">
                <a href="<?php echo base_url()?>" class="text-white hover:text-gray-200 px-2 py-3 text-sm font-medium border-b-2 border-transparent hover:border-white whitespace-nowrap">Home</a>
                
                <?php foreach ($menuTree as $menu): ?>
                    <div class="dropdown relative">
                        <button class="text-white hover:text-gray-200 px-2 py-3 text-sm font-medium flex items-center space-x-1 border-b-2 border-transparent hover:border-white whitespace-nowrap">
                            <span><?= esc($menu['name']) ?></span>
                            <?php if (!empty($menu['children'])): ?>
                                <i class="ri-arrow-down-s-line text-xs"></i>
                            <?php endif; ?>
                        </button>

                        <?php if (!empty($menu['children'])): ?>
                            <div class="dropdown-content absolute top-full left-0 bg-white shadow-lg rounded-md w-64 py-2 mt-1 z-50">
                                <?php foreach ($menu['children'] as $child): ?>
                                    <a href="<?= base_url('pages/'.$child['slug'].'/'.$child['id']) ?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        <?= esc($child['name']) ?>
                                    </a>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
                
                <div class="dropdown relative">
                    <button class="text-white hover:text-gray-200 px-2 py-3 text-sm font-medium flex items-center space-x-1 border-b-2 border-transparent hover:border-white whitespace-nowrap">
                        <span>Departments</span>
                        <i class="ri-arrow-down-s-line text-xs"></i>
                    </button>
                    <div class="dropdown-content absolute top-full left-0 bg-white shadow-lg rounded-md w-64 py-2 mt-1">
                        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">All Departments</a>
                        <hr class="my-1">
                        <?php
                        if(!empty($departments)){
                            foreach($departments as $row){
                                ?>
                                <a href="<?php echo base_url()?>departments/<?php echo $row['id']?>" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"><?php echo $row['department_name']?></a>
                                <?php
                            }
                        }
                        ?>
                        <hr class="my-1">
                        <a href="<?php echo base_url()?>central-library" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Central Library</a>
                    </div>
                </div>
                
               
                
                <a href="<?php echo base_url()?>contact-us" class="text-white hover:text-gray-200 px-2 py-3 text-sm font-medium border-b-2 border-transparent hover:border-white whitespace-nowrap">Contact</a>
            </div>
        </div>
    </div>
</nav></div>