---
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/navigation/Navbar.astro';
import Footer from '../../components/navigation/Footer.astro';
import Section from '../../components/content/Section.astro';
import Container from '../../components/layout/Container.astro';
import Grid from '../../components/layout/Grid.astro';
import Card from '../../components/ui/Card.astro';
import Button from '../../components/ui/Button.astro';
import Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import Flex from '../../components/layout/Flex.astro';
import { getCollection, getEntry } from 'astro:content';

export async function getStaticPaths() {
  const branchen = await getCollection('branchen');
  return branchen.map((group) => ({
    params: { slug: group.slug },
    props: { group },
  }));
}

const { group } = Astro.props;
const { Content } = await group.render();
---

<Layout title={`${group.data.title} - Mana für Ihre Branche`}>
  <Navbar />
  
  <!-- Hero Section -->
  <Section spacing="large" class="bg-gray-50 dark:bg-gray-900">
    <Container>
      <div class="max-w-4xl mx-auto text-center">
        <div class="text-6xl mb-6">{group.data.icon}</div>
        <Heading as="h1" size="1" class="mb-6">
          Mana für {group.data.title}
        </Heading>
        <Text size="xl" class="text-gray-600 dark:text-gray-400 mb-8">
          {group.data.description}
        </Text>
        
        {group.data.pricing.special && (
          <div class="inline-block bg-mana-blue/10 text-mana-blue px-6 py-3 rounded-full text-lg font-medium mb-8">
            {group.data.pricing.discount || group.data.pricing.details}
          </div>
        )}
        
        <Flex gap="medium" justify="center">
          <Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
            Jetzt starten
          </Button>
          <Button href="/demo" variant="outline" size="large">
            Demo anfordern
          </Button>
        </Flex>
      </div>
    </Container>
  </Section>
  
  <!-- Benefits Section -->
  <Section spacing="xlarge">
    <Container>
      <Heading as="h2" size="2" align="center" class="mb-12">
        Ihre Vorteile mit Mana
      </Heading>
      
      <Grid cols={3} gap="large" class="max-w-5xl mx-auto">
        {group.data.benefits.map((benefit, index) => (
          <Card variant="elevated" padding="large">
            <div class="w-12 h-12 bg-mana-blue/10 rounded-lg flex items-center justify-center mb-4">
              <span class="text-2xl font-bold text-mana-blue">{index + 1}</span>
            </div>
            <Text>{benefit}</Text>
          </Card>
        ))}
      </Grid>
    </Container>
  </Section>
  
  <!-- Content Section -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
    <Container>
      <div class="max-w-4xl mx-auto prose prose-lg dark:prose-invert">
        <Content />
      </div>
    </Container>
  </Section>
  
  <!-- Use Cases Section -->
  <Section spacing="xlarge">
    <Container>
      <Heading as="h2" size="2" align="center" class="mb-12">
        So nutzen {group.data.title} Mana
      </Heading>
      
      <Grid cols={2} gap="large" class="max-w-4xl mx-auto">
        {group.data.useCases.map((useCase) => (
          <Card variant="bordered" padding="medium">
            <Flex align="center" gap="small">
              <span class="text-2xl">💡</span>
              <Text>{useCase}</Text>
            </Flex>
          </Card>
        ))}
      </Grid>
    </Container>
  </Section>
  
  <!-- Testimonial Section -->
  {group.data.testimonial && (
    <Section spacing="xlarge" class="bg-mana-blue">
      <Container>
        <div class="max-w-3xl mx-auto text-center">
          <div class="text-6xl mb-6 text-white opacity-50">❝</div>
          <Text size="2xl" class="text-white mb-6 italic">
            {group.data.testimonial.quote}
          </Text>
          <div>
            <Text weight="semibold" class="text-white">
              {group.data.testimonial.author}
            </Text>
            <Text size="sm" class="text-gray-200">
              {group.data.testimonial.role}
              {group.data.testimonial.company && `, ${group.data.testimonial.company}`}
            </Text>
          </div>
        </div>
      </Container>
    </Section>
  )}
  
  <!-- CTA Section -->
  <Section spacing="xlarge">
    <Container class="text-center">
      <Heading as="h2" size="2" class="mb-6">
        Bereit für flexiblere KI-Nutzung?
      </Heading>
      <Text size="xl" class="mb-8 text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
        Starten Sie noch heute und erleben Sie, wie Mana Ihre Arbeitsweise revolutioniert.
      </Text>
      
      <Grid cols={3} gap="large" class="max-w-3xl mx-auto mb-8">
        <Card class="text-center">
          <div class="text-3xl mb-2">🎯</div>
          <Text weight="semibold">Kostenlos testen</Text>
          <Text size="sm" color="muted">150 Mana gratis</Text>
        </Card>
        <Card class="text-center">
          <div class="text-3xl mb-2">🚀</div>
          <Text weight="semibold">Sofort starten</Text>
          <Text size="sm" color="muted">Keine Kreditkarte</Text>
        </Card>
        <Card class="text-center">
          <div class="text-3xl mb-2">💬</div>
          <Text weight="semibold">Support inklusive</Text>
          <Text size="sm" color="muted">Persönliche Betreuung</Text>
        </Card>
      </Grid>
      
      <Button href="/start" size="large" class="bg-mana-blue hover:bg-blue-600 text-white">
        Jetzt für {group.data.title} starten
      </Button>
    </Container>
  </Section>
  
  <Footer />
</Layout>