<script>
	import favicon from '$lib/assets/favicon.png';
</script>

<footer>
	<div class="container footer-inner">
		<div class="footer-left">
			<div class="logo">
				<div class="logo-icon">
					<img src={favicon} alt="ChatRPG logo" width="20" height="20" />
				</div>
				<span>ChatRPG</span>
			</div>
			<p class="footer-tag">Text-based RPGs, reimagined with AI.</p>
		</div>

		<div class="footer-links">
			<a href="#how">How it Works</a>
			<a href="#features">Features</a>
			<a href="#pricing">Pricing</a>
			<a href="#faq">FAQ</a>
			<a href="/login">Log In</a>
			<a href="/register">Sign Up</a>
		</div>

		<div class="footer-right">
			<p class="footer-small">Currently in active development.</p>
		</div>
	</div>
</footer>

<style>
	/* Footer specific */
	footer {
		background: #08080c;
		padding: 60px 0 40px;
		border-top: 1px solid #1f1f27;
	}
	.footer-inner {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 40px;
	}
	.footer-left .logo {
		font-size: 18px;
		margin-bottom: 8px;
	}
	.footer-left .logo-icon {
		width: 20px;
		height: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer-tag {
		color: #666;
		font-size: 14px;
		margin: 0;
	}
	.footer-links {
		display: flex;
		gap: 28px;
		font-size: 14px;
	}
	.footer-links a {
		color: #a1a1aa;
		text-decoration: none;
	}
	.footer-links a:hover {
		color: #c084fc;
	}
	.footer-right {
		text-align: right;
		font-size: 13px;
		color: #666;
	}
	.footer-small {
		margin-top: 2px;
		font-size: 12px;
	}
</style>
