<?php

declare(strict_types=1);

require_once __DIR__ . '/auth.php';
startSecureSession();

// 🎀 Gestion du changement de langue depuis l'URL (FR/EN) 🎀
if (isset($_GET['lang'])) {
    $requestedLang = strtolower((string)$_GET['lang']);
    if (in_array($requestedLang, ['fr', 'en'], true)) {
        $_SESSION['lang'] = $requestedLang;
    }
}

// 🎀 Langue active conservee en session, FR par defaut 🎀
$lang = isset($_SESSION['lang']) && in_array($_SESSION['lang'], ['fr', 'en'], true)
    ? (string)$_SESSION['lang']
    : 'fr';

// 🎀 Dictionnaire de traduction simple pour la page d'accueil 🎀
$translations = [
    'fr' => [
        'memories'         => 'Mes souvenirs',
        'create_story'     => 'Creer ton histoire',
        'about'            => 'Qui sommes-nous ?',
        'account'          => 'Mon compte',
        'greeting'         => 'Bonjour',
        'profile'          => 'Profil',
        'logout'           => 'Deconnexion',
        'login'            => 'Connexion',
        'language'         => 'Changer la langue',
        'home_title'       => 'Bienvenue sur MindGallery',
        'home_text'        => 'Immortalise ce qui compte!',
        'btn_start'        => 'Commencer',
        'btn_explore'      => 'Explorer',
        'concept_title'    => 'Le concept',
        'concept_text'     => "C'est de créer son propre endroit en choisissant le lieux, un univers que vous voulez, soit privé et/ou public où vous pouvez mettre vos photos et vidéo. Vous pouvez après les visualisé pour revoir vos souvenirs en réalité virtuelle avec un casque ou en lançant la vidéo en qualité supérieur sur votre ordinateur ou mobile/tablette.",
        'share_title'      => 'Partage',
        'share_text'       => "Vous pouvez partager vos souvenirs avec vos amis que vous avez ajouté. Vous avez également une formule ou vous visualisé à plusieurs en même temps si vous disposez de plusieurs casques de réalité virtuel.",
        'partners_title'   => 'Nos partenaires',
        'partners_text'    => 'Nos partenaires commerciaux. Vous disposez d\'un code de -15% sur le site de casque virtuel du site Apple.',
        'footer_memories'  => 'Les Souvenirs',
        'footer_create'    => 'Créer Ton Histoire',
        'footer_about'     => 'Qui Sommes-Nous ?',
        'footer_copy'      => '© 2026 MindGallery – Tous droits réservés.',
    ],
    'en' => [
        'memories'         => 'My memories',
        'create_story'     => 'Create your story',
        'about'            => 'About us',
        'account'          => 'My account',
        'greeting'         => 'Hello',
        'profile'          => 'Profile',
        'logout'           => 'Log out',
        'login'            => 'Log in',
        'language'         => 'Change language',
        'home_title'       => 'Welcome to MindGallery',
        'home_text'        => 'Immortalize what matters!',
        'btn_start'        => 'Get started',
        'btn_explore'      => 'Explore',
        'concept_title'    => 'The concept',
        'concept_text'     => 'Create your own space by choosing the location, a universe you want, either private or public, where you can add your photos and videos. You can then visualize them to relive your memories in virtual reality with a headset, or by playing the video in high quality on your computer or mobile/tablet.',
        'share_title'      => 'Share',
        'share_text'       => 'You can share your memories with friends you have added. You also have an option to experience them together simultaneously if you have multiple virtual reality headsets.',
        'partners_title'   => 'Our partners',
        'partners_text'    => 'Our commercial partners. You have a -15% discount code on the Apple VR headset website.',
        'footer_memories'  => 'Memories',
        'footer_create'    => 'Create Your Story',
        'footer_about'     => 'About Us',
        'footer_copy'      => '© 2026 MindGallery – All rights reserved.',
    ],
];

$t = $translations[$lang];

// 🎀 Etat utilisateur pour adapter la navbar (connecte/non connecte) 🎀
$isLoggedIn = isUserLoggedIn();
$userName = $isLoggedIn && isset($_SESSION['user_name']) ? (string)$_SESSION['user_name'] : '';
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($lang, ENT_QUOTES, 'UTF-8') ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MindGallery</title>
    <link rel="icon" href="../image/logo3.png" type="image/png">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/style-accueil.css">
