{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% block meta_description %}FlashSale - Book your flash sale, upload products, and sell to the Ghanaian market.{% endblock %}">
    <title>{% block title %}{{ PLATFORM_NAME }}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    {% block extra_css %}{% endblock %}
    {% block head_extra %}{% endblock %}
</head>
<body>
    {% block navbar %}
    <nav class="navbar" id="navbar">
        <div class="navbar__inner">
            <a href="/" class="navbar__logo">Flash<span>Sale</span></a>
            <div class="navbar__links">
                <a href="/" class="navbar__link {% if request.path == '/' %}navbar__link--active{% endif %}">Home</a>
                <a href="{% url 'discovery:list' %}" class="navbar__link {% if request.path == '/sales/' %}navbar__link--active{% endif %}">Live Sales</a>
                {% if user.is_authenticated %}
                    {% if user.is_superuser %}
                        <a href="{% url 'superadmin:overview' %}" class="badge badge--live" style="margin-right: 8px;">Super Admin</a>
                    {% endif %}
                    <a href="{% url 'dashboard:overview' %}" class="navbar__link">Dashboard</a>
                    <a href="{% url 'core_auth:logout' %}" class="btn btn--ghost btn--sm">Log Out</a>
                {% else %}
                    <a href="{% url 'core_auth:login' %}" class="btn btn--secondary btn--sm">Log In</a>
                    <a href="/#booking" class="btn btn--primary btn--sm">Book Your Sale</a>
                {% endif %}
            </div>
        </div>
    </nav>
    {% endblock %}

    {% block messages %}
    {% if messages %}
    <div class="container" style="margin-top: var(--space-4);">
        {% for message in messages %}
        <div class="alert alert--{{ message.tags }}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% endblock %}

    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Mobile Bottom Navigation Bar -->
    <nav class="bottom-nav">
        <a href="/" class="bottom-nav__item {% if request.path == '/' %}bottom-nav__item--active{% endif %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
            <span>Home</span>
        </a>
        <a href="{% url 'discovery:list' %}" class="bottom-nav__item {% if request.path == '/sales/' %}bottom-nav__item--active{% endif %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            <span>Live Sales</span>
        </a>
        <a href="/#booking" class="bottom-nav__item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Book</span>
        </a>
        {% if user.is_authenticated %}
        <a href="{% url 'dashboard:overview' %}" class="bottom-nav__item {% if 'dashboard' in request.path %}bottom-nav__item--active{% endif %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
            <span>Dashboard</span>
        </a>
        {% else %}
        <a href="{% url 'core_auth:login' %}" class="bottom-nav__item {% if 'auth' in request.path %}bottom-nav__item--active{% endif %}">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
            <span>Log In</span>
        </a>
        {% endif %}
    </nav>

    {% block footer %}
    <footer class="footer">
        <div class="container">
            <div class="footer__grid">
                <div>
                    <div class="footer__brand">Flash<span>Sale</span></div>
                    <p class="footer__desc">The flash sale platform built for Ghanaian businesses. Book, upload, and sell.</p>
                </div>
                <div>
                    <h4 class="footer__heading">Platform</h4>
                    <a href="/" class="footer__link">Home</a>
                    <a href="{% url 'discovery:list' %}" class="footer__link">Live Sales</a>
                    <a href="/#how-it-works" class="footer__link">How It Works</a>
                    <a href="/#faq" class="footer__link">FAQ</a>
                </div>
                <div>
                    <h4 class="footer__heading">Sellers</h4>
                    <a href="/#booking" class="footer__link">Book a Sale</a>
                    <a href="{% url 'core_auth:login' %}" class="footer__link">Seller Login</a>
                </div>
                <div>
                    <h4 class="footer__heading">Legal</h4>
                    <a href="{% url 'businesses:legal' %}#terms" class="footer__link">Terms of Service</a>
                    <a href="{% url 'businesses:legal' %}#privacy" class="footer__link">Privacy Policy</a>
                </div>
            </div>
            <div class="footer__bottom">
                <span>&copy; {{ PLATFORM_NAME }} 2026. All rights reserved. Powered by Mirjy Technologies Ltd.</span>
                <span class="footer__bottom-links">
                    <a href="{% url 'businesses:legal' %}#terms" class="footer__bottom-link">Terms</a>
                    <span style="opacity:0.3;">&bull;</span>
                    <a href="{% url 'businesses:legal' %}#privacy" class="footer__bottom-link">Privacy</a>
                </span>
            </div>
        </div>
    </footer>
    {% endblock %}


    <script>
    const revealElements = document.querySelectorAll('.reveal');
    if (revealElements.length > 0) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.1 });

        revealElements.forEach(el => observer.observe(el));
    }
    </script>
    <script src="{% static 'js/loading.js' %}"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>

