{% load static %}

{% for section in sections %}
    <section id="{{ section.section_type }}-{{ section.id }}" class="section-{{ section.section_type }}"{% if section.background_image and section.section_type != "hero" %} style="background-image: url('{{ section.background_image.image.url }}'); background-size: cover; background-position: center; background-repeat: no-repeat;"{% endif %}>
        
        {# ========== HERO SECTION ========== #}
{% if section.section_type == "hero" %}
    <div class="hero-wrapper{% if page.is_homepage %} is-homepage{% endif %}{% if section.id != page.hero_section.id %} hero-wrapper-secondary{% endif %}" style="position: relative; display: flex; align-items: center; overflow: hidden;">
        <canvas class="hero-particles" style="position:absolute; inset:0; z-index:1; pointer-events:none;"></canvas>
        <!-- Background image -->
        <div class="hero-bg" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; background-repeat: no-repeat; 
            {% if section.background_image %}background-image: url('{{ section.background_image.image.url }}');{% else %}background-image: linear-gradient(135deg, #eef5ea 0%, #d9e8d4 100%);{% endif %} z-index: 0;">
        </div>
        <!-- Gradient overlay (your provided code) -->
        <div class="hero-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; 
            background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.6) 0%, rgba(152, 152, 152, 0.4) 0%;
            background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.6) 0%, rgba(152, 152, 152, 0.4) 0%;
            background: linear-gradient(to bottom, rgba(102, 102, 102, 0.6) 0%, rgba(152, 152, 152, 0.4) 0%;
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#6670ad47', GradientType=0 );
            z-index: 1;">
        </div>
        <!-- Content (on top) -->
        <div class="container" style="position: relative; z-index: 2; width: 100%;">
            <div class="hero-grid">
                <div class="hero-content" data-aos="fade-right">
                    <h1>{{ section.title|default:"Professional Garden Care & Landscaping" }}</h1>
                    <div class="hero-text">{{ section.content|safe|truncatewords_html:50 }}</div>
                    <div class="hero-buttons">
    {% if section.button_text and section.button_link %}
        <a href="{{ section.button_link }}" class="btn btn-primary">
            {{ section.button_text }}
        </a>
    {% endif %}

    {% if section.button_text_2 and section.button_link_2 %}
        <a href="{{ section.button_link_2 }}" class="btn btn-outline">
            {{ section.button_text_2 }}
        </a>
    {% endif %}
</div>
                </div>
                        <div class="hero-image" data-aos="fade-left">
                            {% if section.main_image %}
                                <img src="{{ section.main_image.image.url }}" width= "100%;"  alt="{{ section.main_image.alt_text|default:section.title }}">
                         
                                
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

        {# ========== SERVICES SECTION ========== #}
{% elif section.section_type == "services" %}
    <div class="container" id="services">
        <h2 class="section-title" data-aos="fade-up">{{ section.title|default:"Our Gardening Services" }}</h2>
        {% if section.content %}
            <div class="services-description">{{ section.content|safe }}</div>
        {% endif %}
        <div class="services-grid">
    {% for service in section.services.all %}
        <div class="service-card" data-aos="fade-up">
            <div class="service-icon">
                <i class="{{ service.icon }}"></i>
            </div>
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
        </div>
    {% empty %}
        <p class="text-center">No services added yet.</p>
    {% endfor %}
</div>
    </div>

        {# ========== GALLERY SECTION ========== #}
{% elif section.section_type == "gallery" %}
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">{{ section.title|default:"Our Work Gallery" }}</h2>
        {% if section.content %}
            <div class="gallery-description">{{ section.content|safe }}</div>
        {% endif %}
        <div class="gallery-grid">
            {% for image in section.gallery_images %}
                <div class="gallery-item" data-aos="zoom-in" data-aos-delay="{% widthratio forloop.counter0 1 100 %}">
                    <img class="lightbox-trigger" src="{{ image.image.url }}" alt="{{ image.alt_text|default:image.caption|default:'Garden work' }}">
                    {% if image.caption %}
                        <div class="gallery-caption">{{ image.caption }}</div>
                    {% endif %}
                </div>
            {% empty %}
                <p class="text-center">No images uploaded yet. Use the Section Media admin to add photos.</p>
            {% endfor %}
        </div>
    </div>
    
    
    {# ========== TESTIMONIALS SECTION ========== #}
{% elif section.section_type == "testimonials" %}
    <div class="container">
        <h2 class="section-title" data-aos="fade-up">{{ section.title|default:"What Our Clients Say" }}</h2>
        {% if section.content %}
            <div class="testimonials-description">{{ section.content|safe }}</div>
        {% endif %}
        <div class="testimonials-grid">
            {% for testimonial in section.testimonials.all %}
                <div class="testimonial-card" data-aos="fade-up" data-aos-delay="{% widthratio forloop.counter0 1 100 %}">
                    {% if testimonial.image %}
                        <div class="testimonial-image">
                            <img src="{{ testimonial.image.url }}" alt="{{ testimonial.name }}">
                        </div>
                    {% endif %}
                    <div class="testimonial-content">
                        <i class="fas fa-quote-left testimonial-quote"></i>
                        <p class="testimonial-text">{{ testimonial.content|safe }}</p>
                        <div class="testimonial-author">
                            <strong>{{ testimonial.name }}</strong>
                            {% if testimonial.role %}
                                <span>{{ testimonial.role }}</span>
                            {% endif %}
                        </div>
                        {% if testimonial.rating %}
                            <div class="testimonial-rating">
                                {# Loop over a string of 5 characters – no custom filter needed #}
                                {% for i in "12345" %}
                                    {% if forloop.counter <= testimonial.rating %}
                                        <i class="fas fa-star"></i>
                                    {% else %}
                                        <i class="far fa-star"></i>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% empty %}
                <p class="text-center">No testimonials added yet.</p>
            {% endfor %}
        </div>
    </div>

        {# ========== ABOUT SECTION ========== #}
        {% elif section.section_type == "about" %}
            <div class="container">
                <div class="about-flex">
                    <div class="about-text" data-aos="fade-right">
                        <h2>{{ section.title|default:"Why choose us?" }}</h2>
                        <div class="about-content">{{ section.content|safe|truncatewords_html:100 }}</div>
                        {% if section.button_text and section.button_link %}
    <a href="{{ section.button_link }}" class="btn btn-primary">
        {{ section.button_text }}
    </a>
{% endif %}
                    </div>
                    <div class="about-image" data-aos="fade-left">
                        {% if section.main_image %}
                            <img class="lightbox-trigger" src="{{ section.main_image.image.url }}" alt="{{ section.main_image.alt_text|default:section.title }}">
                        {% else %}
                            <img src="{% static 'images/about-placeholder.jpg' %}" alt="Our team">
                        {% endif %}
                    </div>
                </div>
            </div>

        {# ========== FAQ SECTION ========== #}
        {% elif section.section_type == "faq" %}
            <div class="container">
                <h2 class="section-title" data-aos="fade-up">{{ section.title|default:"Frequently Asked Questions" }}</h2>
                {% if section.content %}
                    <div class="faq-description">{{ section.content|safe }}</div>
                {% endif %}
                <div class="faq-list" data-aos="fade-up" data-aos-delay="100">
                    {% for faq in section.faqs.all %}
                        <div class="faq-item">
                            <div class="faq-question"><i class="fas fa-chevron-down faq-toggle-icon"></i>{{ faq.question }}</div>
                            <div class="faq-answer">{{ faq.answer|linebreaks }}</div>
                        </div>
                    {% empty %}
                        <p class="text-center">No FAQs added yet.</p>
                    {% endfor %}
                </div>
            </div>

        {# ========== OTHER PAGE SECTION ========== #}
        {% elif section.section_type == "other_page" %}
            <div class="container">
                <div class="other-page-content" data-aos="fade-up">
                    {% if section.title %}<h2 class="section-title">{{ section.title }}</h2>{% endif %}
                    {% if section.main_image %}
                        <div class="other-page-image">
                            <img class="lightbox-trigger" src="{{ section.main_image.image.url }}" alt="{{ section.main_image.alt_text|default:section.title }}">
                        </div>
                    {% endif %}
                    {% if section.content %}
                        <div class="other-page-text">{{ section.content|safe }}</div>
                    {% endif %}
                    {% if section.button_text and section.button_link %}
                        <a href="{{ section.button_link }}" class="btn btn-primary">
                            {{ section.button_text }}
                        </a>
                    {% endif %}
                </div>
            </div>

        {# ========== CONTACT SECTION ========== #}
        {% elif section.section_type == "contact" %}
            <div class="container" id="contact">
                <h2 class="section-title" data-aos="fade-up">{{ section.title|default:"Get In Touch" }}</h2>
                {% if section.content %}
            <div class="contact-description">{{ section.content|safe }}</div>
        {% endif %}
                <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 1234565515" }}</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 %}
                            {% if site_settings.opening_hours %}
                                <div class="opening-hours">
                                    <p><i class="fas fa-clock"></i> <strong>Opening hours:</strong></p>
                                    <ul class="opening-hours-list">
                                        {% for line in site_settings.opening_hours.splitlines %}
                                            {% if line %}<li>{{ line }}</li>{% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% 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 %}
                        </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>
        {% endif %}

    </section>
{% endfor %}

{# ========== 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 %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.section-faq .faq-question').forEach(function (q) {
        q.addEventListener('click', function () {
            q.closest('.faq-item').classList.toggle('open');
        });
    });
});
</script>