<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Primary SEO Meta Tags -->
  <title>{{#if metaTitle}}{{metaTitle}}{{else}}{{#if title}}{{title}} | {{siteName}}{{else}}{{siteName}} - Modern CMS Built with Node.js{{/if}}{{/if}}</title>
  <meta name="description" content="{{#if metaDescription}}{{metaDescription}}{{else}}A blazing-fast, enterprise-grade CMS built with NestJS, React, Prisma, and PostgreSQL. Full LMS, eCommerce, analytics, and plugin ecosystem.{{/if}}">
  {{#if metaKeywords}}<meta name="keywords" content="{{metaKeywords}}">{{/if}}
  <meta name="author" content="{{#if author}}{{author}}{{else}}{{siteName}}{{/if}}">
  <meta name="robots" content="{{#if noIndex}}noindex{{else}}index{{/if}}, {{#if noFollow}}nofollow{{else}}follow{{/if}}">
  {{#if canonicalUrl}}<link rel="canonical" href="{{canonicalUrl}}">{{/if}}

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="{{#if ogType}}{{ogType}}{{else}}website{{/if}}">
  <meta property="og:url" content="{{#if pageUrl}}{{pageUrl}}{{else}}{{siteUrl}}{{/if}}">
  <meta property="og:title" content="{{#if ogTitle}}{{ogTitle}}{{else}}{{#if metaTitle}}{{metaTitle}}{{else}}{{siteName}}{{/if}}{{/if}}">
  <meta property="og:description" content="{{#if ogDescription}}{{ogDescription}}{{else}}{{#if metaDescription}}{{metaDescription}}{{else}}The modern WordPress alternative built with Node.js. Enterprise-grade features out of the box.{{/if}}{{/if}}">
  {{#if ogImage}}<meta property="og:image" content="{{ogImage}}">{{/if}}
  <meta property="og:site_name" content="{{siteName}}">
  <meta property="og:locale" content="en_US">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="{{#if twitterCardType}}{{twitterCardType}}{{else}}summary_large_image{{/if}}">
  {{#if twitterHandle}}<meta name="twitter:site" content="{{twitterHandle}}">{{/if}}
  <meta name="twitter:title" content="{{#if ogTitle}}{{ogTitle}}{{else}}{{#if metaTitle}}{{metaTitle}}{{else}}{{siteName}}{{/if}}{{/if}}">
  <meta name="twitter:description" content="{{#if ogDescription}}{{ogDescription}}{{else}}{{#if metaDescription}}{{metaDescription}}{{else}}Modern CMS built with Node.js{{/if}}{{/if}}">
  {{#if ogImage}}<meta name="twitter:image" content="{{ogImage}}">{{/if}}

  <!-- Search Engine Verification -->
  {{#if googleVerification}}<meta name="google-site-verification" content="{{googleVerification}}">{{/if}}
  {{#if bingVerification}}<meta name="msvalidate.01" content="{{bingVerification}}">{{/if}}

  <!-- PWA & Mobile -->
  <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="{{siteName}}">
  <link rel="manifest" href="/manifest.json">
  <link rel="apple-touch-icon" href="/pwa/icons/icon-192x192.png">

  <!-- Structured Data / JSON-LD -->
  {{#if schemaMarkup}}
  <script type="application/ld+json">{{{schemaMarkup}}}</script>
  {{/if}}
  <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;800&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #e2e8f0;
      line-height: 1.6;
      background: #0f172a;
    }
    header {
      background: rgba(15, 23, 42, 0.98);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
    }
    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0.75rem 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.25rem;
      font-weight: 700;
      color: white;
      text-decoration: none;
    }
    .logo-icon {
      width: 38px;
      height: 38px;
      background: linear-gradient(135deg, #10b981 0%, #6366f1 100%);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 0.85rem;
    }
    .logo span {
      background: linear-gradient(135deg, #10b981 0%, #6366f1 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .nav-main {
      display: flex;
      list-style: none;
      gap: 0.25rem;
      align-items: center;
    }
    .nav-main a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      transition: all 0.2s ease;
    }
    .nav-main a:hover {
      color: white;
      background: rgba(255, 255, 255, 0.08);
    }
    .nav-right {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .nav-icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: all 0.2s ease;
      position: relative;
    }
    .nav-icon-btn:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
      border-color: rgba(255, 255, 255, 0.2);
    }
    .cart-count {
      position: absolute;
      top: -4px;
      right: -4px;
      background: #ef4444;
      color: white;
      font-size: 0.65rem;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav-divider {
      width: 1px;
      height: 24px;
      background: rgba(255, 255, 255, 0.1);
      margin: 0 0.5rem;
    }
    .nav-auth-btn {
      padding: 0.5rem 1.25rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.9rem;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .nav-auth-btn.login {
      color: rgba(255, 255, 255, 0.9);
      background: transparent;
    }
    .nav-auth-btn.login:hover {
      color: white;
      background: rgba(255, 255, 255, 0.08);
    }
    .nav-auth-btn.register {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    }
    .nav-auth-btn.register:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    }
    .user-menu {
      position: relative;
    }
    .user-menu-toggle {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.4rem 0.75rem 0.4rem 0.4rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      color: white;
    }
    .user-menu-toggle:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }
    .user-avatar {
      width: 32px;
      height: 32px;
      background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 0.85rem;
    }
    .user-name {
      font-weight: 500;
      font-size: 0.9rem;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 220px;
      background: #1e293b;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.4);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      overflow: hidden;
    }
    .user-menu:hover .user-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    .dropdown-header {
      padding: 1rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .dropdown-header strong {
      display: block;
      color: white;
      margin-bottom: 0.25rem;
    }
    .dropdown-header span {
      font-size: 0.8rem;
      color: #64748b;
    }
    .dropdown-links {
      padding: 0.5rem 0;
    }
    .dropdown-links a {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.9rem;
      transition: all 0.2s ease;
    }
    .dropdown-links a:hover {
      background: rgba(255, 255, 255, 0.05);
      color: white;
    }
    .dropdown-links a.admin {
      color: #10b981;
    }
    .dropdown-links a.logout {
      color: #f87171;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      margin-top: 0.5rem;
      padding-top: 0.75rem;
    }
    .mobile-menu-btn {
      display: none;
      width: 40px;
      height: 40px;
      background: transparent;
      border: none;
      color: white;
      cursor: pointer;
      z-index: 1001;
    }
    .mobile-menu-btn .menu-open { display: block; }
    .mobile-menu-btn .menu-close { display: none; }
    .mobile-menu-btn.active .menu-open { display: none; }
    .mobile-menu-btn.active .menu-close { display: block; }

    /* Mobile Navigation Overlay */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(15, 23, 42, 0.98);
      backdrop-filter: blur(20px);
      z-index: 999;
      padding: 80px 20px 40px;
      flex-direction: column;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .mobile-nav.open {
      opacity: 1;
      visibility: visible;
    }
    .mobile-nav-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }
    .mobile-nav-links a {
      display: block;
      padding: 1rem;
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      border-radius: 12px;
      transition: all 0.2s ease;
    }
    .mobile-nav-links a:hover {
      background: rgba(255, 255, 255, 0.1);
      color: white;
    }
    .mobile-nav-auth {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-top: auto;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .mobile-nav-auth a {
      display: block;
      padding: 1rem;
      text-align: center;
      border-radius: 12px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .mobile-nav-auth .mobile-login {
      color: white;
      background: rgba(255, 255, 255, 0.1);
    }
    .mobile-nav-auth .mobile-register {
      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
      color: white;
    }
    .mobile-nav-auth .mobile-user {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1rem;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      margin-bottom: 0.5rem;
    }
    .mobile-nav-auth .mobile-user-avatar {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 1.2rem;
      color: white;
    }
    .mobile-nav-auth .mobile-user-info {
      flex: 1;
    }
    .mobile-nav-auth .mobile-user-info strong {
      display: block;
      color: white;
    }
    .mobile-nav-auth .mobile-user-info span {
      font-size: 0.85rem;
      color: #64748b;
    }
    .mobile-nav-user-links {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .mobile-nav-user-links a {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      font-size: 0.95rem;
      border-radius: 8px;
      transition: all 0.2s ease;
    }
    .mobile-nav-user-links a:hover {
      background: rgba(255, 255, 255, 0.08);
      color: white;
    }
    .mobile-nav-user-links a.admin { color: #10b981; }
    .mobile-nav-user-links a.logout { color: #f87171; }

    @media (max-width: 900px) {
      .nav-main { display: none; }
      .mobile-menu-btn { display: flex; align-items: center; justify-content: center; }
      .mobile-nav { display: flex; }
      .user-menu { display: none; }
      .nav-auth-btn { display: none; }
    }
    @media (max-width: 600px) {
      .header-content { padding: 0.75rem 20px; }
      .user-name { display: none; }
      .nav-divider { display: none; }
    }
  </style>
</head>
<body>
  <header>
    <div class="header-content">
      <a href="/" class="logo">
        <div class="logo-icon">WP</div>
        WordPress <span>Node</span>
      </a>

      <ul class="nav-main">
        <li><a href="/#features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/shop">Shop</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="https://github.com/syntex82/WordPress-Node#readme" target="_blank">Docs</a></li>
      </ul>

      <div class="nav-right">
        <a href="/cart" class="nav-icon-btn" title="Cart">
          <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
          <span class="cart-count" id="cartCount" style="display:none">0</span>
        </a>

        <div class="nav-divider"></div>

        {{#if user}}
        <div class="user-menu">
          <div class="user-menu-toggle">
            <div class="user-avatar">{{substring user.name 0 1}}</div>
            <span class="user-name">{{user.name}}</span>
            <svg width="12" height="12" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"/></svg>
          </div>
          <div class="user-dropdown">
            <div class="dropdown-header">
              <strong>{{user.name}}</strong>
              <span>{{user.email}}</span>
            </div>
            <div class="dropdown-links">
              <a href="/my-account"><span>👤</span> My Account</a>
              <a href="/my-courses"><span>📚</span> My Courses</a>
              <a href="/admin" class="admin"><span>⚙️</span> Admin Panel</a>
              <a href="/logout" class="logout"><span>🚪</span> Sign Out</a>
            </div>
          </div>
        </div>
        {{else}}
        <a href="/login" class="nav-auth-btn login">Sign In</a>
        <a href="/register" class="nav-auth-btn register">Get Started</a>
        {{/if}}

        <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle menu">
          <svg class="menu-open" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 12h18M3 6h18M3 18h18"/></svg>
          <svg class="menu-close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></svg>
        </button>
      </div>
    </div>
  </header>

  <!-- Mobile Navigation -->
  <nav class="mobile-nav" id="mobileNav">
    <ul class="mobile-nav-links">
      <li><a href="/">🏠 Home</a></li>
      <li><a href="/pricing">💎 Pricing</a></li>
      <li><a href="/courses">📚 Courses</a></li>
      <li><a href="/shop">🛍️ Shop</a></li>
      <li><a href="/blog">📝 Blog</a></li>
      <li><a href="/cart">🛒 Cart</a></li>
      {{#if user}}
      <li style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1rem; padding-top: 1rem;"><a href="/my-courses">📖 My Courses</a></li>
      <li><a href="/my-account">👤 My Account</a></li>
      <li><a href="/admin">⚙️ Admin Panel</a></li>
      <li><a href="/logout">🚪 Sign Out</a></li>
      {{else}}
      <li style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 1rem; padding-top: 1rem;"><a href="/login">🔐 Sign In</a></li>
      <li><a href="/register">✨ Get Started</a></li>
      {{/if}}
    </ul>
  </nav>

  <main style="padding-top: 60px;">

<script>
// Update cart count from localStorage
(function() {
  try {
    var cart = JSON.parse(localStorage.getItem('cart') || '[]');
    var count = cart.reduce(function(sum, item) { return sum + (item.quantity || 1); }, 0);
    var el = document.getElementById('cartCount');
    if (el && count > 0) { el.textContent = count; el.style.display = 'flex'; }
  } catch(e) {}
})();

// Mobile menu toggle
var mobileMenuBtn = document.getElementById('mobileMenuBtn');
var mobileNav = document.getElementById('mobileNav');
if (mobileMenuBtn && mobileNav) {
  mobileMenuBtn.addEventListener('click', function() {
    mobileMenuBtn.classList.toggle('active');
    mobileNav.classList.toggle('open');
    document.body.style.overflow = mobileNav.classList.contains('open') ? 'hidden' : '';
  });
  // Close menu when clicking a link
  mobileNav.querySelectorAll('a').forEach(function(link) {
    link.addEventListener('click', function() {
      mobileMenuBtn.classList.remove('active');
      mobileNav.classList.remove('open');
      document.body.style.overflow = '';
    });
  });
}
</script>

