<?php
require_once __DIR__.'/config.php';
header('Content-Type: text/html; charset=UTF-8');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Good Character OPC</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<style>
:root {
    --primary-color: #d3ad68;
    --text-color: #333;
    --hover-bg: #f6f6f6;
}

/* Base */
body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background-color: #ffffff;
}

/* Navbar */
.navbar {
    background-color: #ffffff;
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
    padding: 12px 20px;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Logo */
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px !important;
    padding: 0px !important;
}
.navbar-brand img {
    height: 90px;
    width: 100px;
}
.navbar-brand span {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Nav links */
.navbar-nav .nav-link {
    color: var(--text-color) !important;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin-right: 10px;
}
.navbar-nav .nav-link:hover {
    background-color: var(--hover-bg);
    color: var(--primary-color) !important;
}
.navbar-nav .nav-link.active {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* Logout button */
.btn-logout {
    color: #fff !important;
    background-color: var(--primary-color);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    transition: background 0.3s ease;
}
.btn-logout:hover {
    background-color: #c29a5e;
}

/* Mobile view adjustments */
@media (max-width: 992px) {
    .navbar-nav {
        background-color: #ffffff;
        border-top: 1px solid #eee;
        padding-top: 10px;
    }
    .navbar-toggler {
        border: none;
    }
    .navbar-toggler:focus {
        box-shadow: none;
    }
}
</style>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-light">
  <div class="container-fluid">
    <!-- Logo + Name -->
    <a class="navbar-brand" href="index.php">
      <img src="<?php echo $base_url; ?>images/Good-Character-Logo-1.png" alt="Good Character Logo">
    </a>

    <!-- Mobile toggle -->
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Nav links -->
    <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
      <ul class="navbar-nav align-items-center">
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php' ? 'active' : '' ?>" href="index.php">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php#about' ? 'active' : '' ?>" href="index.php#about">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php#advisory' ? 'active' : '' ?>" href="index.php#advisory">Advisory Board</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php#blogs' ? 'active' : '' ?>" href="index.php#blogs">Blogs</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'index.php#contact' ? 'active' : '' ?>" href="index.php#contact">Contact Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'quiz-index.php' ? 'active' : '' ?>" href="quiz-index.php">Quizzes</a>
        </li>
        <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'privacy-policy.php' ? 'active' : '' ?>" href="privacy-policy.php">Privacy Policy</a>
        </li>
        <!-- <li class="nav-item">
          <a class="nav-link <?= basename($_SERVER['PHP_SELF']) == 'contact.php' ? 'active' : '' ?>" href="<?php echo $base_url; ?>admin/login.php">Admin</a>
        </li> -->
        <li class="nav-item">
          <?php
            if(isset($_SESSION['student_name'])){
          ?>
              <span class="nav-link" >Hello <?php echo $_SESSION['student_name'].", "; ?><a class="text-danger" href="student/logout.php">Logout</a></span>
          <?php
            }
            else{
          ?>
              <a class="nav-link" href="student/login.php">Login</a>
          <?php
            }
          ?>
        </li>
      </ul>
    </div>
  </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
