{% extends "main/base.html" %}
{% load static %}

{% block content %}
<div class="container my-5">
  <h1 class="text-center mb-4">Forest Restoration</h1>
  <p class="lead text-center">See how degraded forests are transformed through community effort and environmental stewardship.</p>

  <div class="row g-4 mt-4">
    <!-- Before Restoration -->
    <div class="col-md-6">
      <div class="card h-100 shadow-sm">
        <img src="{% static 'images/forest_before.jpeg' %}" class="card-img-top" alt="Degraded forest">
        <div class="card-body">
          <h5 class="card-title">Degraded Forest</h5>
          <p class="card-text"style="font-size: 1.25rem; font-weight:600; line-height: 1.6;">This was once a thriving forest, now heavily degraded due to logging, fires, and climate change.</p>
        </div>
      </div>
    </div>

    <!-- After Restoration -->
    <div class="col-md-6">
      <div class="card h-100 shadow-sm">
        <img src="{% static 'images/forest_after.jpeg' %}" class="card-img-top" alt="Restored forest">
        <div class="card-body">
          <h5 class="card-title">Restored Forest</h5>
          <p class="card-text" style="font-size: 1.25rem; font-weight:600; line-height: 1.6;">Years of dedicated reforestation efforts bring life back—restoring biodiversity and sequestering carbon.</p>
        </div>
      </div>
    </div>

    <!-- Community Action -->
    <div class="col-12">
      <div class="card mt-4 shadow-sm">
        <img src="{% static 'images/community_planting.jpg' %}" class="card-img-top" alt="Community tree planting">
        <div class="card-body text-center">
          <h5 class="card-title">Community at the Heart</h5>
          <p class="card-text" style="font-size: 1.25rem; font-weight:600; line-height: 1.6;">Local communities play a vital role—planting native species and protecting seedlings for long-term growth.</p>
        </div>
      </div>
    </div>
  </div>

  <!-- Call to Action -->
  <div class="text-center mt-5">
    <a href="{% url 'contact' %}" class="btn btn-success btn-lg">Join the Restoration Movement</a>
  </div>
</div>
{% endblock %}