{# app/templates/platform/base.html #}
{# Base template for platform public pages (homepage, about, faq, etc.) #}
<!DOCTYPE html>
<html lang="en" x-data="platformLayoutData()" x-bind:class="{ 'dark': dark }">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# Dynamic page title #}
    <title>{% block title %}Multi-Vendor Marketplace Platform{% endblock %}</title>

    {# SEO Meta Tags #}
    <meta name="description" content="{% block meta_description %}Leading multi-vendor marketplace platform connecting vendors with customers worldwide.{% endblock %}">
    <meta name="keywords" content="{% block meta_keywords %}marketplace, multi-vendor, e-commerce, online shopping{% endblock %}">

    {# Favicon #}
    <link rel="icon" type="image/x-icon" href="{{ url_for('static', path='favicon.ico') }}">

    {# Platform color scheme #}
    <style id="platform-theme-variables">
        :root {
            /* Platform Colors */
            --color-primary: #6366f1;      /* Indigo */
            --color-secondary: #8b5cf6;    /* Purple */
            --color-accent: #ec4899;       /* Pink */

            /* Typography */
            --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        /* Dark mode colors */
        .dark {
            --color-primary: #818cf8;
            --color-secondary: #a78bfa;
            --color-accent: #f472b6;
        }
    </style>

    {# Fonts: Local fallback + Google Fonts #}
    <link href="/static/shared/fonts/inter.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />

    {# Tailwind CSS v4 (built locally via standalone CLI) #}
    <link rel="stylesheet" href="{{ url_for('static', path='platform/css/tailwind.output.css') }}">

    {% block extra_head %}{% endblock %}
</head>

<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors duration-200">

    {# Header / Navigation #}
    <header class="sticky top-0 z-50 bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
        <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">

                {# Logo / Brand #}
                <div class="flex items-center">
                    <a href="/" class="flex items-center space-x-3">
                        <div class="w-8 h-8 rounded-lg gradient-primary flex items-center justify-center">
                            <span class="text-white font-bold text-xl">M</span>
                        </div>
                        <span class="text-xl font-bold text-gray-900 dark:text-white">
                            Marketplace
                        </span>
                    </a>
                </div>

                {# Desktop Navigation #}
                <div class="hidden md:flex items-center space-x-8">
                    {# Dynamic header navigation from CMS #}
                    {% if header_pages %}
                        {% for page in header_pages %}
                        <a href="/{{ page.slug }}"
                           class="text-gray-700 dark:text-gray-300 hover:text-primary dark:hover:text-primary font-medium transition-colors">
                            {{ page.title }}
                        </a>
                        {% endfor %}
                    {% endif %}

                    {# Dark mode toggle #}
                    <button
                        @click="toggleDarkMode()"
                        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                        aria-label="Toggle dark mode"
                    >
                        <svg x-show="!dark" class="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                        </svg>
                        <svg x-show="dark" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                        </svg>
                    </button>
                </div>

                {# Mobile menu button #}
                <div class="md:hidden">
                    <button
                        @click="mobileMenuOpen = !mobileMenuOpen"
                        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                        aria-label="Toggle menu"
                    >
                        <svg x-show="!mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                        <svg x-show="mobileMenuOpen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </div>

            {# Mobile menu #}
            <div x-show="mobileMenuOpen" x-cloak class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700">
                {% if header_pages %}
                    {% for page in header_pages %}
                    <a href="/{{ page.slug }}"
                       class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                        {{ page.title }}
                    </a>
                    {% endfor %}
                {% endif %}
            </div>
        </nav>
    </header>

    {# Main Content #}
    <main class="min-h-screen">
        {% block content %}{% endblock %}
    </main>

    {# Footer #}
    <footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">

                {# Brand Column #}
                <div class="col-span-1">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-8 h-8 rounded-lg gradient-primary flex items-center justify-center">
                            <span class="text-white font-bold text-xl">M</span>
                        </div>
                        <span class="text-xl font-bold text-gray-900 dark:text-white">
                            Marketplace
                        </span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm">
                        Connecting vendors with customers worldwide. Build your online store today.
                    </p>
                </div>

                {# Quick Links #}
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        {% if footer_pages %}
                            {% for page in footer_pages %}
                            <li>
                                <a href="/{{ page.slug }}"
                                   class="text-gray-600 dark:text-gray-400 hover:text-primary dark:hover:text-primary transition-colors">
                                    {{ page.title }}
                                </a>
                            </li>
                            {% endfor %}
                        {% endif %}
                    </ul>
                </div>

                {# Platform Links #}
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-4">Platform</h4>
                    <ul class="space-y-2">
                        <li>
                            <a href="/admin/login" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
                                Admin Login
                            </a>
                        </li>
                        <li>
                            <a href="/vendor/wizamart/login" class="text-gray-600 dark:text-gray-400 hover:text-primary transition-colors">
                                Vendor Login
                            </a>
                        </li>
                    </ul>
                </div>

                {# Contact Info #}
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-4">Contact</h4>
                    <ul class="space-y-2 text-gray-600 dark:text-gray-400 text-sm">
                        <li>support@marketplace.com</li>
                        <li>+1 (555) 123-4567</li>
                        <li>123 Business St, Suite 100</li>
                        <li>San Francisco, CA 94102</li>
                    </ul>
                </div>
            </div>

            {# Bottom Bar #}
            <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-600 dark:text-gray-400 text-sm">
                        © 2024 Marketplace Platform. All rights reserved.
                    </p>
                    <div class="flex space-x-6 mt-4 md:mt-0">
                        <a href="/privacy" class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors">
                            Privacy Policy
                        </a>
                        <a href="/terms" class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors">
                            Terms of Service
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    {# Scripts #}
    <!-- Alpine.js for interactivity -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>

    <!-- Platform layout data -->
    <script>
        function platformLayoutData() {
            return {
                // Dark mode
                dark: localStorage.getItem('darkMode') === 'true',

                // Mobile menu
                mobileMenuOpen: false,

                // Initialize
                init() {
                    // Apply dark mode on load
                    if (this.dark) {
                        document.documentElement.classList.add('dark');
                    }
                },

                // Toggle dark mode
                toggleDarkMode() {
                    this.dark = !this.dark;
                    localStorage.setItem('darkMode', this.dark);

                    if (this.dark) {
                        document.documentElement.classList.add('dark');
                    } else {
                        document.documentElement.classList.remove('dark');
                    }
                }
            };
        }
    </script>

    {% block extra_scripts %}{% endblock %}
</body>
</html>
