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

{% block title %}About — WildWatch{% endblock %}

{% block content %}

<section class="about-hero">
  <div class="container" style="max-width:700px; text-align:center;">
    <div style="font-size:3.5rem; margin-bottom:20px;">🌿</div>
    <h1 style="font-family:var(--font-display); font-size:clamp(2rem,5vw,3rem); color:var(--cream); margin-bottom:18px;">
      About WildWatch
    </h1>
    <p style="color:rgba(213,232,194,0.85); font-size:1.05rem; line-height:1.75;">
      A grassroots community dedicated to documenting, celebrating, and protecting the natural world through the power of photography and collective action.
    </p>
  </div>
</section>

<section class="py-lg">
  <div class="container">
    <div class="row g-5 align-items-center mb-lg">
      <div class="col-lg-6">
        <div class="section-eyebrow">Our Story</div>
        <h2 class="section-title">Born from a love of the wild</h2>
        <p style="color:var(--text-secondary); line-height:1.8; margin-bottom:16px;">
          WildWatch was founded by a group of passionate wildlife enthusiasts, environmental scientists, and photographers who believed that ordinary people hold extraordinary power to protect our planet.
        </p>
        <p style="color:var(--text-secondary); line-height:1.8; margin-bottom:16px;">
          We created this platform as a digital field journal — a space where every uploaded image becomes part of a collective record of our natural world.
        </p>
        <p style="color:var(--text-secondary); line-height:1.8;">
          From the Maasai Mara to coastal mangroves, from Karura Forest to the slopes of Mt. Kenya — every corner of our country's precious ecosystem deserves to be seen and protected.
        </p>
      </div>
      <div class="col-lg-6">
        <div style="background:linear-gradient(135deg,var(--forest-mid),var(--earth-mid)); border-radius:var(--radius-xl); padding:40px; color:var(--cream);">
          <h3 style="font-family:var(--font-display); font-size:1.5rem; margin-bottom:20px;">Our Values</h3>
          <div style="display:flex; flex-direction:column; gap:16px;">
            {% for icon, title, desc in values %}
            <div style="display:flex; gap:14px; align-items:flex-start;">
              <span style="font-size:1.4rem; flex-shrink:0;">{{ icon }}</span>
              <div>
                <div style="font-weight:600; margin-bottom:3px;">{{ title }}</div>
                <div style="font-size:0.88rem; opacity:0.8; line-height:1.5;">{{ desc }}</div>
              </div>
            </div>
            {% empty %}
            <div style="display:flex; gap:14px; align-items:flex-start;">
              <span style="font-size:1.4rem; flex-shrink:0;">🌱</span>
              <div>
                <div style="font-weight:600; margin-bottom:3px;">Conservation First</div>
                <div style="font-size:0.88rem; opacity:0.8;">Every action we take is guided by what's best for the environment.</div>
              </div>
            </div>
            <div style="display:flex; gap:14px; align-items:flex-start;">
              <span style="font-size:1.4rem; flex-shrink:0;">🤝</span>
              <div>
                <div style="font-weight:600; margin-bottom:3px;">Community Power</div>
                <div style="font-size:0.88rem; opacity:0.8;">Together we can achieve what no individual can alone.</div>
              </div>
            </div>
            <div style="display:flex; gap:14px; align-items:flex-start;">
              <span style="font-size:1.4rem; flex-shrink:0;">📷</span>
              <div>
                <div style="font-weight:600; margin-bottom:3px;">Visual Storytelling</div>
                <div style="font-size:0.88rem; opacity:0.8;">A single photograph can spark a movement for change.</div>
              </div>
            </div>
            <div style="display:flex; gap:14px; align-items:flex-start;">
              <span style="font-size:1.4rem; flex-shrink:0;">🔬</span>
              <div>
                <div style="font-weight:600; margin-bottom:3px;">Science-Informed</div>
                <div style="font-size:0.88rem; opacity:0.8;">We ground our community in environmental science and evidence.</div>
              </div>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>

    <!-- Mission Cards -->
    <div class="section-eyebrow text-center mb-sm" style="justify-content:center;">What We Do</div>
    <h2 class="section-title text-center mb-md">Our Mission in Action</h2>

    <div class="row g-4">
      <div class="col-md-4">
        <div class="mission-card">
          <span class="mission-icon">📸</span>
          <h4 style="font-family:var(--font-display); font-size:1.2rem; margin-bottom:10px;">Document</h4>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.65;">
            Build a visual archive of Kenya's wildlife and ecosystems through community photography, creating a lasting record of our natural heritage.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mission-card">
          <span class="mission-icon">🌍</span>
          <h4 style="font-family:var(--font-display); font-size:1.2rem; margin-bottom:10px;">Educate</h4>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.65;">
            Foster environmental literacy by sharing knowledge, stories, and the beauty of the natural world with our growing community.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="mission-card">
          <span class="mission-icon">⚡</span>
          <h4 style="font-family:var(--font-display); font-size:1.2rem; margin-bottom:10px;">Inspire Action</h4>
          <p style="color:var(--text-muted); font-size:0.9rem; line-height:1.65;">
            Turn awareness into action — from beach cleanups to tree planting, we inspire members to actively protect their environment.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Join CTA -->
<section class="py-lg" style="background:var(--bg-secondary);">
  <div class="container text-center" style="max-width:560px;">
    <h2 class="section-title" style="margin-bottom:16px;">Join the Movement</h2>
    <p style="color:var(--text-muted); line-height:1.7; margin-bottom:32px;">
      Whether you're a seasoned naturalist or someone who just loves taking photos in the park — you belong here.
    </p>
    {% if not user.is_authenticated %}
    <div class="flex-center gap-3 flex-wrap">
      <a href="{% url 'register' %}" class="btn-primary">
        <i class="fa-solid fa-seedling"></i> Create an Account
      </a>
      <a href="{% url 'feed' %}" class="btn-secondary">Browse the Feed</a>
    </div>
    {% else %}
    <a href="{% url 'upload' %}" class="btn-primary">
      <i class="fa-solid fa-camera"></i> Share Your Next Photo
    </a>
    {% endif %}
  </div>
</section>

{% endblock %}