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

{% block title %}Home{% endblock %}

{% block content %}
<!-- Hero Slider -->
<section class="hero-slider">
    <div class="slider-container">
        <div class="slide active" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);">
            <div class="slide-content">
                <h1>Sparkle Up Your Style</h1>
                <p>Discover our exquisite collection of handcrafted 925 sterling silver jewelry</p>
                <a href="{% url 'catalogue:index' %}" class="btn btn-primary">Browse Collection</a>
            </div>
        </div>
        <div class="slide" style="background: linear-gradient(135deg, #1a1a2e 0%, #2d1b3d 50%, #1a1a2e 100%);">
            <div class="slide-content">
                <h1>Handcrafted with Passion</h1>
                <p>Each piece tells a story of Indonesian craftsmanship passed down through generations</p>
                <a href="{% url 'cms-about' %}" class="btn btn-primary">Our Story</a>
            </div>
        </div>
        <div class="slide" style="background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 50%, #16213e 100%);">
            <div class="slide-content">
                <h1>Custom Design Service</h1>
                <p>Bring your unique vision to life with our expert jewelry artisans</p>
                <a href="{% url 'cms-custom-design' %}" class="btn btn-primary">Design Your Jewelry</a>
            </div>
        </div>
        <div class="slide" style="background: linear-gradient(135deg, #2d1b3d 0%, #1a1a2e 50%, #0f3460 100%);">
            <div class="slide-content">
                <h1>Sustainable Luxury</h1>
                <p>Eco-friendly jewelry crafted with recycled materials and ethical practices</p>
                <a href="{% url 'cms-sustainability' %}" class="btn btn-primary">Learn More</a>
            </div>
        </div>
    </div>
    <button class="slider-btn prev" aria-label="Previous slide">&lsaquo;</button>
    <button class="slider-btn next" aria-label="Next slide">&rsaquo;</button>
    <div class="slider-dots"></div>
</section>

<!-- Why Us Section -->
<section class="section why-us">
    <div class="container">
        <h2 class="section-title">Why Choose Artistica?</h2>
        <div class="grid">
            <div class="medium-4">
                <div class="feature-card">
                    <div class="feature-icon">✦</div>
                    <h3>Premium Quality</h3>
                    <p>100% genuine 925 sterling silver with certification of authenticity</p>
                </div>
            </div>
            <div class="medium-4">
                <div class="feature-card">
                    <div class="feature-icon">✧</div>
                    <h3>Handcrafted Excellence</h3>
                    <p>Each piece meticulously crafted by skilled Indonesian artisans</p>
                </div>
            </div>
            <div class="medium-4">
                <div class="feature-card">
                    <div class="feature-icon">♻</div>
                    <h3>Sustainable Practices</h3>
                    <p>Eco-friendly materials, recycled metals, and ethical production</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Mini Banners -->
<section class="section mini-banners">
    <div class="container">
        <div class="grid">
            <div class="medium-4">
                <a href="{% url 'catalogue:index' %}?collection=golden-land" class="banner-card">
                    <div class="banner-content">
                        <h3>Golden Land</h3>
                        <p>Discover Our Signature Collection</p>
                        <span class="btn-link">Browse Collection →</span>
                    </div>
                </a>
            </div>
            <div class="medium-4">
                <a href="{% url 'catalogue:index' %}?collection=green-moss" class="banner-card">
                    <div class="banner-content">
                        <h3>Green Moss</h3>
                        <p>Nature-Inspired Elegance</p>
                        <span class="btn-link">Browse Collection →</span>
                    </div>
                </a>
            </div>
            <div class="medium-4">
                <a href="{% url 'catalogue:index' %}?collection=elegance" class="banner-card">
                    <div class="banner-content">
                        <h3>Elegance</h3>
                        <p>Timeless Beauty</p>
                        <span class="btn-link">Browse Collection →</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="section featured-products">
    <div class="container">
        <h2 class="section-title">Featured Products</h2>
        <div class="grid" id="featured-products">
            {% for product in featured_products %}
            <div class="medium-3">
                <div class="product-card">
                    <div class="product-image">
                        {% with image=product.primary_image %}
                            {% if image and not image.is_missing %}
                                <img src="{{ image.original }}" alt="{{ product.title }}">
                            {% else %}
                                <div class="product-placeholder">
                                    <span>{{ product.title|make_list|first|upper }}</span>
                                </div>
                            {% endif %}
                        {% endwith %}
                    </div>
                    <div class="product-info">
                        <h3><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></h3>
                        <p class="product-collection">Artistica</p>
                        {% with record=product.stockrecords.first %}
                            {% if record %}
                                <p class="product-price">${{ record.price|floatformat:0 }}</p>
                            {% else %}
                                <p class="product-price">Contact for price</p>
                            {% endif %}
                        {% endwith %}
                        <a href="{{ product.get_absolute_url }}" class="btn btn-sm">View Details</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="medium-12">
                <p class="text-center">No featured products yet. Add products in the admin dashboard.</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Story Section -->
