{% extends "onboarding_base.html" %}
{% load static %}
{% load i18n %}
{% block nav_home %}active{% endblock %}
{% block content %}
<div class="home-page">
  <div class="home-hero">
    <div class="home-hero-inner">
      <h1 class="home-hero-title">Better grazing decisions start with better data.</h1>
      <p class="home-hero-subtitle">Empowering the data-driver transition to regenerative grazing.</p>
      <div class="home-hero-actions">
        <a href="{{ join_url }}">
          <button class="btn-primary">{% trans 'Join the network' %}</button>
        </a>
        <a href="{{ data_explorer_url }}">
          <button class="btn-white">{% trans 'Explore data' %}</button>
        </a>
      </div>
      <p class="home-hero-orgs"><strong>23</strong> {% trans "Organizations already sharing data" %}</p>
    </div>
  </div>

  <div class="home-stats">
    <div class="home-stats-grid">
      <div class="stat-card">
        <span class="stat-number">47</span>
        <span class="stat-label">{% trans "data offers" %}</span>
      </div>
      <div class="stat-card" style="--color-primary-deep: #29533c;">
        <span class="stat-number" style="color: #EF9F27">12</span>
        <span class="stat-label">{% trans "US Regions" %}</span>
      </div>
      <div class="stat-card">
        <span class="stat-number">18k</span>
        <span class="stat-label">{% trans "SOC Records" %}</span>
      </div>
      <div class="stat-card">
        <span class="stat-number">6</span>
        <span class="stat-label">{% trans "contracts" %}</span>
      </div>
    </div>

    <div class="data-types-card">
      <h2 class="data-types-title">{% trans "Data offers by type" %}</h2>
      <div class="data-type-row">
        <div class="data-type-line">
          <span class="data-type-name">{% trans "SOC measurements" %}</span>
          <span class="data-type-pct">38%</span>
        </div>
        <div class="progress-track"><span class="progress-fill" style="width: 38%"></span></div>
      </div>
      <div class="data-type-row">
        <div class="data-type-line">
          <span class="data-type-name">{% trans "Grazing plans" %}</span>
          <span class="data-type-pct">29%</span>
        </div>
        <div class="progress-track"><span class="progress-fill" style="width: 29%"></span></div>
      </div>
      <div class="data-type-row">
        <div class="data-type-line">
          <span class="data-type-name">{% trans "Regen outcomes" %}</span>
          <span class="data-type-pct">21%</span>
        </div>
        <div class="progress-track"><span class="progress-fill" style="width: 21%"></span></div>
      </div>
      <div class="data-type-row">
        <div class="data-type-line">
          <span class="data-type-name">{% trans "Soil profiles" %}</span>
          <span class="data-type-pct">12%</span>
        </div>
        <div class="progress-track"><span class="progress-fill" style="width: 12%"></span></div>
      </div>
    </div>
  </div>
</div>
{% endblock %}