<?php
if (session_status() === PHP_SESSION_NONE) session_start();

$isLoggedIn = isset($_SESSION['user_id']);
$userRole   = $_SESSION['role'] ?? '';
$dashUrl    = $userRole === 'admin'
    ? '/stile-lpg/admin/index.php'
    : '/stile-lpg/customer/dashboard.php';

$navLinks = [
    ['href' => '/stile-lpg/index.php',       'label' => 'Home'],
    ['href' => '/stile-lpg/services.php',     'label' => 'Services'],
    ['href' => '/stile-lpg/accessories.php',  'label' => 'Accessories'],
    ['href' => '/stile-lpg/gallery.php',      'label' => 'Gallery'],
    ['href' => '/stile-lpg/contact.php',      'label' => 'Contact'],
];
?>
<style>
.navbar{
  position:fixed;top:0;left:0;width:100%;z-index:9999;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  border-bottom:1px solid #e5e7eb;
  font-family:'Inter','Segoe UI',sans-serif;
}
.navbar-inner{
  max-width:1280px;margin:0 auto;padding:0 1.5rem;
  height:64px;display:flex;align-items:center;justify-content:space-between;
}
.navbar-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;}
.navbar-logo-icon{
  width:100px;height:auto;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.navbar-logo-icon img{width:100%;height:auto;object-fit:contain;}
.navbar-brand-text{font-size:1.1rem;font-weight:800;color:#111827;letter-spacing:-.02em;}
.navbar-brand-text span{color:#f97316;}
.navbar-links{display:flex;align-items:center;gap:.125rem;}
.navbar-links a{
  padding:.45rem .8rem;border-radius:6px;font-size:.875rem;font-weight:500;
  color:#374151;text-decoration:none;transition:background .15s,color .15s;white-space:nowrap;
}
.navbar-links a:hover,.navbar-links a.active{background:#fff7ed;color:#ea580c;}
.navbar-auth{display:flex;align-items:center;gap:.5rem;}
.nb-btn-ghost{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .875rem;border-radius:6px;font-size:.875rem;font-weight:500;
  color:#374151;text-decoration:none;background:transparent;border:none;cursor:pointer;
  transition:background .15s,color .15s;white-space:nowrap;
}
.nb-btn-ghost:hover{background:#f3f4f6;color:#111827;}
.nb-btn-ghost svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0;}
.nb-btn-orange{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .875rem;border-radius:6px;font-size:.875rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,#f97316,#ea580c);
  text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 1px 4px rgba(249,115,22,.4);transition:opacity .15s;white-space:nowrap;
}
.nb-btn-orange:hover{opacity:.88;}
.nb-btn-orange svg{width:15px;height:15px;stroke:currentColor;fill:none;flex-shrink:0;}
.nb-mobile-btn{
  display:none;background:transparent;border:none;cursor:pointer;
  padding:.4rem;border-radius:6px;color:#374151;line-height:0;
}
.nb-mobile-btn:hover{background:#f3f4f6;}
.nb-mobile-btn svg{width:24px;height:24px;stroke:currentColor;fill:none;display:block;}
.nb-mobile-menu{
  display:none;flex-direction:column;
  padding:.625rem .875rem .875rem;background:#fff;border-top:1px solid #e5e7eb;
}
.nb-mobile-menu.open{display:flex;}
.nb-mobile-menu a{
  display:flex;align-items:center;gap:.5rem;
  padding:.625rem .75rem;border-radius:6px;font-size:.9375rem;font-weight:500;
  color:#374151;text-decoration:none;transition:background .15s,color .15s;
}
.nb-mobile-menu a:hover{background:#fff7ed;color:#ea580c;}
.nb-mobile-menu svg{width:17px;height:17px;stroke:currentColor;fill:none;flex-shrink:0;}
.nb-divider{height:1px;background:#e5e7eb;margin:.375rem 0;}
body{padding-top:64px;}
@media(max-width:767px){
  .navbar-links,.navbar-auth{display:none!important;}
  .nb-mobile-btn{display:block;}
}
</style>

<nav class="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar-inner">

    <a href="/stile-lpg/index.php" class="navbar-logo" aria-label="Stiles Energy Home">
      <div class="navbar-logo-icon">
        <img src="/stile-lpg/backend/uploads/logo1.png" alt="Stiles Energy Logo">
      </div>
    </a>

    <div class="navbar-links">
      <?php foreach ($navLinks as $link):
        $active = (isset($currentPage) && basename($link['href'], '.php') === $currentPage) ? ' active' : '';
      ?>
        <a href="<?= htmlspecialchars($link['href']) ?>" class="<?= trim($active) ?>"><?= htmlspecialchars($link['label']) ?></a>
      <?php endforeach; ?>
    </div>

    <div class="navbar-auth">
      <?php if ($isLoggedIn): ?>
        <a href="<?= htmlspecialchars($dashUrl) ?>" class="nb-btn-ghost">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/>
            <rect width="7" height="5" x="14" y="12" rx="1"/><rect width="7" height="9" x="3" y="16" rx="1"/>
          </svg>
          Dashboard
        </a>
        <a href="/stile-lpg/logout.php" class="nb-btn-ghost">
          <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
            <polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
          </svg>
          Logout
        </a>
      <?php else: ?>
        <a href="/stile-lpg/login.php" class="nb-btn-ghost">Login</a>
        <a href="/stile-lpg/register.php" class="nb-btn-orange" style="background:linear-gradient(135deg,#f97316,#fb923c);padding:.55rem 1.25rem;border-radius:10px;box-shadow:0 6px 16px rgba(249,115,22,.3);transform:translateY(0);transition:all .2s ease;" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 24px rgba(249,115,22,.4)'" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 16px rgba(249,115,22,.3)'">
          Get Started
          <svg viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="width:16px;height:16px;margin-left:2px">
            <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
          </svg>
        </a>
      <?php endif; ?>
    </div>

    <button class="nb-mobile-btn" id="nb-toggle" onclick="nbToggle()" aria-label="Toggle menu" aria-expanded="false">
      <svg id="nb-icon-menu" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="4" y1="7" x2="20" y2="7"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="17" x2="20" y2="17"/>
      </svg>
      <svg id="nb-icon-x" style="display:none" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
      </svg>
    </button>
  </div>

  <div class="nb-mobile-menu" id="nb-mobile-menu">
    <?php foreach ($navLinks as $link): ?>
      <a href="<?= htmlspecialchars($link['href']) ?>"><?= htmlspecialchars($link['label']) ?></a>
    <?php endforeach; ?>
    <div class="nb-divider"></div>
    <?php if ($isLoggedIn): ?>
      <a href="<?= htmlspecialchars($dashUrl) ?>">
        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/>
          <rect width="7" height="5" x="14" y="12" rx="1"/><rect width="7" height="9" x="3" y="16" rx="1"/>
        </svg>
        Dashboard
      </a>
      <a href="/stile-lpg/logout.php">
        <svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
          <polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
        </svg>
        Logout
      </a>
    <?php else: ?>
      <a href="/stile-lpg/login.php">Login</a>
      <a href="/stile-lpg/register.php" style="color:#f97316;font-weight:700;">Get Started →</a>
    <?php endif; ?>
  </div>
</nav>

<script>
function nbToggle(){
  var m=document.getElementById('nb-mobile-menu');
  var btn=document.getElementById('nb-toggle');
  var mi=document.getElementById('nb-icon-menu');
  var xi=document.getElementById('nb-icon-x');
  var open=m.classList.toggle('open');
  btn.setAttribute('aria-expanded', open ? 'true' : 'false');
  mi.style.display=open?'none':'block';
  xi.style.display=open?'block':'none';
}
</script>
