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

{% block title %}Kasico Fursuit Shop - Handgefertigte Fursuits{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="furry-card" style="background: linear-gradient(135deg, var(--furry-primary) 0%, var(--furry-secondary) 100%); color: white; text-align: center; padding: 4rem 2rem; margin-bottom: 2rem;">
    <div style="font-size: 4rem; margin-bottom: 1rem;">🐾</div>
    <h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">Willkommen bei Kasico</h1>
    <p style="font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9;">Handgefertigte Fursuits für die Furry-Community</p>
    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-secondary furry-btn-lg">
            🛍️ Produkte entdecken
        </a>
        <a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-outline furry-btn-lg" style="color: white; border-color: white;">
            🎨 Custom Order
        </a>
    </div>
</div>

<!-- Featured Categories -->
<div class="furry-card" style="margin-bottom: 2rem;">
    <div class="furry-card-header">
        <h2 class="furry-card-title">🎭 Fursuit Kategorien</h2>
        <p class="furry-card-subtitle">Entdecke verschiedene Fursuit-Typen und Stile</p>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
        <div class="furry-card furry-product-card">
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
                🦊
            </div>
            <div class="furry-card-header">
                <h3 class="furry-card-title">Fullsuits</h3>
                <p class="furry-card-subtitle">Komplette Fursuits</p>
            </div>
            <div class="furry-card-content">
                <p>Vollständige Fursuits mit Kopf, Körper und Pfoten. Perfekt für Conventions und Events.</p>
            </div>
            <div class="furry-card-footer">
                <a href="{% url 'products:product_list' %}?fursuit_type=fullsuit" class="furry-btn furry-btn-primary furry-btn-sm">
                    Entdecken
                </a>
            </div>
        </div>
        
        <div class="furry-card furry-product-card">
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-accent), var(--furry-warning)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
                🐺
            </div>
            <div class="furry-card-header">
                <h3 class="furry-card-title">Partials</h3>
                <p class="furry-card-subtitle">Kopf & Pfoten</p>
            </div>
            <div class="furry-card-content">
                <p>Fursuit-Köpfe mit passenden Pfoten. Ideal für Einsteiger und Budget-Bewusste.</p>
            </div>
            <div class="furry-card-footer">
                <a href="{% url 'products:product_list' %}?fursuit_type=partial" class="furry-btn furry-btn-primary furry-btn-sm">
                    Entdecken
                </a>
            </div>
        </div>
        
        <div class="furry-card furry-product-card">
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-success), var(--furry-accent)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
                🐾
            </div>
            <div class="furry-card-header">
                <h3 class="furry-card-title">Accessoires</h3>
                <p class="furry-card-subtitle">Pfoten, Schwänze & mehr</p>
            </div>
            <div class="furry-card-content">
                <p>Einzelne Accessoires wie Pfoten, Schwänze und andere Fursuit-Teile.</p>
            </div>
            <div class="furry-card-footer">
                <a href="{% url 'products:product_list' %}?fursuit_type=paws" class="furry-btn furry-btn-primary furry-btn-sm">
                    Entdecken
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Featured Products -->
{% if featured_products %}
<div class="furry-card" style="margin-bottom: 2rem;">
    <div class="furry-card-header">
        <h2 class="furry-card-title">⭐ Empfohlene Produkte</h2>
        <p class="furry-card-subtitle">Unsere beliebtesten Fursuits</p>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;">
        {% for product in featured_products %}
        <div class="furry-card furry-product-card">
            {% if product.image %}
            <img src="{{ product.image.url }}" alt="{{ product.name }}" class="furry-card-image">
            {% else %}
            <div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
                🐾
            </div>
            {% endif %}
            
            <div class="furry-card-header">
                <div>
                    <h3 class="furry-card-title">{{ product.name }}</h3>
                    <p class="furry-card-subtitle">{{ product.get_fursuit_type_display }}</p>
                </div>
                <div class="furry-product-badge">Featured</div>
            </div>
            
            <div class="furry-card-content">
                <p>{{ product.description|truncatewords:15 }}</p>
                <div class="furry-product-price">{{ product.price }}€</div>
            </div>
            
            <div class="furry-card-footer">
                <a href="{% url 'products:product_detail' product.id %}" class="furry-btn furry-btn-primary furry-btn-sm">
                    👁️ Details
                </a>
                <button class="furry-btn furry-btn-outline furry-btn-sm" onclick="addToCart({{ product.id }})">
                    🛒 In Warenkorb
                </button>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <div style="text-align: center; margin-top: 2rem;">
        <a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-secondary">
            Alle Produkte anzeigen
        </a>
    </div>
