<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
  <title>{{#if post}}{{post.title}} - {{/if}}{{#if page}}{{page.title}} - {{/if}}{{site.name}}</title>
  <meta name="description" content="{{#if post}}{{post.excerpt}}{{else}}{{site.description}}{{/if}}">
  <meta name="theme-color" content="#4f46e5">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="{{site.name}}">
  <link rel="manifest" href="/manifest.json">
  <link rel="apple-touch-icon" href="/pwa/icons/icon-192x192.png">
  <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=Inter:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/themes/my-theme/assets/css/style.css">
  <script>
    // Client-side device detection (runs immediately to prevent FOUC)
    (function() {
      var b = document.documentElement;
      var ua = navigator.userAgent.toLowerCase();
      var isTablet = /ipad|tablet|playbook|silk/.test(ua) || (ua.includes('android') && !ua.includes('mobile'));
      var isMobile = !isTablet && /mobile|android|iphone|ipod|blackberry|windows phone/.test(ua);
      var isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
      b.classList.add(isTablet ? 'device-tablet' : isMobile ? 'device-mobile' : 'device-desktop');
      b.classList.add(isTouch ? 'touch-device' : 'no-touch');
    })();
  </script>
</head>
<body class="{{deviceClasses}}">
  <nav class="navbar">
    <div class="container">
      <div class="nav-wrapper">
        <a href="/" class="logo">{{site.name}}</a>
        <div class="nav-menu">
          {{#if menus.header}}
            {{#each menus.header.items}}
              <a href="{{this.url}}" class="nav-link" target="{{this.target}}">{{this.label}}</a>
            {{/each}}
          {{else}}
            <a href="/" class="nav-link">Home</a>
            <a href="/shop" class="nav-link">Shop</a>
            <a href="/courses" class="nav-link">Courses</a>
            <a href="/blog" class="nav-link">Blog</a>
            <a href="/marketplace" class="nav-link">Marketplace</a>
          {{/if}}
        </div>
        <div class="nav-actions">
          <a href="/cart" class="nav-icon cart-icon" title="Cart">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
            <span class="cart-count" id="cartCount" style="display: none;">0</span>
          </a>
          {{#if user}}
          <div class="user-menu">
            <button class="user-menu-btn" id="userMenuBtn">
              <span class="user-avatar">{{substring user.name 0 1}}</span>
              <span class="user-name">{{user.name}}</span>
            </button>
            <div class="user-dropdown" id="userDropdown">
              <a href="/my-account" class="dropdown-item">My Account</a>
              <a href="/my-courses" class="dropdown-item">My Courses</a>
              <a href="/orders" class="dropdown-item">Orders</a>
              <div class="dropdown-divider"></div>
              <button class="dropdown-item" id="logoutBtn">Sign Out</button>
            </div>
          </div>
          {{else}}
          <a href="/login" class="nav-link nav-auth-link">Sign In</a>
          <a href="/register" class="btn btn-primary btn-sm">Get Started</a>
          {{/if}}
          <!-- Mobile Menu Toggle -->
          <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle menu">
            <span class="hamburger"></span>
          </button>
        </div>
      </div>
    </div>
  </nav>

  <!-- Mobile Menu Overlay -->
  <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>

  <!-- Mobile Navigation Menu -->
  <nav class="mobile-nav-menu" id="mobileNavMenu">
    <div class="mobile-nav-header">
      <a href="/" class="logo">{{site.name}}</a>
      <button class="mobile-nav-close" id="mobileNavClose" aria-label="Close menu">&times;</button>
    </div>
    <div class="mobile-nav-links">
      {{#if menus.header}}
        {{#each menus.header.items}}
          <a href="{{this.url}}" class="mobile-nav-link" target="{{this.target}}">{{this.label}}</a>
        {{/each}}
      {{else}}
        <a href="/" class="mobile-nav-link">🏠 Home</a>
        <a href="/shop" class="mobile-nav-link">🛍️ Shop</a>
        <a href="/courses" class="mobile-nav-link">📚 Courses</a>
        <a href="/blog" class="mobile-nav-link">📝 Blog</a>
        <a href="/marketplace" class="mobile-nav-link">🏪 Marketplace</a>
      {{/if}}
      <div class="mobile-nav-divider"></div>
      {{#if user}}
        <a href="/my-account" class="mobile-nav-link">👤 My Account</a>
        <a href="/my-courses" class="mobile-nav-link">📖 My Courses</a>
        <a href="/orders" class="mobile-nav-link">📦 Orders</a>
        <a href="/cart" class="mobile-nav-link">🛒 Cart</a>
        <div class="mobile-nav-divider"></div>
        <a href="#" class="mobile-nav-link" id="mobileLogoutBtn">🚪 Sign Out</a>
      {{else}}
        <a href="/login" class="mobile-nav-link">🔐 Sign In</a>
        <a href="/register" class="mobile-nav-link">✨ Get Started</a>
      {{/if}}
    </div>
  </nav>

  <script>
  (function() {
    var toggle = document.getElementById('mobileMenuToggle');
    var overlay = document.getElementById('mobileMenuOverlay');
    var menu = document.getElementById('mobileNavMenu');
    var close = document.getElementById('mobileNavClose');

    function openMenu() {
      toggle.classList.add('active');
      overlay.classList.add('active');
      menu.classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    function closeMenu() {
      toggle.classList.remove('active');
      overlay.classList.remove('active');
      menu.classList.remove('active');
      document.body.style.overflow = '';
    }

    if (toggle) toggle.addEventListener('click', openMenu);
    if (overlay) overlay.addEventListener('click', closeMenu);
    if (close) close.addEventListener('click', closeMenu);

    // Close menu on link click
    var links = menu ? menu.querySelectorAll('.mobile-nav-link') : [];
    links.forEach(function(link) {
      link.addEventListener('click', function() {
        if (!this.id || this.id !== 'mobileLogoutBtn') closeMenu();
      });
    });

    // Mobile logout
    var mobileLogout = document.getElementById('mobileLogoutBtn');
    if (mobileLogout) {
      mobileLogout.addEventListener('click', function(e) {
        e.preventDefault();
        localStorage.removeItem('access_token');
        localStorage.removeItem('user');
        window.location.href = '/login';
      });
    }
  })();
  </script>
  <main class="main-content">
