---
import { getCollection, getEntry } from 'astro:content';
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 Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import Button from '../../components/ui/Button.astro';
import Card from '../../components/ui/Card.astro';
import Grid from '../../components/layout/Grid.astro';
import Flex from '../../components/layout/Flex.astro';
import { Icon } from 'astro-icon/components';

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

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

// Get other client stories
const allClients = await getCollection('clients');
const otherClients = allClients
  .filter(c => c.slug !== client.slug)
  .sort((a, b) => a.data.order - b.data.order)
  .slice(0, 2);
---

<Layout title={`${client.data.company} - Erfolgsgeschichte mit Mana`}>
  <Navbar />
  
  <Section spacing="large" class="pt-32">
    <Container>
      <div class="max-w-6xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-12">
          <div class="mb-6">
            <img 
              src={client.data.logo} 
              alt={`${client.data.company} Logo`}
              class="h-16 mx-auto"
            />
          </div>
          
          <Heading as="h1" size="1" class="mb-4">
            {client.data.company}
          </Heading>
          
          <div class="flex items-center justify-center gap-4 text-sm text-gray-500 dark:text-gray-400">
            <span>{client.data.industry}</span>
            <span>·</span>
            <span>{client.data.location}</span>
            <span>·</span>
            <span>
              {client.data.size === 'startup' && 'Startup'}
              {client.data.size === 'mittelstand' && 'Mittelstand'}
              {client.data.size === 'enterprise' && 'Enterprise'}
            </span>
          </div>
        </div>
        
        <!-- Testimonial Quote -->
        <Card variant="elevated" padding="large" class="mb-12 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
          <div class="text-center">
            <Icon name="mdi:format-quote-open" class="w-8 h-8 text-mana-blue mb-4 mx-auto" />
            <Text size="xl" class="mb-6 italic">
              "{client.data.testimonial.quote}"
            </Text>
            <div>
              <Text weight="semibold">{client.data.testimonial.author}</Text>
              <Text size="sm" color="muted">{client.data.testimonial.role}</Text>
            </div>
          </div>
        </Card>
        
        <!-- Key Stats -->
        <Grid cols={client.data.stats.length} gap="large" class="mb-16 max-w-4xl mx-auto">
          {client.data.stats.map(stat => (
            <div class="text-center">
              <div class="text-4xl font-bold text-mana-blue mb-2">{stat.value}</div>
              <Text color="muted">{stat.label}</Text>
            </div>
          ))}
        </Grid>
        
        <!-- Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
          <!-- Main Content -->
          <div class="lg:col-span-2">
            <div class="prose prose-lg dark:prose-invert max-w-none">
              <Content />
            </div>
          </div>
          
          <!-- Sidebar -->
          <div class="lg:col-span-1">
            <div class="sticky top-24 space-y-6">
              <!-- Quick Facts -->
              <Card variant="bordered" padding="medium">
                <Heading as="h3" size="6" class="mb-4">
                  <Icon name="mdi:information" class="w-5 h-5 inline mr-2" />
                  Quick Facts
                </Heading>
                
                <div class="space-y-3">
                  <div>
                    <Text size="sm" color="muted">Challenge</Text>
                    <Text size="sm" weight="semibold">{client.data.challenge}</Text>
                  </div>
                  
                  <div>
                    <Text size="sm" color="muted">Lösung</Text>
                    <Text size="sm" weight="semibold">{client.data.solution}</Text>
                  </div>
                </div>
              </Card>
              
              <!-- Mana Usage -->
              <Card variant="bordered" padding="medium">
                <Heading as="h3" size="6" class="mb-4">
                  <Icon name="mdi:chart-line" class="w-5 h-5 inline mr-2" />
                  Mana-Nutzung
                </Heading>
                
                <div class="space-y-3">
                  <div class="flex justify-between items-center">
                    <Text size="sm" color="muted">Monatliche Credits</Text>
                    <Text size="sm" weight="semibold">{client.data.manaUsage.monthlyCredits.toLocaleString('de-DE')}</Text>
                  </div>
                  
                  <div class="flex justify-between items-center">
                    <Text size="sm" color="muted">Team-Größe</Text>
                    <Text size="sm" weight="semibold">{client.data.manaUsage.teamSize} Nutzer</Text>
                  </div>
                  
                  <div>
                    <Text size="sm" color="muted" class="mb-2">Hauptsächlich genutzte Tools</Text>
                    <div class="flex flex-wrap gap-2">
                      {client.data.manaUsage.mainTools.map(tool => (
                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800">
                          {tool}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </Card>
              
              <!-- Key Results -->
              <Card variant="bordered" padding="medium">
                <Heading as="h3" size="6" class="mb-4">
                  <Icon name="mdi:check-circle" class="w-5 h-5 inline mr-2 text-green-500" />
                  Wichtigste Ergebnisse
                </Heading>
                
                <ul class="space-y-2">
                  {client.data.results.map(result => (
                    <li class="flex items-start gap-2">
                      <Icon name="mdi:check" class="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
                      <Text size="sm">{result}</Text>
                    </li>
                  ))}
                </ul>
              </Card>
              
              <!-- CTA -->
              <Card variant="elevated" padding="medium" class="bg-mana-blue text-white">
                <Heading as="h3" size="6" class="mb-3 text-white">
                  Bereit für Ihren Erfolg?
                </Heading>
                <Text size="sm" class="mb-4 text-gray-100">
                  Starten Sie noch heute mit Mana und transformieren Sie Ihre KI-Nutzung.
                </Text>
                <Button href="/start" variant="secondary" size="small" class="w-full">
                  Kostenlos testen
                </Button>
              </Card>
            </div>
          </div>
        </div>
        
        <!-- Other Success Stories -->
        {otherClients.length > 0 && (
          <div>
            <Heading as="h2" size="3" align="center" class="mb-8">
              Weitere Erfolgsgeschichten
            </Heading>
            
            <Grid cols={2} gap="large" class="max-w-4xl mx-auto">
              {otherClients.map(otherClient => (
                <a href={`/clients/${otherClient.slug}`} class="block group">
                  <Card variant="bordered" padding="large" class="h-full hover:border-mana-blue transition-all hover:shadow-lg">
                    <div class="mb-4">
                      <img 
                        src={otherClient.data.logo} 
                        alt={`${otherClient.data.company} Logo`}
                        class="h-12 grayscale group-hover:grayscale-0 transition-all"
                      />
                    </div>
                    
                    <Heading as="h3" size="5" class="mb-2 group-hover:text-mana-blue transition-colors">
                      {otherClient.data.company}
                    </Heading>
                    
                    <Text size="sm" color="muted" class="mb-4">
                      {otherClient.data.industry} · {otherClient.data.location}
                    </Text>
                    
                    <Text size="sm" class="italic">
                      "{otherClient.data.testimonial.quote.substring(0, 100)}..."
                    </Text>
                  </Card>
                </a>
              ))}
            </Grid>
          </div>
        )}
      </div>
    </Container>
  </Section>
  
  <Footer />
</Layout>

<style>
  .prose h2 {
    @apply text-2xl font-bold mt-8 mb-4;
  }
  
  .prose h3 {
    @apply text-xl font-semibold mt-6 mb-3;
  }
  
  .prose p {
    @apply mb-4 leading-relaxed;
  }
  
  .prose ul {
    @apply space-y-2 mb-4;
  }
  
  .prose li {
    @apply ml-6 list-disc;
  }
  
  .prose strong {
    @apply font-semibold text-gray-900 dark:text-gray-100;
  }
</style>