</head>
<body>
<header>
    <section class="navbar">
        <div class="logo">
            <a href="index.php">
                <img src="../image/logo3.png" alt="MindGallery Logo" class="logo-image">MindGallery
            </a>
        </div>

        <!-- 🎀 Checkbox cachee pour l'etat du menu burger 🎀 -->
        <input type="checkbox" id="menu-toggle" class="menu-toggle">

        <!-- 🎀 Bouton burger 🎀 -->
        <label for="menu-toggle" class="burger">
            <span class="burger-line"></span>
            <span class="burger-line"></span>
            <span class="burger-line"></span>
        </label>

        <nav>
            <ul>
                <li><a href="souvenir/liste-souvenirs.php"><?= htmlspecialchars($t['memories'],     ENT_QUOTES, 'UTF-8') ?></a></li>
                <li><a href="souvenir/ajout-souvenir.php"><?= htmlspecialchars($t['create_story'],  ENT_QUOTES, 'UTF-8') ?></a></li>
                <li><a href="#about"><?=                       htmlspecialchars($t['about'],         ENT_QUOTES, 'UTF-8') ?></a></li>
            </ul>

            <?php if ($isLoggedIn): ?>
                <details class="account-switch">
                    <summary class="account-icon"
                             aria-label="<?= htmlspecialchars($t['account'], ENT_QUOTES, 'UTF-8') ?>"
                             title="<?= htmlspecialchars($t['account'], ENT_QUOTES, 'UTF-8') ?>">
                        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                            <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z"/>
                        </svg>
                    </summary>
                    <div class="account-menu">
                        <p class="account-label">
                            <?= htmlspecialchars($t['greeting'], ENT_QUOTES, 'UTF-8') ?>
                            <?= htmlspecialchars($userName,      ENT_QUOTES, 'UTF-8') ?>
                        </p>
                        <a class="account-option" href="profile.php"><?= htmlspecialchars($t['profile'], ENT_QUOTES, 'UTF-8') ?></a>
                        <a class="account-option" href="logout.php"><?=  htmlspecialchars($t['logout'],  ENT_QUOTES, 'UTF-8') ?></a>
                    </div>
                </details>
            <?php else: ?>
                <a class="login-icon" href="login.php"
                   aria-label="<?= htmlspecialchars($t['login'], ENT_QUOTES, 'UTF-8') ?>"
                   title="<?= htmlspecialchars($t['login'], ENT_QUOTES, 'UTF-8') ?>">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z"/>
                    </svg>
                </a>
            <?php endif; ?>

            <!-- 🎀 Selecteur de langue PHP (remplace Google Translate) 🎀 -->
            <details class="lang-switch">
                <summary class="lang-icon"
                         aria-label="<?= htmlspecialchars($t['language'], ENT_QUOTES, 'UTF-8') ?>"
                         title="<?= htmlspecialchars($t['language'], ENT_QUOTES, 'UTF-8') ?>">
                    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                        <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm6.9 9h-3.03a15.7 15.7 0 0 0-1.24-5A8.02 8.02 0 0 1 18.9 11ZM12 4.05A13.8 13.8 0 0 1 13.86 11h-3.72A13.8 13.8 0 0 1 12 4.05ZM4.1 13h3.03a15.7 15.7 0 0 0 1.24 5A8.02 8.02 0 0 1 4.1 13Zm3.03-2H4.1a8.02 8.02 0 0 1 4.27-5 15.7 15.7 0 0 0-1.24 5ZM12 19.95A13.8 13.8 0 0 1 10.14 13h3.72A13.8 13.8 0 0 1 12 19.95ZM13 13h3.95a13.8 13.8 0 0 1-1.13 4.02A8 8 0 0 1 13 13Zm3.95-2H13a8 8 0 0 1 2.82-4.02A13.8 13.8 0 0 1 16.95 11ZM11 13a8 8 0 0 1-2.82 4.02A13.8 13.8 0 0 1 7.05 13Zm-3.95-2a13.8 13.8 0 0 1 1.13-4.02A8 8 0 0 1 11 11Z"/>
                    </svg>
                </summary>
                <div class="lang-menu">
                    <a class="lang-option <?= $lang === 'fr' ? 'is-active' : '' ?>" href="?lang=fr">FR</a>
                    <a class="lang-option <?= $lang === 'en' ? 'is-active' : '' ?>" href="?lang=en">EN</a>
                </div>
            </details>
        </nav>
    </section>
</header>

