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

{% block title %}{{ site.site_name }} — Find Verified Properties in Abuja & Across Nigeria{% endblock %}
{% block meta_description %}Discover trusted, verified properties for sale, rent, and lease in Abuja and across Nigeria.
{{ site.site_name }} — your transparent, stress-free real estate partner.{% endblock %}

{% block navbar_class %}navbar--transparent{% endblock %}

{% block content %}

<!-- ── HERO ── -->
<section class="hero" id="hero" aria-labelledby="hero-heading">
    <div class="hero-bg-img" aria-hidden="true"></div>
    <div class="hero-overlay" aria-hidden="true"></div>
    <div class="container">
        <div class="hero-content">

            <div class="hero-label fade-up">
                <i class="fas fa-shield-alt"></i> Verified &amp; Trusted Properties
            </div>

            <h1 id="hero-heading" class="fade-up">
                Find Your Perfect Property<br>
                in <span class="highlight">Abuja</span> &amp; Nigeria
            </h1>

            <p class="hero-sub fade-up">
                We match you with verified homes, offices, and land — with full documentation support and zero stress.
                No fake listings. No hidden fees.
            </p>

            <div class="hero-actions fade-up">
                <a href="{% url 'properties:list' %}" class="btn btn-accent btn-lg" id="hero-browse-btn">
                    <i class="fas fa-search"></i> Browse Properties
                </a>
                <a href="{% url 'enquiries:contact' %}" class="btn btn-outline-white btn-lg" id="hero-contact-btn">
                    Talk to an Agent
                </a>
            </div>

            <!-- Search Box -->
            <div class="hero-search fade-up">
                <form action="{% url 'properties:list' %}" method="get" id="hero-search-form">
                    <div class="search-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <circle cx="11" cy="11" r="8" />
                            <line x1="21" y1="21" x2="16.65" y2="16.65" />
                        </svg>
                        <input type="text" name="q" placeholder="Search by location or type..." id="hero-search-input"
                            aria-label="Search properties">
                    </div>
                    <div class="search-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                        </svg>
                        <select name="listing_type" id="hero-listing-type" aria-label="Listing type">
                            <option value="">Property Status</option>
                            {% for val, label in listing_types %}
                            <option value="{{ val }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="search-field">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <rect x="2" y="7" width="20" height="14" rx="2" />
                            <path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16" />
                        </svg>
                        <select name="property_type" id="hero-property-type" aria-label="Property type">
                            <option value="">Property Type</option>
                            {% for val, label in property_types %}
                            <option value="{{ val }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary" id="hero-search-submit">
                        <i class="fas fa-search"></i> Search
                    </button>
                </form>
            </div>

        </div>
    </div>
</section>


<!-- ── STATS BAR ── -->
<div class="stats-bar" aria-label="Key statistics">
    <div class="container">
        <div class="stats-grid">
            <div>
                <div class="stat-number">500+</div>
                <div class="stat-label">Properties Listed</div>
            </div>
            <div>
                <div class="stat-number">1,200+</div>
                <div class="stat-label">Happy Clients</div>
            </div>
            <div>
                <div class="stat-number">12+</div>
                <div class="stat-label">Years Experience</div>
            </div>
            <div>
                <div class="stat-number">99%</div>
                <div class="stat-label">Satisfaction Rate</div>
            </div>
        </div>
    </div>
</div>


