---
const { title } = Astro.props

const websiteName = 'Template'
const websiteDescription = 'This is just a template.'

import Background from '../templates/components/Background/Background'
import OptimizeBackground from '../templates/components/Optimizer/OptimizeBackground'
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
    <meta name="name" content={websiteName} />
    <meta name="description" content={websiteDescription} />
    <title>{title}</title>
  </head>

  <body id="body">
    <!-- <OptimizeBackground /> -->
    <Background color="#0c1b31" />
    <slot />

    <style lang="sass">
      @use '/src/styles/variables.sass' as vars
      @use '/src/styles/fonts.sass' as fonts

      #body
        font-family: fonts.$Inter
        color: vars.$textColor
    </style>
  </body>
</html>
