<!DOCTYPE html>
<html lang="{{ locale }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title & Description -->
    <title>{% if title %}{{ title }} | {{ t.site.name }}{% else %}{{ t.site.name }} | {{ t.site.shortName }}{% endif %}</title>
    <meta name="description" content="{{ description or t.site.description }}">
    <meta name="keywords" content="{{ t.site.keywords }}">
    <meta name="author" content="{{ t.site.name }}">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://o-k-i.net{{ page.url or '/' }}">

    <!-- Alternate languages -->
    <link rel="alternate" hreflang="fr" href="https://o-k-i.net/">
    <link rel="alternate" hreflang="en" href="https://o-k-i.net/en/">
    <link rel="alternate" hreflang="x-default" href="https://o-k-i.net/">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://o-k-i.net{{ page.url or '/' }}">
    <meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
    <meta property="og:description" content="{{ description or t.site.description }}">
    <meta property="og:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
    <meta property="og:image:width" content="512">
    <meta property="og:image:height" content="512">
    <meta property="og:image:alt" content="Logo {{ t.site.name }}">
    <meta property="og:locale" content="{{ t.site.og_locale }}">
    <meta property="og:site_name" content="{{ t.site.name }}">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://o-k-i.net{{ page.url or '/' }}">
    <meta name="twitter:title" content="{% if title %}{{ title }}{% else %}{{ t.site.name }} - {{ t.site.og_tagline }}{% endif %}">
    <meta name="twitter:description" content="{{ description or t.site.description }}">
    <meta name="twitter:image" content="{{ '/assets/images/logo-512x512.png' | cdn }}">
    <meta name="twitter:image:alt" content="Logo {{ t.site.name }}">

    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="{{ '/assets/images/favicon.ico' | cdn }}">
    <link rel="icon" type="image/png" sizes="512x512" href="{{ '/assets/images/logo-512x512.png' | cdn }}">
    <link rel="apple-touch-icon" href="{{ '/assets/images/logo-512x512.png' | cdn }}">

    <!-- Fonts -->
    <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=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="/assets/css/styles.css">

    <!-- JSON-LD Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "{{ t.site.name }}",
      "alternateName": "{{ t.site.shortName }}",
      "url": "https://o-k-i.net",
      "logo": "{{ '/assets/images/logo-512x512.png' | cdn }}",
      "description": "{{ t.site.description }}",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "36 Rue Lethière",
        "addressLocality": "Basse-Terre",
        "postalCode": "97100",
        "addressCountry": "GP"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "email": "kontak@o-k-i.net",
        "contactType": "customer service"
      },
      "sameAs": [
        "https://niyaj.o-k-i.net/",
        "https://kute.o-k-i.net/",
        "https://labola.o-k-i.net/",
        "https://liberapay.com/OKI/donate"
      ],
      "foundingDate": "2024",
      "nonprofitStatus": "NonprofitANBI"
    }
    </script>

    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "MusicGroup",
      "name": "DJANGOKAM",
      "genre": ["Reggae", "Zouk", "Konpa", "K-pop"],
      "url": "https://djangokam.pawol.nu",
      "sameAs": ["https://djangokam.pawol.nu"],
      "member": {
        "@type": "Organization",
        "name": "{{ t.site.name }}",
        "url": "https://o-k-i.net"
      }
    }
    </script>

    <script>
        (function() {
            // Récupérer le thème stocké ou détecter le thème système
            const storedTheme = localStorage.getItem('oki-theme');
            const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            let theme = storedTheme;

            // Si pas de préférence stockée, utiliser le thème système
            if (!storedTheme) {
                theme = systemPrefersDark ? 'dark' : 'light';
            }

            // Appliquer le thème immédiatement
            if (theme === 'light') {
                document.documentElement.classList.add('light-theme');
            }
        })();
    </script>

    <script>
        (function() {
            // Redirection automatique selon la langue du navigateur, sauf choix explicite déjà mémorisé
            var pref = localStorage.getItem('oki-lang-pref');
            if (pref) return;

            var browserLang = (navigator.language || navigator.userLanguage || '').toLowerCase();
            var wantsEnglish = browserLang.indexOf('en') === 0;
            var currentLocale = '{{ locale }}';

            if (wantsEnglish && currentLocale !== 'en') {
                window.location.replace('/en/' + window.location.hash);
            } else if (!wantsEnglish && currentLocale === 'en') {
                window.location.replace('/' + window.location.hash);
            }
        })();
    </script>
</head>
<body>
    {% include "partials/nav.njk" %}

    {{ content | safe }}

    {% include "partials/footer.njk" %}

    <script src="/assets/js/main.js"></script>
</body>
</html>