<!-- ── FEATURED PROPERTIES ── -->
{% if featured_properties %}
<section class="section" aria-labelledby="featured-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Hand-picked</span>
            <h2 id="featured-heading" class="h-1 section-title">Featured Properties</h2>
            <div class="section-divider"></div>
        </div>
        <div class="properties-grid">
            {% for prop in featured_properties %}
            <article class="property-card card fade-up">
                <a href="{% url 'properties:detail' prop.slug %}" aria-label="{{ prop.title }}">
                    <div class="card-image">
                        {% with img=prop.get_primary_image %}
                        {% if img %}
                        <img src="{{ img.image.url }}" alt="{{ prop.title }}" loading="lazy">
                        {% else %}
                        <div class="card-img-placeholder">
                            <i class="fas fa-image"></i>
                        </div>
                        {% endif %}
                        {% endwith %}
                        <div class="card-badges">
                            <span class="badge badge-{{ prop.listing_type|cut:'for_' }}">{{ prop.get_listing_type_display }}</span>
                            {% if prop.is_parent %}<span class="badge badge-sale">Estate</span>{% endif %}
                        </div>
                        <div class="card-price">{{ prop.formatted_price }}</div>
                    </div>
                </a>
                <div class="card-body">
                    <h3 class="card-title">
                        <a href="{% url 'properties:detail' prop.slug %}">{{ prop.title }}</a>
                    </h3>
                    <p class="card-location">
                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" />
                            <circle cx="12" cy="10" r="3" />
                        </svg>
                        {{ prop.city }}, {{ prop.state }}
                    </p>
                    <div class="card-specs">
                        {% if prop.bedrooms is not None %}
                        <div class="spec">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
                            </svg>
                            {{ prop.bedrooms }} Beds
                        </div>
                        {% endif %}
                        {% if prop.bathrooms is not None %}
                        <div class="spec">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M4 12h16M4 6a2 2 0 012-2h12a2 2 0 012 2v6H4V6z" />
                            </svg>
                            {{ prop.bathrooms }} Baths
                        </div>
                        {% endif %}
                        {% if prop.area_sqm %}
                        <div class="spec">
                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" />
                            </svg>
                            {{ prop.area_sqm }}sqm
                        </div>
                        {% endif %}
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        <div class="text-center mt-40">
            <a href="{% url 'properties:list' %}" class="btn btn-outline" id="view-all-properties-btn">
                View All Properties <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
{% endif %}


<!-- ── WHY CHOOSE US ── -->
<section class="section section-alt" aria-labelledby="why-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Our Promise</span>
            <h2 id="why-heading" class="h-1 section-title">Why Choose {{ site.site_name }}</h2>
            <div class="section-divider"></div>
        </div>
        <div class="why-grid">
            <div class="why-card fade-up">
                <div class="why-icon"><i class="fas fa-shield-alt"></i></div>
                <h4>Verified Properties</h4>
                <p>Every listing is physically inspected and legally verified. What you see is what you get.</p>
            </div>
            <div class="why-card fade-up">
                <div class="why-icon"><i class="fas fa-file-contract"></i></div>
                <h4>Full Documentation</h4>
                <p>We handle all paperwork from title search to deed of assignment. Stress-free transactions.</p>
            </div>
            <div class="why-card fade-up">
                <div class="why-icon"><i class="fas fa-handshake"></i></div>
                <h4>Trusted Agents</h4>
                <p>Our certified agents have deep local knowledge and put your interest first. Always.</p>
            </div>
            <div class="why-card fade-up">
                <div class="why-icon"><i class="fas fa-globe-africa"></i></div>
                <h4>Diaspora Friendly</h4>
                <p>Invest safely from anywhere in the world. We represent you on the ground in Nigeria.</p>
            </div>
        </div>
    </div>
</section>


<!-- ── PROPERTY TYPES ── -->
<section class="section" aria-labelledby="types-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Browse by Category</span>
            <h2 id="types-heading" class="h-1 section-title">Find What You Need</h2>
            <div class="section-divider"></div>
        </div>
        <div class="types-grid">
            <a href="{% url 'properties:list' %}?property_type=residential" class="type-card fade-up"
                id="type-residential">
                <img src="{% static 'images/type-residential.jpg' %}" alt="Residential Properties" loading="lazy">
                <div class="type-card-overlay">
                    <div class="type-card-icon"><i class="fas fa-home"></i></div>
                    <h3>Residential</h3>
                    <span class="type-card-sub">Apartments, Duplexes, Bungalows</span>
                </div>
            </a>
            <a href="{% url 'properties:list' %}?property_type=commercial" class="type-card fade-up"
                id="type-commercial">
                <img src="{% static 'images/type-commercial.jpg' %}" alt="Commercial Properties" loading="lazy">
                <div class="type-card-overlay">
                    <div class="type-card-icon"><i class="fas fa-building"></i></div>
                    <h3>Commercial</h3>
                    <span class="type-card-sub">Offices, Shops, Warehouses</span>
                </div>
            </a>
            <a href="{% url 'properties:list' %}?property_type=land" class="type-card fade-up" id="type-land">
                <img src="{% static 'images/type-land.jpg' %}" alt="Land Plots" loading="lazy">
                <div class="type-card-overlay">
                    <div class="type-card-icon"><i class="fas fa-map"></i></div>
                    <h3>Land</h3>
                    <span class="type-card-sub">Plots, Estates, Development Sites</span>
                </div>
            </a>
            <a href="{% url 'properties:list' %}?property_type=mixed_use" class="type-card fade-up" id="type-mixed">
                <img src="{% static 'images/type-mixed.jpg' %}" alt="Mixed Use Properties" loading="lazy">
                <div class="type-card-overlay">
                    <div class="type-card-icon"><i class="fas fa-city"></i></div>
                    <h3>Mixed Use</h3>
                    <span class="type-card-sub">Residential + Commercial combos</span>
                </div>
            </a>
        </div>
    </div>
