{% extends "base.html" %}
{% block title %}{{ _("terms.page_title") }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8 max-w-4xl">
  <h1 class="text-4xl font-bold mb-6">{{ _("terms.heading") }}</h1>
  <p class="text-sm text-gray-500 mb-8">{{ _("terms.last_updated") }} {{ current_date|default('May 14, 2024') }}</p>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s1_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s1_p1") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s2_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s2_p1") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s3_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s3_p1") }}
    </p>
    <ul class="list-disc list-inside text-gray-700 ml-4 mb-3">
      <li>{{ _("terms.s3_li1") }}</li>
      <li>{{ _("terms.s3_li2") }}</li>
      <li>{{ _("terms.s3_li3") }}</li>
      <li>{{ _("terms.s3_li4") }}</li>
    </ul>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s3_p2_pre") }} <a href="/privacy" class="text-blue-600 hover:underline">{{ _("terms.privacy_link") }}</a>
      {{ _("terms.s3_p2_and") }} <a href="/cookies" class="text-blue-600 hover:underline">{{ _("terms.cookie_link") }}</a>{{ _("terms.s3_p2_post") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s4_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s4_p1") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6 mb-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s5_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s5_p1") }}
    </p>
  </div>

  <div class="bg-white shadow rounded-lg p-6">
    <h2 class="text-2xl font-semibold mb-4">{{ _("terms.s6_heading") }}</h2>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s6_p1") }}
    </p>
    <p class="text-gray-700 mb-3">
      {{ _("terms.s6_p2_pre") }} <a href="mailto:docuelevate@christian-louis.de" class="text-blue-600 hover:underline">docuelevate@christian-louis.de</a>{{ _("terms.s6_p2_post") }}
    </p>
    <p class="text-gray-700">
      {{ _("terms.s6_p3_pre") }} <a href="/cookies" class="text-blue-600 hover:underline">{{ _("terms.cookie_link") }}</a>{{ _("terms.s6_p3_mid") }} <a href="/license" class="text-blue-600 hover:underline">{{ _("terms.license_link") }}</a>{{ _("terms.s6_p3_post") }}
    </p>
  </div>
</div>
{% endblock %}