<section class="section story-section" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);">
    <div class="container">
        <div class="grid">
            <div class="medium-6">
                <h2>Our Story</h2>
                <p>Founded in 2003 in Surabaya, Indonesia, Artistica Jewelry began as a small family workshop with a passion for creating exquisite silver jewelry. Over two decades, we have grown into an internationally recognized brand, exporting to USA, Europe, Japan, Australia, and beyond.</p>
                <p>Our journey has taken us to prestigious exhibitions worldwide: Hong Kong, Netherlands, France, Italy, Thailand, United States, Australia, Japan, South Korea, and Singapore.</p>
                <a href="{% url 'cms-about' %}" class="btn btn-primary">Read More</a>
            </div>
            <div class="medium-6">
                <div class="exhibition-list">
                    <h3>International Exhibitions</h3>
                    <ul>
                        <li>🇭🇰 Hong Kong Jewelry Show</li>
                        <li>🇳🇱 Netherlands Trade Exhibition</li>
                        <li>🇫🇷 France Bijorhca Paris</li>
                        <li>🇮🇹 Italy VicenzaOro</li>
                        <li>🇹🇭 Thailand Gems & Jewelry Fair</li>
                        <li>🇺🇸 United States JCK Las Vegas</li>
                        <li>🇦🇺 Australia International Jewelry Fair</li>
                        <li>🇯🇵 Japan Jewelry Fair</li>
                        <li>🇰🇷 South Korea International Jewelry</li>
                        <li>🇸🇬 Singapore International Jewelry Expo</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Social Mission -->
<section class="section mission-section">
    <div class="container">
        <h2 class="section-title">Our Social Mission</h2>
        <div class="grid">
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Supporting Silversmiths</h3>
                    <p>We provide free training and internships to local silversmiths, preserving traditional Indonesian craftsmanship for future generations.</p>
                    <a href="{% url 'cms-support-silversmiths' %}" class="btn-link">Learn More →</a>
                </div>
            </div>
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Sustainability</h3>
                    <p>Committed to using recycled materials, reducing waste, and implementing eco-friendly production processes.</p>
                    <a href="{% url 'cms-sustainability' %}" class="btn-link">Learn More →</a>
                </div>
            </div>
            <div class="medium-4">
                <div class="mission-card">
                    <h3>Community Empowerment</h3>
                    <p>Creating economic opportunities for local artisans and contributing to the growth of East Java's creative industry.</p>
                    <a href="{% url 'cms-about' %}" class="btn-link">Learn More →</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Form -->
<section class="section contact-section">
    <div class="container">
        <div class="grid">
            <div class="medium-6">
                <h2>Get In Touch</h2>
                <p>Have a question about our products or interested in wholesale? We'd love to hear from you.</p>
                <form id="contact-form" class="contact-form" method="post" action="/api/contact/">
                    {% csrf_token %}
                    <div class="form-group">
                        <input type="text" name="name" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="Your Email" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" name="phone" placeholder="Phone (optional)">
                    </div>
                    <div class="form-group">
                        <select name="subject" required>
                            <option value="">Select Subject</option>
                            <option value="Wholesale Inquiry">Wholesale Inquiry</option>
                            <option value="Custom Design">Custom Design</option>
                            <option value="Product Question">Product Question</option>
                            <option value="Order Support">Order Support</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea name="message" placeholder="Your Message" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>
            </div>
            <div class="medium-6">
                <h2>Wholesale & Partnership</h2>
                <p>Looking to become a retailer or partner? We offer competitive wholesale pricing and custom OEM/ODM services.</p>
                <ul class="benefits-list">
                    <li>✓ Competitive wholesale pricing</li>
                    <li>✓ Custom design and branding</li>
                    <li>✓ Minimum order quantity flexibility</li>
                    <li>✓ Worldwide shipping</li>
                    <li>✓ Quality guarantee</li>
                </ul>
                <a href="{% url 'cms-custom-design' %}" class="btn btn-primary">Learn About Wholesale</a>
            </div>
        </div>
    </div>
</section>

<!-- Newsletter -->
<section class="section newsletter-section">
    <div class="container">
        <div class="newsletter-content">
            <h2>Join Our Newsletter</h2>
            <p>Subscribe to receive updates on new collections, exclusive offers, and jewelry care tips.</p>
            <form id="newsletter-form" class="newsletter-form" method="post">
                {% csrf_token %}
                <div class="newsletter-input-group">
                    <input type="email" name="email" placeholder="Enter your email address" required>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </div>
            </form>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Contact form handler
    const contactForm = document.getElementById('contact-form');
    if (contactForm) {
        contactForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('/api/contact/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': data.csrfmiddlewaretoken
                    },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showNotification(result.message, 'success');
                    this.reset();
                } else {
                    showNotification(result.message, 'error');
                }
            } catch (error) {
                showNotification('An error occurred. Please try again.', 'error');
            }
        });
    }

    // Newsletter form handler
    const newsletterForm = document.getElementById('newsletter-form');
    if (newsletterForm) {
        newsletterForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const data = Object.fromEntries(formData);
            
            try {
                const response = await fetch('/api/newsletter/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': data.csrfmiddlewaretoken
                    },
                    body: JSON.stringify(data)
                });
                const result = await response.json();
                if (result.success) {
                    showNotification(result.message, 'success');
                    this.reset();
                } else {
                    showNotification(result.message, 'error');
                }
            } catch (error) {
                showNotification('An error occurred. Please try again.', 'error');
            }
        });
    }

    function showNotification(message, type) {
        const container = document.querySelector('.messages-container') || createMessageContainer();
        const msg = document.createElement('div');
        msg.className = `message message-${type}`;
        msg.innerHTML = `${message}<button class="message-close">&times;</button>`;
        container.appendChild(msg);
        setTimeout(() => msg.remove(), 4000);
    }

    function createMessageContainer() {
        const container = document.createElement('div');
        container.className = 'messages-container';
        document.querySelector('.main-content').prepend(container);
        return container;
    }
});
</script>
{% endblock %}