<script lang="ts">
	import { i18n } from '$lib/i18n';
	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
	import '../app.scss';

	import logo from '$lib/images/logo.png'

	import Footer from '$lib/components/Footer.svelte';
	import { onMount } from 'svelte';

	let { children } = $props();

	let div: HTMLDivElement;

	onMount(() => {
		div.style.backgroundImage = `url(${logo})`;
	});
</script>

<ParaglideJS {i18n}>
	<div class="background" bind:this={div}>
		<article class="content">
			{@render children()}
		</article>
		<Footer />
	</div>
</ParaglideJS>

<style lang="scss">
  .background {
    @apply relative w-full h-screen bg-cover bg-center bg-no-repeat;
    background-size: 40%;
  }

  .content {
    @apply absolute inset-0 flex flex-col justify-center items-center backdrop-blur-lg text-center;
  }
</style>