{% extends 'base.html' %}
{% block title %}Willkommen bei Kasico Art & Design{% endblock %}
{% block content %}

<!-- Hero Section -->
<section class="hero">
    <div class="hero-content">
        <h1>Willkommen bei <span class="brand">Kasico Art & Design</span></h1>
        <p>Wo Ihre Fursuit-Träume Realität werden! 🐾</p>
        <div class="hero-actions">
            <a href="{% url 'products:custom_order' %}" class="btn furry-btn">🎨 Custom Order starten</a>
            <a href="{% url 'products:gallery' %}" class="btn furry-btn-outline">🖼️ Galerie ansehen</a>
            <a href="{% url 'products:contact' %}" class="btn furry-btn-secondary">📞 Kontakt</a>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services">
    <div class="container">
        <h2>Unsere Dienstleistungen</h2>
        <div class="service-cards">
            <div class="service-card glass">
                <img src="{% static 'images/hero-fursuit.jpg' %}" alt="Fursuit-Anfertigung" />
                <h3>🦊 Fursuit-Anfertigung</h3>
                <p>Individuelle Fursuits nach Ihren Wünschen – handgemacht und einzigartig. Von der ersten Skizze bis zum fertigen Kostüm.</p>
            </div>
            <div class="service-card glass">
                <img src="{% static 'images/custom-order.jpg' %}" alt="Custom Orders" />
                <h3>🎨 Custom Orders</h3>
                <p>Von Accessoires bis Komplettanzug – alles ist möglich! Wir verwirklichen Ihre kreativsten Ideen.</p>
            </div>
            <div class="service-card glass">
                <img src="{% static 'images/kasicoLogo.png' %}" alt="Design & Beratung" />
                <h3>💡 Design & Beratung</h3>
                <p>Gemeinsam entwickeln wir Ihr Wunschdesign – kreativ & professionell. Von der ersten Idee bis zur Umsetzung.</p>
            </div>
        </div>
    </div>
</section>

<!-- Gallery Preview Section -->
<section class="gallery-preview">
    <div class="container">
        <h2>🖼️ Unsere Galerie</h2>
        <div class="gallery-grid">
            <img src="{% static 'images/hero-fursuit.jpg' %}" alt="Fursuit Beispiel 1" />
            <img src="{% static 'images/custom-order.jpg' %}" alt="Fursuit Beispiel 2" />
            <img src="{% static 'images/kasicoLogo.png' %}" alt="Fursuit Beispiel 3" />
            <img src="{% static 'images/hero-fursuit.jpg' %}" alt="Fursuit Beispiel 4" />
        </div>
        <a href="{% url 'products:gallery' %}" class="btn furry-btn-outline">Mehr ansehen</a>
    </div>
</section>

<!-- Features Section -->
<section class="features">
    <div class="container">
        <h2>✨ Warum Kasico?</h2>
        <div class="features-grid">
            <div class="feature-card glass-soft">
                <div class="feature-icon">🎨</div>
                <h3>Handgemacht</h3>
                <p>Jedes Stück wird liebevoll von Hand gefertigt und ist einzigartig.</p>
            </div>
            <div class="feature-card glass-soft">
                <div class="feature-icon">🌟</div>
                <h3>Qualität</h3>
                <p>Verwendung hochwertiger Materialien für langlebige Kostüme.</p>
            </div>
            <div class="feature-card glass-soft">
                <div class="feature-icon">💝</div>
                <h3>Persönlich</h3>
                <p>Individuelle Beratung und maßgeschneiderte Lösungen.</p>
            </div>
            <div class="feature-card glass-soft">
                <div class="feature-icon">🚀</div>
                <h3>Schnell</h3>
                <p>Professionelle Umsetzung in kürzester Zeit.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="cta">
    <div class="container">
        <h2>Bereit für Ihr Traumkostüm? 🦊</h2>
        <p>Lassen Sie uns gemeinsam Ihr perfektes Fursuit erschaffen!</p>
        <div class="cta-actions">
            <a href="{% url 'products:custom_order' %}" class="btn furry-btn">🎨 Jetzt Anfrage stellen</a>
            <a href="{% url 'products:contact' %}" class="btn furry-btn-outline">📞 Beratung anfordern</a>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="testimonials">
    <div class="container">
        <h2>💬 Was unsere Kunden sagen</h2>
        <div class="testimonials-grid">
            <div class="testimonial-card glass">
                <div class="testimonial-content">
                    <p>"Mein Fursuit ist einfach perfekt! Kasico hat meine Vision genau umgesetzt."</p>
                    <div class="testimonial-author">
                        <strong>Alex 🐺</strong>
                        <span>Wolf Fursuit</span>
                    </div>
                </div>
            </div>
            <div class="testimonial-card glass">
                <div class="testimonial-content">
                    <p>"Hervorragende Qualität und super netter Service. Sehr empfehlenswert!"</p>
                    <div class="testimonial-author">
                        <strong>Sarah 🦊</strong>
                        <span>Fox Fursuit</span>
                    </div>
                </div>
            </div>
            <div class="testimonial-card glass">
                <div class="testimonial-content">
                    <p>"Endlich habe ich mein Traumkostüm! Danke Kasico für die tolle Arbeit."</p>
                    <div class="testimonial-author">
                        <strong>Mike 🐱</strong>
                        <span>Cat Fursuit</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter Section -->
<section class="newsletter-section">
    <div class="container">
        <div class="newsletter-card glass">
            <h2>📧 Bleiben Sie auf dem Laufenden!</h2>
            <p>Erhalten Sie exklusive Angebote, neue Designs und Insider-Updates direkt in Ihr Postfach.</p>
            <form class="newsletter-form" id="homeNewsletterForm">
                <input type="email" placeholder="Ihre E-Mail-Adresse" required />
                <button type="submit" class="btn furry-btn">Anmelden</button>
            </form>
        </div>
    </div>
</section>

{% endblock %}