{# app/templates/platform/base.html #}
{# Base template for platform pages (homepage, about, faq, pricing, signup, etc.) #}
<!DOCTYPE html>
<html lang="{{ current_language|default('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 %}{{ platform.name if platform else 'Wizard' }}{% endblock %}</title>

    {# SEO Meta Tags #}
    <meta name="description" content="{% block meta_description %}{{ platform.get_translated_description(current_language|default('fr'), platform.default_language|default('fr')) if platform else '' }}{% 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') }}">

    {# Flag icons for language selector #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.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 bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center">
                            <span class="text-white font-bold text-xl">{{ (platform.name or 'W')[0] }}</span>
                        </div>
                        <span class="text-xl font-bold text-gray-900 dark:text-white">
                            {{ platform.name if platform else 'Wizard' }}
                        </span>
                    </a>
                </div>

                {# Desktop Navigation (CMS-driven) #}
                <div class="hidden md:flex items-center space-x-8">
                    {% if header_pages %}
                        {% for page in header_pages %}
                        <a href="/{{ page.slug }}"
                           class="text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors">
                            {{ page.get_translated_title(current_language|default('fr')) }}
                        </a>
                        {% endfor %}
                    {% endif %}

                    {# Language selector - inline version for platform #}
                    <div x-data="platformLanguageSelector()" class="relative">
                        <button
                            @click="isOpen = !isOpen"
                            @click.outside="isOpen = false"
                            type="button"
                            class="inline-flex items-center gap-1 p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                            :class="{ 'bg-gray-100 dark:bg-gray-700': isOpen }"
                        >
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
                            <span class="text-xs font-semibold uppercase" x-text="currentLang"></span>
                        </button>
                        <div
                            x-show="isOpen"
                            x-transition
                            class="absolute right-0 z-50 mt-1 w-44 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-1"
                        >
                            <template x-for="lang in languages" :key="lang">
                                <button
                                    @click="setLanguage(lang)"
                                    type="button"
                                    class="flex items-center gap-3 w-full px-4 py-2 text-sm font-medium transition-colors"
                                    :class="currentLang === lang
                                        ? 'bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-300'
                                        : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'"
                                >
                                    <span class="fi" :class="'fi-' + flags[lang]"></span>
                                    <span x-text="names[lang]"></span>
                                    <svg x-show="currentLang === lang" class="w-4 h-4 ml-auto text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                </button>
                            </template>
                        </div>
                    </div>

                    {# Dark mode toggle #}
                    <button
                        @click="toggleDarkMode()"
                        class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
                        aria-label="{{ _('cms.platform.nav.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="{{ _('cms.platform.nav.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.get_translated_title(current_language|default('fr')) }}
                    </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 md:col-span-2">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-8 h-8 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center">
                            <span class="text-white font-bold text-xl">{{ (platform.name or 'W')[0] }}</span>
                        </div>
                        <span class="text-xl font-bold text-gray-900 dark:text-white">
                            {{ platform.name if platform else 'Wizard' }}
                        </span>
                    </div>
                    <p class="text-gray-600 dark:text-gray-400 text-sm max-w-md">
                        {{ platform.get_translated_description(current_language|default('fr'), platform.default_language|default('fr')) if platform else '' }}
                    </p>
                </div>

                {# Quick Links (from CMS footer pages) #}
                {% if footer_pages %}
                <div>
                    <h4 class="font-semibold text-gray-900 dark:text-white mb-4">{{ _("cms.platform.footer.quick_links") }}</h4>
                    <ul class="space-y-2">
                        {% 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.get_translated_title(current_language|default('fr')) }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                {% endif %}
            </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">
                        &copy; {{ current_year }} {{ platform.name if platform else 'Wizard' }}. {{ _("cms.platform.footer.all_rights_reserved") }}
                    </p>
                    <div class="flex space-x-6 mt-4 md:mt-0">
                        {% if legal_pages %}
                            {% for page in legal_pages %}
                            <a href="/{{ page.slug }}" class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors">
                                {{ page.get_translated_title(current_language|default('fr')) }}
                            </a>
                            {% endfor %}
                        {% else %}
                            {# Fallback to hardcoded links if no CMS pages #}
                            <a href="/privacy" class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors">
                                {{ _("cms.platform.footer.privacy") }}
                            </a>
                            <a href="/terms" class="text-gray-600 dark:text-gray-400 hover:text-primary text-sm transition-colors">
                                {{ _("cms.platform.footer.terms") }}
                            </a>
                        {% endif %}
                    </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');
                    }
                }
            };
        }

        // Language selector for platform pages
        function platformLanguageSelector() {
            return {
                isOpen: false,
                currentLang: '{{ current_language|default("en") }}',
                languages: {{ SUPPORTED_LANGUAGES|default(['en', 'fr', 'de', 'lb'])|tojson }},
                names: {
                    'en': 'English',
                    'fr': 'Français',
                    'de': 'Deutsch',
                    'lb': 'Lëtzebuergesch'
                },
                flags: {
                    'en': 'gb',
                    'fr': 'fr',
                    'de': 'de',
                    'lb': 'lu'
                },
                async setLanguage(lang) {
                    if (lang === this.currentLang) {
                        this.isOpen = false;
                        return;
                    }
                    try {
                        const response = await fetch('/api/v1/platform/language/set', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({ language: lang })
                        });
                        if (response.ok) {
                            this.currentLang = lang;
                            window.location.reload();
                        }
                    } catch (error) {
                        console.error('Failed to set language:', error);
                    }
                    this.isOpen = false;
                }
            };
        }
    </script>

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