{% extends "base.html" %}

{% block title %}{{ t.features_title_prefix }} | {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.features_meta_desc }}">
<meta property="og:title" content="{{ t.features_title_prefix }} | {{ config.APP_NAME }}">
<meta property="og:description" content="{{ t.features_meta_desc }}">
<meta property="og:image" content="{{ url_for('static', filename='images/planner-screenshot.png', _external=True) }}">
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <header class="text-center mb-12">
    <h1 class="text-3xl mb-2">{{ t.features_h1 }}</h1>
    <p class="text-lg text-slate">{{ t.features_subtitle }}</p>
  </header>

  <div class="grid-2">
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_1_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_1_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_2_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_2_body }}</p>
    </div>
  </div>

  <div class="grid-2">
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_3_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_3_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_4_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_4_body }}</p>
    </div>
  </div>

  <div class="grid-2">
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_5_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_5_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_card_6_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_card_6_body }}</p>
    </div>
  </div>

  <div class="space-y-6 max-w-3xl mx-auto mt-12">
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_capex_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_capex_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_opex_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_opex_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_cf_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_cf_body }}</p>
    </div>
    <div class="card">
      <h2 class="text-xl mb-2">{{ t.features_returns_h2 }}</h2>
      <p class="text-slate-dark">{{ t.features_returns_body }}</p>
    </div>
  </div>

  <div class="text-center mt-12">
    {% if user %}
    <a href="{{ url_for('planner.index') }}" class="btn">{{ t.features_cta_open }}</a>
    {% else %}
    <a href="{{ url_for('auth.signup') }}" class="btn">{{ t.features_cta_signup }}</a>
    {% endif %}
  </div>
</main>
{% endblock %}
