  </main>

  <footer style="background: #020617; color: white; padding: 80px 40px 40px; margin-top: 0;">
    <div class="footer-content" style="max-width: 1200px; margin: 0 auto;">
      <div class="footer-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; margin-bottom: 3rem;">
        <!-- About Section -->
        <div class="footer-section">
          <div style="display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;">
            <div style="width: 36px; height: 36px; background: linear-gradient(135deg, #10b981 0%, #6366f1 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem;">WP</div>
            <span style="font-weight: 700; font-size: 1.1rem;">WordPress Node</span>
          </div>
          <p style="color: #64748b; line-height: 1.7; font-size: 0.95rem;">The modern WordPress alternative built with Node.js. Enterprise-grade CMS with LMS, eCommerce, and more.</p>
        </div>

        <!-- Product -->
        <div class="footer-section">
          <h3 style="font-size: 0.85rem; margin-bottom: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #64748b;">Product</h3>
          <ul style="list-style: none;">
            <li style="margin-bottom: 0.75rem;"><a href="#features" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Features</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node#readme" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Documentation</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node/releases" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Releases</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="/admin" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Admin Panel</a></li>
          </ul>
        </div>

        <!-- Resources -->
        <div class="footer-section">
          <h3 style="font-size: 0.85rem; margin-bottom: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #64748b;">Resources</h3>
          <ul style="list-style: none;">
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">GitHub Repository</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node/issues" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Report Issues</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node/discussions" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">Discussions</a></li>
            <li style="margin-bottom: 0.75rem;"><a href="https://github.com/syntex82/WordPress-Node/blob/main/LICENSE" target="_blank" style="color: #94a3b8; text-decoration: none; transition: color 0.3s ease; font-size: 0.95rem;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">License</a></li>
          </ul>
        </div>

        <!-- Tech Stack -->
        <div class="footer-section">
          <h3 style="font-size: 0.85rem; margin-bottom: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #64748b;">Built With</h3>
          <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
            <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; color: #94a3b8;">Node.js</span>
            <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; color: #94a3b8;">NestJS</span>
            <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; color: #94a3b8;">React</span>
            <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; color: #94a3b8;">PostgreSQL</span>
            <span style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 6px; font-size: 0.8rem; color: #94a3b8;">Prisma</span>
          </div>
        </div>
      </div>

      <!-- Footer Bottom -->
      <div class="footer-bottom" style="border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
        <p style="color: #64748b; font-size: 0.9rem;">&copy; 2024 WordPress Node. Open source under MIT License.</p>
        <a href="https://github.com/syntex82/WordPress-Node" target="_blank" style="display: inline-flex; align-items: center; gap: 0.5rem; color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.3s;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#94a3b8'">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          Star on GitHub
        </a>
      </div>
    </div>
  </footer>

  <!-- Analytics Tracking -->
  <script src="/api/plugins/analytics/tracker.js"></script>
  <script>
    if (typeof WPAnalytics !== 'undefined') {
      WPAnalytics.init({ apiUrl: '/api/analytics' });
    }
  </script>
  <!-- PWA Service Worker Registration -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(reg) {
          console.log('PWA: Service Worker registered', reg.scope);
        }).catch(function(err) {
          console.log('PWA: Service Worker registration failed', err);
        });
      });
    }
    var deferredPrompt;
    window.addEventListener('beforeinstallprompt', function(e) {
      e.preventDefault();
      deferredPrompt = e;
    });
    function installPWA() {
      if (deferredPrompt) {
        deferredPrompt.prompt();
        deferredPrompt.userChoice.then(function(result) {
          deferredPrompt = null;
        });
      }
    }
  </script>
</body>
</html>

