<script lang="ts">
	import logo from '$lib/assets/round-logo.svg';

	let isSpinning = $state(false);

	function handleLogoTap() {
		if (isSpinning) return;
		isSpinning = true;
		setTimeout(() => (isSpinning = false), 800);
	}
</script>

<div class="logo-container">
	<button
		type="button"
		class="logo-btn"
		onclick={handleLogoTap}
		class:animate={isSpinning}
		aria-label="Spin the OwlBoard logo"
	>
		<img class="logo-img" src={logo} alt="OwlBoard Logo" />
	</button>
</div>

<section class="about">
	<p class="copy">&copy; 2022-2026 Frederick Boniface</p>
	<p class="tagline">Created by train crew, for train crew</p>
	<p class="amble">
		OwlBoard was created in 2022, evolving from 'Athena' which just provided 'Quick Links' to Tiger
		departure boards. The aim was to provide fast and easy access to the information we need on a
		daily basis.
	</p>
	<p class="amble">
		Why OwlBoard? The name was chosen as an evolution of its predecessor, 'Athena'; owls are
		associated with the equivalent Roman Goddess - Minerva - as well as with wisdom. This also links
		to Bath, where the app has been built and is run, relating to the 'Minerva Owl' sculpture trail
		in the city, with many of the sculptures still in the area.
	</p>
	<p class="opensource">
		Some components that combine to form OwlBoard are open-source, see the <a
			href="https://git.fjla.uk"
			target="_blank"
			rel="noopener">Git reposititories</a
		> for more info.
	</p>
</section>

<section class="data-sourcing">
	<p>
		Data is sourced from multiple providers, including <a
			href="https://nationalrail.co.uk"
			target="_blank"
			rel="noopener noreferrer">National Rail Enquiries</a
		> and Network Rail along side OwlBoard's own data
	</p>
</section>

<style>
	.logo-container {
		width: 100%;
		text-align: center;
	}

	.logo-btn {
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;
		display: inline-block;
		padding-top: 25px;
		margin: auto;
		width: clamp(80px, 20vw, 200px);
	}

	@keyframes owl-spin {
		0% {
			transform: rotate(0deg);
		}
		15% {
			transform: rotate(-20deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.logo-img {
		width: 100%;
		height: auto;
		display: block;
	}

	.logo-btn.animate {
		animation: owl-spin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}

	section {
		margin: auto;
		width: 90%;
		max-width: 650px;
		font-family: 'URW Gothic', sans-serif;
		text-align: center;
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	section:last-child {
		padding-bottom: 15px;
	}

	.tagline {
		font-weight: 600;
		font-style: italic;
	}
</style>
