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

{% block title %}Our Services | {{ site.site_name }} — Real Estate Services in Nigeria{% endblock %}
{% block meta_description %}{{ site.site_name }} offers verified property sales, rentals, leasing, documentation,
property management, and diaspora investment services across Nigeria.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Our Services</h1>
            <p>Everything you need to navigate the Nigerian property market — safely and confidently.</p>
        </div>
    </div>
</div>

<div class="breadcrumb-bar">
    <div class="container">
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="{% url 'core:home' %}">Home</a>
            <span>&rsaquo;</span>
            <span class="current">Services</span>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">

        <!-- Services image banner -->
        <div class="services-hero-img">
            <img src="{% static 'images/services-bg.jpg' %}" alt="Real Estate Services" loading="lazy">
            <div class="services-hero-img-overlay">
                <div class="services-hero-img-text">
                    <h2>Full-Service Real Estate Support</h2>
                    <p>We handle every aspect of your property journey — from finding the right listing to signing the
                        final document.</p>
                </div>
            </div>
        </div>

        <div class="section-header">
            <span class="section-label">What We Offer</span>
            <h2 class="h-1 section-title">How We Help You</h2>
            <div class="section-divider"></div>
            <p class="text-lead">We handle every aspect of your property journey.</p>
        </div>
        <div class="services-grid">
            <div class="service-card fade-up" id="service-search">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-search-location"></i></div>
                    <h3>Property Search</h3>
                    <p>Tell us what you need and we'll find it. We have an extensive database of verified properties for
                        sale, rent, and lease across Nigeria.</p>
                    <a href="{% url 'properties:list' %}" class="btn btn-outline btn-sm">Browse Listings</a>
                </div>
            </div>
            <div class="service-card fade-up" id="service-buy-sell">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-handshake"></i></div>
                    <h3>Buy &amp; Sell</h3>
                    <p>Whether you're buying your first home or selling an investment property, we negotiate, verify,
                        and close deals smoothly with full legal backing.</p>
                    <a href="{% url 'enquiries:contact' %}" class="btn btn-outline btn-sm">Get Started</a>
                </div>
            </div>
            <div class="service-card fade-up" id="service-rent">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-key"></i></div>
                    <h3>Rentals &amp; Leasing</h3>
                    <p>Access a wide range of rental homes and commercial spaces. We match you with the right landlord
                        at the right price, every time.</p>
                    <a href="{% url 'properties:list' %}?listing_type=for_rent" class="btn btn-outline btn-sm">View
                        Rentals</a>
                </div>
            </div>
            <div class="service-card fade-up" id="service-docs">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-file-signature"></i></div>
                    <h3>Documentation &amp; Legal</h3>
                    <p>We handle title search, deed of assignment, survey plans, and C of O processing. No fake docs,
                        no shortcuts — just legitimate titles.</p>
                    <a href="{% url 'enquiries:contact' %}" class="btn btn-outline btn-sm">Enquire Now</a>
                </div>
            </div>
            <div class="service-card fade-up" id="service-mgmt">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-building"></i></div>
                    <h3>Property Management</h3>
                    <p>Too busy to manage your property? We handle tenant sourcing, rent collection, and maintenance
                        while you sit back and earn.</p>
                    <a href="{% url 'enquiries:contact' %}" class="btn btn-outline btn-sm">Learn More</a>
                </div>
            </div>
            <div class="service-card fade-up" id="service-diaspora">
                <div class="service-card-inner">
                    <div class="service-icon"><i class="fas fa-globe-africa"></i></div>
                    <h3>Diaspora Investment</h3>
                    <p>Our diaspora service lets you safely invest in Nigerian property from anywhere in the world. We
                        represent you on the ground and update you at every step.</p>
                    <a href="{% url 'enquiries:contact' %}" class="btn btn-outline btn-sm">Start Investing</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- PROCESS -->
<section class="section section-alt" aria-labelledby="process-heading">
    <div class="container">
        <div class="section-header">
            <span class="section-label">How It Works</span>
            <h2 id="process-heading" class="h-1 section-title">Simple &amp; Transparent Process</h2>
            <div class="section-divider"></div>
        </div>
        <div class="process-grid">
            {% for step, icon, title, desc in process_steps %}
            <div class="process-step fade-up">
                <div class="process-step-num">{{ step }}</div>
                <div>
                    <h3>{{ title }}</h3>
                    <p>{{ desc }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<section class="cta-strip" aria-labelledby="services-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">
            <h2 id="services-cta-heading" class="h-1">Ready to Get Started?</h2>
            <p>Our team is available 9am – 6pm Mon – Sat. WhatsApp us anytime.</p>
            <div class="cta-actions">
                <a href="{% url 'enquiries:contact' %}" class="btn btn-accent btn-lg"
                    id="services-cta-btn">Contact Us Now</a>
                {% if site.whatsapp %}
                <a href="https://wa.me/{{ site.whatsapp }}" class="btn btn-outline-white btn-lg" target="_blank"
                    id="services-whatsapp-btn"><i class="fab fa-whatsapp"></i> WhatsApp Us</a>
                {% endif %}
            </div>
        </div>
    </div>
</section>

{% endblock %}