---
interface RawPlan {
	name: string;
	price: string;
	period?: string;
	description?: string;
	// Features are stored as a newline-separated string (Block Kit has no
	// list-of-strings element, so a multiline text input is the closest fit).
	features?: string;
	// CTAs are flattened to sibling fields because Block Kit has no
	// object-group element.
	ctaLabel?: string;
	ctaUrl?: string;
	highlighted?: boolean;
}

interface Props {
	node: {
		headline?: string;
		plans: RawPlan[];
	};
}

const { node } = Astro.props;
const { headline, plans: rawPlans } = node;

const plans = rawPlans.map((plan) => ({
	...plan,
	features: (plan.features ?? "")
		.split("\n")
		.map((s) => s.trim())
		.filter(Boolean),
	cta: {
		label: plan.ctaLabel ?? "",
		url: plan.ctaUrl ?? "#",
	},
}));
---

<section class="pricing section">
	<div class="container">
		{headline && (
			<header class="pricing-header">
				<h2 class="pricing-headline">{headline}</h2>
			</header>
		)}
		<div class="pricing-grid">
			{plans.map((plan) => (
				<div class:list={["pricing-card", { "pricing-highlighted": plan.highlighted }]}>
					{plan.highlighted && <div class="pricing-badge">Most popular</div>}
					<div class="pricing-plan-header">
						<h3 class="pricing-name">{plan.name}</h3>
						<div class="pricing-price">
							<span class="pricing-amount">{plan.price}</span>
							{plan.period && <span class="pricing-period">{plan.period}</span>}
						</div>
						{plan.description && (
							<p class="pricing-description">{plan.description}</p>
						)}
					</div>
					<ul class="pricing-features">
						{plan.features.map((feature) => (
							<li>
								<svg class="check-icon" viewBox="0 0 20 20" fill="currentColor">
									<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
								</svg>
								{feature}
							</li>
						))}
					</ul>
					<a
						href={plan.cta.url}
						class:list={["btn", "btn-lg", "pricing-cta", { "btn-primary": plan.highlighted, "btn-secondary": !plan.highlighted }]}
					>
						{plan.cta.label}
					</a>
				</div>
			))}
		</div>
	</div>
</section>

<style>
	.pricing-header {
		text-align: center;
		margin-bottom: var(--spacing-2xl);
	}

	.pricing-headline {
		font-size: var(--font-size-3xl);
		font-weight: 800;
	}

	.pricing-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--spacing-xl);
		align-items: start;
	}

	.pricing-card {
		position: relative;
		padding: var(--spacing-xl);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-lg);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
	}

	.pricing-highlighted {
		background: var(--color-bg);
		border-color: var(--color-primary);
		box-shadow: var(--shadow-xl);
		transform: scale(1.02);
	}

	.pricing-badge {
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: var(--spacing-xs) var(--spacing-md);
		font-size: var(--font-size-xs);
		font-weight: 600;
		color: white;
		background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
		border-radius: var(--radius-full);
	}

	.pricing-plan-header {
		text-align: center;
		padding-bottom: var(--spacing-lg);
		border-bottom: 1px solid var(--color-border);
	}

	.pricing-name {
		font-size: var(--font-size-lg);
		font-weight: 700;
		margin-bottom: var(--spacing-sm);
	}

	.pricing-price {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: var(--spacing-xs);
		margin-bottom: var(--spacing-sm);
	}

	.pricing-amount {
		font-size: var(--font-size-4xl);
		font-weight: 800;
		letter-spacing: -0.03em;
	}

	.pricing-period {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
	}

	.pricing-description {
		font-size: var(--font-size-sm);
		color: var(--color-muted);
	}

	.pricing-features {
		list-style: none;
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: var(--spacing-sm);
	}

	.pricing-features li {
		display: flex;
		align-items: flex-start;
		gap: var(--spacing-sm);
		font-size: var(--font-size-sm);
	}

	.check-icon {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		color: var(--color-success);
		margin-top: 2px;
	}

	.pricing-cta {
		width: 100%;
	}

	@media (max-width: 900px) {
		.pricing-grid {
			grid-template-columns: 1fr;
			max-width: 400px;
			margin: 0 auto;
		}

		.pricing-highlighted {
			transform: none;
		}
	}
</style>
