---
import '../styles/global.css';
import { ctaLabelFor } from '../i18n/routes';
import { getRelativeLocaleUrl } from 'astro:i18n';
const { title = 'VillaFleurie', lang = 'fr', description = 'Séjours confortables au Gosier pour couples et petites familles' } = Astro.props;
const altFr = "/fr/";
const altEn = "/en/";
const nav = lang === 'en'
  ? [
      { label: 'Apartments', href: getRelativeLocaleUrl('en', '/apartments/') },
      { label: 'Reviews', href: getRelativeLocaleUrl('en', '/reviews/') },
      { label: 'Location & Access', href: getRelativeLocaleUrl('en', '/location-access/') },
      { label: 'Rates', href: getRelativeLocaleUrl('en', '/rates-availability/') },
    ]
  : [
      { label: 'Appartements', href: getRelativeLocaleUrl('fr', '/appartements/') },
      { label: 'Avis', href: getRelativeLocaleUrl('fr', '/avis/') },
      { label: 'Accès', href: getRelativeLocaleUrl('fr', '/acces/') },
      { label: 'Tarifs', href: getRelativeLocaleUrl('fr', '/tarifs-disponibilites/') },
    ];
const ctaLabel = ctaLabelFor(lang);
const homeHref = getRelativeLocaleUrl(lang, '/');
---
<!doctype html>
<html lang={lang}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title} · VillaFleurie</title>
    <meta name="description" content={description} />
    <link rel="icon" href="/assets/images/logo.png" />
    <link rel="alternate" hreflang="fr" href={altFr} />
    <link rel="alternate" hreflang="en" href={altEn} />
    <link rel="alternate" hreflang="x-default" href="/fr/" />
  </head>
  <body class="min-h-screen flex flex-col bg-white text-slate-900">
    <header class="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur">
      <nav class="mx-auto max-w-6xl p-4">
        <div class="flex items-center justify-between">
          <a href={homeHref} class="flex items-center gap-3">
            <img src="/assets/images/logo.png" alt="VillaFleurie" class="h-10 w-auto" />
            <span class="sr-only">VillaFleurie</span>
          </a>
          <div class="flex items-center gap-4">
            <button id="nav-toggle" class="md:hidden inline-flex items-center justify-center rounded-lg border border-slate-300 px-3 py-2" aria-controls="mobile-menu" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-5 w-5"><path fill-rule="evenodd" d="M3.75 6.75A.75.75 0 0 1 4.5 6h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75ZM3.75 12a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15A.75.75 0 0 1 3.75 12Zm0 5.25a.75.75 0 0 1 .75-.75h15a.75.75 0 0 1 0 1.5h-15a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
            </button>
            <div class="hidden md:flex items-center gap-4">
              {nav.map((n) => <a href={n.href} class="text-sm hover:underline">{n.label}</a>)}
              <a href={getRelativeLocaleUrl(lang, '/contact/')} class="inline-flex items-center rounded-lg bg-brand px-3 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
              <div class="ml-2 flex items-center gap-2 text-xs">
                <a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
                <span class="text-slate-400">|</span>
                <a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
              </div>
            </div>
          </div>
        </div>
        <div id="mobile-menu" class="mt-3 hidden md:hidden border-t border-slate-200 pt-3">
          <div class="flex flex-col gap-3">
            {nav.map((n) => <a href={n.href} class="text-base">{n.label}</a>)}
            <a href={getRelativeLocaleUrl(lang, '/contact/')} class="inline-flex items-center justify-center rounded-lg bg-brand px-4 py-2 text-white hover:bg-brand-600">{ctaLabel}</a>
            <div class="flex items-center gap-2 text-sm">
              <span class="text-slate-500">Lang:</span>
              <a href={altFr} class={"hover:underline " + (lang==='fr' ? 'font-semibold text-brand-600' : '')}>FR</a>
              <span class="text-slate-400">|</span>
              <a href={altEn} class={"hover:underline " + (lang==='en' ? 'font-semibold text-brand-600' : '')}>EN</a>
            </div>
          </div>
        </div>
      </nav>
    </header>
    <main class="flex-1">
      <slot />
    </main>
    <footer class="mt-auto border-t border-slate-200">
      <div class="mx-auto max-w-6xl p-6 text-sm text-slate-600 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div>
          <p>Contact: <a class="underline" href="mailto:location.villafleurie@gmail.com">location.villafleurie@gmail.com</a> · <a class="underline" href="tel:+33658961279">+33 6 58 96 12 79</a></p>
          <p class="mt-1">© VillaFleurie · Web design: <a href="https://ruidy.nemausat.com" target="_blank" rel="noopener" class="underline">Ruidy Nemausat</a></p>
        </div>
        <ul class="flex gap-4">
          {lang === 'en' ? (
            <>
              <li><a class="underline" href={getRelativeLocaleUrl('en','/policies/terms/')}>Terms</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('en','/policies/privacy/')}>Privacy</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('en','/policies/cancellation/')}>Cancellation</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('en','/policies/house-rules/')}>House Rules</a></li>
            </>
          ) : (
            <>
              <li><a class="underline" href={getRelativeLocaleUrl('fr','/politiques/conditions/')}>Conditions</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('fr','/politiques/confidentialite/')}>Confidentialité</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('fr','/politiques/annulation/')}>Annulation</a></li>
              <li><a class="underline" href={getRelativeLocaleUrl('fr','/politiques/reglement/')}>Règlement intérieur</a></li>
            </>
          )}
        </ul>
      </div>
    </footer>
    <script>
      // Plausible init
      window.plausible = window.plausible || function(){(window.plausible.q = window.plausible.q || []).push(arguments)}
      // Sticky header shadow on scroll
      const header = document.querySelector('header');
      if (header) {
        const onScroll = () => header.classList.toggle('shadow-sm', window.scrollY > 0);
        onScroll();
        window.addEventListener('scroll', onScroll, { passive: true });
      }
      // Mobile nav toggle
      const btn = document.getElementById('nav-toggle');
      const menu = document.getElementById('mobile-menu');
      if (btn && menu) {
        btn.addEventListener('click', () => {
          const isHidden = menu.classList.contains('hidden');
          menu.classList.toggle('hidden', !isHidden);
          btn.setAttribute('aria-expanded', String(isHidden));
        });
      }
    </script>
    <script defer data-domain="villafleuriegp.com" src="https://plausible.nemausat.com/js/script.outbound-links.js"></script>
  </body>
  </html>
