<script lang="ts">
	import Latest from '$lib/articles/latest.svelte';
	import Header from '$lib/header.svelte';

	const title: string = "Hi, I'm Fred";
	const subtitle: string = 'Crafting Digital';
</script>

<Header {title} {subtitle} />
<section>
	<div id="header-text">
		<div id="text-content">
			<p>
				Alongside the railway's iron path, I earn my living and fuel my passions. By day, I'm woven
				into the rail's story. By night, I craft digital magic, design experiences, and build tools.
				My canvas? The web and beyond.
			</p>
			<p>
				With a family close to heart, I capture life's moments through photography and dabble in
				model railways. All in a world I shape with creativity.
			</p>
			<p>Discover more at <a href="https://fredboniface.co.uk">fredboniface.co.uk</a></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>

<Latest />

<style>
	section {
		display: flex;
		flex-direction: column; /* Start with column layout for mobile */
		align-items: center;
		width: 100%;
		background-color: var(--main-text-color);
		color: var(--main-bg-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 */
	}

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

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

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

	img {
		margin: auto;
		margin-top: 10px;
		border-radius: 100px;
		border-style: solid;
		border-color: var(--accent-color);
		border-width: 3px;
		max-height: 150px;
		height: 30vw;
	}

	/* Media query for larger screens */
	@media (min-width: 768px) {
		section {
			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 */
			border-radius: 100px;
			border-style: solid;
			border-color: var(--accent-color);
			border-width: 3px;
			max-height: 150px;
			height: 100%; /* Fill the height of the #header-visual container */
		}
	}
</style>
