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

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

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

// Get other context pages for navigation
const allPages = await getCollection('context');
const otherPages = allPages
  .filter(p => p.slug !== page.slug)
  .sort((a, b) => a.data.order - b.data.order);
---

<Layout title={`${page.data.title} - Mana Kontext`}>
  <Navbar />
  
  <Section spacing="large" class="pt-24 pb-8">
    <Container>
      <div class="max-w-4xl mx-auto">
        <Button href="/context" variant="ghost" size="small" class="mb-6">
          <Icon name="mdi:arrow-left" class="w-4 h-4 mr-2" />
          Zurück zur Übersicht
        </Button>
        
        <div class="mb-8">
          {page.data.icon && (
            <div class="w-16 h-16 bg-mana-blue/10 rounded-xl flex items-center justify-center mb-6">
              <Icon name={page.data.icon} class="w-8 h-8 text-mana-blue" />
            </div>
          )}
          <Heading as="h1" size="1" class="mb-4">{page.data.title}</Heading>
          <Text size="xl" color="muted" class="mb-6">{page.data.description}</Text>
          
          <div class="flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
            {page.data.publishedAt && (
              <div class="flex items-center gap-2">
                <Icon name="mdi:calendar" class="w-4 h-4" />
                <span>Veröffentlicht: {new Date(page.data.publishedAt).toLocaleDateString('de-DE')}</span>
              </div>
            )}
            {page.data.updatedAt && (
              <div class="flex items-center gap-2">
                <Icon name="mdi:update" class="w-4 h-4" />
                <span>Aktualisiert: {new Date(page.data.updatedAt).toLocaleDateString('de-DE')}</span>
              </div>
            )}
          </div>
        </div>

        <div class="prose prose-lg dark:prose-invert max-w-none
          prose-headings:text-gray-900 dark:prose-headings:text-gray-100
          prose-h1:text-4xl prose-h1:font-bold prose-h1:mb-6
          prose-h2:text-3xl prose-h2:font-semibold prose-h2:mt-8 prose-h2:mb-4
          prose-h3:text-2xl prose-h3:font-semibold prose-h3:mt-6 prose-h3:mb-3
          prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-p:mb-4
          prose-a:text-mana-blue prose-a:no-underline hover:prose-a:underline
          prose-strong:text-gray-900 dark:prose-strong:text-gray-100
          prose-ul:list-disc prose-ul:pl-6 prose-ul:mb-4
          prose-ol:list-decimal prose-ol:pl-6 prose-ol:mb-4
          prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-li:mb-2
          prose-blockquote:border-l-4 prose-blockquote:border-mana-blue prose-blockquote:pl-4 prose-blockquote:italic
          prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
          prose-pre:bg-gray-900 prose-pre:text-gray-100">
          <Content />
        </div>

        {otherPages.length > 0 && (
          <div class="mt-16 pt-8 border-t border-gray-200 dark:border-gray-800">
            <Heading as="h3" size="4" class="mb-6">Weitere Artikel</Heading>
            <div class="grid gap-4">
              {otherPages.map((otherPage) => (
                <Card variant="bordered" padding="medium" class="hover:border-mana-blue transition-colors">
                  <a href={`/context/${otherPage.slug}`} class="flex items-center justify-between">
                    <div class="flex items-center gap-3">
                      {otherPage.data.icon && (
                        <Icon name={otherPage.data.icon} class="w-5 h-5 text-mana-blue" />
                      )}
                      <div>
                        <Text weight="semibold">{otherPage.data.title}</Text>
                        <Text size="sm" color="muted">{otherPage.data.description}</Text>
                      </div>
                    </div>
                    <Icon name="mdi:arrow-right" class="w-5 h-5 text-gray-400" />
                  </a>
                </Card>
              ))}
            </div>
          </div>
        )}

        <div class="mt-12">
          <Card variant="elevated" padding="large" class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
            <div class="flex items-start gap-4">
              <Icon name="mdi:lightbulb" class="w-8 h-8 text-mana-blue flex-shrink-0" />
              <div>
                <Heading as="h4" size="5" class="mb-2">Bereit durchzustarten?</Heading>
                <Text color="muted" class="mb-4">
                  Testen Sie Mana kostenlos mit 500 Credits Startguthaben
                </Text>
                <Button href="/start" variant="primary">
                  Jetzt kostenlos starten
                </Button>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </Container>
  </Section>

  <Footer />
</Layout>