{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}Oso@80{% endblock %}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <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=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link rel="stylesheet" href="{% static 'css/style.css' %}" />
  <style> 
    /* Keyframe Animations */
    @keyframes slideIn {
        from { transform: translateX(-100%) scale(0.8); opacity: 0; }
        to   { transform: translateX(0) scale(1); opacity: 1; }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes bounceIn {
        0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
        50%  { transform: scale(1.05) rotate(5deg); }
        70%  { transform: scale(0.9) rotate(-2deg); }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    /* Desktop Navigation Links */
    .nav-link {
        display: inline-flex;
        align-items: center;
        border-radius: 0.75rem;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        color: #F7F1EA;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .nav-link:hover {
        border-bottom: 2px solid #584e00;
        color: #C9A45C;
    }

    .nav-link.active {
        color: #C9A45C;
        font-weight: 700;
    }

    /* Mobile Menu Links */
    .mobile-menu-link {
        position: relative;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 1rem 1.5rem;
        margin: 1.5rem 0;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        overflow: hidden;
        text-decoration: none;
        color: #F7F1EA;
        background: transparent;
        border: 1px solid rgba(237,227,215,0.15);
        font-weight: 500;
    }

    .mobile-menu-link:hover {
        background: #180712;
        transform: translateX(3px);
        box-shadow: 0 4px 20px rgba(201,164,92,0.3);
        border-color: #584e00;
    }

    .mobile-menu-link.active {
        background: #584e00;
        color: #F7F1EA;
        font-weight: 700;
        border-color: #584e00;
        box-shadow: 0 2px 12px rgba(201,164,92,0.25);
    }

    .mobile-menu-link i {
        margin-right: 1rem;
        font-size: 1.2rem;
        width: 24px;
        text-align: center;
        transition: transform 0.3s ease;
    }

    .mobile-menu-link:hover i {
        transform: scale(1.2) rotate(5deg);
    }

    /* Mobile Menu Backdrop */
    .mobile-menu-backdrop {
        backdrop-filter: blur(12px);
        background: rgba(0, 0, 0, 0.7);
    }

    /* Brand Logo */
    .brand-logo {
        cursor: pointer;
    }

    /* Mobile overrides */
    @media (max-width: 767px) {
        .nav-link {
            padding: 0.5rem 0.75rem;
        }

        .mobile-menu-link {
            padding: 1rem 1.25rem;
        }
    }
  </style>

</head>
<body>
    <!-- Mobile Menu -->
    <!-- Enhanced Navigation -->
    <nav class="bg-transparent backdrop-blur-xl fixed w-full z-50 shadow-lg">
      
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
            <div class="brand-logo flex items-center group" onclick="window.location.href = '{% url 'index' %}'">
                <div class="relative">
                <div class="flex items-center space-x-2">
                     <div class="text-3xl font-bold text-[#F7F1EA] tracking-wide select-none">
                      <span class="rsvp-nav__brand" onclick="window.location.href='{% url 'index' %}'">OSO <span class="gold-text">@80</span></span>
                    </div>
                </div>
                </div>
            </div>
            
            <div id="desktop-nav" class="space-x-1 tracking-wider text-gray-700" style="display: none;">
                <a href="{% url 'index' %}" class="nav-link" data-page="home"> Home</a>
                <a href="{% url 'rsvp' %}" class="nav-link" data-page="rsvp"> RSVP Here</a>
            </div>
          
           <button id="mobile-menu-btn" class="md:hidden p-3 rounded-xl hover:bg-[#C9A45C]/20 transition-all duration-300 hover:scale-110">
             <i class="fas fa-bars text-2xl text-[#F7F1EA]"></i>
           </button>
        </div>
      </div>
    </nav>

    <!-- Ultra-Enhanced Mobile Menu -->
    <div id="mobile-menu" class="hidden fixed inset-0 mobile-menu-backdrop z-40 md:hidden fade-in">
      <div class="bg-[#180712]/90 backdrop-blur-xl w-80 h-full shadow-2xl slide-in relative overflow-hidden">
        <!-- Decorative Background -->
        <div class="absolute inset-0 opacity-5">
          <div class="absolute top-10 right-10 w-32 h-32 bg-gradient-to-br from-green-400 to-yellow-400 rounded-full blur-3xl"></div>
          <div class="absolute bottom-20 left-10 w-40 h-40 bg-gradient-to-tr from-yellow-400 to-green-400 rounded-full blur-3xl"></div>
        </div>
        
        <!-- Mobile Menu Header -->
        <div class="bg-[#060608] p-3 relative pt-20">
          <div class="absolute inset-0 bg-white/5"></div>
        </div>
        
        <!-- Mobile Menu Content -->
        <div class="p-6 space-y-1 relative">
          <a href="{% url 'index' %}" class="mobile-menu-link" data-page="home">
            <i class="fas fa-home text-[#C9A45C]"></i>
            <div>
              <span class="font-semibold">Home</span>
            </div>
          </a>
          <a href="{% url 'rsvp' %}" class="mobile-menu-link" data-page="rsvp">
            <i class="fas fa-user-plus text-[#C9A45C]"></i>
            <div>
              <span class="font-semibold">RSVP Here</span>
            </div>
          </a>
        </div>
        
          <!-- Mobile Menu Footer -->
          <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-[#EDE3D7]/20 backdrop-blur-sm bg-[#060608]/50">
           <div>
             <div class="flex justify-center items-center space-x-2 text-[#F7F1EA] mb-2">
               <i class="fas fa-calendar-alt text-[#C9A45C]"></i>
               <span>July 04, 2026</span>
             </div>
             <div class="flex justify-center items-center space-x-2 text-[#F7F1EA]">
               <i class="fas fa-map-marker-alt text-[#E8B7B1]"></i>
               <span>Strictly by invitation</span>
             </div>
           </div>
         </div>
      </div>
    </div>

    {% block content %} {% endblock %}

  <script src="{% static 'js/main.js' %}"></script>

  <script>
      // Get current page from URL or set default
      function getCurrentPage() {
        const path = window.location.pathname;
        if (path.includes('rsvp')) return 'rsvp';
        if (path === '/' || path.includes('index')) return 'home';
        return 'home';
      }

      // Set active navigation state with enhanced visual feedback
      function setActiveNavigation() {
        const currentPage = getCurrentPage();
        const navLinks = document.querySelectorAll('.nav-link, .mobile-menu-link');
        
        navLinks.forEach(link => {
          link.classList.remove('active');
          if (link.getAttribute('data-page') === currentPage) {
            link.classList.add('active');
            link.style.animation = 'none';
          } else {
            link.style.animation = 'none';
          }
        });
      }

      // Enhanced navigate to section with smooth animations
      function navigateToSection(sectionId) {
        // Close mobile menu with animation
        const mobileMenu = document.getElementById("mobile-menu");
        if (!mobileMenu.classList.contains("hidden")) {
          mobileMenu.classList.add("hidden");
        }
        
        const currentPath = window.location.pathname;
        
        // If not on homepage, navigate to homepage first
        if (!currentPath.includes('index') && currentPath !== '/') {
          window.location.href = `{% url 'index' %}#${sectionId}`;
          return;
        }
        
        // If already on homepage, scroll to section with enhanced animation
        const element = document.getElementById(sectionId);
        if (element) {
          element.style.transform = 'scale(0.98)';
          element.style.transition = 'transform 0.3s ease';
          
          element.scrollIntoView({ 
            behavior: "smooth", 
            block: "start" 
          });
          
          setTimeout(() => {
            element.style.transform = 'scale(1)';
          }, 500);
          
          window.history.pushState(null, null, `#${sectionId}`);
        }
      }

      // Enhanced mobile menu toggle with better animations
      document.getElementById("mobile-menu-btn").addEventListener("click", function () {
        const menu = document.getElementById("mobile-menu");
        const btn = this;
        const icon = btn.querySelector('i');
        
        btn.style.transform = 'scale(0.95)';
        setTimeout(() => {
          btn.style.transform = 'scale(1)';
        }, 150);
        
        if (menu.classList.contains("hidden")) {
          menu.classList.remove("hidden");
          menu.offsetHeight;
          icon.classList.remove('fa-bars');
          icon.classList.add('fa-times');
        } else {
          menu.classList.add("hidden");
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });

      // Enhanced backdrop click handling
      document.getElementById("mobile-menu").addEventListener("click", function (e) {
        if (e.target === this) {
          this.classList.add("hidden");
          const icon = document.querySelector('#mobile-menu-btn i');
          icon.classList.remove('fa-times');
          icon.classList.add('fa-bars');
        }
      });

      // Initialize active navigation on page load
      document.addEventListener('DOMContentLoaded', function() {
        setActiveNavigation();
        
        // Add entrance animations to navigation items
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach((link, index) => {
          link.style.opacity = '1';
          link.style.transform = 'translateY(0)';
        });
      });

      // Show desktop nav on md screens and above
        function handleNavVisibility() {
            const desktopNav = document.getElementById('desktop-nav');
            if (window.innerWidth >= 768) {
                desktopNav.style.display = 'flex';
            } else {
                desktopNav.style.display = 'none';
            }
        }

        handleNavVisibility();
        window.addEventListener('resize', handleNavVisibility);
  </script>

</body>
</html>