<script lang="ts">
	interface Props {
		eyebrow: string;
		title: string;
		description?: string;
		meta?: string;
		actions?: any;
	}

	let { eyebrow, title, description = '', meta = '', actions }: Props = $props();
</script>

<section class="page-intro reveal">
	<div class="copy">
		<div class="eyebrow">{eyebrow}</div>
		<h1>{title}</h1>
		{#if description}
			<p>{description}</p>
		{/if}
	</div>
	<div class="side">
		{#if meta}
			<div class="meta">{meta}</div>
		{/if}
		{#if actions}
			<div class="actions">{@render actions()}</div>
		{/if}
	</div>
</section>

<style>
	.page-intro {
		display: flex;
		align-items: end;
		justify-content: space-between;
		gap: 18px;
		margin-bottom: 20px;
	}

	.eyebrow,
	.meta {
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.12em;
		color: #8b7b6a;
	}

	h1 {
		margin: 8px 0 10px;
		max-width: 10ch;
		font-size: clamp(2.2rem, 4vw, 3.8rem);
		line-height: 0.95;
		letter-spacing: -0.05em;
		color: #1e1812;
	}

	p {
		max-width: 46rem;
		margin: 0;
		color: #6b6256;
		line-height: 1.65;
	}

	.side {
		display: grid;
		gap: 10px;
		justify-items: end;
	}

	.actions {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	@media (max-width: 900px) {
		.page-intro {
			flex-direction: column;
			align-items: flex-start;
		}

		.side {
			justify-items: start;
		}
	}
</style>
