{% extends 'core/base.html' %}
{% block content %}
<section class="py-4 py-md-5">
  <div class="row align-items-center g-4">
    <div class="col-lg-7">
      <span class="badge text-bg-dark mb-3">Deutsch</span>
      <h1 class="display-5 fw-bold mb-3">my2dos – Aufgaben, Notizen, Links und Teams an einem Ort</h1>
      <p class="lead text-muted">my2dos ist eine schnelle persönliche Wissens- und Aufgaben-App. Du schreibst einfach los, nutzt Tags zur Strukturierung und kannst Einträge privat behalten oder mit deinem Team teilen.</p>
      <div class="d-flex flex-wrap gap-2 mt-4">
        <a class="btn btn-dark btn-lg" href="{% url 'login' %}">Einloggen</a>
        <a class="btn btn-outline-secondary btn-lg" href="#tutorial">Tutorial ansehen</a>
      </div>
    </div>
    <div class="col-lg-5">
      <div class="card item-card shadow-sm"><div class="card-body">
        <div class="small text-muted mb-2">Beispiel</div>
        <pre class="mb-0 bg-dark text-white rounded p-3"><code>/todo Deployment vorbereiten #my2dos
/link https://example.com #research
/private Persönliche Idee #my2dos
[[42]] verlinkt einen anderen Eintrag</code></pre>
      </div></div>
    </div>
  </div>
</section>

<section id="tutorial" class="mb-5">
  <div class="row g-4">
    <div class="col-md-6 col-lg-3"><div class="card item-card h-100 shadow-sm"><div class="card-body"><h2 class="h5">1. Schnell erfassen</h2><p class="text-muted mb-0">Schreibe Text direkt in das Eingabefeld. Ohne Befehl wird daraus eine Notiz.</p></div></div></div>
    <div class="col-md-6 col-lg-3"><div class="card item-card h-100 shadow-sm"><div class="card-body"><h2 class="h5">2. Befehle nutzen</h2><p class="text-muted mb-0"><code>/todo</code>, <code>/note</code>, <code>/link</code>, <code>/journal</code>, <code>/public</code> oder <code>/private</code>.</p></div></div></div>
    <div class="col-md-6 col-lg-3"><div class="card item-card h-100 shadow-sm"><div class="card-body"><h2 class="h5">3. Mit Tags ordnen</h2><p class="text-muted mb-0">Tags wie <code>#arbeit</code> oder <code>#idee</code> filtern Einträge und können Kanbans bilden.</p></div></div></div>
    <div class="col-md-6 col-lg-3"><div class="card item-card h-100 shadow-sm"><div class="card-body"><h2 class="h5">4. Teams teilen</h2><p class="text-muted mb-0">Ein Team-Tag wie <code>#my2dos</code> macht einen Eintrag automatisch für das Team sichtbar.</p></div></div></div>
  </div>
</section>

<hr class="my-5">

<section class="py-4">
  <div class="row align-items-center g-4">
    <div class="col-lg-7">
      <span class="badge text-bg-secondary mb-3">English</span>
      <h1 class="display-6 fw-bold mb-3">my2dos – tasks, notes, links and teams in one place</h1>
      <p class="lead text-muted">my2dos is a fast personal productivity and knowledge app. Capture thoughts quickly, organize them with tags, keep things private or share them with your team.</p>
      <a class="btn btn-dark btn-lg" href="{% url 'login' %}">Log in</a>
    </div>
    <div class="col-lg-5">
      <div class="card item-card shadow-sm"><div class="card-body">
        <h2 class="h5">Quick tutorial</h2>
        <ol class="text-muted mb-0">
          <li>Write anything to create a note.</li>
          <li>Use <code>/todo</code>, <code>/link</code> or <code>/journal</code> to choose the type.</li>
          <li>Add tags like <code>#work</code> to organize and filter.</li>
          <li>Use a team tag like <code>#my2dos</code> to create shared team items.</li>
          <li>Use <code>/private</code> to force a private item.</li>
        </ol>
      </div></div>
    </div>
  </div>
</section>
{% endblock %}