{% extends "base.html" %}

{% block content %}
<main>
  <section class="hero-section">
    <div class="orb orb-one"></div>
    <div class="orb orb-two"></div>
    <div class="container">
      <div class="row align-items-center g-5">
        <div class="col-lg-7">
          <p class="eyebrow">Mobile-first PWA · property pinboard</p>
          <h1 class="hero-title">Spot a sale or rental nearby. Pin it in seconds.</h1>
          <p class="hero-copy">NearbyNest lets anyone add a public property sighting from their current location or an uploaded photo, then browse fresh entries by distance or recency.</p>
          <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
            <a class="btn btn-nest btn-lg" href="{% url 'onboarding' %}">Start onboarding</a>
            <a class="btn btn-ghost btn-lg" href="{% url 'property_list' %}">Browse properties</a>
          </div>
          <div class="permission-strip mt-4" aria-label="Onboarding permissions">
            <span>Location</span><span>Notifications</span><span>Photos</span>
          </div>
        </div>
        <div class="col-lg-5">
          <div class="phone-frame mx-lg-auto">
            <div class="phone-top"></div>
            <div class="map-card">
              <div class="map-grid"></div>
              <div class="pin pin-a"></div>
              <div class="pin pin-b"></div>
              <div class="pin pin-c"></div>
              <div class="glass-panel">
                <span class="badge rounded-pill text-bg-light">Live MVP</span>
                <h2>Public nearby list</h2>
                <p>{{ total_entries }} entries · {{ photo_entries }} photo uploads</p>
                <a href="{% url 'add_location_property' %}">Add by location/address →</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section-pad">
    <div class="container">
      <div class="row g-4">
        <div class="col-md-4">
          <article class="feature-card h-100">
            <span class="feature-icon">📍</span>
            <h2>Pin by location</h2>
            <p>Grant browser location permission, or type/paste an address if permission is unavailable, then submit optional contact details.</p>
            <a href="{% url 'add_location_property' %}">Pin a property</a>
          </article>
        </div>
        <div class="col-md-4">
          <article class="feature-card h-100">
            <span class="feature-icon">📷</span>
            <h2>Upload photo</h2>
            <p>Save only a compressed small image, check EXIF GPS, and attempt local OCR when a system OCR tool exists.</p>
            <a href="{% url 'add_photo_property' %}">Upload photo</a>
          </article>
        </div>
        <div class="col-md-4">
          <article class="feature-card h-100">
            <span class="feature-icon">🧭</span>
            <h2>Browse & improve</h2>
            <p>Sort the public list by recency or distance, flag questionable entries, or suggest missing details.</p>
            <a href="{% url 'property_list' %}">View public list</a>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section-pad pt-0">
    <div class="container">
      <div class="section-heading d-flex flex-column flex-md-row justify-content-between gap-3 align-items-md-end">
        <div>
          <p class="eyebrow">Latest sightings</p>
          <h2>Fresh public property pins</h2>
        </div>
        <a class="btn btn-outline-dark rounded-pill" href="{% url 'property_list' %}">See all</a>
      </div>
      {% if recent_entries %}
      <div class="row g-4 mt-2">
        {% for entry in recent_entries %}
        <div class="col-md-6 col-xl-4">
          {% include "core/partials/property_card.html" with entry=entry %}
        </div>
        {% endfor %}
      </div>
      {% else %}
      <div class="empty-state mt-4">
        <h3>No properties yet</h3>
        <p>Be the first to add a current-location pin or photo upload.</p>
        <a class="btn btn-nest" href="{% url 'add_location_property' %}">Create first pin</a>
      </div>
      {% endif %}
    </div>
  </section>
</main>
{% endblock %}