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

{% block content %}
<div class="container mx-auto px-4 py-8">
  <h1 class="text-4xl font-bold mb-4">{{ _("about.heading") }}</h1>
  <p class="text-gray-700 mb-6 leading-relaxed">
    {{ _("about.intro_pre") }}<strong>{{ _("app.name") }}</strong>{{ _("about.intro_post") }}
  </p>

  <!-- Our Story Section -->
  <section class="bg-white shadow rounded p-6 mb-8">
    <h2 class="text-2xl font-semibold mb-2">{{ _("about.story_heading") }}</h2>
    <p class="text-gray-600 mb-4">
      {{ _("about.story_p1") }}
    </p>
    <p class="text-gray-600">
      {{ _("about.story_p2") }}
    </p>
  </section>

  <!-- Key Features Section - Updated with more comprehensive features -->
  <section class="bg-white shadow rounded p-6 mb-8">
    <h2 class="text-2xl font-semibold mb-2">{{ _("about.features_heading") }}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <h3 class="font-medium text-lg text-gray-800">{{ _("about.features_processing_heading") }}</h3>
        <ul class="list-disc list-inside text-gray-600 ml-2">
          <li>{{ _("about.features_processing_upload") }}</li>
          <li>{{ _("about.features_processing_ocr") }}</li>
          <li>{{ _("about.features_processing_metadata") }}</li>
          <li>{{ _("about.features_processing_pdf") }}</li>
          <li>{{ _("about.features_processing_classification") }}</li>
        </ul>
      </div>
      <div>
        <h3 class="font-medium text-lg text-gray-800">{{ _("about.features_integration_heading") }}</h3>
        <ul class="list-disc list-inside text-gray-600 ml-2">
          <li>{{ _("about.features_integration_multi_dest") }}</li>
          <li>{{ _("about.features_integration_cloud") }}</li>
          <li>{{ _("about.features_integration_selfhosted") }}</li>
          <li>{{ _("about.features_integration_protocols") }}</li>
        </ul>
      </div>
      <div>
        <h3 class="font-medium text-lg text-gray-800">{{ _("about.features_automation_heading") }}</h3>
        <ul class="list-disc list-inside text-gray-600 ml-2">
          <li>{{ _("about.features_automation_imap") }}</li>
          <li>{{ _("about.features_automation_gmail") }}</li>
          <li>{{ _("about.features_automation_ingestion") }}</li>
          <li>{{ _("about.features_automation_background") }}</li>
        </ul>
      </div>
      <div>
        <h3 class="font-medium text-lg text-gray-800">{{ _("about.features_admin_heading") }}</h3>
        <ul class="list-disc list-inside text-gray-600 ml-2">
          <li>{{ _("about.features_admin_api") }}</li>
          <li>{{ _("about.features_admin_oauth2") }}</li>
          <li>{{ _("about.features_admin_config") }}</li>
          <li>{{ _("about.features_admin_docker") }}</li>
        </ul>
      </div>
    </div>
  </section>

  <!-- Meet the Creator Section -->
  <section class="bg-white shadow rounded p-6 mb-8">
    <h2 class="text-2xl font-semibold mb-2">{{ _("about.creator_heading") }}</h2>
    <p class="text-gray-600">
      {{ _("about.creator_pre") }}
      <a href="https://www.christianlouis.de" target="_blank" class="text-blue-600 hover:underline">{{ _("about.creator_name") }}</a>.
    </p>
  </section>

  <!-- Privacy & Legal Section -->
  <section class="bg-white shadow rounded p-6 mb-8">
    <h2 class="text-2xl font-semibold mb-2">{{ _("about.legal_heading") }}</h2>
    <p class="text-gray-600 mb-4">
      {{ _("about.legal_description") }}
    </p>
    <div class="flex space-x-4">
      <a href="/privacy" class="text-blue-600 hover:underline">{{ _("about.legal_privacy") }}</a>
      <a href="/license" class="text-blue-600 hover:underline">{{ _("about.legal_license") }}</a>
    </div>
  </section>

  <!-- Links Section -->
  <section class="bg-white shadow rounded p-6">
    <h2 class="text-2xl font-semibold mb-2">{{ _("about.involved_heading") }}</h2>
    <p class="text-gray-600 mb-4">
      {{ _("about.involved_description") }}
    </p>
    <div class="flex flex-col space-y-3">
      <a href="https://github.com/christianlouis/DocuElevate" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
        <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="{{ _('about.github_logo_alt') }}" class="h-6 w-6" />
        <span>{{ _("about.involved_github") }}</span>
      </a>
      <a href="https://www.docuelevate.org" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
        <i class="fas fa-globe h-6 w-6"></i>
        <span>{{ _("about.involved_website") }}</span>
      </a>
      <a href="https://docuelevate.readthedocs.io" target="_blank" class="flex items-center space-x-2 text-blue-600 hover:text-blue-800">
        <i class="fas fa-book h-6 w-6"></i>
        <span>{{ _("about.involved_docs") }}</span>
      </a>
    </div>
  </section>
</div>
{% endblock %}