---
import "@fontsource-variable/inter";
import Footer from "~/components/footer.astro";
import Header from "~/components/header.astro";
import Splash from "~/components/splash.astro";
import "~/styles/index.css";

const { generator, site } = Astro;
const image = new URL("social.jpg", site);
const description =
    "Build fast websites, faster. Astro is a new kind of site builder for the modern web. Lightning-fast performance meets powerful developer experience.";
---

<!doctype html>
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="light">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <meta name="generator" content={generator} />

        <title>Sejour</title>
        <meta name="description" content={description} />

        <!-- social media -->
        <meta property="og:title" content="Astro" />
        <meta property="og:type" content="website" />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={image} />
        <meta property="og:url" content={site} />
        <meta name="twitter:card" content="summary_large_image" />

        <!-- initialize theme -->
        <script is:inline>
            document.documentElement.dataset.theme = "light";
        </script>
    </head>
    <body
        class="h-full overflow-x-hidden bg-default text-default text-base selection:bg-secondary selection:text-white"
    >
        <Header />

        <div class="space-y-24 px-8 py-32">
            <h1>Book a Session</h1>
            <div>Not ready yet.</div>
        </div>
        <Footer />
    </body>
</html>

<style is:global>
    #page-header {
        background-color: var(--color-primary);
        top: 0;
        @apply fixed bottom-auto top-0;
        @apply border-default;
    }
</style>
