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

{% block title %}WildWatch — Conservation Through Community{% endblock %}

{% block content %}

<!-- ===== HERO ===== -->
<section class="hero">
  <div class="hero-bg-pattern"></div>
  <div class="container" style="padding: 60px 20px;">
    <div class="hero-content">
      <div class="hero-eyebrow">Wildlife & Environmental Community</div>
      <h1>
        Capture the <em>wild</em>,<br>
        inspire the world.
      </h1>
      <p class="hero-description">
        Join thousands of nature lovers documenting Kenya's breathtaking wildlife, ecosystems, and conservation efforts — one photograph at a time.
      </p>
      <div class="hero-cta">
        {% if user.is_authenticated %}
          <a href="{% url 'upload' %}" class="btn-primary">
            <i class="fa-solid fa-camera"></i> Share a Photo
          </a>
          <a href="{% url 'feed' %}" class="btn-secondary" style="color:var(--sage); border-color:var(--sage);">
            Explore Community
          </a>
        {% else %}
          <a href="{% url 'register' %}" class="btn-primary">
            <i class="fa-solid fa-seedling"></i> Join for Free
          </a>
          <a href="{% url 'feed' %}" class="btn-secondary" style="color:var(--sage); border-color:var(--sage);">
            Browse Photos
          </a>
        {% endif %}
      </div>

      <div class="hero-stats">
        <div>
          <div class="hero-stat-num" data-count="{{ total_posts }}">{{ total_posts }}</div>
          <div class="hero-stat-label">Photos Shared</div>
        </div>
        <div>
          <div class="hero-stat-num" data-count="{{ total_users }}">{{ total_users }}</div>
          <div class="hero-stat-label">Community Members</div>
        </div>
        <div>
          <div class="hero-stat-num">3</div>
          <div class="hero-stat-label">Categories</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== FEATURED POSTS ===== -->
{% if featured_posts %}
<section class="py-lg">
  <div class="container">
    <div class="text-center mb-md">
      <div class="section-eyebrow" style="justify-content:center;">Trending Now</div>
      <h2 class="section-title">Community Highlights</h2>
      <p style="color:var(--text-muted); max-width:500px; margin:0 auto;">The most celebrated photos from our nature-loving community this week.</p>
    </div>

    <div class="posts-grid">
      {% for post in featured_posts %}
      <article class="post-card">
        <div class="post-card-image-wrap">
          <a href="{% url 'post_detail' post.pk %}">
            <img src="{{ post.image.url }}" alt="{{ post.caption|truncatechars:60 }}" loading="lazy">
          </a>
          <span class="post-category-badge {{ post.get_category_color }}">
            {{ post.get_category_icon }} {{ post.get_category_display }}
          </span>
          {% if forloop.counter <= 3 %}
          <div class="trending-badge">🔥 Trending</div>
          {% endif %}
        </div>
        <div class="post-card-body">
          <div class="post-author-row">
            {% if post.author.profile.profile_photo %}
              <img src="{{ post.author.profile.profile_photo.url }}" class="author-avatar" alt="{{ post.author.username }}">
            {% else %}
              <div class="author-avatar-placeholder">{{ post.author.username|first|upper }}</div>
            {% endif %}
            <div class="author-info">
              <a href="{% url 'profile' post.author.username %}" class="author-name" style="color:var(--text-primary);">{{ post.author.username }}</a>
              <div class="post-time">{{ post.created_at|timesince }} ago</div>
            </div>
          </div>
          <p class="post-caption">{{ post.caption }}</p>
          <div class="post-actions">
            <span style="font-size:0.82rem; color:var(--text-muted);">
              <i class="fa-solid fa-heart" style="color:#e91e63;"></i> {{ post.like_count }}
              &nbsp;
              <i class="fa-solid fa-comment" style="color:var(--moss);"></i> {{ post.comment_count }}
            </span>
            <a href="{% url 'post_detail' post.pk %}" class="view-btn ms-auto" style="font-size:0.8rem;">
              View Post <i class="fa-solid fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </article>
      {% endfor %}
    </div>

    <div class="text-center mt-md">
      <a href="{% url 'feed' %}" class="btn-secondary">
        <i class="fa-solid fa-images"></i> View All Community Photos
      </a>
    </div>
  </div>
</section>
{% endif %}

<!-- ===== CATEGORIES ===== -->
<section class="py-lg" style="background: var(--bg-secondary);">
  <div class="container">
    <div class="text-center mb-md">
      <div class="section-eyebrow" style="justify-content:center;">Browse by Category</div>
      <h2 class="section-title">What Are You Exploring?</h2>
    </div>
    <div class="row g-4">
      <div class="col-md-4">
        <a href="{% url 'feed' %}?category=wildlife" class="mission-card text-decoration-none d-block">
          <span class="mission-icon">🦋</span>
          <h3 style="font-family:var(--font-display); font-size:1.3rem; margin-bottom:8px;">Wildlife & Plants</h3>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.6;">Birds, mammals, reptiles, insects, and the flora that sustains them.</p>
          <span style="color:var(--moss); font-size:0.85rem; font-weight:600; margin-top:12px; display:inline-block;">Explore →</span>
        </a>
      </div>
      <div class="col-md-4">
        <a href="{% url 'feed' %}?category=scenic" class="mission-card text-decoration-none d-block">
          <span class="mission-icon">🌿</span>
          <h3 style="font-family:var(--font-display); font-size:1.3rem; margin-bottom:8px;">Scenic Environments</h3>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.6;">Forests, savannahs, wetlands, coastlines, and every breathtaking landscape.</p>
          <span style="color:var(--moss); font-size:0.85rem; font-weight:600; margin-top:12px; display:inline-block;">Explore →</span>
        </a>
      </div>
      <div class="col-md-4">
        <a href="{% url 'feed' %}?category=trash_cleanup" class="mission-card text-decoration-none d-block">
          <span class="mission-icon">🗑️</span>
          <h3 style="font-family:var(--font-display); font-size:1.3rem; margin-bottom:8px;">Trash Cleanup</h3>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.6;">Document cleanup efforts and inspire others to take action for a cleaner planet.</p>
          <span style="color:var(--moss); font-size:0.85rem; font-weight:600; margin-top:12px; display:inline-block;">Explore →</span>
        </a>
      </div>
    </div>
  </div>
</section>

<!-- ===== CTA ===== -->
{% if not user.is_authenticated %}
<section class="py-lg" style="background: linear-gradient(135deg, var(--forest-deep), var(--earth-dark)); text-align:center;">
  <div class="container" style="max-width:600px;">
    <div style="font-size:3rem; margin-bottom:20px;">🌍</div>
    <h2 style="font-family:var(--font-display); font-size:2rem; color:var(--cream); margin-bottom:16px;">
      Ready to make a difference?
    </h2>
    <p style="color: rgba(213,232,194,0.8); font-size:1rem; line-height:1.7; margin-bottom:32px;">
      Join our community and start sharing your environmental story. Every photo is a step toward conservation awareness.
    </p>
    <div class="flex-center gap-3 flex-wrap">
      <a href="{% url 'register' %}" class="btn-primary">
        <i class="fa-solid fa-seedling"></i> Create Free Account
      </a>
      <a href="{% url 'about' %}" class="btn-secondary" style="color:var(--sage); border-color:var(--sage);">
        Learn More
      </a>
    </div>
  </div>
</section>
{% endif %}

{% endblock %}