{% extends "base.html" %}

{% block title %}{{ t.about_page_title }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.about_meta_desc }}">
<meta property="og:title" content="{{ t.about_page_title }}">
<meta property="og:description" content="{{ t.about_og_desc }}">
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <div class="card max-w-3xl mx-auto">
    <h1 class="text-2xl mb-6 text-center">{{ t.about_h1 }}</h1>

    <div class="space-y-4 text-slate-dark leading-relaxed">
      <p>{{ t.about_body_p1 }}</p>
      <p>{{ t.about_body_p2 }}</p>
      <p>{{ t.about_body_p3 }}</p>

      <h3 class="text-lg mt-6">{{ t.about_why_h3 }}</h3>
      <p>{{ t.about_why_p }}</p>

      <h3 class="text-lg mt-6">{{ t.about_next_h3 }}</h3>
      <p>{{ t.about_next_p }}</p>
    </div>

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