{% 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">
      <div class="embedded-chat" id="demo-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 (4o-mini)</span>
          </div>
          <div>
            <button id="open-real-assistant" 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%]">
              <div class="text-gray-700 dark:text-gray-300 markdown-content">
                <p>Hallo! Ich bin dein Systades-Assistent. Wie kann ich dir heute helfen?</p>
                <p>Du kannst mir Fragen zu:</p>
                <ul>
                  <li><strong>Gedanken</strong> in der Datenbank</li>
                  <li><strong>Kategorien</strong> und Wissensgebieten</li>
                  <li><strong>Mindmaps</strong> und Visualisierungsmöglichkeiten</li>
                </ul>
                <p>stellen.</p>
              </div>
            </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 Response -->
          <div class="mb-4 flex" id="demo-ai-response">
            <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%]">
              <div class="text-gray-700 dark:text-gray-300 markdown-content">
                <p>Ja, natürlich! Ich kann dir dabei helfen, eine Mindmap zum Thema <strong>Künstliche Intelligenz</strong> zu erstellen.</p>
                <p>Du kannst wie folgt vorgehen:</p>
                <ol>
                  <li>Gehe zur <strong>Mindmap</strong>-Ansicht</li>
                  <li>Suche nach dem Knoten "Künstliche Intelligenz" unter der Kategorie "Technologie"</li>
                  <li>Füge diesen Knoten zu deiner persönlichen Mindmap hinzu</li>
                  <li>Ergänze verwandte Themen wie <em>Machine Learning, Neural Networks oder Data Science</em></li>
                </ol>
                <p>Soll ich dir noch mehr spezifische Informationen zu KI-Teilgebieten geben?</p>
              </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 data-question="Was sind die wichtigsten Grundlagen der Künstlichen Intelligenz?" 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 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">KI-Grundlagen</button>
            <button data-question="Wie kann ich eine Mindmap zum Thema Neuronale Netzwerke erstellen?" 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 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Mindmap erstellen</button>
            <button data-question="Zeige mir alle verfügbaren Kategorien in der Datenbank" 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 hover:bg-gray-300 dark:hover:bg-gray-600 cursor-pointer transition-colors">Datenbank durchsuchen</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Try it Button -->
    <div class="text-center mt-10">
      <button onclick="window.MindMap && window.MindMap.assistant && window.MindMap.assistant.sendQuestion('Hallo! Ich möchte mehr über die Funktionen der Wissensdatenbank erfahren. Was kann ich hier alles machen?')" 
              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>
  document.addEventListener('DOMContentLoaded', function() {
    // Expand-Button mit dem echten Assistenten verknüpfen
    const openRealAssistantBtn = document.getElementById('open-real-assistant');
    if (openRealAssistantBtn) {
      openRealAssistantBtn.addEventListener('click', function() {
        if (window.MindMap && window.MindMap.assistant) {
          window.MindMap.assistant.toggleAssistant(true);
        }
      });
    }
    
    // Auch die Beispiel-Buttons im Demo-Chat klickbar machen
    const quickQueryButtons = document.querySelectorAll('.quick-query-btn');
    quickQueryButtons.forEach(button => {
      button.addEventListener('click', function() {
        if (window.MindMap && window.MindMap.assistant) {
          const question = button.getAttribute('data-question');
          if (question) {
            window.MindMap.assistant.sendQuestion(question);
          } else {
            // Fallback auf den Button-Text, falls kein data-question Attribut gesetzt ist
            const queryText = button.textContent.trim();
            window.MindMap.assistant.sendQuestion(queryText);
          }
        }
      });
    });

    // Styling für die markdown-content hinzufügen
    const style = document.createElement('style');
    style.textContent = `
      .markdown-content h1, .markdown-content h2, .markdown-content h3, 
      .markdown-content h4, .markdown-content h5, .markdown-content h6 {
          font-weight: bold;
          margin-top: 0.5rem;
          margin-bottom: 0.5rem;
      }
      .markdown-content h1 { font-size: 1.4rem; }
      .markdown-content h2 { font-size: 1.3rem; }
      .markdown-content h3 { font-size: 1.2rem; }
      .markdown-content h4 { font-size: 1.1rem; }
      .markdown-content ul, .markdown-content ol {
          padding-left: 1.5rem;
          margin: 0.5rem 0;
      }
      .markdown-content ul { list-style-type: disc; }
      .markdown-content ol { list-style-type: decimal; }
      .markdown-content p { margin: 0.5rem 0; }
      .markdown-content code {
          font-family: monospace;
          background-color: rgba(0, 0, 0, 0.1);
          padding: 1px 4px;
          border-radius: 3px;
      }
      .markdown-content pre {
          background-color: rgba(0, 0, 0, 0.1);
          padding: 0.5rem;
          border-radius: 4px;
          overflow-x: auto;
          margin: 0.5rem 0;
      }
      .dark .markdown-content code {
          background-color: rgba(255, 255, 255, 0.1);
      }
      .dark .markdown-content pre {
          background-color: rgba(255, 255, 255, 0.1);
      }
    `;
    document.head.appendChild(style);
  });
</script>
{% endblock %}