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

{% block title %}Our Team | {{ site.site_name }} — Meet Our Property Experts{% endblock %}
{% block meta_description %}Meet the expert team behind {{ site.site_name }}. Our property consultants are dedicated to
helping you buy, sell, rent, and invest in real estate across Nigeria.{% endblock %}

{% block content %}

<div class="page-hero">
    <div class="container">
        <div class="page-hero-content">
            <h1>Meet Our Team</h1>
            <p>The dedicated professionals working hard to find you the perfect property.</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">Our Team</span>
        </nav>
    </div>
</div>

<section class="section">
    <div class="container">
        <div class="section-header">
            <span class="section-label">The People Behind {{ site.site_name }}</span>
            <h2 class="h-1 section-title">Our Expert Team</h2>
            <div class="section-divider"></div>
        </div>

        {% if members %}
        <div class="team-grid">
            {% for member in members %}
            <div class="team-card fade-up">
                <div class="team-photo">
                    {% if member.image %}
                    <img src="{{ member.image.url }}" alt="{{ member.name }}" loading="lazy">
                    {% else %}
                    <div class="team-photo-placeholder"><i class="fas fa-user"></i></div>
                    {% endif %}
                    <div class="team-socials">
                        {% if member.whatsapp %}
                        <a href="https://wa.me/{{ member.whatsapp }}" target="_blank" rel="noopener"
                            title="WhatsApp {{ member.name }}" class="team-social-btn wa">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        {% endif %}
                        {% if member.instagram_url %}
                        <a href="{{ member.instagram_url }}" target="_blank" rel="noopener" title="Instagram"
                            class="team-social-btn ig">
                            <i class="fab fa-instagram"></i>
                        </a>
                        {% endif %}
                        {% if member.facebook_url %}
                        <a href="{{ member.facebook_url }}" target="_blank" rel="noopener" title="Facebook"
                            class="team-social-btn fb">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        {% endif %}
                        {% if member.linkedin_url %}
                        <a href="{{ member.linkedin_url }}" target="_blank" rel="noopener" title="LinkedIn"
                            class="team-social-btn li">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        {% endif %}
                        {% if member.twitter_url %}
                        <a href="{{ member.twitter_url }}" target="_blank" rel="noopener" title="Twitter/X"
                            class="team-social-btn tw">
                            <i class="fab fa-x-twitter"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
                <div class="team-info">
                    <h3 class="team-name">{{ member.name }}</h3>
                    <p class="team-rank">{{ member.rank }}</p>
                    {% if member.quote %}
                    <p class="team-quote">&ldquo;{{ member.quote }}&rdquo;</p>
                    {% endif %}
                    {% if member.whatsapp %}
                    <a href="https://wa.me/{{ member.whatsapp }}?text=Hello {{ member.name }}, I found you on {{ site.site_name }} and I'd like to enquire about a property."
                        target="_blank" rel="noopener" class="team-wa-btn">
                        <i class="fab fa-whatsapp"></i> Chat on WhatsApp
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <i class="team-empty-icon fas fa-users"></i>
            <h3>Team profiles coming soon</h3>
            <p>We are setting up our team page. Check back shortly.</p>
        </div>
        {% endif %}
    </div>
</section>

{% endblock %}