<script lang="ts">
	import Latest from '$lib/posts/PostsSummary.svelte';
	import Header from '$lib/header.svelte';
	import Emphasis from '$lib/highlights/emphasis.svelte';
	import LatestPosts from '$lib/card-collections/LatestPosts.svelte';
	import TagsCard from '$lib/card-collections/cards/TagsCard.svelte';
	import Projects from '$lib/card-collections/Projects.svelte';
	import Pixelfed from "$lib/feeds/pixelfed.svelte";
    import type { PageData } from "../$types";

    export let data: PageData;

	const title: string = "Hi, I'm Fred";
	const columnLength = 7;
</script>

<Header {title} />
<section id="welcome">
	<div id="header-text">
		<div id="text-content">
			<p>
				I enjoy creating websites and web applications, capturing landscapes through photography, and indulging in the world of model railways. Alongside these passions, I actively participate within the RMT Union.
			</p>
		</div>
	</div>
	<div id="header-visual">
		<picture>
			<source srcset="/me/face-200.jxl" type="image/jxl" />
			<source srcset="/me/face-200.webp" type="image/webp" />
			<img src="/me/face-200.webp" alt="Just me" />
		</picture>
	</div>
</section>
<section id="meta-links">
	<div id="pixelfed" class="col">
		<h1>Photos</h1>
		<Pixelfed pixelfedFeed={data.xml} />
	</div>
	<div id="posts" class="col">
		<h1>Posts</h1>
		<LatestPosts length={columnLength} />
	</div>
	<div id="tags" class="col">
		<h1>Tags</h1>
		<TagsCard />
	</div>
</section>

<style>
	#welcome {
		display: flex;
		flex-direction: column; /* Start with column layout for mobile */
		align-items: center;
		width: 100%;
		background-color: var(--island-bg-color);
		color: var(--island-txt-color);
		margin: 0; /* Reset margin to ensure full width */
		padding: 0; /* Reset padding to ensure full width */
		box-sizing: border-box; /* Include padding and border in width calculation */
		box-shadow: 0px 3px 2px rgba(0,0,0,0.19);
	}

	#header-text {
		flex: 1;
		max-width: 100%;
		margin: 0;
		text-align: center;
	}

	#text-content {
		margin-left: 10px;
		margin-right: 10px;
	}

	#text-content p {
		font-size: 18px;
		line-height: 1.5;
	}

	#header-visual {
		order: -1;
		max-width: 100%;
		text-align: center;
	}

	img {
		margin: auto;
		margin-top: 10px;
		border-radius: 100px;
		border: none;
		max-height: 150px;
		height: 30vw;
		box-shadow: 1px 1px 5px rgba(0,0,0,0.19);
	}

	/* Media query for larger screens */
	@media (min-width: 768px) {
		#welcome {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		#header-visual {
			order: 1;
			flex: 0 0 30%;
			display: flex;
			align-items: center; /* Vertically center the content */
			justify-content: center;
		}

		#header-text {
			flex: 0 0 70%;
		}

		#text-content {
			margin-left: 25px;
			margin-right: 25px;
		}

		img {
			margin: 0; /* Remove any margin */
			padding: 0; /* Remove any padding */
			max-height: 150px;
			height: 100%; /* Fill the height of the #header-visual container */
		}
	}

	#meta-links {
		display: flex;
		flex-direction: column;
	}

	@media (min-width: 768px) {
		#meta-links {
			flex-direction: row;
			justify-content: space-between;
			align-items: start;
		}
		.col {
			width: 30%;
		}
	}

	h1 {
		font-family: caprasimo;
		font-weight: normal;
		color: var(--main-heading-color);
	}
</style>
