geo/web/src/App.svelte

<script>
  import { onMount, tick } from 'svelte';
  import './app.css';

  // Importer les composants communs
  import Header from './components/Header.svelte';
  import Footer from './components/Footer.svelte';
  import CookieConsent from './components/CookieConsent.svelte';
  import { hasUserMadeCookieChoice, startAnonymousTracking, stopAnonymousTracking } from './lib/cookieService.js';
  import { trackPageView } from './lib/analyticsService.js';

  // Importer les pages
import Accueil from './pages/Accueil.svelte';
import Fonctionnalites from './pages/Fonctionnalites.svelte';
import Contact from './pages/Contact.svelte';
import PolitiqueConfidentialite from './pages/PolitiqueConfidentialite.svelte';
import ConditionsUtilisation from './pages/ConditionsUtilisation.svelte';
import MentionsLegales from './pages/MentionsLegales.svelte';

  // État pour la page active
  let activePage = 'accueil';

  // État pour la modal des cookies
  let showCookieConsent = false;

  // Fonction pour gérer le changement de page basé sur le pathname
  function handleRouteChange() {
    // Extraire le pathname sans le premier slash
    const path = window.location.pathname.slice(1) || 'accueil';
    activePage = path || 'accueil';
    
    // Suivre la page vue si l'utilisateur a accepté les cookies
    trackPageView(activePage);
  }

  // Gérer le consentement aux cookies
  function handleCookieConsent(event) {
    if (event.detail.accepted) {
      startAnonymousTracking();
    } else {
      stopAnonymousTracking();
    }
    showCookieConsent = false;
  }

  onMount(async () => {
    // Initialiser la page active au chargement
    handleRouteChange();

    // Configurer le gestionnaire de navigation pour écouter les clics sur les liens
    // et intercepter la navigation
    document.addEventListener('click', (e) => {
      // Trouver le plus proche élément <a> depuis la cible du clic
      const link = e.target.closest('a');
      
      // Si nous n'avons pas de lien ou si le lien est externe ou a un attribut target,
      // laisser le navigateur gérer normalement
      if (!link || !link.href.startsWith(window.location.origin) || 
          link.target || link.hasAttribute('download') || 
          link.getAttribute('rel') === 'external') {
        return;
      }
      
      // Empêcher le comportement par défaut (navigation du navigateur)
      e.preventDefault();
      
      // Extraire le chemin relatif de l'URL
      const url = new URL(link.href);
      const path = url.pathname;
      
      // Mettre à jour l'historique du navigateur sans recharger la page
      window.history.pushState({}, '', path);
      
      // Mettre à jour la page active
      const pagePath = path.slice(1) || 'accueil';
      activePage = pagePath;
      
      // Suivre la page vue si l'utilisateur a accepté les cookies
      trackPageView(activePage);
    });
    
    // Écouter les événements popstate (boutons retour/avant du navigateur)
    window.addEventListener('popstate', handleRouteChange);

    // Vérifier si l'utilisateur a déjà fait un choix pour les cookies
    // Permettre au DOM de se charger complètement avant d'afficher la modale
    await tick();
    
    // Si l'utilisateur n'a pas encore fait de choix, afficher la modal
    if (!hasUserMadeCookieChoice()) {
      showCookieConsent = true;
    } else {
      // Si l'utilisateur a déjà accepté, démarrer le suivi
      startAnonymousTracking();
      // Si l'utilisateur a déjà refusé, s'assurer que le suivi est désactivé
      stopAnonymousTracking();
    }

    // Nettoyer les écouteurs d'événement lors du démontage
    return () => {
      window.removeEventListener('popstate', handleRouteChange);
    };
  });
</script>

<div class="fixed inset-0 bg-gradient-to-t from-blue-900 to-white z-[-20]">
  <div class="absolute inset-0 z-[-10]">
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
      <pattern id="pattern-circles" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
        <circle id="pattern-circle" cx="10" cy="10" r="5" fill="#FFF" opacity="0.1"></circle>
      </pattern>
      <rect id="rect" x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)"></rect>
    </svg>
  </div>
</div>

<main class="flex flex-col min-h-screen relative" class:blur-effect={showCookieConsent}>
  <Header />

  <div class="flex-grow">
    {#if activePage === 'accueil'}
      <Accueil />
    {:else if activePage === 'fonctionnalites'}
      <Fonctionnalites />
    {:else if activePage === 'contact'}
      <Contact />
    {:else if activePage === 'politique-confidentialite'}
      <PolitiqueConfidentialite />
    {:else if activePage === 'conditions-utilisation'}
      <ConditionsUtilisation />
    {:else if activePage === 'mentions-legales'}
      <MentionsLegales />
    {:else}
      <!-- Page 404 simple -->
      <div class="container mx-auto px-4 py-16 text-center">
        <h1 class="text-4xl font-bold mb-4">Page non trouvée</h1>
        <p class="mb-8">La page que vous recherchez n'existe pas.</p>
        <a href="/accueil" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> Retour à l'accueil </a>
      </div>
    {/if}
  </div>

  <Footer />
</main>

{#if showCookieConsent}
  <CookieConsent on:consent={handleCookieConsent} />
{/if}