{% extends 'base.html' %}
{% block title %}About Us — {{ site.site_name }}{% endblock %}
{% block content %}
<section class="page-header">
  <div class="container">
    <h1>About {{ site.site_name|default:"TDK Homes" }}</h1>
    <p>{{ site.tagline|default:"Your trusted real estate partner" }}</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-lg-6">
        <h2 class="section-title text-start">Who We Are</h2>
        <p class="lead">{{ site.about_short|default:"TDK Homes is a leading real estate company in Nigeria, helping clients buy, sell, and rent verified properties." }}</p>
        <p>With over {{ site.years_experience|default:10 }} years in the Nigerian real estate market, we have helped {{ site.clients_count|default:500 }}+ clients secure their dream homes, lands, and investment properties across {{ site.locations_covered|default:15 }}+ locations.</p>
        <div class="d-flex gap-3 mt-4">
          <a href="{% url 'properties:list' %}" class="btn btn-primary">Browse Properties</a>
          <a href="{% url 'core:contact' %}" class="btn btn-outline-primary">Contact Us</a>
        </div>
      </div>
      <div class="col-lg-6">
        <div class="row g-3">
          <div class="col-6"><div class="trust-stat"><div class="trust-number">{{ site.clients_count|default:500 }}+</div><div class="trust-label">Clients</div></div></div>
          <div class="col-6"><div class="trust-stat"><div class="trust-number">{{ site.properties_sold|default:200 }}+</div><div class="trust-label">Properties Sold</div></div></div>
          <div class="col-6"><div class="trust-stat"><div class="trust-number">{{ site.years_experience|default:10 }}+</div><div class="trust-label">Years</div></div></div>
          <div class="col-6"><div class="trust-stat"><div class="trust-number">{{ site.locations_covered|default:15 }}+</div><div class="trust-label">Locations</div></div></div>
        </div>
      </div>
    </div>
  </div>
</section>

{% if team %}
<section class="section bg-light">
  <div class="container">
    <div class="section-header"><h2 class="section-title">Meet Our Team</h2></div>
    <div class="row g-4">
      {% for m in team %}
      <div class="col-md-6 col-lg-3">
        <div class="team-card">
          {% if m.photo %}<img src="{{ m.photo.url }}" alt="{{ m.name }}">
          {% else %}<div class="avatar-placeholder large">{{ m.name|first }}</div>{% endif %}
          <h5>{{ m.name }}</h5>
          <div class="text-muted">{{ m.role }}</div>
          {% if m.bio %}<p class="small mt-2">{{ m.bio|truncatewords:20 }}</p>{% endif %}
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% if testimonials %}
<section class="section">
  <div class="container">
    <div class="section-header"><h2 class="section-title">Client Stories</h2></div>
    <div class="row g-4">
      {% for t in testimonials|slice:":6" %}
      <div class="col-md-6 col-lg-4">
        <div class="testimonial-card">
          <div class="testimonial-stars">
            {% for _ in "12345"|make_list %}{% if forloop.counter <= t.rating %}<i class="bi bi-star-fill"></i>{% else %}<i class="bi bi-star"></i>{% endif %}{% endfor %}
          </div>
          <p class="testimonial-quote">{{ t.quote }}</p>
          <div class="testimonial-author">
            {% if t.photo %}<img src="{{ t.photo.url }}" alt="">{% else %}<div class="avatar-placeholder">{{ t.name|first }}</div>{% endif %}
            <div><strong>{{ t.name }}</strong>{% if t.role %}<small class="d-block text-muted">{{ t.role }}</small>{% endif %}</div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}
{% endblock %}