{% extends 'base.html' %}
{% block content %}
<main>
        <!-- Home Section -->
        <section id="home" class="hero">
            <div class="hero-content">
                <h1>
                    Herbalism
                    <span>For Modern Life</span>
                </h1>
                <p>Discover the perfect blend of ancient wisdom and modern wellness. 100% organic herbs, ethically sourced and carefully crafted for your daily rituals.</p>
                <div class="hero-stats">
                    <div class="stat-item">
                        <h3>50+</h3>
                        <p>Herbal Varieties</p>
                    </div>
                    <div class="stat-item">
                        <h3>5000+</h3>
                        <p>Happy Customers</p>
                    </div>
                    <div class="stat-item">
                        <h3>100%</h3>
                        <p>Organic</p>
                    </div>
                </div>
                <a href="{{ url_for('main.products') }}" class="btn" style="margin-top: 2rem; width: auto; display: inline-block; color: white;">Explore Collection →</a>
            </div>
            <div class="hero-image">
                <img src="{{ url_for('static', filename='images/herbsforhero.png') }}" alt="herbs">
            </div>
        </section>

        <section class="second-hero">
            <div class="second-hero-image">
                <img src="{{ url_for('static', filename='images/nurse.png') }}" alt="nurse">
            </div>
            <div class="second-hero-content">
                <h1>Embrace Preventive Wellness</h1>
                <p>Nourish your body naturally with our premium organic herbs. From immune support to hormonal harmony, our formulations help maintain optimal health and prevent imbalances before they start.</p>
                <a href="https://wa.me/+23481326882235?text=Hello%20I%20have%20a%20question" target="_blank" class="btn" style="margin-top: 2rem; width: auto; display: inline-block;">Contact Us on WhatsApp</a>
            </div>
        </section>

        <!-- About Section -->
        <section id="about" class="about">
            <div class="section-header">
                <h2>About Pro-choice</h2>
                <p>Learn more about our mission and values</p>
            </div>
            <div class="about-grid">
                <div class="about-card">
                    <div class="about-image"><img src="{{ url_for('static', filename='images/farm.jpeg') }}" alt="Sustainable farm"></div>
                    <i class="bi bi-tree"></i>
                    <h3>Our Commitment to Sustainability</h3>
                    <p>We partner with organic farms that practice regenerative agriculture, ensuring purity and environmental responsibility.</p>
                </div>
                <div class="about-card">
                    <div class="about-image"><img src="{{ url_for('static', filename='images/community.jpeg') }}" alt="Happy community"></div>
                    <i class="bi bi-people"></i>
                    <h3>Our Growing Community</h3>
                    <p>Join a community of over 5000 wellness enthusiasts who trust Pro-choice & venchoice for their daily herbal rituals.</p>
                </div>
                <div class="about-card">
                    <div class="about-image"><img src="{{ url_for('static', filename='images/traditionalwisdom.jpeg') }}" alt="traditionalwisdom"></div>
                    <i class="bi bi-clock-history"></i>
                    <h3>Blending Tradition with Innovation</h3>
                    <p>Our formulations are guided by centuries of herbal knowledge, combined with modern research for optimal results.</p>
                </div>
            </div>
            <div style="text-align: center; margin-top: 2rem;">
                <a href="{{ url_for('main.about') }}" class="btn" style="display: inline-block;">Learn More About Us</a>
            </div>
        </section>

        <!-- Products Section -->
        <section id="products" class="products">
            <div class="section-header">
                <h2>Our Bestsellers</h2>
                <p>Hand-selected herbs for your wellness journey</p>
            </div>
            <div class="products-grid">
                {% for product in products %}
                <div class="product-card">
                    {% if product.badge %}
                        <span class="product-badge">{{ product.badge }}</span>
                    {% endif %}
                    <div class="product-image">
                        {% if product.image_url %}
                            <img src="{{ url_for('static', filename=product.image_url) }}" alt="product image">
                        {% else %}
                            <img src="{{ url_for('static', filename='images/701ed985f9328736.jpg') }}" alt="product image">
                        {% endif %}
                    </div>
                    <div class="product-info">
                        <h3>{{ product.name }}</h3>
                        <p class="product-price">₦{{ "%.2f"|format(product.price) }}</p>
                        {% if current_user.is_authenticated %}
                            <form method="POST" action="{{ url_for('main.add_to_cart') }}" onsubmit="addToCartAjax(event, {{ product.id }}, this); return false;">
                                <input type="hidden" name="product_id" value="{{ product.id }}">
                                <input type="hidden" name="quantity" value="1">
                                <button type="submit" class="btn-add">Add to Cart</button>
                            </form>
                        {% else %}
                            <a href="{{ url_for('auth.signin') }}" class="btn-add">Sign in to Buy</a>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            <div style="text-align: center; margin-top: 2rem;">
                <a href="{{ url_for('main.products') }}" class="btn" style="display: inline-block;">View All Products</a>
            </div>
        </section>

    <script src="{{ url_for('static', filename='js/index.js') }}"></script>

        <!-- Contact Section -->
        <section id="contact" class="contact-info-section">
            <h2>Get in Touch</h2>
            <p>We'd love to hear from you. Reach out through any of these channels.</p>
            <div class="contact-details-grid">
                <div class="contact-item">
                    <i class="bi bi-geo-alt"></i>
                    <h3>Visit Us</h3>
                    <p>Header quarter A 03 Maru plaza,<br>Kaduna</p>
                </div>
                <div class="contact-item">
                    <i class="bi bi-telephone"></i>
                    <h3>Call Us</h3>
                    <p>Mon-Fri, 9am-6pm</p>
                    <a href="tel:+23481326882235" class="btn" style="display: inline-block; margin-top: 0.5rem;">Call Now</a>
                </div>
                <div class="contact-item">
                    <i class="bi bi-envelope"></i>
                    <h3>Email Us</h3>
                    <p>We reply within 24 hours</p>
                    <a href="mailto:prochoiceandvenchoice@yahoo.com" class="btn" style="display: inline-block; margin-top: 0.5rem;">Send Email</a>
                </div>
            </div>
            <div class="social-links"><a href="#"><i class="bi bi-instagram"></i></a><a href="#"><i class="bi bi-facebook"></i></a><a href="https://wa.me/+23481326882235?text=Hello%20I%20have%20a%20question" target="_blank"><i class="bi bi-whatsapp"></i></a></div>
        </section>
    </main>
{% endblock %}