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

{% block title %}{{ site_settings.site_name }} | Professional Gardening Services{% endblock %}

{% block content %}

<!-- Hero Section -->
<section class="hero">
    <canvas id="hero-particles" class="hero-particles"></canvas>
    <div class="container">
        <div class="hero-grid">
            <div class="hero-content">
                <h1>{{ page.headline }}</h1>
                <p>{{ page.content_top }}</p>
                <div class="hero-buttons">
                    <a href="#contact-form-section" class="btn btn-primary">Get a Free Quote</a>
                    <a href="#services" class="btn btn-outline">Our Services</a>
                </div>
            </div>
            <div class="hero-image">
                {% if page and page.content %}
                    {{ page.content|safe|truncatewords_html:50 }}
                {% else %}
                    <div class="placeholder-image">
                        <i class="fas fa-leaf"></i>
                        <p>Beautiful Garden Design</p>
                    </div>
                {% endif %}
            </div>
        </div>
        <a href="#services" class="scroll-cue" aria-label="Scroll down">
            <span class="scroll-cue-icon"><i class="fas fa-chevron-down"></i></span>
        </a>
    </div>
</section>

<!-- Stats strip -->
<section class="stats-strip">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-item" data-aos="fade-up" data-aos-delay="0">
                <span class="stat-number" data-count="10">0</span><span class="stat-suffix">+</span>
                <p>Years experience</p>
            </div>
            <div class="stat-item" data-aos="fade-up" data-aos-delay="100">
                <span class="stat-number" data-count="500">0</span><span class="stat-suffix">+</span>
                <p>Projects completed</p>
            </div>
            <div class="stat-item" data-aos="fade-up" data-aos-delay="200">
                <span class="stat-number" data-count="98">0</span><span class="stat-suffix">%</span>
                <p>Happy clients</p>
            </div>
            <div class="stat-item" data-aos="fade-up" data-aos-delay="300">
                <span class="stat-number" data-count="5">0</span><span class="stat-suffix">★</span>
                <p>Average rating</p>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="services">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Our Gardening Services</h2>
        <div class="services-grid">
            {% for service in services %}
            <div class="service-card" data-aos="fade-up">
                <div class="service-icon">
                    {% if service.icon %}
                        <i class="{{ service.icon }}"></i>
                    {% else %}
                        <i class="fas fa-seedling"></i>
                    {% endif %}
                </div>
                <h3>{{ service.name }}</h3>
                <p>{{ service.description|truncatewords:20 }}</p>
                {% if service.price %}
                    <div class="service-price">{{ service.price }}</div>
                {% endif %}
            </div>
            {% empty %}
            <p>No services added yet. Please check back soon.</p>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Gallery Section -->
<section id="gallery" class="gallery">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Our Work Gallery</h2>
        <div class="gallery-grid">
            {% if page.image %}
    {% if page.image_layout == "full" %}
        <img class="full-image lightbox-trigger" data-aos="zoom-in" src="{{ page.image.url }}">
    
    {% elif page.image_layout == "left" %}
        <div class="split left-image" data-aos="fade-right">
            <img class="lightbox-trigger" src="{{ page.image.url }}">
            <div>{{ page.content_middle }}</div>
        </div>

    {% elif page.image_layout == "right" %}
        <div class="split right-image" data-aos="fade-left">
            <div>{{ page.content_middle }}</div>
            <img class="lightbox-trigger" src="{{ page.image.url }}">
        </div>

    {% elif page.image_layout == "grid" %}
        <!-- gallery system -->
    {% endif %}
{% endif %}
        </div>
    </div>
</section>

<!-- About / Why Choose Us -->
<section class="about">
    <div class="container about-flex">
        <div class="about-text" data-aos="fade-right">
            <h2>Why choose us?</h2>
            <p>We’re a family-run gardening business with over 10 years of experience transforming outdoor spaces. Fully insured, friendly, and reliable. We listen to what you want and deliver results that last.</p>
            <ul class="feature-list">
                <li><i class="fas fa-check-circle"></i> Free on‑site estimates</li>
                <li><i class="fas fa-check-circle"></i> Fully qualified team</li>
                <li><i class="fas fa-check-circle"></i> Eco‑friendly practices</li>
                <li><i class="fas fa-check-circle"></i> 5‑star customer rating</li>
            </ul>
            <a href="#contact-form-section" class="btn btn-primary">Request a Callback</a>
        </div>
        <div class="about-image" data-aos="fade-left">
            <img src="{% static 'images/about-placeholder.jpg' %}" alt="Our team working in a garden" onerror="this.src='https://via.placeholder.com/400x300?text=Our+Team'">
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="testimonials">
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">Why others love us</h2>
        <div class="swiper testimonials-swiper" data-aos="fade-up" data-aos-delay="100">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="testimonial-card">
                        <div class="testimonial-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
                        <p>"They transformed our overgrown yard into a space we actually love spending time in. Punctual, tidy and genuinely friendly."</p>
                        <div class="testimonial-author">
                            <span class="testimonial-avatar">SJ</span>
                            <div>
                                <strong>Sarah Johnson</strong>
                                <small>Homeowner</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="testimonial-card">
                        <div class="testimonial-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
                        <p>"Professional from the first quote to the final clean-up. Fair pricing and the results speak for themselves."</p>
                        <div class="testimonial-author">
                            <span class="testimonial-avatar">MT</span>
                            <div>
                                <strong>Michael Taylor</strong>
                                <small>Property Manager</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="testimonial-card">
                        <div class="testimonial-stars"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
                        <p>"Reliable, eco-conscious and easy to book. We've used them every season for three years now."</p>
                        <div class="testimonial-author">
                            <span class="testimonial-avatar">EW</span>
                            <div>
                                <strong>Emma Wilson</strong>
                                <small>Homeowner</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>

