import '@/styles/app.css'
import { useEffect } from 'react'
import type { AppProps } from 'next/app'
import localFont from '@next/font/local'
import TagManager from 'react-gtm-module'

import SiteClosure from './SiteClosure'

const soehne = localFont({
  variable: '--font-soehne',
  src: [
    {
      path: './fonts/soehne-extraleicht.woff2',
      weight: '200',
      style: 'normal',
    },
    {
      path: './fonts/soehne-extraleicht-kursiv.woff2',
      weight: '200',
      style: 'italic',
    },
    {
      path: './fonts/soehne-leicht.woff2',
      weight: '300',
      style: 'normal',
    },
    {
      path: './fonts/soehne-leicht-kursiv.woff2',
      weight: '300',
      style: 'italic',
    },
    {
      path: './fonts/soehne-buch.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './fonts/soehne-buch-kursiv.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './fonts/soehne-kraftig.woff2',
      weight: '500',
      style: 'normal',
    },
    {
      path: './fonts/soehne-kraftig-kursiv.woff2',
      weight: '500',
      style: 'italic',
    },
    {
      path: './fonts/soehne-halbfett.woff2',
      weight: '600',
      style: 'normal',
    },
    {
      path: './fonts/soehne-halbfett-kursiv.woff2',
      weight: '600',
      style: 'italic',
    },
    {
      path: './fonts/soehne-dreiviertelfett.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './fonts/soehne-dreiviertelfett-kursiv.woff2',
      weight: '700',
      style: 'italic',
    },
    {
      path: './fonts/soehne-fett.woff2',
      weight: '800',
      style: 'normal',
    },
    {
      path: './fonts/soehne-fett-kursiv.woff2',
      weight: '800',
      style: 'italic',
    },
    {
      path: './fonts/soehne-extrafett.woff2',
      weight: '900',
      style: 'normal',
    },
    {
      path: './fonts/soehne-extrafett-kursiv.woff2',
      weight: '900',
      style: 'italic',
    },
  ],
})

export default function App({ Component, pageProps }: AppProps) {
  const { globals, page } = pageProps

  // Google Tag Manager
  useEffect(() => {
    TagManager.initialize({ gtmId: process.env.NEXT_PUBLIC_GTM_ID || '' })
  }, [])

  return (
    <>
      <SiteClosure />
    </>
  )
}