{% extends "base.html" %}

{% block title %}Wissensnetzwerk{% endblock %}

{% block extra_css %}
<style>
  /* Full height and width for the page */
  html, body {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  
  /* Remove gradient backgrounds */
  .hero-gradient, .bg-fade {
    background: none !important;
    clip-path: none !important;
  }
  
  /* Style elements */
  .mystical-line {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(109, 40, 217, 0.2), transparent);
  }
  
  .dark .mystical-line {
    background: linear-gradient(to right, transparent, rgba(139, 92, 246, 0.2), transparent);
  }
  
  /* Text reveal animation */
  @keyframes textReveal {
    0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
    100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  }
  
  .text-reveal {
    animation: textReveal 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  }
  
  .delay-1 { animation-delay: 0.2s; }
  .delay-2 { animation-delay: 0.4s; }
  .delay-3 { animation-delay: 0.6s; }
  
  /* Home page specific styles */
  .featured-card {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    border: 1px solid;
    border-color: rgba(139, 92, 246, 0.1);
  }
  
  .dark .featured-card {
    border-color: rgba(109, 40, 217, 0.2);
    background-color: rgba(17, 24, 39, 0.7);
  }
  
  .featured-card:hover {
    transform: translateY(-5px);
  }
  
  .dark .featured-card:hover {
    box-shadow: 0 5px 15px rgba(109, 40, 217, 0.2);
    border-color: rgba(109, 40, 217, 0.3);
  }
  
  .featured-card:hover {
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
  }
  
  /* Chat section styles */
  .embedded-chat {
    height: 350px;
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid;
  }
  
  .dark .embedded-chat {
    background-color: rgba(17, 24, 39, 0.7);
    border-color: rgba(109, 40, 217, 0.2);
  }
  
  .embedded-chat {
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(139, 92, 246, 0.1);
  }
  
  #embedded-chat-messages {
    height: 250px;
    overflow-y: auto;
    padding: 1rem;
  }
  
  /* Chat typing indicator */
  .typing-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 3px;
    background-color: currentColor;
    opacity: 0.5;
  }
  
  .typing-dots span:nth-child(1) {
    animation: dot-pulse 1.2s infinite ease-in-out;
  }
  
  .typing-dots span:nth-child(2) {
    animation: dot-pulse 1.2s infinite ease-in-out 0.2s;
  }
  
  .typing-dots span:nth-child(3) {
    animation: dot-pulse 1.2s infinite ease-in-out 0.4s;
  }
  
  @keyframes dot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
  }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="relative pt-20 pb-24">
  <!-- Hero Content -->
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    <div class="text-center mb-16">
      <h1 class="hero-heading mb-8 text-gray-900 dark:text-white">
        <div class="overflow-hidden">
          <span class="gradient-text inline-block text-reveal">Wissen</span>
        </div>
        <div class="overflow-hidden mt-2">
          <span class="inline-block text-reveal delay-1">neu</span>
        </div>
        <div class="mt-2 relative overflow-hidden">
          <span class="relative inline-block text-reveal delay-2">vernetzen
            <div class="absolute -bottom-2 left-0 right-0 h-1 bg-gradient-to-r from-purple-500/0 via-purple-500/70 to-purple-500/0 rounded-full"></div>
          </span>
        </div>
      </h1>
      <div class="overflow-hidden">
        <p class="text-xl md:text-2xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto mb-12 text-reveal delay-3">
          Erkunde komplexe Ideen visuell, schaffe Verbindungen und teile deine Gedanken
          in einem interaktiven Wissensnetzwerk.
        </p>
      </div>
      <div class="flex flex-col sm:flex-row gap-5 justify-center">
        <a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary group transition-all duration-300">
          <span class="flex items-center justify-center">
            <i class="fa-solid fa-diagram-project mr-3 text-purple-200 group-hover:text-white transition-all duration-300"></i> 
            <span class="relative">
              Mindmap erkunden
              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300"></span>
            </span>
          </span>
        </a>
        {% if not current_user.is_authenticated %}
        <a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary group transition-all duration-300">
          <span class="flex items-center justify-center">
            <i class="fa-solid fa-user-plus mr-3 group-hover:text-accent-secondary-dark dark:group-hover:text-accent-secondary-light transition-all duration-300"></i>
            <span class="relative">
              Konto erstellen
              <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-accent-primary-light dark:bg-accent-primary-dark group-hover:w-full transition-all duration-300"></span>
            </span>
          </span>
        </a>
        {% endif %}
      </div>
    </div>
    
    <!-- Central logo and name -->
    <div class="relative w-full max-w-4xl mx-auto h-40 sm:h-60 mb-16">
      <div class="absolute inset-0 flex items-center justify-center">
        <div class="text-center">
          <div class="text-3xl font-bold gradient-text mb-2 animate-float">Systades</div>
          <div class="text-lg text-gray-700 dark:text-gray-300">WISSEN VERNETZEN</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="py-20 relative">
  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
  
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-16">
      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Was ist <span class="gradient-text">Systades?</span></h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        Ein modernes Werkzeug zum Visualisieren, Erforschen und Teilen von Wissen in einem interaktiven
        Netzwerk, das dir hilft, Verbindungen zu entdecken und dein Wissen zu organisieren.
      </p>
    </div>
    
    <!-- Feature Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
      <!-- Feature 1: Visualize -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
        <div class="mb-4 text-purple-600 dark:text-purple-400">
          <i class="fa-solid fa-diagram-project text-3xl"></i>
        </div>
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Visualisiere Wissen</h3>
        <p class="text-gray-700 dark:text-gray-300">
          Organisiere Gedanken und Ideen in einem interaktiven Netzwerk, das komplexe Beziehungen
          visuell darstellt und neue Verbindungen offenbart.
        </p>
      </div>
      
      <!-- Feature 2: Connect -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
        <div class="mb-4 text-indigo-600 dark:text-indigo-400">
          <i class="fa-solid fa-network-wired text-3xl"></i>
        </div>
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Verknüpfe Gedanken</h3>
        <p class="text-gray-700 dark:text-gray-300">
          Entdecke Zusammenhänge zwischen scheinbar unzusammenhängenden Ideen und schaffe dein
          persönliches Wissensnetzwerk über verschiedene Bereiche hinweg.
        </p>
      </div>
      
      <!-- Feature 3: Share -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm">
        <div class="mb-4 text-purple-600 dark:text-purple-400">
          <i class="fa-solid fa-share-nodes text-3xl"></i>
        </div>
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">Teile und Entdecke</h3>
        <p class="text-gray-700 dark:text-gray-300">
          Tausche Erkenntnisse mit anderen aus und erweitere dein Wissen durch die
          Perspektiven und Gedanken der Community.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- AI Assistant Preview -->