<!-- Contact & Enquiry Form -->
<section id="contact-form-section" class="contact">
    <div class="container">
        <h2 class="section-title">Get In Touch</h2>
        <div class="contact-flex">
            <div class="contact-info" data-aos="fade-right">
                {% if site_settings %}
                    <p><i class="fas fa-map-marker-alt"></i> <strong>Based in:</strong> {{ site_settings.address|default:"Manchester & surrounding areas" }}</p>
                    <p><i class="fas fa-phone-alt"></i> <strong>Call or WhatsApp:</strong> {{ site_settings.phone|default:"07700 123456" }}</p>
                    <p><i class="fas fa-envelope"></i> <strong>Email:</strong> {{ site_settings.email|default:"hello@yourbusiness.co.uk" }}</p>
                    {% if site_settings.whatsapp_number %}
                        <p><i class="fab fa-whatsapp"></i> <strong>WhatsApp:</strong> <a href="https://wa.me/{{ site_settings.whatsapp_number }}" target="_blank">Chat with us</a></p>
                    {% endif %}
                {% else %}
                    <p><i class="fas fa-map-marker-alt"></i> <strong>Based in:</strong> Your City</p>
                    <p><i class="fas fa-phone-alt"></i> <strong>Call:</strong> 07700 123456</p>
                    <p><i class="fas fa-envelope"></i> <strong>Email:</strong> hello@yourbusiness.co.uk</p>
                {% endif %}
                <div class="social-links">
                    {% if site_settings.facebook_url %}
                        <a href="{{ site_settings.facebook_url }}" target="_blank"><i class="fab fa-facebook-f"></i></a>
                    {% endif %}
                    {% if site_settings.instagram_url %}
                        <a href="{{ site_settings.instagram_url }}" target="_blank"><i class="fab fa-instagram"></i></a>
                    {% endif %}
                    {% if site_settings.twitter_url %}
                        <a href="{{ site_settings.twitter_url }}" target="_blank"><i class="fab fa-x-twitter"></i></a>
                    {% endif %}
                    {% if site_settings.linkedin_url %}
                        <a href="{{ site_settings.linkedin_url }}" target="_blank"><i class="fab fa-linkedin-in"></i></a>
                    {% endif %}
                    {% if site_settings.youtube_url %}
                        <a href="{{ site_settings.youtube_url }}" target="_blank"><i class="fab fa-youtube"></i></a>
                    {% endif %}
                    {% if site_settings.tiktok_url %}
                        <a href="{{ site_settings.tiktok_url }}" target="_blank"><i class="fab fa-tiktok"></i></a>
                    {% endif %}
                    {% if site_settings.pinterest_url %}
                        <a href="{{ site_settings.pinterest_url }}" target="_blank"><i class="fab fa-pinterest-p"></i></a>
                    {% endif %}
                </div>
            </div>
            <div class="contact-form" data-aos="fade-left">
                <h3>Send us a message</h3>
                <form id="enquiryForm" method="post" action="{% url 'submit_enquiry' %}">
                    {% csrf_token %}
                    {{ form.as_p }}
                    <button type="submit" class="btn btn-primary">Send Message</button>
                    <p class="form-note">We’ll reply within 24 hours.</p>
                </form>
                <div id="form-message" style="display:none;"></div>
            </div>
        </div>
        {% if site_settings and site_settings.google_maps_embed %}
            <div class="google-map">
                {{ site_settings.google_maps_embed|safe }}
            </div>
        {% endif %}
    </div>
</section>

<!-- Floating WhatsApp Button -->
{% if site_settings and site_settings.whatsapp_number %}
    <a href="https://wa.me/{{ site_settings.whatsapp_number }}" class="whatsapp-float" target="_blank" aria-label="WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>
{% endif %}

{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    $('#enquiryForm').on('submit', function(e) {
        e.preventDefault();
        var form = $(this);
        var url = form.attr('action');
        $.ajax({
            type: 'POST',
            url: url,
            data: form.serialize(),
            success: function(response) {
                $('#form-message').html('<p class="success">Thank you! We\'ll get back to you shortly.</p>').show();
                form[0].reset();
                setTimeout(function() { $('#form-message').fadeOut(); }, 5000);
            },
            error: function() {
                $('#form-message').html('<p class="error">Something went wrong. Please try again.</p>').show();
            }
        });
    });
});
</script>
{% endblock %}