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

{% block title %}About Us | {{ site.site_name }} — Trusted Real Estate in Abuja, Nigeria{% endblock %}
{% block meta_description %}Learn about {{ site.site_name }}, Abuja's trusted real estate company. We help buyers,
sellers, and renters across Nigeria with verified, transparent property transactions.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>About {{ site.site_name }}</h1>
            <p>Your transparent, trusted real estate partner in Abuja and across Nigeria.</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">About Us</span>
        </nav>
    </div>
</div>

<!-- WHO WE ARE -->
<section class="section">
    <div class="container">
        <div class="about-grid">
            <div>
                <div class="about-header">
                    <span class="section-label">Who We Are</span>
                    <h2 class="h-1">Building Trust in Nigerian Real Estate</h2>
                </div>
                <p class="about-intro-text">
                    Imagine trying to find a place to live or set up a business, and actually <strong>enjoying</strong>
                    the process instead of stressing out. That's exactly what we do at {{ site.site_name }}.
                </p>
                <p class="about-intro-text-sm">
                    We're a real estate company rooted right here in <strong>Abuja</strong>, with reach spanning all
                    across Nigeria. We act as the ultimate property matchmakers — helping people buy, sell, lease, and
                    rent homes and commercial spaces with full legal verification.
                </p>
                <ul class="about-list">
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        Every property is physically inspected and legally verified
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        Full documentation and paperwork handled end-to-end
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        Transparent pricing — no hidden fees, ever
                    </li>
                    <li>
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="2">
                            <polyline points="20 6 9 17 4 12" />
                        </svg>
                        Serving the diaspora — invest safely from anywhere
                    </li>
                </ul>
                <div class="about-btn-row">
                    <a href="{% url 'properties:list' %}" class="btn btn-primary" id="about-browse-btn">Browse
                        Properties</a>
                    <a href="{% url 'enquiries:contact' %}" class="btn btn-outline" id="about-contact-btn">Talk to
                        Us</a>
                </div>
            </div>

            <!-- About image with floating badge -->
            <div class="about-image-wrap">
                <div class="about-image">
                    <img src="{% static 'images/about-img.jpg' %}" alt="Villaco Real Estate Team" loading="lazy">
                </div>
                <div class="about-badge">
                    <div class="about-badge-number">12+</div>
                    <div class="about-badge-text">Years of<br>Excellence</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- MISSION & VISION -->
<section class="section section-alt">
    <div class="container">
        <div class="section-header">
            <span class="section-label">Our Purpose</span>
            <h2 class="h-1 section-title">Mission &amp; Vision</h2>
            <div class="section-divider"></div>
        </div>
        <div class="mission-grid">
            <div class="sidebar-card fade-up">
                <div class="mission-card">
                    <div class="mission-icon">
                        <i class="fas fa-bullseye"></i>
                    </div>
                    <div>
                        <h3>Our Mission</h3>
                        <p>To solve the trust problem in Nigerian real estate by giving every client a transparent,
                            verified, and stress-free experience — whether buying, selling, renting, or investing.</p>
                    </div>
                </div>
            </div>
            <div class="sidebar-card fade-up">
                <div class="mission-card">
                    <div class="mission-icon mission-icon-accent">
                        <i class="fas fa-eye"></i>
                    </div>
                    <div>
                        <h3>Our Vision</h3>
                        <p>To become Nigeria's most trusted real estate brand — the first name Nigerians at home and in
                            the diaspora think of when they need to find, buy, or invest in property.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="cta-strip" aria-labelledby="about-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="about-cta-heading" class="h-1">Let's Find Your Perfect Property</h2>
            <p>Whether you're buying, selling, or renting — our team is ready. No pressure, just results.</p>
            <div class="cta-actions">
                <a href="{% url 'enquiries:contact' %}" class="btn btn-accent btn-lg" id="about-cta-btn">Get in Touch
                    Today</a>
            </div>
        </div>
    </div>
</section>

{% endblock %}