---
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 Grid from '../layout/Grid.astro';
import PricingCard from './PricingCard.astro';
import { pricingPlans } from '../../data/pricing.js';
import { Icon } from 'astro-icon/components';

export interface Props {
  showOneTime?: boolean;
}

const { showOneTime = false } = Astro.props;
---

<Section spacing="xlarge" class="relative z-10">
  <Container>
    <!-- Header -->
    <div class="text-center mb-16">
      <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-mana-blue/10 to-blue-500/10 rounded-2xl mb-4">
        <Icon name="mdi:currency-eur" class="w-8 h-8 text-mana-blue" />
      </div>
      <Heading as="h2" size="2" class="mb-4 text-center">
        Transparente Preise für jeden Bedarf
      </Heading>
      <Text size="xl" class="text-gray-600 dark:text-gray-400 max-w-3xl mx-auto text-center">
        Wählen Sie zwischen monatlichen Abos mit täglicher Regeneration oder einmaligen Mana-Käufen. 
        Keine versteckten Kosten, keine Mindestlaufzeiten.
      </Text>
    </div>
    
    <!-- Billing Toggle -->
    <div class="flex justify-center mb-16">
      <div class="relative">
        <div class="absolute inset-0 bg-gradient-to-r from-mana-blue/20 to-blue-500/20 rounded-2xl blur-xl"></div>
        <div class="relative bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl p-1.5 inline-flex shadow-lg border border-gray-200 dark:border-gray-700">
          <button 
            id="monthly-tab" 
            class="px-8 py-3 rounded-xl font-medium transition-all billing-tab active text-base"
            data-billing="monthly"
          >
            <Icon name="mdi:calendar-month" class="w-5 h-5 inline-block mr-2 -mt-0.5" />
            Monatlich
          </button>
          <button 
            id="yearly-tab" 
            class="px-8 py-3 rounded-xl font-medium transition-all billing-tab text-base"
            data-billing="yearly"
          >
            <Icon name="mdi:calendar-check" class="w-5 h-5 inline-block mr-2 -mt-0.5" />
            Jährlich
            <span class="ml-2 text-xs bg-gradient-to-r from-green-500 to-emerald-500 text-white px-2.5 py-1 rounded-full font-semibold shadow-sm">2 Monate gratis</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- Subscription Plans -->
    <div id="monthly-plans" class="pricing-content">
      <Grid cols={3} gap="large" class="max-w-5xl mx-auto mb-8">
        {pricingPlans.monthly.slice(0, 3).map(plan => (
          <PricingCard plan={plan} type="subscription" billingPeriod="monthly" />
        ))}
      </Grid>
      
      <!-- Additional Plans -->
      {pricingPlans.monthly.length > 3 && (
        <Grid cols={2} gap="large" class="max-w-3xl mx-auto mb-16">
          {pricingPlans.monthly.slice(3).map(plan => (
            <PricingCard plan={plan} type="subscription" billingPeriod="monthly" />
          ))}
        </Grid>
      )}
    </div>
    
    <div id="yearly-plans" class="pricing-content hidden">
      <Grid cols={3} gap="large" class="max-w-5xl mx-auto mb-8">
        {pricingPlans.yearly.slice(0, 3).map(plan => (
          <PricingCard plan={plan} type="subscription" billingPeriod="yearly" />
        ))}
      </Grid>
      
      <!-- Additional Plans -->
      {pricingPlans.yearly.length > 3 && (
        <Grid cols={2} gap="large" class="max-w-3xl mx-auto mb-16">
          {pricingPlans.yearly.slice(3).map(plan => (
            <PricingCard plan={plan} type="subscription" billingPeriod="yearly" />
          ))}
        </Grid>
      )}
    </div>
    
    <!-- One-time Purchases -->
    {showOneTime && (
      <div class="mt-24 pt-20 border-t border-gray-200 dark:border-gray-700">
        <div class="text-center mb-12">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl mb-4">
            <Icon name="mdi:flask" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
          </div>
          <Heading as="h3" size="3" class="mb-4 text-center">
            Einmalige Mana-Käufe
          </Heading>
          <Text size="lg" class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-center">
            Brauchen Sie sofort mehr Mana? Kaufen Sie Mana-Tränke ohne Abo – 
            perfekt für Projekte oder als Geschenk für Ihr Team.
          </Text>
        </div>
        <Grid cols={4} gap="medium" class="max-w-5xl mx-auto">
          {pricingPlans.oneTime.map(plan => (
            <PricingCard plan={plan} type="onetime" />
          ))}
        </Grid>
      </div>
    )}
    
    <!-- Trust Indicators -->
    <div class="mt-20 pt-20 border-t border-gray-200 dark:border-gray-700">
      <div class="text-center mb-12">
        <Heading as="h3" size="4" class="mb-4 text-center">
          Warum Mana das bessere Preismodell ist
        </Heading>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-5xl mx-auto">
        <div class="text-center group">
          <div class="w-16 h-16 bg-gradient-to-br from-green-500/10 to-emerald-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <Icon name="mdi:piggy-bank" class="w-8 h-8 text-green-600 dark:text-green-500" />
          </div>
          <Text weight="semibold" class="mb-2">Bis zu 90% sparen</Text>
          <Text size="sm" class="text-gray-600 dark:text-gray-400">
            Gegenüber einzelnen Tool-Abos
          </Text>
        </div>
        <div class="text-center group">
          <div class="w-16 h-16 bg-gradient-to-br from-blue-500/10 to-cyan-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <Icon name="mdi:account-group" class="w-8 h-8 text-blue-600 dark:text-blue-500" />
          </div>
          <Text weight="semibold" class="mb-2">Team-freundlich</Text>
          <Text size="sm" class="text-gray-600 dark:text-gray-400">
            Mana teilen im Team möglich
          </Text>
        </div>
        <div class="text-center group">
          <div class="w-16 h-16 bg-gradient-to-br from-purple-500/10 to-pink-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <Icon name="mdi:chart-line" class="w-8 h-8 text-purple-600 dark:text-purple-500" />
          </div>
          <Text weight="semibold" class="mb-2">Volle Kostenkontrolle</Text>
          <Text size="sm" class="text-gray-600 dark:text-gray-400">
            Detaillierte Nutzungsstatistiken
          </Text>
        </div>
        <div class="text-center group">
          <div class="w-16 h-16 bg-gradient-to-br from-orange-500/10 to-yellow-500/10 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:scale-110 transition-transform">
            <Icon name="mdi:flash" class="w-8 h-8 text-orange-600 dark:text-orange-500" />
          </div>
          <Text weight="semibold" class="mb-2">Sofort alle Tools</Text>
          <Text size="sm" class="text-gray-600 dark:text-gray-400">
            Keine Wartezeiten oder Verhandlungen
          </Text>
        </div>
      </div>
    </div>
  </Container>
</Section>

<style>
  .billing-tab {
    @apply text-gray-600 dark:text-gray-400;
  }
  
  .billing-tab.active {
    @apply bg-gradient-to-r from-mana-blue to-blue-600 text-white shadow-lg;
  }
  
  .billing-tab.active .icon {
    @apply text-white;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const monthlyTab = document.getElementById('monthly-tab');
    const yearlyTab = document.getElementById('yearly-tab');
    const monthlyPlans = document.getElementById('monthly-plans');
    const yearlyPlans = document.getElementById('yearly-plans');
    
    function switchBilling(billing: 'monthly' | 'yearly') {
      if (billing === 'monthly') {
        monthlyTab?.classList.add('active');
        yearlyTab?.classList.remove('active');
        monthlyPlans?.classList.remove('hidden');
        yearlyPlans?.classList.add('hidden');
      } else {
        yearlyTab?.classList.add('active');
        monthlyTab?.classList.remove('active');
        yearlyPlans?.classList.remove('hidden');
        monthlyPlans?.classList.add('hidden');
      }
    }
    
    monthlyTab?.addEventListener('click', () => switchBilling('monthly'));
    yearlyTab?.addEventListener('click', () => switchBilling('yearly'));
  });
</script>