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

{% block title %}{{ page.title|default:site_settings.site_name }} | {{ site_settings.site_name }}{% endblock %}
{% block content %}

{% if not page %}
    <section class="page-content">
        <div class="container text-center">
            <h1>Page not found</h1>
            <p>No page is set up here yet. If this is meant to be your homepage, open the dashboard and mark a page as "Is homepage".</p>
        </div>
    </section>
{% else %}

{% with page_hero=page.hero_section %}
{% if not page_hero %}
<div class="hero-wrapper{% if page.is_homepage %} is-homepage{% else %} hero-wrapper-secondary{% endif %}">
    <canvas class="hero-particles"></canvas>
    <div class="hero-bg"></div>
    <div class="hero-overlay"></div>
    <div class="container">
        <div class="hero-grid">
            <div class="hero-content">
                <h1>{{ page.headline|default:page.title }}</h1>
                {% if page.content_top %}<div class="hero-text">{{ page.content_top|safe|truncatewords_html:50 }}</div>{% endif %}
            </div>
            <div class="hero-image">
               
            </div>
        </div>
    </div>
</div>

{% if page.is_homepage %}
<!-- Feature strip along the hero's bottom edge (homepage only) -->
<div class="hero-feature-strip">
    <div class="container">
        <div class="hff-grid">
            <div class="hff-item" data-aos="fade-up" data-aos-delay="0">
                <div class="hff-icon"><i class="fas fa-shield-alt"></i></div>
                <div><h4>Fully Insured</h4><p>Public liability &amp; guaranteed work</p></div>
            </div>
            <div class="hff-item" data-aos="fade-up" data-aos-delay="100">
                <div class="hff-icon"><i class="fas fa-bolt"></i></div>
                <div><h4>24/7 Callout</h4><p>Emergencies handled fast</p></div>
            </div>
            <div class="hff-item" data-aos="fade-up" data-aos-delay="200">
                <div class="hff-icon"><i class="fas fa-tags"></i></div>
                <div><h4>Fixed-Price Quotes</h4><p>No surprises on the invoice</p></div>
            </div>
            <div class="hff-item" data-aos="fade-up" data-aos-delay="300">
                <div class="hff-icon"><i class="fas fa-star"></i></div>
                <div><h4>5-Star Rated</h4><p>Trusted by local homeowners</p></div>
            </div>
        </div>
    </div>
</div>

<!-- Trust marquee (homepage only) -->
<div class="trust-marquee">
    <div class="trust-marquee-track">
        <span>
            <span><i class="fas fa-check-circle"></i>City &amp; Guilds Certified</span>
            <span><i class="fas fa-check-circle"></i>Gas Safe Registered</span>
            <span><i class="fas fa-check-circle"></i>NICEIC Approved</span>
            <span><i class="fas fa-check-circle"></i>500+ Jobs Completed</span>
            <span><i class="fas fa-check-circle"></i>10-Year Workmanship Guarantee</span>
        </span>
    </div>
</div>
{% endif %}
{% endif %}
{% endwith %}

{% if not sections %}
    {# Fallback for pages with no content sections yet: show the remaining plain content fields #}
    <section class="page-content">
        <div class="container">
            {% if page.content_middle %}<div data-aos="fade-up">{{ page.content_middle|safe }}</div>{% endif %}
            {% if page.content_bottom %}<div data-aos="fade-up">{{ page.content_bottom|safe }}</div>{% endif %}

            {% if page.gallery_images.all %}
                <div class="gallery-grid">
                    {% for image in page.gallery_images.all %}
                        <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.caption|default:page.title }}">
                            {% if image.caption %}<div class="gallery-caption">{{ image.caption }}</div>{% endif %}
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </section>
{% else %}
    {% include 'website/includes/_page_sections.html' %}
{% endif %}

{% endif %}
{% endblock %}