<script lang="ts">
	import CookingPot from './CookingPot.svelte';
	import Clipboard from './ic/Clipboard.svelte';
	import Close from './ic/Close.svelte';
	import PhasePrepping from './ic/PhasePrepping.svelte';
	import PhaseSimmering from './ic/PhaseSimmering.svelte';
	import PhasePlating from './ic/PhasePlating.svelte';

	interface Props {
		onAdd?: () => void;
		showHowTo?: boolean;
		onDismissHowTo?: () => void;
	}
	let { onAdd, showHowTo = true, onDismissHowTo }: Props = $props();
</script>

<div class="empty">
	<!-- Hero gradient card -->
	<div class="hero-card">
		<div class="pot-deco">
			<CookingPot size={160} animate={true} />
		</div>
		<div class="tag">Empty kitchen</div>
		<h1 class="ic-display hero-title">
			Cook<br />anything<br />from a link.
		</h1>
		<p class="hero-sub">
			Paste an Instagram recipe and we'll turn it into a real, savable recipe in Tandoor.
		</p>
		<button class="ic-btn-reset cta-btn" onclick={onAdd}>
			<Clipboard size={16} color="var(--purple)" />
			Paste your first link
		</button>
	</div>

	<!-- How it works card -->
	{#if showHowTo}
		<div class="how-card">
			<button class="ic-btn-reset dismiss-btn" onclick={onDismissHowTo} aria-label="Dismiss">
				<Close size={14} color="var(--muted)" />
			</button>
			<div class="how-label">How it works</div>

			{#each [
				{
					icon: PhasePrepping,
					n: '01',
					t: 'Prepping',
					d: 'We grab the post, caption, and any tagged ingredients off Instagram.'
				},
				{
					icon: PhaseSimmering,
					n: '02',
					t: 'Simmering',
					d: 'An LLM reads the caption and turns it into structured ingredients + steps.'
				},
				{
					icon: PhasePlating,
					n: '03',
					t: 'Plating',
					d: 'The finished recipe lands in your Tandoor cookbook, ready to cook.'
				}
			] as step, i}
				<div class="step" class:step-border={i > 0}>
					<div class="step-icon">
						<step.icon size={32} animate={true} />
					</div>
					<div class="step-body">
						<div class="step-num">STEP {step.n}</div>
						<div class="step-title">{step.t}</div>
						<div class="step-desc">{step.d}</div>
					</div>
				</div>
			{/each}
		</div>
	{/if}
</div>

<style>
	.empty {
		padding: 20px 20px 100px;
	}
	.hero-card {
		margin-top: 16px;
		border-radius: 32px;
		padding: 32px 24px;
		background: var(--brand-gradient);
		color: #fff;
		position: relative;
		overflow: hidden;
		box-shadow: var(--shadow-lg);
	}
	.pot-deco {
		position: absolute;
		right: -30px;
		top: -30px;
		opacity: 0.22;
		pointer-events: none;
	}
	.tag {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 99px;
		background: rgba(255, 255, 255, 0.25);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		font-family: var(--font-mono);
		margin-bottom: 14px;
	}
	.hero-title {
		font-size: 40px;
		line-height: 0.95;
		margin: 0 0 10px;
		max-width: 240px;
	}
	.hero-sub {
		font-size: 14px;
		line-height: 1.4;
		margin: 0 0 18px;
		max-width: 240px;
		opacity: 0.95;
	}
	.cta-btn {
		background: #fff;
		color: var(--purple);
		padding: 12px 18px;
		border-radius: 99px;
		font-weight: 700;
		font-size: 14px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
	}
	.how-card {
		margin-top: 24px;
		border-radius: 24px;
		padding: 20px;
		background: var(--surface);
		border: 1px solid var(--border);
		position: relative;
	}
	.dismiss-btn {
		position: absolute;
		top: 12px;
		right: 12px;
		width: 28px;
		height: 28px;
		border-radius: 99px;
		background: var(--surface-2);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.how-label {
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		font-family: var(--font-mono);
		color: var(--pink);
		margin-bottom: 14px;
	}
	.step {
		display: flex;
		gap: 14px;
		align-items: flex-start;
		padding: 12px 0;
	}
	.step-border {
		border-top: 1px solid var(--border);
	}
	.step-icon {
		width: 44px;
		height: 44px;
		border-radius: 14px;
		background: var(--surface-2);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.step-num {
		font-size: 10px;
		font-family: var(--font-mono);
		color: var(--muted);
		font-weight: 700;
		margin-bottom: 2px;
	}
	.step-title {
		font-weight: 700;
		font-size: 15px;
		margin-bottom: 3px;
		font-family: 'Lilita One', system-ui, sans-serif;
		color: var(--ink);
	}
	.step-desc {
		font-size: 12px;
		color: var(--muted);
		line-height: 1.45;
	}
</style>
