import type { Metadata } from 'next'
import { Cormorant_Garamond, Mulish } from 'next/font/google'
import './globals.css'
import Nav from '@/components/ui/Nav'
import Footer from '@/components/ui/Footer'
import PostHogProvider from '@/components/PostHogProvider'

const cormorant = Cormorant_Garamond({
  subsets: ['latin'],
  weight: ['400', '500', '600'],
  style: ['normal', 'italic'],
  variable: '--font-cormorant',
})

const mulish = Mulish({
  subsets: ['latin'],
  weight: ['300', '400', '500', '600', '700'],
  variable: '--font-mulish',
})

export const metadata: Metadata = {
  title: 'HyggeCraftery – Leben. Langsam. Schön.',
  description:
    'Handgemachte Stücke und sanfte Rituale für ein Zuhause, das zur Ruhe einlädt. Skandinavisches Lifestyle-Handwerk aus Schweden.',
  metadataBase: new URL('https://hyggecraftery.com'),
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de" className={`${cormorant.variable} ${mulish.variable}`}>
      <body>
        {/* Noise texture overlay */}
        <div
          aria-hidden
          style={{
            position: 'fixed',
            inset: 0,
            pointerEvents: 'none',
            zIndex: 90,
            opacity: 0.05,
            mixBlendMode: 'multiply',
            backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`,
          }}
        />
        <PostHogProvider>
          <Nav />
          <main>{children}</main>
          <Footer />
        </PostHogProvider>
      </body>
    </html>
  )
}
