---
import { getCollection } 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 Card from '../../components/ui/Card.astro';
import Grid from '../../components/layout/Grid.astro';
import HeroSection from '../../components/content/HeroSection.astro';
import { Icon } from 'astro-icon/components';

const privacyArticles = await getCollection('privacy');
const sortedArticles = privacyArticles.sort((a, b) => a.data.order - b.data.order);

// Group articles by category
const articlesByCategory = {
  'compliance': sortedArticles.filter(a => a.data.category === 'compliance'),
  'security': sortedArticles.filter(a => a.data.category === 'security'),
  'ai-ethics': sortedArticles.filter(a => a.data.category === 'ai-ethics'),
  'transparency': sortedArticles.filter(a => a.data.category === 'transparency'),
};

const categoryInfo = {
  'compliance': {
    title: 'Compliance & Rechtliches',
    description: 'DSGVO, Datenschutzgesetze und rechtliche Grundlagen',
    icon: '📋',
    color: 'blue'
  },
  'security': {
    title: 'Sicherheit',
    description: 'Technische Maßnahmen zum Schutz Ihrer Daten',
    icon: '🔒',
    color: 'green'
  },
  'ai-ethics': {
    title: 'KI-Ethik',
    description: 'Verantwortungsvoller Umgang mit künstlicher Intelligenz',
    icon: '🤖',
    color: 'purple'
  },
  'transparency': {
    title: 'Transparenz',
    description: 'Offene Kommunikation über unsere Praktiken',
    icon: '🔍',
    color: 'orange'
  }
};
---