</div>
{% endif %}

<!-- Services Section -->
<div class="furry-card" style="margin-bottom: 2rem;">
    <div class="furry-card-header">
        <h2 class="furry-card-title">🛠️ Unsere Services</h2>
        <p class="furry-card-subtitle">Was wir für dich tun können</p>
    </div>
    
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
        <div class="furry-card">
            <div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">🎨</div>
            <h3 style="text-align: center; margin-bottom: 1rem;">Custom Design</h3>
            <p style="text-align: center;">Individuelle Fursuits nach deinen Wünschen. Wir arbeiten eng mit dir zusammen, um deinen Traum-Fursuit zu verwirklichen.</p>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-primary">
                    Custom Order starten
                </a>
            </div>
        </div>
        
        <div class="furry-card">
            <div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">🔧</div>
            <h3 style="text-align: center; margin-bottom: 1rem;">Reparaturen</h3>
            <p style="text-align: center;">Professionelle Reparaturen und Wartung für bestehende Fursuits. Wir bringen deinen Fursuit wieder zum Glänzen.</p>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{% url 'products:contact' %}" class="furry-btn furry-btn-secondary">
                    Reparatur anfragen
                </a>
            </div>
        </div>
        
        <div class="furry-card">
            <div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">📦</div>
            <h3 style="text-align: center; margin-bottom: 1rem;">Schnelle Lieferung</h3>
            <p style="text-align: center;">Sichere Verpackung und schnelle Lieferung weltweit. Wir sorgen dafür, dass dein Fursuit sicher bei dir ankommt.</p>
            <div style="text-align: center; margin-top: 1.5rem;">
                <a href="{% url 'products:faq' %}" class="furry-btn furry-btn-outline">
                    Versand-Info
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Call to Action -->
<div class="furry-card" style="background: linear-gradient(135deg, var(--furry-accent) 0%, var(--furry-warning) 100%); color: white; text-align: center; padding: 3rem 2rem;">
    <div style="font-size: 3rem; margin-bottom: 1rem;">🎉</div>
    <h2 style="margin-bottom: 1rem;">Bereit für deinen ersten Fursuit?</h2>
    <p style="margin-bottom: 2rem; font-size: 1.1rem; opacity: 0.9;">Entdecke unsere Kollektion oder starte dein Custom Design Projekt!</p>
    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
        <a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-primary furry-btn-lg" style="background: white; color: var(--furry-accent);">
            🛍️ Shop durchsuchen
        </a>
        <a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-outline furry-btn-lg" style="color: white; border-color: white;">
            🎨 Custom Order
        </a>
    </div>
</div>

<!-- Newsletter Signup -->
<div class="furry-card" style="margin-top: 2rem;">
    <div style="text-align: center;">
        <h3 style="margin-bottom: 1rem;">📧 Bleib auf dem Laufenden</h3>
        <p style="margin-bottom: 2rem; color: var(--furry-text-secondary);">Erhalte Updates über neue Produkte, Special Offers und Fursuit-Tipps!</p>
        
        <form method="post" style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto;">
            {% csrf_token %}
            <input type="email" name="email" placeholder="Deine E-Mail-Adresse" required 
                   class="furry-input" style="flex: 1; min-width: 250px;">
            <button type="submit" class="furry-btn furry-btn-primary">
                📧 Anmelden
            </button>
        </form>
        
        <p style="font-size: 0.8rem; color: var(--furry-text-secondary); margin-top: 1rem;">
            Keine Spam! Du kannst dich jederzeit abmelden.
        </p>
    </div>
</div>

<script>
function addToCart(productId) {
    fetch(`/add-to-cart/${productId}/`, {
        method: 'POST',
        headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const alert = document.createElement('div');
            alert.className = 'furry-alert furry-alert-success';
            alert.innerHTML = `
                <div class="furry-alert-icon">✅</div>
                <div class="furry-alert-content">
                    <div class="furry-alert-title">Erfolg</div>
                    <div class="furry-alert-message">Produkt wurde zum Warenkorb hinzugefügt!</div>
                </div>
            `;
            document.querySelector('main').insertBefore(alert, document.querySelector('main').firstChild);
            setTimeout(() => alert.remove(), 3000);
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
</script>
{% endblock %}