---
import '../styles/global.css';
import SEOHead from '../components/SEOHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { getLangFromUrl } from '../i18n/utils';

interface Props {
  title?: string;
  description?: string;
  keywords?: string;
  ogImage?: string;
  canonical?: string;
  noindex?: boolean;
  pageType?: 'website' | 'article';
}

const lang = getLangFromUrl(Astro.url);
const props = Astro.props;
---

<!doctype html>
<html lang={lang}>
  <head>
    <SEOHead {...props} />
  </head>
  <body>
    <a href="#main-content" class="skip-link">Aller au contenu principal</a>
    <main id="main-content">
      <slot />
    </main>
  </body>
</html>

<style is:global>
  .skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background-color: var(--color-brand-600);
    color: #ffffff;
    font-weight: 700;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
  }

  .skip-link:focus {
    top: 0;
  }
</style>
