---
import '@fontsource-variable/work-sans'
import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2'

import Navbar from '@components/navbar/navbar.astro'
import NavbarEntry from '@components/navbar/navbarEntry.astro'
import navdata from '@datafiles/navdata.json'
import embed from '@assets/embed.png'
import favicon from '@assets/favicon.ico'

import home from 'iconoir/icons/home-simple.svg'
import fgo from 'iconoir/icons/gamepad.svg'
import blog from 'iconoir/icons/bookmark-book.svg'
import about from 'iconoir/icons/mail.svg'
import projects from 'iconoir/icons/network-right.svg'

export interface Props {
  title: string
  currentpage: string
  descriptionOverride?: string
}

interface IconsLookup {
  [key: string]: ImageMetadata
}

const icons: IconsLookup = {
  home: home,
  fgo: fgo,
  projects: projects,
  blog: blog,
  about: about,
}

const { descriptionOverride, currentpage, title } = Astro.props
let description

if (descriptionOverride === undefined) {
  description = 'Firqs own site!'
} else {
  description = descriptionOverride
}

let currPage = 'https://firq.dev/'
if (currentpage !== 'home') {
  currPage += currentpage
}

const mapped_navdata = navdata.map((item) => ({
  ...item,
  ...{ icon: icons[item.icon] },
}))
---

<!doctype html>
<html lang="en">
  <head>
    <title>{title}</title>
    <!-- Meta Tags -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <meta name="description" content={description} />
    <meta property="og:title" content={title} />
    <meta property="og:url" content={currPage} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={embed.src} />
    <meta property="og:type" content="website" />
    <meta property="og:locale" content="en_US" />
    <meta name="theme-color" content="#b86cff" />
    <meta
      name="google-site-verification"
      content="SmcWcewh7DCANcLeTe3ntU0R-LESbo_bsolICJnmulE"
    />
    <!-- Disable DarkReader, as site is already in dark mode -->
    <meta name="darkreader-lock" content="this site only has darkmode" />
    <!-- Links -->
    <link
      rel="preload"
      as="font"
      crossorigin="anonymous"
      href={workSans}
      type="font/woff2"
    />
    <link rel="icon" type="image/ico" href={favicon} />
    <link rel="sitemap" href="/sitemap-index.xml" />
    <link href="https://mastodon.neshweb.net/@Firq" rel="me" />
  </head>
  <body>
    <Navbar>
      {
        mapped_navdata.map((item) => (
          <NavbarEntry
            currentPage={currentpage}
            navtype="desktop"
            {...item}
            slot="desktop"
          />
        ))
      }
      {
        mapped_navdata.map((item) => (
          <NavbarEntry
            currentPage={currentpage}
            navtype="mobile"
            {...item}
            slot="mobile"
          />
        ))
      }
    </Navbar>
    <slot />
  </body>
</html>

<style is:global>
  :root {
    /* Animations */
    --a-time-default: 200ms;
    --a-time-short: 100ms;
    --a-time-slow: 1000ms;
    --a-animation-1: ease-in-out;

    /* Fonts */
    --f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --f-title: 'Work Sans Variable', sans-serif;

    font-family: var(--f-default);

    /* Colors */
    --c-primary-background: #1b1b1b;
    --c-secondary-background: #333;
    --c-primary-text: #eee;
    --c-accent-1: #b86cff;
    --c-accent-1-alt: #c105ff;
    --c-accent-2: #ff0077;

    --c-rgb-primary-background: 27, 27, 27;
    --c-rgb-secondary-background: 51, 51, 51;
    --c-rgb-primary-text: 238, 238, 238;
    --c-rgb-accent-1: 184, 108, 255;
    --c-rgb-accent-1-alt: 193, 5, 255;
    --c-rgb-accent-2: 255, 0, 119;

    /* Scrollbar */
    scrollbar-color: var(--c-secondary-background) var(--c-primary-background);
  }

  body {
    background: var(--c-secondary-background);
    margin: 0px;
  }

  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
</style>