---
import Section from '../content/Section.astro';
import Container from '../layout/Container.astro';
import Heading from '../typography/Heading.astro';
import Text from '../typography/Text.astro';
import { Icon } from 'astro-icon/components';

export interface Props {
	class?: string;
}

const { class: className } = Astro.props;
---

<Section id="cost-comparison" background="subtle" class={className}>
	<Container grid>
		<div class="text-center mb-12" style="grid-column: 1 / -1;">
			<Heading as="h2" size="3" class="mb-4"> 90% sparen gegenüber klassischen Lizenzen </Heading>
		</div>

		<div style="grid-column: 1 / -1;">
			<!-- Interactive Calculator -->
			<div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg mb-8">
				<div class="grid md:grid-cols-2 gap-8">
					<!-- Input Controls -->
					<div>
						<label class="block mb-4">
							<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300 mb-2 block">
								Anzahl Nutzer in deinem Team
							</Text>
							<input
								type="range"
								id="teamSize"
								min="1"
								max="100"
								value="10"
								class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
							/>
							<div class="flex justify-between text-xs text-gray-500 mt-1">
								<span>1</span>
								<span id="teamSizeDisplay" class="font-semibold text-mana-blue">10</span>
								<span>100</span>
							</div>
						</label>

						<label class="block">
							<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300 mb-2 block">
								Nutzungsintensität
							</Text>
							<select
								id="usageIntensity"
								class="w-full px-4 py-2 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-mana-blue focus:border-transparent"
							>
								<option value="light">Gelegentlich (5 Stunden/Monat)</option>
								<option value="medium" selected>Normal (25 Stunden/Monat)</option>
								<option value="heavy">Intensiv (50 Stunden/Monat)</option>
								<option value="power">Power User (100+ Stunden/Monat)</option>
							</select>
						</label>
					</div>

					<!-- Results Display -->
					<div class="bg-gray-50 dark:bg-gray-700/50 rounded-xl p-6">
						<div class="space-y-4">
							<!-- Classic Licenses -->
							<div>
								<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-1">
									Klassische Lizenzen
								</Text>
								<div class="flex items-baseline gap-2">
									<span id="classicCost" class="text-2xl font-bold text-gray-400 line-through"
										>200€</span
									>
									<span class="text-sm text-gray-500">/Monat</span>
								</div>
							</div>

							<!-- Manacore -->
							<div>
								<Text size="sm" class="text-gray-600 dark:text-gray-400 mb-1"> Mit Manacore </Text>
								<div class="flex items-baseline gap-2">
									<span id="manacoreCost" class="text-3xl font-bold text-mana-blue">30€</span>
									<span class="text-sm text-gray-500">/Monat</span>
								</div>
							</div>

							<!-- Savings -->
							<div class="pt-4 border-t border-gray-200 dark:border-gray-600">
								<div class="flex items-center justify-between">
									<Text size="sm" class="font-medium text-gray-700 dark:text-gray-300">
										Deine Ersparnis
									</Text>
									<div class="text-right">
										<div
											id="savingsAmount"
											class="text-2xl font-bold text-green-600 dark:text-green-500"
										>
											170€
										</div>
										<div id="savingsPercent" class="text-sm text-green-600 dark:text-green-500">
											85%
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Testimonial -->
			<div class="bg-mana-blue/5 dark:bg-mana-blue/10 rounded-2xl p-6 border border-mana-blue/20">
				<div class="flex gap-4">
					<div class="flex-shrink-0">
						<Icon name="mdi:format-quote-open" class="w-8 h-8 text-mana-blue/50" />
					</div>
					<div>
						<Text size="lg" class="text-gray-700 dark:text-gray-300 mb-3 italic">
							"Unser 50-köpfiges Team spart über 900€ monatlich. Die Credits teilen wir flexibel
							nach Bedarf auf."
						</Text>
						<Text size="sm" class="text-gray-600 dark:text-gray-400">
							— CTO eines Mittelständlers
						</Text>
					</div>
				</div>
			</div>
		</div>
	</Container>
</Section>

<script>
	// Cost calculation logic
	const teamSizeInput = document.getElementById('teamSize') as HTMLInputElement;
	const teamSizeDisplay = document.getElementById('teamSizeDisplay');
	const usageIntensitySelect = document.getElementById('usageIntensity') as HTMLSelectElement;
	const classicCostEl = document.getElementById('classicCost');
	const manacoreCostEl = document.getElementById('manacoreCost');
	const savingsAmountEl = document.getElementById('savingsAmount');
	const savingsPercentEl = document.getElementById('savingsPercent');

	const classicPricePerUser = 19.99;

	const manacorePlans = {
		light: { name: 'Mana Fluss', price: 5.99, users: 3 },
		medium: { name: 'Mana Strom', price: 14.99, users: 5 },
		heavy: { name: 'Mana See', price: 29.99, users: 10 },
		power: { name: 'Mana Meer', price: 49.99, users: 15 },
	};

	function calculateCosts() {
		const teamSize = parseInt(teamSizeInput.value);
		const intensity = usageIntensitySelect.value as keyof typeof manacorePlans;

		// Classic license cost
		const classicCost = teamSize * classicPricePerUser;

		// Manacore cost calculation
		const plan = manacorePlans[intensity];
		const plansNeeded = Math.ceil(teamSize / plan.users);
		const manacoreCost = plansNeeded * plan.price;

		// Savings
		const savings = classicCost - manacoreCost;
		const savingsPercent = Math.round((savings / classicCost) * 100);

		// Update display
		if (teamSizeDisplay) teamSizeDisplay.textContent = teamSize.toString();
		if (classicCostEl) classicCostEl.textContent = `${classicCost.toFixed(0)}€`;
		if (manacoreCostEl) manacoreCostEl.textContent = `${manacoreCost.toFixed(0)}€`;
		if (savingsAmountEl) savingsAmountEl.textContent = `${savings.toFixed(0)}€`;
		if (savingsPercentEl) savingsPercentEl.textContent = `${savingsPercent}%`;
	}

	// Event listeners
	teamSizeInput?.addEventListener('input', calculateCosts);
	usageIntensitySelect?.addEventListener('change', calculateCosts);

	// Initial calculation
	calculateCosts();
</script>