<section class="py-20 relative">
  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>

  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">Dein <span class="gradient-text">KI-Assistent</span></h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        Unser integrierter KI-Assistent hilft dir, Wissen zu organisieren, Verbindungen zu finden und
        Einsichten zu gewinnen.
      </p>
    </div>
    
    <!-- Chat Interface Preview -->
    <div class="max-w-3xl mx-auto embedded-chat">
      <!-- Chat Header -->
      <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
        <div class="flex items-center">
          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-3">
            <i class="fa-solid fa-robot text-sm"></i>
          </div>
          <span class="font-medium text-gray-800 dark:text-gray-200">Systades Assistent</span>
        </div>
        <div>
          <button class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
            <i class="fa-solid fa-expand"></i>
          </button>
        </div>
      </div>
      
      <!-- Chat Messages -->
      <div id="embedded-chat-messages" class="border-b border-gray-200 dark:border-gray-700">
        <!-- Assistant Message -->
        <div class="mb-4 flex">
          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
            <i class="fa-solid fa-robot text-sm"></i>
          </div>
          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
            <p class="text-gray-700 dark:text-gray-300">
              Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen? Du kannst mir Fragen zu deinen Gedanken stellen, 
              Verbindungen zwischen Konzepten finden oder Informationen zusammenfassen lassen.
            </p>
          </div>
        </div>
        
        <!-- User Message -->
        <div class="mb-4 flex justify-end">
          <div class="bg-purple-100 dark:bg-purple-900/30 rounded-lg p-3 max-w-[80%]">
            <p class="text-gray-800 dark:text-gray-200">
              Kann ich mit deiner Hilfe eine Mindmap zum Thema Künstliche Intelligenz erstellen?
            </p>
          </div>
          <div class="w-8 h-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center text-gray-700 dark:text-gray-300 ml-2 flex-shrink-0">
            <i class="fa-solid fa-user text-sm"></i>
          </div>
        </div>
        
        <!-- Assistant Typing -->
        <div class="flex items-center">
          <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
            <i class="fa-solid fa-robot text-sm"></i>
          </div>
          <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3">
            <div class="typing-dots">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Chat Input -->
      <div class="p-4">
        <div class="flex">
          <input type="text" placeholder="Stelle eine Frage..." class="mystical-input flex-grow" disabled>
          <button class="ml-2 bg-gradient-to-r from-purple-600 to-indigo-600 text-white p-2 rounded-lg disabled:opacity-50" disabled>
            <i class="fa-solid fa-paper-plane"></i>
          </button>
        </div>
        <!-- Quick Queries -->
        <div class="mt-3 flex flex-wrap gap-2">
          <span class="text-xs text-gray-500 dark:text-gray-400 mr-1">Beispiele:</span>
          <button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Verbindungen finden</button>
          <button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Zusammenfassen</button>
          <button class="quick-query-btn text-xs px-2 py-1 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300" disabled>Mindmap erstellen</button>
        </div>
      </div>
    </div>
    
    <!-- Try it Button -->
    <div class="text-center mt-10">
      <button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.toggleAssistant(true)" 
              class="mystical-button mystical-button-primary inline-flex items-center">
        <i class="fa-solid fa-robot mr-2"></i>
        KI-Assistenten ausprobieren
      </button>
    </div>
  </div>