</section>


<!-- ── SERVICES PREVIEW ── -->
<section class="section section-alt" aria-labelledby="services-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">What We Do</span>
            <h2 id="services-heading" class="h-1 section-title">Our Services</h2>
            <div class="section-divider"></div>
        </div>
        <div class="services-grid">
            {% for icon, name, desc in services_list %}
            <div class="service-card fade-up">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas {{ icon }}"></i></div>
                    <h3>{{ name }}</h3>
                    <p>{{ desc }}</p>
                    <a href="{% url 'core:services' %}" class="btn btn-outline btn-sm">Learn More</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>


<!-- ── LATEST BLOG POSTS ── -->
{% if recent_blog %}
<section class="section" aria-labelledby="blog-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Latest News</span>
            <h2 id="blog-heading" class="h-1 section-title">Real Estate Insights</h2>
            <div class="section-divider"></div>
        </div>
        <div class="blog-grid">
            {% for post in recent_blog %}
            <article class="blog-card card fade-up">
                <a href="{% url 'blog:detail' post.slug %}">
                    <div class="card-image">
                        {% if post.cover_image %}
                        <img src="{{ post.cover_image.url }}" alt="{{ post.title }}" loading="lazy">
                        {% else %}
                        <div class="blog-img-placeholder">
                            <i class="fas fa-newspaper"></i>
                        </div>
                        {% endif %}
                    </div>
                </a>
                <div class="card-body">
                    <div class="blog-meta">
                        {% if post.category %}<span class="blog-category">{{ post.category.name }}</span>{% endif %}
                        <span class="blog-date">{{ post.published_at|date:"d M Y" }}</span>
                    </div>
                    <h3><a href="{% url 'blog:detail' post.slug %}">{{ post.title }}</a></h3>
                    <p>{{ post.excerpt|truncatewords:20 }}</p>
                    <a href="{% url 'blog:detail' post.slug %}" class="blog-read-more">Read More <i
                            class="fas fa-arrow-right"></i></a>
                </div>
            </article>
            {% endfor %}
        </div>
        <div class="text-center mt-40">
            <a href="{% url 'blog:list' %}" class="btn btn-outline" id="view-all-blog-btn">All Articles <i
                    class="fas fa-arrow-right"></i></a>
        </div>
    </div>
</section>
{% endif %}


<!-- ── CTA STRIP ── -->
<section class="cta-strip" aria-labelledby="cta-heading">
    <div class="cta-strip-bg" aria-hidden="true"></div>
    <div class="cta-strip-overlay" aria-hidden="true"></div>
    <div class="container">
        <div class="cta-strip-content">
            <span class="section-label cta-label">Ready to Start?</span>
            <h2 id="cta-heading" class="h-1">Your Dream Property Awaits</h2>
            <p>Let our team of experts guide you through every step — from search to signing. Join 1,200+ satisfied
                clients.</p>
            <div class="cta-actions">
                <a href="{% url 'properties:list' %}" class="btn btn-accent btn-lg" id="cta-browse-btn">Browse
                    Properties</a>
                <a href="{% url 'enquiries:contact' %}" class="btn btn-outline-white btn-lg" id="cta-talk-btn">Talk to
                    an Agent</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}