<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= typeof title !== 'undefined' ? title + ' | Ecobe Academy' : 'Ecobe Academy — Get Hired in Europe Faster' %></title>
  <meta name="description" content="Ecobe Academy helps professionals in Europe land their dream job faster with insider hiring knowledge, structured job search systems, and weekly mentor support.">
  <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=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="/css/main.css">
</head>
<body class="<%= page %>-page">

  <!-- Cookie Banner -->
  <div class="cookie-banner" id="cookieBanner">
    <p>We use cookies to enhance your experience. <a href="#">Privacy Policy</a></p>
    <div class="cookie-actions">
      <button class="btn-cookie-decline" onclick="dismissCookie()">Decline</button>
      <button class="btn-cookie-accept" onclick="dismissCookie()">Accept</button>
    </div>
  </div>

  <!-- Navigation -->
  <nav class="nav" id="mainNav">
    <div class="nav-container">
      <a href="/" class="nav-logo">
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" class="nav-logo-icon">
          <circle cx="13" cy="13" r="12" stroke="currentColor" stroke-width="1"/>
          <path d="M7 13C7 9.686 9.686 7 13 7s6 2.686 6 6-2.686 6-6 6" stroke="#4ade80" stroke-width="1.5" stroke-linecap="round"/>
          <circle cx="13" cy="13" r="2" fill="#4ade80"/>
        </svg>
        <span class="nav-logo-text">ecobe<em>academy</em></span>
      </a>
      <button class="nav-toggle" id="navToggle" aria-label="Toggle menu">
        <span></span><span></span><span></span>
      </button>
    </div>
  </nav>

  <!-- Mobile drawer lives directly in body — outside nav so backdrop-filter doesn't clip it -->
  <ul class="nav-links" id="navLinks">
    <li><a href="/" class="<%= page === 'home' ? 'active' : '' %>">Home</a></li>
    <li><a href="/our-programs" class="<%= page === 'programs' ? 'active' : '' %>">Programs</a></li>
    <li><a href="/meet-your-mentors" class="<%= page === 'mentors' ? 'active' : '' %>">Team</a></li>
    <li><a href="/sustainability-promise" class="<%= page === 'sustainability' ? 'active' : '' %>">Sustainability</a></li>
    <li><a href="/resources" class="<%= page === 'resources' ? 'active' : '' %>">Resources</a></li>
    <li><a href="/contact-us" class="<%= page === 'contact' ? 'active' : '' %>">Contact</a></li>
    <li><a href="https://calendly.com/miriamscioratto/30min" target="_blank" class="nav-cta">Book Free Call <span class="nav-cta-arrow">→</span></a></li>
  </ul>