<main class="home-main">
    <section class="home-card">
        <div class="home-content">
            <img src="../image/image-accueil.jpg" alt="Musée de souvenirs" class="home-image">
            <div class="home-description">
                <h1><?= htmlspecialchars($t['home_title'], ENT_QUOTES, 'UTF-8') ?></h1>

                <div class="separation"><span class="separation-line"></span></div>

                <div class="home-text">
                    <h2><?= htmlspecialchars($t['home_text'], ENT_QUOTES, 'UTF-8') ?></h2>
                </div>
                <div class="home-img">
                    <img src="../image/cléduo.png" alt="Clé de mémoire" class="home-key">
                </div>
            </div>
        </div>
    </section>

    <div class="separation"><span class="separation-line"></span></div>

    <section class="about-section" id="about">
        <div class="about-project">
            <div class="about-text">
                <h2><?= htmlspecialchars($t['concept_title'], ENT_QUOTES, 'UTF-8') ?></h2>
                <p><?= htmlspecialchars($t['concept_text'], ENT_QUOTES, 'UTF-8') ?></p>
                <div class="home-button">
                    <a href="#" class="home-button-right"><?= htmlspecialchars($t['btn_start'],   ENT_QUOTES, 'UTF-8') ?></a>
                </div>
            </div>
            <div class="about-image">
                <img src="../image/dauphin.jpg" alt="À propos du concept de MindGallery">
            </div>
        </div>

        <div class="separation"><span class="separation-line"></span></div>

        <div class="about-project">
            <div class="about-image">
                <img src="../image/partage .jpg" alt="Partage de souvenirs MindGallery">
            </div>
            <div class="about-text">
                <h2><?= htmlspecialchars($t['share_title'], ENT_QUOTES, 'UTF-8') ?></h2>
                <p><?= htmlspecialchars($t['share_text'], ENT_QUOTES, 'UTF-8') ?></p>
                <div class="home-button">
                    <a href="souvenir/liste-souvenirs.php" class="home-button-left"><?= htmlspecialchars($t['btn_explore'], ENT_QUOTES, 'UTF-8') ?></a>
                </div>
            </div>
        </div>
    </section>

    <div class="separation"><span class="separation-line"></span></div>

    <section class="partenaires-section">
        <h2><?= htmlspecialchars($t['partners_title'], ENT_QUOTES, 'UTF-8') ?></h2>
        <p><?= htmlspecialchars($t['partners_text'], ENT_QUOTES, 'UTF-8') ?></p>
        <div class="carrousel" aria-label="Carrousel des partenaires">
            <div class="carrousel-track">
                <div class="carrousel-item"><img src="../image/apple vr.jpg" alt="Partenaire Apple"></div>
                <div class="carrousel-item"><img src="../image/dolby.jpg" alt="Partenaire Dolby"></div>
                <div class="carrousel-item"><img src="../image/sony.jpg" alt="Partenaire Sony"></div>
                <!-- 🎀 Duplicata pour la boucle de defilement 🎀 -->
                <div class="carrousel-item" aria-hidden="true"><img src="../image/apple vr.jpg" alt=""></div>
                <div class="carrousel-item" aria-hidden="true"><img src="../image/dolby.jpg" alt=""></div>
                <div class="carrousel-item" aria-hidden="true"><img src="../image/sony.jpg" alt=""></div>
                <div class="carrousel-item" aria-hidden="true"><img src="../image/apple vr.jpg" alt=""></div>
                <div class="carrousel-item" aria-hidden="true"><img src="../image/dolby.jpg" alt=""></div>
                <div class="carrousel-item" aria-hidden="true"><img src="../image/sony.jpg" alt=""></div>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class="footer-left">
      <nav class="footer-nav">
        <a href="../php/souvenir/liste-souvenirs.php">Les Souvenirs</a>
        <a href="../php/souvenir/ajout-souvenir.php">Créer Ton Histoire</a>   
        <a href="../php/histoire/a-propos.php">Qui Sommes-Nous ?</a>
      </nav>
      <img class="mascot" src="../image/mascotterose.png" alt="Mascotte rose" />
    </div>
 
    <div class="footer-center">
      <div class="footer-logo">
        <a href="#index.php">MIND GALLERY</a>
      </div>
        <div class="footer-copy"><?= htmlspecialchars($t['footer_copy'], ENT_QUOTES, 'UTF-8') ?></div>
    </div>

    <div class="footer-right">
        <img class="mascot" src="../image/mascotte 1.png" alt="Mascotte bleue">
        <div class="footer-social">
            <a href="#" title="X">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.746l7.73-8.835L1.254 2.25H8.08l4.26 5.632zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <a href="#" title="LinkedIn" class="social-linkedin">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <a href="#" title="Instagram">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
            </a>
            <a href="#" title="TikTok">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.18 8.18 0 004.78 1.52V6.76a4.85 4.85 0 01-1.01-.07z"/></svg>
            </a>
        </div>
    </div>
</footer>

</body>
</html>