<?php
session_start();
$cartCount = isset($_SESSION['cart'])
  ? array_sum(array_column($_SESSION['cart'], 'qty'))
  : 0;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organic Store</title>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap" rel="stylesheet">

<style>
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Lora',serif;
}

body.menu-open{
  overflow:hidden;
}

/* HEADER */
.site-header{
  width:100%;
  background:#6fb23f;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  position:relative;
  z-index:1000;
}

.header-container{
  max-width:1200px;
  margin:auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.logo{
  width:60px;
  height:60px;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.75);
}

/* NAV DESKTOP */
.nav{
  display:flex;
  gap:26px;
}

.nav a{
  color:#fff;
  text-decoration:none;
  font-size:16px;
  position:relative;
}

/* underline */
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:#d3ae3b;
  transition:.3s;
}

.nav a:hover::after,
.nav a.active::after{
  width:100%;
}

/* RIGHT */
.header-right{
  display:flex;
  align-items:center;
  gap:22px;
}

/* CART */
.cart-icon{
  position:relative;
}

.cart-icon svg{
  width:28px;
  height:28px;
  stroke:#fff;
  stroke-width:2.4;
}

.cart-count{
  position:absolute;
  top:-6px;
  right:-8px;
  background:#d3ae3b;
  color:#000;
  font-size:12px;
  font-weight:700;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* HAMBURGER */
.menu-btn{
  display:none;
  font-size:32px;
  color:#fff;
  cursor:pointer;
  z-index:1100;
}

/* MOBILE */
@media(max-width:900px){

  .menu-btn{
    display:block;
  }

  .nav{
    position:fixed;
    inset:0;
    background:#6fb23f;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;
    transform:translateY(-100%);
    transition:.4s ease;
    z-index:1050;
  }

  .nav.show{
    transform:translateY(0);
  }

  .nav a{
    font-size:22px;
  }

  .logo{
    width:48px;
    height:48px;
  }
}
</style>
</head>

<body>

<header class="site-header">
  <div class="header-container">

    <!-- LOGO -->
    <a href="index.php" class="logo">
      <img src="media/grocerylogo.png" alt="Organic Store Logo">
    </a>

    <!-- NAV -->
    <nav class="nav">
      <a href="test.php">Home</a>
      <a href="products.php">Products</a>
      <a href="about.php">About</a>
      <a href="farming.php">Our Farm</a>
      <a href="contact.php">Contact</a>
    </nav>

    <!-- RIGHT -->
    <div class="header-right">

      <a href="cart.php" class="cart-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="9" cy="21" r="1.4"></circle>
          <circle cx="20" cy="21" r="1.4"></circle>
          <path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"></path>
        </svg>
        <span class="cart-count"><?= $cartCount ?></span>
      </a>

      <div class="menu-btn">☰</div>
    </div>

  </div>
</header>

<script>
/* MOBILE MENU */
const menuBtn = document.querySelector('.menu-btn');
const nav = document.querySelector('.nav');
const body = document.body;

menuBtn.addEventListener('click', () => {
  nav.classList.toggle('show');
  body.classList.toggle('menu-open');
  menuBtn.textContent = nav.classList.contains('show') ? '✕' : '☰';
});

/* ACTIVE MENU AUTO-DETECT */
const currentPage = window.location.pathname.split("/").pop();
const navLinks = document.querySelectorAll(".nav a");

navLinks.forEach(link => {
  const linkPage = link.getAttribute("href");

  if(linkPage === currentPage){
    link.classList.add("active");
  }

  /* fallback for homepage */
  if(currentPage === "" && linkPage === "index.php"){
    link.classList.add("active");
  }
});
</script>

</body>
</html>
