{% extends 'base.html' %}
{% load static %}

{% block title %}FAQ - {{ block.super }}{% endblock %}

{% block content %}
<div class="faq-container">
    <!-- Hero-Header -->
    <div class="faq-hero furry-card text-center mb-5">
        <div class="faq-hero-content">
            <h1 class="faq-title">❓ Häufige Fragen</h1>
            <p class="faq-subtitle">Finde schnell Antworten auf die wichtigsten Fragen rund um Fursuits</p>
            <div class="faq-stats">
                <span class="stat-item">📚 {{ faqs.count }} Fragen</span>
                <span class="stat-item">📂 {{ categories|length }} Kategorien</span>
                <span class="stat-item">🐺 Furry-Expertise</span>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- FAQ-Kategorien -->
            <div class="faq-categories-section furry-card mb-5">
                <h2 class="section-title">📂 Kategorien durchsuchen</h2>
                <div class="faq-categories">
                    <button class="category-btn furry-btn active" data-category="all">
                        🌟 Alle Fragen
                    </button>
                    {% for category in categories %}
                    <button class="category-btn furry-btn-outline" data-category="{{ category }}">
                        {% if category == "Bestellung" %}🛒
                        {% elif category == "Versand" %}📦
                        {% elif category == "Fursuit" %}🐺
                        {% elif category == "Zahlung" %}💳
                        {% elif category == "Support" %}🛠️
                        {% else %}❓{% endif %}
                        {{ category }}
                    </button>
                    {% endfor %}
                </div>
            </div>

            <!-- FAQ-Akkordeon -->
            <div class="faq-accordion-section furry-card">
                <h2 class="section-title">💡 Antworten finden</h2>
                <div class="accordion" id="faqAccordion">
                    {% for faq in faqs %}
                    <div class="accordion-item" data-category="{{ faq.category }}">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#faq{{ forloop.counter }}">
                                <span class="faq-question-icon">
                                    {% if faq.category == "Bestellung" %}🛒
                                    {% elif faq.category == "Versand" %}📦
                                    {% elif faq.category == "Fursuit" %}🐺
                                    {% elif faq.category == "Zahlung" %}💳
                                    {% elif faq.category == "Support" %}🛠️
                                    {% else %}❓{% endif %}
                                </span>
                                <span class="faq-question-text">{{ faq.question }}</span>
                            </button>
                        </h2>
                        <div id="faq{{ forloop.counter }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body">
                                <div class="faq-answer">
                                    {{ faq.answer|linebreaks }}
                                </div>
                                <div class="faq-helpful">
                                    <span class="helpful-text">War diese Antwort hilfreich?</span>
                                    <button class="helpful-btn" onclick="markHelpful(this, true)">
                                        👍 Ja
                                    </button>
                                    <button class="helpful-btn" onclick="markHelpful(this, false)">
                                        👎 Nein
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% empty %}
                    <div class="empty-faq">
                        <div class="empty-faq-icon">🦊</div>
                        <h3>Keine FAQ-Einträge verfügbar</h3>
                        <p>Wir arbeiten daran, die häufigsten Fragen zu beantworten. Schau bald wieder vorbei!</p>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Kontakt-Button -->
            <div class="contact-link-section furry-card text-center mt-5">
                <div class="contact-link-content">
                    <h3>🤔 Keine Antwort gefunden?</h3>
                    <p>Wir helfen dir gerne persönlich weiter!</p>
                    <div class="contact-actions">
                        <a href="{% url 'products:contact' %}" class="btn furry-btn">
                            📞 Kontakt aufnehmen
                        </a>
                        <a href="mailto:info@kasico-art.de" class="btn furry-btn-outline">
                            📧 E-Mail schreiben
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    --dark-color: #1F2937;
    --light-color: #F3E8FF;
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
}

.faq-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.faq-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.faq-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.faq-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.faq-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.section-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.faq-categories-section {
    padding: 2rem;
}