</section>

<!-- Getting Started Section -->
<section class="py-20 relative">
  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
  
  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="section-heading mb-4 text-gray-900 dark:text-white">So <span class="gradient-text">funktioniert's</span></h2>
      <p class="text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto">
        In wenigen einfachen Schritten kannst du mit Systades beginnen, dein Wissen zu organisieren.
      </p>
    </div>
    
    <!-- Step Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Step 1 -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
          1
        </div>
        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Konto erstellen</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Registriere dich für ein kostenloses Konto, um deine persönliche Wissenslandschaft zu erstellen.
        </p>
        {% if not current_user.is_authenticated %}
        <a href="{{ url_for('register') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
          Jetzt registrieren <i class="fa-solid fa-arrow-right ml-1"></i>
        </a>
        {% endif %}
      </div>
      
      <!-- Step 2 -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
          2
        </div>
        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Mindmap erkunden</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Entdecke die öffentliche Wissensmindmap und füge Knoten zu deiner persönlichen Landschaft hinzu.
        </p>
        <a href="{{ url_for('mindmap') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
          Zur Mindmap <i class="fa-solid fa-arrow-right ml-1"></i>
        </a>
      </div>
      
      <!-- Step 3 -->
      <div class="featured-card rounded-2xl p-6 bg-white/80 dark:bg-gray-800/30 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute top-4 right-4 w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400 font-bold">
          3
        </div>
        <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Gedanken teilen</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4">
          Teile deine eigenen Gedanken, verbinde sie mit vorhandenen Knoten und baue das kollektive Wissen aus.
        </p>
        {% if current_user.is_authenticated %}
        <a href="{{ url_for('profile') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
          Zum Profil <i class="fa-solid fa-arrow-right ml-1"></i>
        </a>
        {% else %}
        <a href="{{ url_for('login') }}" class="text-purple-600 dark:text-purple-400 hover:underline">
          Jetzt anmelden <i class="fa-solid fa-arrow-right ml-1"></i>
        </a>
        {% endif %}
      </div>
    </div>
  </div>
</section>

<!-- Call to Action -->
<section class="py-20 relative">
  <div class="mystical-line absolute top-0 left-1/2 transform -translate-x-1/2 w-1/3"></div>
  
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
    <h2 class="section-heading mb-6 text-gray-900 dark:text-white">Bereit, dein <span class="gradient-text">Wissen zu vernetzen</span>?</h2>
    <p class="text-lg text-gray-700 dark:text-gray-300 mb-8">
      Tritt unserer wachsenden Community bei und entdecke eine neue Art, Wissen zu organisieren und zu teilen.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="{{ url_for('mindmap') }}" class="mystical-button mystical-button-primary">
        <i class="fa-solid fa-diagram-project mr-2"></i> Mindmap erkunden
      </a>
      {% if not current_user.is_authenticated %}
      <a href="{{ url_for('register') }}" class="mystical-button mystical-button-secondary">
        <i class="fa-solid fa-user-plus mr-2"></i> Konto erstellen
      </a>
      {% endif %}
    </div>
  </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
  // Simulate assistant typing and response
  setTimeout(() => {
    const chatMessages = document.getElementById('embedded-chat-messages');
    const typingIndicator = chatMessages.querySelector('.flex:last-child');
    
    if (typingIndicator) {
      // Create assistant response
      const response = document.createElement('div');
      response.className = 'mb-4 flex';
      response.innerHTML = `
        <div class="w-8 h-8 rounded-full bg-gradient-to-r from-purple-600 to-indigo-600 flex items-center justify-center text-white mr-2 flex-shrink-0">
          <i class="fa-solid fa-robot text-sm"></i>
        </div>
        <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 max-w-[80%]">
          <p class="text-gray-700 dark:text-gray-300">
            Natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema KI zu erstellen. Beginnen wir mit zentralen Konzepten wie Machine Learning, Neural Networks und Natural Language Processing. Möchtest du einen bestimmten Aspekt der KI genauer betrachten?
          </p>
        </div>
      `;
      
      // Remove typing indicator and add response
      typingIndicator.remove();
      chatMessages.appendChild(response);
      
      // Scroll to bottom
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  }, 3000);
</script>
{% endblock %}