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

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

{% block content %}
<div class="contact-container">
    <!-- Hero-Header -->
    <div class="contact-hero furry-card text-center mb-5">
        <div class="contact-hero-content">
            <h1 class="contact-title">📞 Kontakt</h1>
            <p class="contact-subtitle">Wir sind für dich da! Lass uns gemeinsam deinen perfekten Fursuit planen.</p>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Kontaktinformationen -->
            <div class="contact-info-section furry-card mb-5">
                <h2 class="section-title">🐾 Erreiche uns</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="contact-info-card">
                            <div class="contact-icon">📧</div>
                            <h5>E-Mail</h5>
                            <p>info@kasico-art.de</p>
                            <a href="mailto:info@kasico-art.de" class="contact-link">Nachricht schreiben</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-info-card">
                            <div class="contact-icon">📱</div>
                            <h5>Telefon</h5>
                            <p>+49 123 456789</p>
                            <a href="tel:+49123456789" class="contact-link">Anrufen</a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="contact-info-card">
                            <div class="contact-icon">🕒</div>
                            <h5>Geschäftszeiten</h5>
                            <p>Mo-Fr: 9:00 - 18:00 Uhr<br>
                               Sa: 10:00 - 14:00 Uhr</p>
                            <span class="contact-note">🐺 Sonntags geschlossen</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kontaktformular -->
            <div class="contact-form-section furry-card">
                <h2 class="section-title">✍️ Nachricht schreiben</h2>
                <p class="form-subtitle">Erzähl uns von deinem Traum-Fursuit!</p>
                
                <form id="contact-form" class="furry-form" method="post" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="name" class="form-label">🐺 Name</label>
                                <input type="text" id="name" name="name" required placeholder="Dein Name">
                                <div class="form-hint" id="name-hint"></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="email" class="form-label">📧 E-Mail</label>
                                <input type="email" id="email" name="email" required placeholder="deine@email.de">
                                <div class="form-hint" id="email-hint"></div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="subject" class="form-label">📝 Betreff</label>
                        <select id="subject" name="subject" required>
                            <option value="">Wähle ein Thema</option>
                            <option value="custom_order">🎨 Custom Order Anfrage</option>
                            <option value="general">❓ Allgemeine Frage</option>
                            <option value="support">🛠️ Support</option>
                            <option value="partnership">🤝 Partnerschaft</option>
                        </select>
                        <div class="form-hint" id="subject-hint"></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="message" class="form-label">💬 Nachricht</label>
                        <textarea id="message" name="message" required placeholder="Erzähl uns von deinem Projekt oder deiner Frage..."></textarea>
                        <div class="form-hint" id="message-hint"></div>
                    </div>
                    
                    <div class="form-actions">
                        <button type="submit" class="btn furry-btn">
                            🚀 Nachricht senden
                        </button>
                    </div>
                </form>
            </div>

            <!-- FAQ-Link -->
            <div class="faq-link-section furry-card text-center mt-4">
                <div class="faq-link-content">
                    <h3>❓ Häufige Fragen</h3>
                    <p>Finde schnell Antworten auf die wichtigsten Fragen</p>
                    <a href="{% url 'products:faq' %}" class="btn furry-btn-outline">
                        📚 FAQ durchsuchen
                    </a>
                </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;
}

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

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

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

.contact-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 0;
}

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

.form-subtitle {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 2rem;
}

.contact-info-section {
    padding: 2rem;
}

.contact-info-card {
    text-align: center;
    padding: 1.5rem;
    border-radius: 15px;
    background: var(--light-color);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
}

.contact-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.contact-info-card h5 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-info-card p {
    color: var(--dark-color);
    margin-bottom: 1rem;
    font-weight: 500;
}

.contact-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--secondary-color);
}

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

.contact-form-section {
    padding: 2rem;
}

.furry-form .form-group {
    margin-bottom: 1.5rem;
}

.furry-form label {
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    display: block;
}

.furry-form input, .furry-form textarea, .furry-form select {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 2px solid var(--light-color);
    transition: all 0.3s ease;
    font-size: 1rem;
    background: white;
}

.furry-form input:focus, .furry-form textarea:focus, .furry-form select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
    outline: none;
}

.furry-form input.invalid, .furry-form textarea.invalid, .furry-form select.invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

.furry-form input.valid, .furry-form textarea.valid, .furry-form select.valid {
    border-color: #10B981;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

.furry-form textarea {
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.form-hint:empty {
    display: none;
}

.form-actions {
    text-align: center;
    margin-top: 2rem;
}

.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;
}

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

.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;
}

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

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

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

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

.alert-danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border: 2px solid #EF4444;
    border-radius: 10px;
    color: #991B1B;
    padding: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .contact-container {
        padding: 1rem;
    }
    
    .contact-title {
        font-size: 2rem;
    }
    
    .contact-info-card {
        margin-bottom: 1rem;
    }
}

/* Animation für erfolgreiche Nachricht */
@keyframes success-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.success-animation {
    animation: success-bounce 1s ease-in-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contact-form');
    const fields = [
        {id: 'name', hint: 'Bitte gib deinen Namen ein.'},
        {id: 'email', hint: 'Bitte gib eine gültige E-Mail-Adresse ein.'},
        {id: 'subject', hint: 'Bitte wähle ein Thema aus.'},
        {id: 'message', hint: 'Bitte schreibe eine Nachricht.'}
    ];
    
    // Live-Validierung
    fields.forEach(f => {
        const input = document.getElementById(f.id);
        const hint = document.getElementById(f.id+'-hint');
        
        input.addEventListener('blur', function() {
            validateField(this, f.hint);
        });
        
        input.addEventListener('input', function() {
            if (this.classList.contains('invalid')) {
                validateField(this, f.hint);
            }
        });
    });
    
    function validateField(field, hintText) {
        const hint = document.getElementById(field.id+'-hint');
        let isValid = true;
        
        if (!field.value.trim()) {
            isValid = false;
        } else if (field.id === 'email' && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(field.value)) {
            isValid = false;
        }
        
        if (isValid) {
            field.classList.remove('invalid');
            field.classList.add('valid');
            hint.textContent = '✅ Alles super!';
            hint.style.color = '#10B981';
        } else {
            field.classList.remove('valid');
            field.classList.add('invalid');
            hint.textContent = hintText + ' 🐾';
            hint.style.color = '#EF4444';
        }
    }
    
    // Formular-Submission
    form.addEventListener('submit', function(e) {
        let valid = true;
        
        fields.forEach(f => {
            const input = document.getElementById(f.id);
            if (!input.value.trim() || (f.id === 'email' && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(input.value))) {
                input.classList.add('invalid');
                input.classList.remove('valid');
                valid = false;
            }
        });
        
        if (!valid) {
            e.preventDefault();
            // Smooth scroll to first invalid field
            const firstInvalid = document.querySelector('.invalid');
            if (firstInvalid) {
                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        } else {
            // Success animation
            document.querySelector('.contact-form-section').classList.add('success-animation');
        }
    });
});
</script>
{% endblock %}