<script lang="ts">
	import { getI18n } from '$lib/i18n';
	import PersonalityCard from './PersonalityCard.svelte';
	import GeminiGlow from './GeminiGlow.svelte';
	import ClaudeGlow from './ClaudeGlow.svelte';

	const i18n = getI18n();
	const t = $derived(i18n.t);
</script>

<section class="section">
	<GeminiGlow />
	<ClaudeGlow />
	<div class="container">
		<header class="text-center mb-12">
			<h2 class="section-title">{t.personalityCards.sectionTitle}</h2>
			<p class="section-subtitle">{t.personalityCards.sectionSubtitle}</p>
		</header>

		<div class="cards-grid">
			<PersonalityCard personality={t.personalityCards.gemini} side="left" />
			<PersonalityCard personality={t.personalityCards.claude} side="right" />
		</div>
	</div>
</section>

<style>
	.container {
		max-width: 72rem;
		margin: 0 auto;
		padding: 0 2rem;
	}

	.cards-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}

	.section {
		position: relative;
		overflow: visible;
		clip-path: inset(-100% -100% 0 -100%);
		isolation: isolate; /* contain blend modes */
	}

	@media (max-width: 640px) {
		.cards-grid {
			grid-template-columns: 1fr;
			gap: 1.5rem;
		}

		.container {
			padding: 0 1rem;
		}
	}
</style>
