{% extends "base.html" %}
{% block title %}{{ versions.product_name }}{% endblock %}

{% block content %}
<section class="hero">
  <div class="container">
    <span class="eyebrow">{{ ui.home.eyebrow }}</span>
    <h1>{{ versions.product_name }}</h1>
    <p class="lede">{{ ui.home.lede }}</p>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="grid grid-2 mode-grid">
      <div class="card mode-card">
        <div class="mode-head">
          <div class="mode-icon" style="background:var(--primary-soft);color:var(--primary);">1</div>
          <h2>{{ ui.home.quick_title }}</h2>
        </div>
        <p>{{ ui.home.quick_text }}</p>
        <ul class="mode-points">
          {% for point in ui.home.quick_points %}<li>{{ point }}</li>{% endfor %}
        </ul>
        <a href="{{ url_for('main.assessment') }}" class="btn btn-primary btn-lg">{{ ui.home.quick_button }}</a>
      </div>

      <div class="card mode-card mode-card--pro">
        <div class="mode-head">
          <div class="mode-icon" style="background:#efeaff;color:#6d28d9;">2</div>
          <h2>{{ ui.home.live_title }}</h2>
          <span class="badge badge--pro">{{ ui.home.pro_label }}</span>
        </div>
        <p>{{ ui.home.live_text }}</p>
        <ul class="mode-points">
          {% for point in ui.home.live_points %}<li>{{ point }}</li>{% endfor %}
        </ul>
        <a href="{{ url_for('main.pro') }}" class="btn btn-secondary btn-lg">{{ ui.home.live_button }}</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--tint">
  <div class="container">
    <div class="section-head">
      <h2>{{ ui.home.dimensions_title }}</h2>
      <p>{{ ui.home.dimensions_intro }}</p>
    </div>
    <div class="grid grid-5">
      {% for dim in framework.dimensions %}
      <div class="card dim-card">
        <div class="icon" style="background:var(--primary-soft);color:var(--primary);">0{{ loop.index }}</div>
        <div class="tag">{{ dim.ethical_resource }}</div>
        <h3>{{ dim.name }}</h3>
        <p>{{ dim.definition }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="section-head">
      <h2>{{ ui.home.governance_title }}</h2>
    </div>
    <div class="grid grid-2">
      {% for fn in governance %}
      <div class="card">
        <h3>{{ fn.name }}</h3>
        <p style="margin:0;">{{ fn.summary }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</section>

{% if recent %}
<section class="section section--tint">
  <div class="container">
    <div class="section-head"><h2>{{ ui.home.recent_title }}</h2></div>
    <div class="panel-card">
      <table class="case-table">
        <thead><tr>{% for h in ui.home.recent_headers %}<th>{{ h }}</th>{% endfor %}<th></th></tr></thead>
        <tbody>
          {% for a in recent %}
          <tr>
            <td>{{ a.assessment_name or a.assessment_id }}</td>
            <td>
              {% if a.assessment_type == 'pro' %}
              <span class="badge badge--pro">{{ ui.home.pro_label }}</span>
              {% else %}
              <span class="badge">{{ plans.basic.name }}</span>
              {% endif %}
            </td>
            <td>
              {% if a.overall_score is not none %}
              <span class="score-chip {{ band_key(a.overall_score) }}">{{ '%.0f'|format(a.overall_score) }}</span>
              {% else %}<span class="faint">n/a</span>{% endif %}
            </td>
            <td>
              {% if a.risk_level %}<span class="badge badge--{{ band_key(a.overall_score) }}"><span class="dot dot--{{ band_key(a.overall_score) }}"></span>{{ a.risk_level }}</span>{% else %}<span class="faint">n/a</span>{% endif %}
            </td>
            <td class="faint">{{ a.created_at }}</td>
            <td><a class="case-link" href="{{ url_for('main.results', assessment_id=a.assessment_id) }}">{{ ui.home.recent_open }} &rarr;</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endif %}
{% endblock %}