<?php

$PAGE = substr($_SERVER['REQUEST_URI'], 1);
$PAGEURL = __DIR__.'/html/'.$PAGE.'.html';

if (!file_exists($PAGEURL)) {
  $PAGEURL = __DIR__.'/html/index.html';
}

?><!DOCTYPE html>
<html lang="fr" class="h-full antialiased">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="description" content="Fournisseur d'applications d'entreprise personnalisées depuis 2015." />
  <title>DATAMIX.IO</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Dark mode: respect OS, allow toggle, remember choice
    (function () {
      const ls = localStorage.getItem("pm-theme");
      const mql = window.matchMedia("(prefers-color-scheme: dark)");
      function set(dark) {
        document.documentElement.classList.toggle("dark", dark);
        localStorage.setItem("pm-theme", dark ? "dark" : "light");
      }
      if (ls === "dark" || (!ls && mql.matches)) set(true);
      if (ls === "light") set(false);
      mql.addEventListener("change", e => { if (!localStorage.getItem("pm-theme")) set(e.matches); });
      window.toggleTheme = () => set(!document.documentElement.classList.contains("dark"));
    })();
  </script>
  <style>
    /* Monochrome only (pure black/white). Use transparency for nuance. */
    :root { color-scheme: light dark; }
  </style>
</head>
<body class="h-full bg-white text-black dark:bg-black dark:text-white">

<!-- Top bar -->
<header class="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-black/60 shadow-md">
  <div class="mx-auto max-w-screen-xl px-6">
    <div class="flex items-center justify-between py-4">
      <a href="/" class="inline-flex items-center gap-2">
        <img class="h-7 w-auto block dark:hidden" src="/gfx/logos/datamix-black.png" />
        <img class="h-7 w-auto hidden dark:block" src="/gfx/logos/datamix-white.png" />
      </a>
      <div class="flex items-center gap-3">
        <a href="/support" class="text-sm underline decoration-black/20 underline-offset-4 hover:decoration-black dark:decoration-white/30 dark:hover:decoration-white">Support</a>
        <a href="https://agenda.pm/technique" class="rounded border border-black px-3 py-1 text-sm hover:bg-black hover:text-white dark:border-white dark:hover:bg-white dark:hover:text-black"><span class="hidden md:inline">Prendre </span>RDV</a>
      </div>
    </div>
  </div>
</header>
  
<?php 

include($PAGEURL);

?>

  <!-- Footer -->
  <footer class="border-t border-black/10 py-10 dark:border-white/10">
    <div class="mx-auto max-w-screen-xl px-6">
      <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
        <p class="text-sm opacity-70">© 2015-2025 DATAMIX.IO</p>
        <nav class="flex items-center gap-4 text-sm">
          <a class="underline decoration-black/20 underline-offset-4 hover:decoration-black dark:decoration-white/30 dark:hover:decoration-white" href="/support">Aide</a>
          <a class="underline decoration-black/20 underline-offset-4 hover:decoration-black dark:decoration-white/30 dark:hover:decoration-white" href="/legal">Légal</a>
          <a class="underline decoration-black/20 underline-offset-4 hover:decoration-black dark:decoration-white/30 dark:hover:decoration-white" href="https://my.paperless.media/signup">Démo</a>
        </nav>
      </div>
    </div>
  </footer>
</body>
</html>

