<script lang="ts">
	import {} from 'svelte';
	import { MetaTags } from 'svelte-meta-tags';
	import type { CurrentLanguage } from '$lib/types';
	import AboutMe from '$lib/elements/AboutMe.svelte';
	import Jobs from '$lib/elements/Jobs.svelte';
	import Menu from '$lib/elements/Menu.svelte';
	import Training from '$lib/elements/Training.svelte';
	import Data_jobs from '$lib/model/jobs.json';
	import Data_portfolio from '$lib/model/portfolio.json';
	import LanguageSelector from '$lib/elements/LanguageSelector.svelte';
	import type { Job } from '$lib/model/job';

	let jobs: Job[] = Data_jobs as Job[];
	let portfolio: Job[] = Data_portfolio as Job[];
	let currentLanguage: CurrentLanguage = 'it';
	let titles = {
		home: {
			it: 'Gianmarco Pettinato',
			en: 'Gianmarco Pettinato'
		},
		job: { it: 'Esperienze', en: 'Experiences' },
		school: { it: 'Formazione', en: 'Training' },
		contacts: { it: 'Contatti', en: 'Contacts' },
		portfolio: { it: 'Portfolio', en: 'Portfolio' }
	};
	let modalOpen: boolean = false;
</script>

<MetaTags
	title="Gianmarco Pettinato"
	description="This is the Gianmarco's portfolio site"
	canonical="https://pettinato.eu/"
	openGraph={{
		url: 'https://pettinato.eu/',
		title: 'Gianmarco Pettinato',
		description: "This is the Gianmarco's portfolio site",
		images: [],
		site_name: 'Gianmarco Pettinato Portfolio'
	}}
	twitter={{
		handle: '@jatus_93',
		site: '@jatus_93',
		cardType: 'summary',
		title: 'Gianmarco Pettinato Portfolio',
		description: "This is the Gianmarco's portfolio site",
		image: 'https://pettinato.eu/profile_pic.webp',
		imageAlt: 'Gianmarco Photo'
	}}
/>

<main lang={currentLanguage}>
	<!-- svelte-ignore a11y-invalid-attribute -->
	<LanguageSelector bind:currentLanguage />
	<Menu {currentLanguage} />
	<div
		class="default"
		on:scroll={(event) => {
			if (modalOpen) {
				event.preventDefault();
			}
			console.log(event);
		}}
	>
		<span id="home" class="anchor" />
		<AboutMe {currentLanguage} />
	</div>
	<div class="default">
		<span id="jobs" class="anchor" />
		<h2>{titles.job[currentLanguage]}</h2>
		<Jobs {jobs} {currentLanguage} bind:modalOpen />
	</div>
	<div class="default">
		<span id="training" class="anchor" />
		<h2>{titles.school[currentLanguage]}</h2>
		<Training {currentLanguage} />
	</div>
	<div class="default">
		<span id="portfolio" class="anchor" />
		<h2>{titles.portfolio[currentLanguage]}</h2>
		<Jobs jobs={portfolio} {currentLanguage} bind:modalOpen />
	</div>
</main>

<style lang="scss">
	@import '../app.scss';

	@media (max-width: $min-tablet) {
		.custom-button {
			font-size: large;
		}
	}
	.anchor {
		position: absolute;
		margin-top: -150px;
		@media (min-width: 460px) {
			margin-top: -100px;
		}
		@media (min-width: $min-tablet) {
			margin-top: -60px;
		}
	}
</style>
