---
import '../styles/global.css';
import { ClientRouter } from 'astro:transitions';
import Ambient from '../components/Ambient.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import SEO from '../components/SEO.astro';
import SmoothScroll from '../components/islands/SmoothScroll';
import EasterEggs from '../components/islands/EasterEggs';
import { loadContent } from '../lib/content';

interface Props {
  title?: string;
  description?: string;
}

const { title, description } = Astro.props;
const [profile, site] = await Promise.all([loadContent('profile'), loadContent('site')]);
---

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content={Astro.generator} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" sizes="any" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/img/logo/apple-touch-icon.png" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <SEO title={title} description={description} site={site} />
    <ClientRouter />
  </head>
  <body class="bg-[color:var(--color-bg)]">
    <Ambient />
    {site.features.smoothScroll && <SmoothScroll client:load />}
    <EasterEggs client:idle />

    <Header profile={profile} />

    <main class="pt-16">
      <slot />
    </main>

    <Footer profile={profile} />
  </body>
</html>
