{% 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="container">
        <div class="hero-grid">
            <!-- Left Side Content -->
            <div class="hero-content">
                <div class="hero-label fade-up">
                    <i class="fas fa-shield-alt"></i> Trusted Nigerian Real Estate Developers
                </div>
                <h1 id="hero-heading" class="hero-title-animated">
                    <span class="line-1">Building <span class="highlight text-rotator" data-words='["Gated Communities", "Luxury Smart Homes", "Premium Estates", "Urban Workspaces"]'>Gated Communities</span></span>
                    <span class="line-2">that stand <span class="highlight">the test of time.</span></span>
                </h1>
                <p class="hero-sub fade-up">
                    {{ site.site_name }} designs and delivers modern homes, estates, and investment-grade properties for homeowners and investors across Nigeria.
                </p>
                <div class="hero-actions fade-up">
                    <a href="{% url 'enquiries:schedule' %}" class="btn btn-primary btn-lg" id="hero-browse-btn">
                        SCHEDULE A VISIT
                    </a>
                    <a href="https://wa.me/{{ site.whatsapp }}" class="btn btn-outline" style="border-radius: 50px; background: transparent; border-color: var(--border); padding: 12px 24px;" id="hero-contact-btn">
                        <i class="fas fa-play-circle" style="color: var(--primary); font-size: 1.25rem;"></i> Watch project tour
                    </a>
                </div>
                <div class="hero-focus-info fade-up">
                    <div class="focus-item">
                        <span class="focus-title">Project Focus</span>
                        <span class="focus-value">Residential • Commercial • Mixed-use</span>
                    </div>
                    <div class="focus-item">
                        <span class="focus-title">Buyers Served</span>
                        <span class="focus-value">First-time & seasoned investors</span>
                    </div>
                </div>
            </div>

            <!-- Right Side Card -->
            <div class="hero-floating-card fade-up">
                <div class="hero-card-img-wrap">
                    {% if featured_properties.0 and featured_properties.0.get_primary_image %}
                    <img src="{{ featured_properties.0.get_primary_image.image.url }}" alt="{{ featured_properties.0.title }}">
                    {% else %}
                    <img src="{% static 'images/about-img.jpg' %}" alt="Empire Towers">
                    {% endif %}
                    <span class="hero-card-badge">Premium developments • Turnkey delivery</span>
                </div>
                <div class="hero-card-footer">
                    {% if featured_properties.0 %}
                    <h3 class="hero-card-title">{{ featured_properties.0.title }}</h3>
                    <p class="hero-card-desc">{{ featured_properties.0.city }}, {{ featured_properties.0.state }}</p>
                    {% else %}
                    <h3 class="hero-card-title">Empire Towers</h3>
                    <p class="hero-card-desc">Grade-A apartments in the heart of the city.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ── STATS BAR ── -->
<div class="stats-bar" aria-label="Key statistics">
    <div class="container">
        <div class="stats-grid">
            <div class="stat-card fade-up">
                <div class="stat-icon-wrap">
                    <i class="fas fa-building"></i>
                </div>
                <div class="stat-text">
                    <span class="stat-number" data-count="18" data-suffix="+">18+</span>
                    <span class="stat-label">Completed projects</span>
                </div>
            </div>
            <div class="stat-card fade-up">
                <div class="stat-icon-wrap">
                    <i class="fas fa-home"></i>
                </div>
                <div class="stat-text">
                    <span class="stat-number" data-count="1200" data-suffix="+">1,200+</span>
                    <span class="stat-label">Delivered units</span>
                </div>
            </div>
            <div class="stat-card fade-up">
                <div class="stat-icon-wrap">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="stat-text">
                    <span class="stat-number" data-count="3">3</span>
                    <span class="stat-label">States in Nigeria</span>
                </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 %}


<!-- ── TESTIMONIALS ── -->
<section class="section section-alt" aria-labelledby="testimonials-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Client Testimonials</span>
            <h2 id="testimonials-heading" class="h-1 section-title">What our clients say about {{ site.site_name }}.</h2>
            <p style="color: var(--text-muted); font-size: 0.95rem; margin-top: 6px;">Real feedback from homeowners and investors who trusted us with their property goals.</p>
            <div class="section-divider"></div>
        </div>
        <div class="testimonials-grid">
            <div class="testimonial-card fade-up" style="transition-delay: 0.1s;">
                <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 class="testimonial-text">"{{ site.site_name }} delivered exactly what was promised. The finishing, documentation, and follow-up support exceeded all my expectations."</p>
                <div class="testimonial-author">
                    <div class="author-avatar" style="background: var(--primary);">AY</div>
                    <div>
                        <h4 class="author-name">Mrs. Amina Yusuf</h4>
                        <p class="author-role">Homeowner, Empire Residences</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card fade-up" style="transition-delay: 0.25s;">
                <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 class="testimonial-text">"From inspection to allocation, the team was transparent and professional. I feel completely confident investing with them from abroad."</p>
                <div class="testimonial-author">
                    <div class="author-avatar" style="background: var(--accent);">MI</div>
                    <div>
                        <h4 class="author-name">Mr. Ishaq</h4>
                        <p class="author-role">Investor, Green Gardens</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card fade-up" style="transition-delay: 0.4s;">
                <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="far fa-star"></i>
                </div>
                <p class="testimonial-text">"Their understanding of both design and long-term maintenance makes them a strong partner for custom development and bulk purchases."</p>
                <div class="testimonial-author">
                    <div class="author-avatar" style="background: var(--primary-light);">EB</div>
                    <div>
                        <h4 class="author-name">Engr. Bello</h4>
                        <p class="author-role">Corporate Client</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ── CTA STRIP ── -->
<section class="cta-strip" style="background: var(--primary); padding: 56px 0; color: var(--white); text-align: left; position: relative;" aria-labelledby="cta-heading">
    <div class="container">
        <div style="display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap;">
            <div style="max-width: 680px;">
                <h2 id="cta-heading" class="h-2" style="color: var(--white); margin-bottom: 8px;">Ready to inspect a property or start a new project?</h2>
                <p style="color: rgba(255, 255, 255, 0.85); margin-bottom: 0; font-size: 0.95rem;">Book a guided site visit or speak with our team about custom developments and bulk purchases.</p>
            </div>
            <div class="cta-actions" style="display: flex; gap: 14px; margin-left: 0;">
                <a href="{% url 'enquiries:contact' %}" class="btn btn-outline-white" style="border-radius: 50px;" id="cta-browse-btn">BOOK INSPECTION</a>
                <a href="https://wa.me/{{ site.whatsapp }}" class="btn btn-outline-white" style="border-radius: 50px; border-color: rgba(255, 255, 255, 0.4);" id="cta-talk-btn">Talk to our team</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}