---
import { Font } from 'astro:assets';

import BaseHead from '@/components/BaseHead.astro';
import Banner from '@/components/layout/banner';
import Footer from '@/components/layout/footer';
import Navbar from '@/components/layout/navbar';

const { title, description, frontmatter } = Astro.props;
const currentPage = Astro.url.pathname;

const pageTitle = frontmatter?.title || title;
---

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
    <Font cssVariable="--font-imprima" preload />
    <Font cssVariable="--font-rubik" preload />
  </head>
  <body
    class={`h-screen antialiased [--header-height:calc(var(--spacing)*14)] lg:[--header-height:calc(var(--spacing)*23)]`}
  >
    <Banner client:only="react" />
    <Navbar currentPage={currentPage} client:only="react" />
    <main>
      <section class="section-padding bg-chart-4">
        <div class="container">
          <article class="space-y-6 md:space-y-8">
            <h1
              class="mb-10 text-4xl font-medium tracking-tighter md:mb-12 md:text-5xl md:leading-none lg:text-6xl"
            >
              {pageTitle}
            </h1>

            <div
              class="prose prose-headings:text-2xl dark:prose-invert max-w-none leading-8"
            >
              <slot />
            </div>
          </article>
        </div>
      </section>
    </main>
    <Footer client:only="react" />
  </body>
</html>
