---
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>