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

import Themes from "astro-themes";
import { ViewTransitions } from "astro:transitions";

import BaseHead from "../components/BaseHead.astro";
import Navbar from "./Nav.astro";
import Footer from "../components/Footer.astro";

import "@fontsource/geist-sans/400.css";
import "@fontsource/geist-sans/600.css";
import "@fontsource/geist-mono/400.css";
import "@fontsource/geist-mono/600.css";
import "@styles/global.css";
import "@fonts/fonts.css";



const { title, description, image } = Astro.props;
---

<html lang="en" class="scrollbar-hide lenis lenis-smooth">
  <head>
    <ViewTransitions />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="googlebot"
      content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"
    />
    <Themes />
    <BaseHead title={title} description={description} image={image} />
    <script>
      import "@scripts/lenisSmoothScroll.js";
      import "@scripts/main.jsx";
    </script>
  </head>
  <body
    class="antialiased flex flex-col items-center justify-center mx-auto mt-2 lg:mt-8 mb-20 lg:mb-40
    scrollbar-hide">
    <main
      class="flex-auto min-w-0 mt-2 md:mt-6 flex flex-col px-6 sm:px-4 md:px-0 max-w-3xl w-full">
      <noscript>
  <div style="background: #f44336; color: white; padding: 1em; text-align: center;">
    This site requires JavaScript to function. Please enable JavaScript in your browser.
  </div>
</noscript>
      <Navbar  />
      <slot />
      <Footer />
    </main>
    <style>
      /* CSS rules for the page scrollbar */
      .scrollbar-hide::-webkit-scrollbar {
        display: none;
      }

      .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
    </style>
  </body>
</html>