<Layout title="Datenschutz-Center | Mana">
  <!-- Hero Section -->
  <section class="hero-privacy">
    <div class="hero-overlay"></div>

    <div class="hero-content-privacy">
      <div class="hero-text-privacy">
        <h1 class="hero-title-privacy">
          Datenschutz-<span class="gradient-text">Center</span>
        </h1>

        <p class="hero-subtitle-privacy">
          Transparenz und Sicherheit sind unsere obersten Prioritäten.
        </p>
      </div>
    </div>
  </section>

  <!-- Legal Documents Section -->
  <section class="legal-docs-section">
    <div class="legal-docs-container">
      <div class="legal-docs-grid">
        <!-- Datenschutzerklärung -->
        <a href="/datenschutz" class="legal-doc-card">
          <div class="legal-doc-card-inner">
            <div class="legal-doc-icon-wrapper">
              <Icon name="mdi:file-document-outline" class="legal-doc-icon" />
            </div>
            <h3 class="legal-doc-title">Datenschutzerklärung</h3>
            <p class="legal-doc-description">Unsere vollständige Datenschutzerklärung</p>
            <div class="legal-doc-arrow">
              <Icon name="mdi:arrow-right" class="w-5 h-5" />
            </div>
          </div>
        </a>

        <!-- AGB -->
        <a href="/legal/agb" class="legal-doc-card">
          <div class="legal-doc-card-inner">
            <div class="legal-doc-icon-wrapper">
              <Icon name="mdi:scale-balance" class="legal-doc-icon" />
            </div>
            <h3 class="legal-doc-title">AGB</h3>
            <p class="legal-doc-description">Allgemeine Geschäftsbedingungen</p>
            <div class="legal-doc-arrow">
              <Icon name="mdi:arrow-right" class="w-5 h-5" />
            </div>
          </div>
        </a>

        <!-- Impressum -->
        <a href="/impressum" class="legal-doc-card">
          <div class="legal-doc-card-inner">
            <div class="legal-doc-icon-wrapper">
              <Icon name="mdi:information-outline" class="legal-doc-icon" />
            </div>
            <h3 class="legal-doc-title">Impressum</h3>
            <p class="legal-doc-description">Rechtliche Informationen</p>
            <div class="legal-doc-arrow">
              <Icon name="mdi:arrow-right" class="w-5 h-5" />
            </div>
          </div>
        </a>

        <!-- Werteversprechen -->
        <a href="/mission" class="legal-doc-card">
          <div class="legal-doc-card-inner">
            <div class="legal-doc-icon-wrapper">
              <Icon name="mdi:heart-outline" class="legal-doc-icon" />
            </div>
            <h3 class="legal-doc-title">Werteversprechen</h3>
            <p class="legal-doc-description">Unsere Mission und Werte</p>
            <div class="legal-doc-arrow">
              <Icon name="mdi:arrow-right" class="w-5 h-5" />
            </div>
          </div>
        </a>

        <!-- TOMs -->
        <a href="/privacy/toms" class="legal-doc-card">
          <div class="legal-doc-card-inner">
            <div class="legal-doc-icon-wrapper">
              <Icon name="mdi:shield-lock-outline" class="legal-doc-icon" />
            </div>
            <h3 class="legal-doc-title">TOMs</h3>
            <p class="legal-doc-description">Technisch-organisatorische Maßnahmen</p>
            <div class="legal-doc-arrow">
              <Icon name="mdi:arrow-right" class="w-5 h-5" />
            </div>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- Key Promises Section -->
  <section class="promises-section">
    <div class="promises-container">
      <div class="promises-grid">
        <!-- Kein KI-Training -->
        <div class="promise-card">
          <div class="promise-card-inner">
            <div class="promise-icon-wrapper">
              <Icon name="mdi:check-bold" class="promise-icon" />
            </div>
            <h3 class="promise-title">Kein KI-Training</h3>
            <p class="promise-description">mit Ihren Daten</p>
          </div>
        </div>

        <!-- DSGVO-konform -->
        <div class="promise-card">
          <div class="promise-card-inner">
            <div class="promise-icon-wrapper">
              <Icon name="mdi:shield-check" class="promise-icon" />
            </div>
            <h3 class="promise-title">DSGVO-konform</h3>
            <p class="promise-description">100% rechtssicher</p>
          </div>
        </div>

        <!-- Deutsche Server -->
        <div class="promise-card">
          <div class="promise-card-inner">
            <div class="promise-icon-wrapper">
              <Icon name="mdi:server-security" class="promise-icon" />
            </div>
            <h3 class="promise-title">Deutsche Server</h3>
            <p class="promise-description">Ihre Daten bleiben in der EU</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Articles by Category -->
  <section class="articles-section">
    <Container class="relative z-10">
      <div class="space-y-16">
        {Object.entries(articlesByCategory).map(([category, articles]) => {
          if (articles.length === 0) return null;
          const info = categoryInfo[category];
          
          return (
            <div>
              <!-- Category Header -->
              <div class="text-center mb-12">
                <div class:list={[
                  "inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br rounded-2xl mb-4",
                  {
                    'from-blue-500/10 to-cyan-500/10': info.color === 'blue',
                    'from-green-500/10 to-emerald-500/10': info.color === 'green',
                    'from-purple-500/10 to-pink-500/10': info.color === 'purple',
                    'from-orange-500/10 to-yellow-500/10': info.color === 'orange'
                  }
                ]}>
                  <span class="text-3xl">{info.icon}</span>
                </div>
                <Heading as="h2" size="2" class="mb-2 text-center">
                  {info.title}
                </Heading>
                <Text size="lg" class="text-gray-600 dark:text-gray-400 text-center">
                  {info.description}
                </Text>
              </div>
              
              <!-- Articles Grid -->
              <Grid cols={articles.length === 1 ? 1 : 2} gap="large" class="max-w-5xl mx-auto">
                {articles.map((article) => (
                  <a href={`/privacy/${article.slug}`} class="block group">
                    <div class="relative h-full">
                      <div class:list={[
                        "absolute -inset-0.5 bg-gradient-to-r rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur",
                        {
                          'from-blue-500/0 via-blue-500/20 to-blue-500/0': info.color === 'blue',
                          'from-green-500/0 via-green-500/20 to-green-500/0': info.color === 'green',
                          'from-purple-500/0 via-purple-500/20 to-purple-500/0': info.color === 'purple',
                          'from-orange-500/0 via-orange-500/20 to-orange-500/0': info.color === 'orange'
                        }
                      ]}></div>
                      
                      <div class="relative h-full bg-white/90 backdrop-blur-sm dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 group-hover:border-${info.color}-500/50 transition-all duration-300 overflow-hidden">
                        {article.data.featured && (
                          <div class="absolute top-4 right-4 z-10">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-gradient-to-r from-yellow-400 to-orange-400 text-white shadow-lg">
                              <Icon name="mdi:star" class="w-3 h-3 mr-1" />
                              Empfohlen
                            </span>
                          </div>
                        )}
                        
                        <div class="p-8">
                          <div class="mb-6">
                            <div class:list={[
                              "inline-flex items-center justify-center w-12 h-12 bg-gradient-to-br rounded-xl mb-4 group-hover:scale-110 transition-transform",
                              {
                                'from-blue-500/10 to-cyan-500/10': info.color === 'blue',
                                'from-green-500/10 to-emerald-500/10': info.color === 'green',
                                'from-purple-500/10 to-pink-500/10': info.color === 'purple',
                                'from-orange-500/10 to-yellow-500/10': info.color === 'orange'
                              }
                            ]}>
                              <span class="text-xl">{info.icon}</span>
                            </div>
                            
                            <Heading as="h3" size="4" class:list={[
                              "mb-3 transition-colors",
                              {
                                'group-hover:text-blue-600': info.color === 'blue',
                                'group-hover:text-green-600': info.color === 'green',
                                'group-hover:text-purple-600': info.color === 'purple',
                                'group-hover:text-orange-600': info.color === 'orange'
                              }
                            ]}>
                              {article.data.title}
                            </Heading>
                            
                            <Text size="base" class="text-gray-600 dark:text-gray-400">
                              {article.data.description}
                            </Text>
                          </div>
                          
                          {article.data.tags && article.data.tags.length > 0 && (
                            <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-100 dark:border-gray-700">
                              {article.data.tags.slice(0, 3).map((tag) => (
                                <span class:list={[
                                  "inline-flex items-center px-3 py-1 rounded-full text-xs font-medium",
                                  {
                                    'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300': info.color === 'blue',
                                    'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300': info.color === 'green',
                                    'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300': info.color === 'purple',
                                    'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300': info.color === 'orange'
                                  }
                                ]}>
                                  {tag}
                                </span>
                              ))}
                              {article.data.tags.length > 3 && (
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
                                  +{article.data.tags.length - 3}
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                      </div>
                    </div>
                  </a>
                ))}
              </Grid>
            </div>
          );
        })}
      </div>
    </Container>
  </section>

  <Footer />
</Layout>

<style>
  /* ========================
     HERO SECTION
     ======================== */
  .hero-privacy {
    position: relative;
    min-height: 30vh;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    padding: calc(var(--grid-unit) * 2) 0;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }

  .hero-content-privacy {
    position: relative;
    z-index: 10;
    max-width: 900px;
    width: 100%;
    padding: 0 calc(var(--grid-unit) * 2);
    text-align: center;
  }

  .hero-text-privacy {
    display: flex;
    flex-direction: column;
    gap: calc(var(--grid-unit) * 0.75);
    align-items: center;
  }

  .hero-title-privacy {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #f8fafc;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
  }

  .hero-subtitle-privacy {
    font-size: clamp(1.125rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
    max-width: 700px;
  }

  /* ========================
     LEGAL DOCUMENTS SECTION
     ======================== */
  .legal-docs-section {
    position: relative;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    padding: calc(var(--grid-unit) * 3) 0;
  }

  .legal-docs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 calc(var(--grid-unit) * 2);
  }

  .legal-docs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--grid-unit) * 1);
    max-width: 1600px;
    margin: 0 auto;
  }

  .legal-doc-card {
    height: 100%;
    text-decoration: none;
    display: block;
  }

  .legal-doc-card-inner {
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: calc(var(--grid-unit) * 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    position: relative;
  }

  .legal-doc-card:hover .legal-doc-card-inner {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
      0 20px 40px -15px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(59, 130, 246, 0.2);
  }

  .legal-doc-icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--grid-unit) * 0.5);
    transition: all 0.3s ease;
  }

  .legal-doc-card:hover .legal-doc-icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
  }

  .legal-doc-icon {
    width: 32px;
    height: 32px;
    color: #3b82f6;
  }

  .legal-doc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.25) 0;
  }

  .legal-doc-description {
    font-size: 0.9375rem;
    color: #cbd5e1;
    margin: 0 0 calc(var(--grid-unit) * 0.5) 0;
    flex: 1;
  }

  .legal-doc-arrow {
    color: #3b82f6;
    transition: transform 0.3s ease;
  }

  .legal-doc-card:hover .legal-doc-arrow {
    transform: translateX(4px);
  }

  /* ========================
     PROMISES SECTION
     ======================== */
  .promises-section {
    position: relative;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    padding: calc(var(--grid-unit) * 3) 0;
  }

  .promises-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 calc(var(--grid-unit) * 2);
  }

  .promises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: calc(var(--grid-unit) * 1);
    max-width: 900px;
    margin: 0 auto;
  }

  .promise-card {
    height: 100%;
  }

  .promise-card-inner {
    height: 100%;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 20px;
    padding: calc(var(--grid-unit) * 0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
  }

  .promise-card:hover .promise-card-inner {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
      0 20px 40px -15px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(59, 130, 246, 0.2);
  }

  .promise-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: calc(var(--grid-unit) * 0.5);
    transition: all 0.3s ease;
  }

  .promise-card:hover .promise-icon-wrapper {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(37, 99, 235, 0.25) 100%);
  }

  .promise-icon {
    width: 28px;
    height: 28px;
    color: #3b82f6;
  }

  .promise-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 calc(var(--grid-unit) * 0.25) 0;
  }

  .promise-description {
    font-size: 0.9375rem;
    color: #cbd5e1;
    margin: 0;
  }

  /* ========================
     ARTICLES SECTION
     ======================== */
  .articles-section {
    position: relative;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    padding: calc(var(--grid-unit) * 4) 0;
  }

  /* Update card backgrounds to match dark theme */
  .articles-section :global(.bg-white\/90) {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    backdrop-filter: blur(12px);
  }

  .articles-section :global(.border-gray-200) {
    border-color: rgba(59, 130, 246, 0.1) !important;
  }

  .articles-section :global(.dark\\:border-gray-700) {
    border-color: rgba(59, 130, 246, 0.1) !important;
  }

  .articles-section :global(.text-gray-600) {
    color: #cbd5e1 !important;
  }

  .articles-section :global(.dark\\:text-gray-400) {
    color: #cbd5e1 !important;
  }

  .articles-section :global(h2),
  .articles-section :global(h3) {
    color: #f8fafc !important;
  }

  .articles-section :global(.group:hover .border-gray-200),
  .articles-section :global(.group:hover .dark\\:border-gray-700) {
    border-color: rgba(59, 130, 246, 0.3) !important;
  }

  /* Responsive */
  @media (max-width: 1200px) {
    .legal-docs-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 900px) {
    .legal-docs-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .hero-privacy {
      min-height: 25vh;
      padding: calc(var(--grid-unit) * 1.5) 0;
    }

    .hero-title-privacy {
      font-size: clamp(2rem, 6vw, 2.5rem);
    }

    .promises-grid {
      grid-template-columns: 1fr;
      gap: calc(var(--grid-unit) * 0.75);
    }
  }

  @media (max-width: 600px) {
    .legal-docs-grid {
      grid-template-columns: 1fr;
      gap: calc(var(--grid-unit) * 0.75);
    }
  }

  @media (max-width: 640px) {
    .legal-docs-section {
      padding: calc(var(--grid-unit) * 2) 0;
    }

    .legal-docs-container {
      padding: 0 calc(var(--grid-unit) * 1);
    }

    .legal-doc-title {
      font-size: 1.125rem;
    }

    .legal-doc-icon-wrapper {
      width: 60px;
      height: 60px;
    }

    .legal-doc-icon {
      width: 28px;
      height: 28px;
    }
  }
</style>