{% extends "home/base_home.html" %}

{% block title %}{{ t.about.title }} - {{ t.home.hero_title }}{% endblock %}

{% block content %}
<main class="container">
  <hgroup>
    <h1>{{ t.about.title }}</h1>
    <p>{{ t.home.mission_desc }}</p>
  </hgroup>

  <article>
    <h2>🦉 {{ t.about.subtitle }}</h2>
    <p>{{ t.about.intro_p1 if t.about.intro_p1 else 'Crumbforest ist ein offenes Lern-Ökosystem...' }}</p>
    <p>{{ t.about.intro_p2 if t.about.intro_p2 else 'Jedes Kind darf fragen...' }}</p>
  </article>

  <div class="values-grid">
    {% for value in t.home.mission_values %}
    <div class="value-card">
      <h3>{{ value.icon }} {{ value.title }}</h3>
      <p>{{ value.text }}</p>
    </div>
    {% endfor %}
  </div>

  <article style="margin-top: 3rem;">
    <h2>{{ t.about.philosophy_title if t.about.philosophy_title else '🌳 Unsere Philosophie' }}</h2>
    <blockquote>
      {{ t.about.philosophy_quote if t.about.philosophy_quote else '"Im Crumbforest wachsen keine Bäume..."' }}
    </blockquote>
    <p>{{ t.about.philosophy_p1 if t.about.philosophy_p1 else 'Wir glauben an hands-on Lernen...' }}</p>
    <p>{{ t.about.philosophy_p2 if t.about.philosophy_p2 else 'Unsere KI-Characters sind keine Lehrer...' }}</p>
  </article>
</main>
{% endblock %}