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

{% block content %}

{# ================================================================ #}
{#  VIDEO HERO                                                        #}
{# ================================================================ #}
<section class="hero">

  {# Ambient orbs (decorative — like Mshel's blur circles but TDK colors) #}
  <div class="hero-orb hero-orb-1"></div>
  <div class="hero-orb hero-orb-2"></div>

  {# Background: video with image fallback #}
  <div class="hero-video-wrap">
    {% if site.hero_video %}
      <video autoplay muted loop playsinline preload="metadata"
             poster="{% if site.hero_image %}{{ site.hero_image.url }}{% endif %}">
        <source src="{{ site.hero_video.url }}" type="video/mp4">
      </video>
    {% elif site.hero_image %}
      <div class="hero-fallback-img"
           style="position:absolute;inset:0;background-image:url('{{ site.hero_image.url }}');background-size:cover;background-position:center;"></div>
    {% else %}
      <div style="position:absolute;inset:0;background:linear-gradient(160deg,#060d1a 0%,#0f1b2d 50%,#0a1525 100%);"></div>
    {% endif %}
  </div>

  <div class="hero-overlay"></div>

  <div class="container hero-content">

    <div class="hero-eyebrow">
      <span class="hero-eyebrow-dot"></span>
      Abuja's No. 1 Award-Winning Real Estate Plug
    </div>

    <h1 class="hero-title">
      Find Your <em>Dream Home</em><br>
      in Nigeria
    </h1>

    <p class="hero-subtitle">
      {{ site.hero_subtitle|default:"Premium properties, verified lands, and trusted investment opportunities across Abuja and beyond." }}
    </p>

    <div class="hero-actions">
      <a href="{% url 'properties:list' %}" class="hero-btn-primary">
        <i class="bi bi-building"></i> Browse Properties
      </a>
      <a href="{% url 'leads:inquiry' %}" class="hero-btn-ghost">
        <i class="bi bi-chat-dots"></i> Talk to an Agent
      </a>
    </div>

    <div class="live-counter">
      <span class="pulse-dot"></span>
      <strong>{{ stats.online_now }}</strong>&nbsp;people viewing now &middot;
      <strong>{{ stats.today_visits|intcomma }}</strong>&nbsp;visits today
    </div>

    {# Glassmorphism search widget #}
    <form class="search-widget" action="{% url 'properties:list' %}" method="get">
      <div class="search-tabs">
        <label class="search-tab active"><input type="radio" name="category" value="" checked> All Properties</label>
        <label class="search-tab"><input type="radio" name="category" value="land"> Land for Sale</label>
        <label class="search-tab"><input type="radio" name="category" value="house"> House for Sale</label>
      </div>
      <div class="search-fields">
        <div class="search-field">
          <i class="bi bi-search"></i>
          <input type="text" name="q" placeholder="Search by title, area, address...">
        </div>
        <div class="search-field">
          <i class="bi bi-cash-stack"></i>
          <select name="max_price">
            <option value="">Any price</option>
            <option value="20000000">Up to ₦20M</option>
            <option value="50000000">Up to ₦50M</option>
            <option value="100000000">Up to ₦100M</option>
            <option value="500000000">Up to ₦500M</option>
            <option value="1000000000">Up to ₦1B</option>
          </select>
        </div>
        <div class="search-field">
          <i class="bi bi-house-door"></i>
          <select name="bedrooms">
            <option value="">Any beds</option>
            <option value="1">1+ Bed</option>
            <option value="2">2+ Beds</option>
            <option value="3">3+ Beds</option>
            <option value="4">4+ Beds</option>
            <option value="5">5+ Beds</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary search-btn">
          <i class="bi bi-search"></i> Search
        </button>
      </div>
    </form>

  </div>

  {# Animated scroll hint (like Mshel's bounce arrow) #}
  <div class="hero-scroll-hint" aria-hidden="true">
    <span>Scroll</span>
    <div class="hero-scroll-hint-line"></div>
  </div>

</section>

{# ================================================================ #}
{#  TRUST STATS BAR                                                   #}
{# ================================================================ #}
<section class="trust-indicators reveal">
  <div class="container">
    <div class="row g-3 text-center reveal-stagger">
      <div class="col-6 col-md-3">
        <div class="trust-stat">
          <div class="trust-number" data-target="{{ site.clients_count|default:30000 }}">0</div>
          <div class="trust-label">Satisfied Clients</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="trust-stat">
          <div class="trust-number" data-target="{{ site.properties_sold|default:500 }}">0</div>
          <div class="trust-label">Properties Sold</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="trust-stat">
          <div class="trust-number" data-target="{{ site.years_experience|default:10 }}">0</div>
          <div class="trust-label">Years Experience</div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="trust-stat">
          <div class="trust-number" data-target="{{ site.locations_covered|default:15 }}">0</div>
          <div class="trust-label">Locations Covered</div>
        </div>
      </div>
    </div>
  </div>
</section>

{# ================================================================ #}
{#  FEATURED ESTATES                                                  #}
{# ================================================================ #}
{% if featured_estates %}
<section class="section bg-light estates-section">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Our Estates</span>
      <h2 class="section-title">Premium Land &amp; Property Estates</h2>
      <p class="section-subtitle">Secure your future with our flagship developments — flexible payment plans, FCDA C of O titles, prime locations</p>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for estate in featured_estates %}
      <div class="col-md-6">
        <div class="estate-card" style="border-top: 3px solid {{ estate.theme_color }};">
          {% if estate.hero_image %}
          <div class="estate-card-image" style="background-image: url('{{ estate.hero_image.url }}');"></div>
          {% else %}
          <div class="estate-image-placeholder"><i class="bi bi-buildings"></i></div>
          {% endif %}
          <div class="estate-card-body">
            {% if estate.location_short %}
            <div class="estate-meta"><i class="bi bi-geo-alt-fill me-1"></i>{{ estate.location_short }}</div>
            {% endif %}
            <h3 class="estate-name">{{ estate.title }}</h3>
            {% if estate.subheadline %}<p class="estate-desc">{{ estate.subheadline }}</p>{% endif %}
            <hr class="estate-divider">
            <div class="estate-price-row">
              {% if estate.starting_price %}
              <span class="estate-starting-price">Starting from <strong>₦{{ estate.starting_price|floatformat:0|intcomma }}</strong></span>
              {% endif %}
              <span class="estate-trust-pill">&#10003; FCDA C of O</span>
            </div>
            <a href="{{ estate.get_absolute_url }}" class="btn btn-primary estate-cta">Explore {{ estate.title }} <i class="bi bi-arrow-right"></i></a>
            <a href="{% url 'core:contact' %}" class="estate-inspect-link">Book Site Inspection</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% if featured_estates|length > 2 %}
    <div class="text-center mt-5 reveal">
      <a href="{% url 'core:contact' %}" class="btn btn-outline-primary">Inquire About All Estates &rarr;</a>
    </div>
    {% endif %}
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  FEATURED PROPERTIES                                               #}
{# ================================================================ #}
{% if featured %}
<section class="section">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Handpicked for You</span>
      <h2 class="section-title">Featured Properties</h2>
      <p class="section-subtitle">Premium listings verified by our team</p>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for property in featured %}
        <div class="col-md-6 col-lg-4">{% include 'partials/property_card.html' %}</div>
      {% endfor %}
    </div>
    <div class="text-center mt-5 reveal">
      <a href="{% url 'properties:list' %}" class="btn btn-outline-primary">View All Properties &rarr;</a>
    </div>
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  SERVICES                                                          #}
{# ================================================================ #}
<section class="services-section section bg-light">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">What We Offer</span>
      <h2 class="section-title">Our Services</h2>
      <p class="section-subtitle">End-to-end real estate solutions tailored to you</p>
    </div>
    <div class="row g-4 reveal-stagger">
      <div class="col-md-4">
        <div class="service-card">
          <div class="service-icon"><i class="bi bi-buildings"></i></div>
          <h4>Residential Sales</h4>
          <p>Duplexes, apartments, bungalows — we match you with verified homes that fit your lifestyle and budget.</p>
          <a href="{% url 'properties:list' %}?listing_type=sale" class="service-link">Explore <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="service-card">
          <div class="service-icon"><i class="bi bi-briefcase"></i></div>
          <h4>Commercial Properties</h4>
          <p>Office spaces, warehouses, and retail units in prime Abuja locations — suitable for every business scale.</p>
          <a href="{% url 'properties:list' %}" class="service-link">Explore <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
      <div class="col-md-4">
        <div class="service-card">
          <div class="service-icon"><i class="bi bi-geo-alt"></i></div>
          <h4>Land Banking</h4>
          <p>Invest in strategic land parcels with verified titles — C of O, Governor's Consent, R of O — for long-term capital growth.</p>
          <a href="{% url 'properties:list' %}" class="service-link">Explore <i class="bi bi-arrow-right"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

{# ================================================================ #}
{#  WHY CHOOSE US                                                     #}
{# ================================================================ #}
<section class="section">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Our Edge</span>
      <h2 class="section-title">Why Choose {{ site.site_name|default:"TDK Homes" }}</h2>
    </div>
    <div class="row g-4 reveal-stagger">
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon"><i class="bi bi-patch-check-fill"></i></div>
          <h5>Verified Listings</h5>
          <p>Every property is vetted with verified titles — C of O, Governor's Consent, or Deed of Assignment.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon"><i class="bi bi-headset"></i></div>
          <h5>Expert Agents</h5>
          <p>Experienced agents guide you through every step — from initial search to final closing.</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="feature-box">
          <div class="feature-icon"><i class="bi bi-cash-coin"></i></div>
          <h5>Flexible Payment</h5>
          <p>Many properties offer payment plans tailored to your budget and timeline.</p>
        </div>
      </div>
    </div>
  </div>
</section>

{# ================================================================ #}
{#  LATEST LISTINGS                                                   #}
{# ================================================================ #}
{% if recent %}
<section class="section bg-light">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Just Listed</span>
      <h2 class="section-title">Latest Listings</h2>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for property in recent|slice:":8" %}
        <div class="col-md-6 col-lg-3">{% include 'partials/property_card.html' %}</div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  VIDEOS                                                            #}
{# ================================================================ #}
{% if videos %}
<section class="section">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">See It First</span>
      <h2 class="section-title">Property Tours &amp; Videos</h2>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for v in videos %}
      <div class="col-md-4">
        <a href="{{ v.get_absolute_url }}" class="video-card">
          {% if v.thumbnail %}<img src="{{ v.thumbnail.url }}" alt="{{ v.title }}">
          {% else %}<div class="video-placeholder"><i class="bi bi-play-circle"></i></div>{% endif %}
          <div class="video-overlay"><i class="bi bi-play-fill"></i></div>
          <div class="video-info">
            <h6>{{ v.title }}</h6>
            <div class="d-flex align-items-center gap-2 mt-1">
              {% if v.duration %}<small>{{ v.duration }}</small>{% endif %}
              <span class="badge" style="font-size:.7rem;background:rgba(62,63,153,.75);color:#fff;">{{ v.get_category_display }}</span>
            </div>
          </div>
        </a>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  TESTIMONIALS                                                      #}
{# ================================================================ #}
{% if testimonials %}
<section class="section bg-light">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Client Stories</span>
      <h2 class="section-title">What Our Clients Say</h2>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for t in testimonials|slice:":3" %}
      <div class="col-md-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="{{ t.name }}">{% 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 %}

{# ================================================================ #}
{#  UPDATES / BLOG                                                    #}
{# ================================================================ #}
{% if updates %}
<section class="section">
  <div class="container">
    <div class="section-header reveal">
      <span class="section-eyebrow">Market Intel</span>
      <h2 class="section-title">Latest Updates</h2>
    </div>
    <div class="row g-4 reveal-stagger">
      {% for u in updates %}
      <div class="col-md-4">
        <article class="update-card">
          {% if u.cover_image %}<a href="{{ u.get_absolute_url }}"><img src="{{ u.cover_image.url }}" alt="{{ u.title }}"></a>{% endif %}
          <div class="update-body">
            <small class="text-muted">{{ u.publish_at|date:"M d, Y" }}</small>
            <h5><a href="{{ u.get_absolute_url }}">{{ u.title }}</a></h5>
            <p>{{ u.excerpt|default:u.content|striptags|truncatewords:20 }}</p>
            <a href="{{ u.get_absolute_url }}" class="read-more">Read more <i class="bi bi-arrow-right"></i></a>
          </div>
        </article>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{# ================================================================ #}
{#  CTA BANNER                                                        #}
{# ================================================================ #}
<section class="cta-section">
  <div class="container text-center reveal">
    <span class="section-eyebrow">Take the Next Step</span>
    <h2 style="font-size:clamp(1.8rem,4vw,3rem);margin-bottom:1rem;">Ready to Find Your Perfect Property?</h2>
    <p style="font-size:1.1rem;opacity:.85;max-width:540px;margin:0 auto 2.5rem;">
      Let our experts help you find the right home, land, or investment.
    </p>
    <div class="d-flex justify-content-center gap-3 flex-wrap">
      <a href="{% url 'leads:inquiry' %}" class="btn btn-primary btn-lg">Submit an Inquiry</a>
      <a href="https://wa.me/{{ site.whatsapp_number|default:WHATSAPP_NUMBER }}" target="_blank"
         class="btn btn-outline-light btn-lg">
        <i class="bi bi-whatsapp"></i> WhatsApp Us
      </a>
    </div>
  </div>
</section>

{% endblock %}