.faq-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.category-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.category-btn.active {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.category-btn:not(.active) {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.category-btn:not(.active):hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

.faq-accordion-section {
    padding: 2rem;
}

.accordion-item {
    border: none;
    margin-bottom: 1rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.accordion-button {
    background: white;
    border: none;
    padding: 1.5rem;
    font-weight: 600;
    color: var(--dark-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
    background: var(--light-color);
    color: var(--primary-color);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B5CF6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
}

.faq-question-icon {
    font-size: 1.2rem;
    min-width: 2rem;
    text-align: center;
}

.faq-question-text {
    flex: 1;
    text-align: left;
}

.accordion-body {
    padding: 1.5rem;
    background: white;
}

.faq-answer {
    color: var(--dark-color);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.faq-helpful {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--light-color);
}

.helpful-text {
    color: var(--dark-color);
    opacity: 0.7;
    font-size: 0.875rem;
}

.helpful-btn {
    background: var(--light-color);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: var(--dark-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.helpful-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

.empty-faq {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-faq-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-faq h3 {
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.empty-faq p {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 0;
}

.contact-link-section {
    padding: 2rem;
    background: var(--light-color);
}

.contact-link-content h3 {
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.contact-link-content p {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 2rem;
}

.contact-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.furry-btn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    color: white;
    text-decoration: none;
}

.furry-btn-outline {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

@media (max-width: 768px) {
    .faq-container {
        padding: 1rem;
    }
    
    .faq-title {
        font-size: 2rem;
    }
    
    .faq-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        width: 100%;
        text-align: center;
    }
    
    .faq-categories {
        flex-direction: column;
        align-items: center;
    }
    
    .category-btn {
        width: 100%;
        max-width: 300px;
    }
    
    .contact-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .furry-btn, .furry-btn-outline {
        width: 100%;
        max-width: 300px;
        text-align: center;
    }
}

/* Animation für FAQ Items */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accordion-item {
    animation: fadeInUp 0.6s ease-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const categoryButtons = document.querySelectorAll('[data-category]');
    const faqItems = document.querySelectorAll('.accordion-item');

    categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Aktiven Button markieren
            categoryButtons.forEach(btn => {
                btn.classList.remove('active');
                btn.classList.remove('furry-btn');
                btn.classList.add('furry-btn-outline');
            });
            button.classList.add('active');
            button.classList.remove('furry-btn-outline');
            button.classList.add('furry-btn');

            // FAQs filtern
            const selectedCategory = button.dataset.category;
            let visibleCount = 0;
            
            faqItems.forEach(item => {
                if (selectedCategory === 'all' || item.dataset.category === selectedCategory) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });
            
            // Smooth scroll to first visible item
            if (visibleCount > 0) {
                const firstVisible = document.querySelector('.accordion-item[style*="block"]');
                if (firstVisible) {
                    firstVisible.scrollIntoView({ behavior: 'smooth', block: 'center' });
                }
            }
        });
    });
    
    // Smooth accordion animations
    const accordionButtons = document.querySelectorAll('.accordion-button');
    accordionButtons.forEach(button => {
        button.addEventListener('click', function() {
            const target = this.getAttribute('data-bs-target');
            const targetElement = document.querySelector(target);
            
            if (targetElement.classList.contains('show')) {
                targetElement.style.transition = 'all 0.3s ease';
            }
        });
    });
});

function markHelpful(button, isHelpful) {
    const originalText = button.textContent;
    
    // Visual feedback
    button.style.background = isHelpful ? '#10B981' : '#EF4444';
    button.style.color = 'white';
    button.textContent = isHelpful ? '✅ Danke!' : '👎 Danke!';
    button.disabled = true;
    
    // Reset after 2 seconds
    setTimeout(() => {
        button.style.background = '';
        button.style.color = '';
        button.textContent = originalText;
        button.disabled = false;
    }, 2000);
    
    // Here you could send the feedback to the server
    console.log(`FAQ marked as ${isHelpful ? 'helpful' : 'not helpful'}`);
}
</script>
{% endblock %}