{% extends "framework_modern.html" %}
{% load static %}

{% block main_content %}
  <div class="mx-auto max-w-4xl px-4 py-8">
    <!-- Breadcrumbs -->
    <div class="breadcrumbs mb-4 text-sm">
      <ul>
        <li><a href="/">Home</a></li>
        <li>About Us</li>
      </ul>
    </div>

    <!-- Main Content -->
    <div class="bg-base-100 rounded-lg p-8 shadow-xl">
      <h1 class="mb-6 text-4xl font-bold">About enviPath</h1>

      <div class="prose max-w-none">
        <!-- Hero Image/Graphic -->
        <div class="mb-8">
          <img
            src="{% static '/images/ep-rule-artwork.png' %}"
            alt="enviPath System"
            class="mx-auto w-full max-w-2xl rounded-lg shadow-md"
          />
        </div>

        <p class="mb-6 text-lg">
          enviPath is a comprehensive database and prediction system for the
          microbial biotransformation of organic environmental contaminants.
          Since 2015, we have been at the forefront of computational
          environmental chemistry, helping researchers understand and predict
          biodegradation pathways.
        </p>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">Services</h2>
        <div class="mb-6 grid gap-6 md:grid-cols-2">
          <div class="card bg-base-200 shadow-md">
            <div class="card-body">
              <h3 class="card-title text-primary">Pathway Database</h3>
              <p>
                Access experimentally observed biotransformation pathways and
                reactions from curated scientific literature and assessment
                reports.
              </p>
            </div>
          </div>
          <div class="card bg-base-200 shadow-md">
            <div class="card-body">
              <h3 class="card-title text-primary">Prediction System</h3>
              <p>
                Use our models to predict likely biotransformation pathways and
                products for new compounds.
              </p>
            </div>
          </div>
          <div class="card bg-base-200 shadow-md">
            <div class="card-body">
              <h3 class="card-title text-primary">Machine Learning Models</h3>
              <p>
                Leverage advanced Machine Learning algorithms trained on
                extensive biodegradation data for accurate predictions.
              </p>
            </div>
          </div>
          <div class="card bg-base-200 shadow-md">
            <div class="card-body">
              <h3 class="card-title text-primary">Community Platform</h3>
              <p>
                Join our active community of researchers to access
                documentation, get help, share knowledge, discuss findings, and
                collaborate.
              </p>
            </div>
          </div>
        </div>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">Our Partners</h2>
        <p class="mb-4">
          enviPath is backed by leading research institutions and collaborators:
        </p>
        <div class="my-8 flex flex-wrap items-center justify-center gap-8">
          <img
            src="{% static '/images/uoa-logo-small.png' %}"
            alt="The University of Auckland"
            class="h-20 object-contain"
          />
          <img
            src="{% static '/images/logo-eawag.svg' %}"
            alt="Eawag"
            class="h-16 object-contain"
          />
          <img
            src="{% static '/images/uzh-logo.svg' %}"
            alt="University of Zurich"
            class="h-20 object-contain"
          />
        </div>

        <div class="mb-6 grid gap-6 md:grid-cols-2">
          <div class="card bg-primary text-primary-content mt-8">
            <div class="card-body">
              <h3 class="card-title">Get Involved</h3>
              <p>
                Join our community, contribute data, or collaborate on research
                projects.
              </p>
              <div class="card-actions mt-4 justify-end">
                <a
                  href="https://community.envipath.org/"
                  target="_blank"
                  class="btn btn-secondary"
                  >Visit Community</a
                >
                <a href="/contact" class="btn btn-ghost">Contact Us</a>
              </div>
            </div>
          </div>
          <div class="card bg-primary text-primary-content mt-8">
            <div class="card-body">
              <h3 class="card-title">Cite Us</h3>
              <p>
                To learn more about the science behind enviPath, please visit
                our publications page for key publications and how to cite our
                work.
              </p>
              <div class="card-actions mt-4 justify-end">
                <a href="/cite" target="_blank" class="btn btn-secondary"
                  >Publications</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock main_content %}