<script lang="ts">
	import type { Snippet } from 'svelte';

	export interface HeaderPill {
		label: string;
		tone?: 'mint' | 'sky' | 'orchid' | 'coral' | 'citrus' | 'primary';
		icon?: string;
	}

	interface Props {
		title: string;
		/** Italic-emphasized word(s) appended to the title with a gradient. */
		emphasis?: string;
		/** Body text under the title. */
		description?: string;
		/** Small label above the title (breadcrumb / section). */
		crumb?: string;
		/** Right-side count meter — e.g. "12 providers". */
		count?: number | string;
		/** Label under the count, e.g. "providers". */
		countLabel?: string;
		/** Status pills shown beneath the description. */
		pills?: HeaderPill[];
		/** Primary actions (buttons) — rendered top-right next to the meter. */
		children?: Snippet;
	}

	let {
		title,
		emphasis = '',
		description = '',
		crumb = '',
		count,
		countLabel = '',
		pills = [],
		children,
	}: Props = $props();

	const toneColors: Record<NonNullable<HeaderPill['tone']>, string> = {
		mint: 'var(--color-mint)',
		sky: 'var(--color-sky)',
		orchid: 'var(--color-orchid)',
		coral: 'var(--color-coral)',
		citrus: 'var(--color-citrus)',
		primary: 'var(--color-primary)',
	};
</script>

<section class="subpage-hero">
	<div class="subpage-hero__row">
		<div class="subpage-hero__main">
			{#if crumb}
				<div class="subpage-hero__crumb">{crumb}</div>
			{/if}
			<h2 class="subpage-hero__title">
				{title}{#if emphasis}&nbsp;<em>{emphasis}</em>{/if}
			</h2>
			{#if description}
				<p class="subpage-hero__sub">{description}</p>
			{/if}
			{#if pills.length > 0}
				<div class="subpage-hero__pills">
					{#each pills as p}
						<span class="subpage-hero__pill">
							<span class="subpage-hero__pill-dot" style="background: {toneColors[p.tone ?? 'primary']}"></span>
							{p.label}
						</span>
					{/each}
				</div>
			{/if}
		</div>

		<div class="subpage-hero__side">
			{#if count !== undefined}
				<div class="subpage-hero__meter">
					<div class="subpage-hero__meter-value font-mono">{count}</div>
					{#if countLabel}
						<div class="subpage-hero__meter-label">{countLabel}</div>
					{/if}
				</div>
			{/if}
			{#if children}
				<div class="subpage-hero__actions">{@render children()}</div>
			{/if}
		</div>
	</div>
</section>

<style>
	.subpage-hero {
		position: relative;
		background: var(--color-glass);
		backdrop-filter: blur(28px) saturate(160%);
		-webkit-backdrop-filter: blur(28px) saturate(160%);
		border: 1px solid var(--color-border);
		border-radius: 22px;
		box-shadow: var(--shadow-card);
		padding: 1.4rem 1.6rem 1.5rem;
		margin-bottom: 1.5rem;
		overflow: hidden;
	}
	.subpage-hero::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		pointer-events: none;
		background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
		opacity: 0.4;
	}
	.subpage-hero__row {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: 1.5rem;
		flex-wrap: wrap;
		min-height: 100%;
	}
	.subpage-hero__main { min-width: 0; flex: 1; }

	.subpage-hero__crumb {
		font-family: var(--font-mono);
		font-size: 0.62rem;
		color: var(--color-muted-foreground);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		margin-bottom: 0.55rem;
		font-weight: 500;
	}
	.subpage-hero__title {
		font-family: var(--font-display);
		font-weight: 400;
		font-size: 2.15rem;
		line-height: 1.05;
		letter-spacing: -0.025em;
		color: var(--color-foreground);
		margin: 0;
	}
	.subpage-hero__title em {
		font-style: italic;
		background: linear-gradient(135deg, var(--color-orchid), var(--color-primary) 60%, var(--color-sky));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
	.subpage-hero__sub {
		font-size: 0.88rem;
		color: var(--color-muted-foreground);
		margin: 0.55rem 0 0;
		line-height: 1.55;
		max-width: 60ch;
	}
	.subpage-hero__pills {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-top: 0.85rem;
	}
	.subpage-hero__pill {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.22rem 0.65rem;
		border-radius: 999px;
		background: var(--color-glass-strong);
		border: 1px solid var(--color-border);
		font-size: 0.7rem;
		color: var(--color-muted-foreground);
		font-weight: 500;
	}
	.subpage-hero__pill-dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}

	.subpage-hero__side {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		flex-shrink: 0;
	}
	.subpage-hero__meter {
		text-align: right;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}
	.subpage-hero__actions {
		margin-top: auto;
		padding-top: 0.95rem;
		display: flex;
		gap: 0.5rem;
		align-items: center;
	}
	.subpage-hero__meter-value {
		font-size: 2.15rem;
		font-weight: 500;
		color: var(--color-foreground);
		font-variant-numeric: tabular-nums;
		line-height: 1;
		letter-spacing: -0.025em;
	}
	.subpage-hero__meter-label {
		font-size: 0.62rem;
		text-transform: uppercase;
		letter-spacing: 0.16em;
		color: var(--color-muted-foreground);
		margin-top: 0.4rem;
		font-weight: 500;
	}

	@media (max-width: 640px) {
		.subpage-hero { padding: 1.1rem 1.2rem 1.25rem; }
		.subpage-hero__title { font-size: 1.7rem; }
		.subpage-hero__row { flex-direction: column; align-items: stretch; }
		.subpage-hero__side { justify-content: space-between; }
	}
</style>
