<div class="header">
  <button class="back-button" onclick="window.history.back()">BACK</button>
  <div class="title-container">
    <h1 id="header-title" class="header-title"></h1>
    <div id="header-subtitle" class="subtitle"></div>
  </div>
  <div class="menu-wrapper">
    <button id="dropdown-selector-btn" class="triangle-btn">
      <img
        id="redirect-image"
        src="./img/dropdown-selector-triangle-v1.png"
        alt="▼"
        onerror="this.style.display='none'; this.parentNode.innerHTML='▼';"
      />
    </button>
    <div id="sectionDropdown" class="dropdown-menu">
      <button
        class="menu-item btn-orange"
        onclick="navigateTo('#discovering-purpose')"
      >
        Discovering Purpose
      </button>
      <button
        class="menu-item btn-pink"
        onclick="navigateTo('#explore-opportunities-1')"
      >
        Exploring Opportunities
      </button>
      <button
        class="menu-item btn-cyan"
        onclick="navigateTo('#explore-multiple-pathways-2')"
      >
        Staying Relevant
      </button>
    </div>
  </div>
</div>
