{% 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>Contact & Support</li>
      </ul>
    </div>

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

      <div class="prose max-w-none">
        <p class="mb-6 text-lg">
          We're here to help! Whether you have questions about using enviPath,
          need technical support, or want to discuss collaboration
          opportunities, we'd love to hear from you.
        </p>

        <!-- Contact Methods Grid -->
        <div class="not-prose mb-8 grid gap-6 md:grid-cols-2">
          <!-- Community Support -->
          <div class="card bg-primary text-primary-content shadow-lg">
            <div class="card-body">
              <h2 class="card-title">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
                  />
                </svg>
                Community Forums
              </h2>
              <p>Get help from our active community of users and developers.</p>
              <div class="card-actions justify-end">
                <a
                  href="https://community.envipath.org/"
                  target="_blank"
                  class="btn btn-neutral"
                  >Visit Forums</a
                >
              </div>
            </div>
          </div>

          <!-- Documentation -->
          <div class="card bg-secondary text-secondary-content shadow-lg">
            <div class="card-body">
              <h2 class="card-title">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-6 w-6"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
                  />
                </svg>
                Documentation
              </h2>
              <p>Browse our comprehensive documentation and tutorials.</p>
              <div class="card-actions justify-end">
                <a
                  href="https://community.envipath.org/c/documentation"
                  target="_blank"
                  class="btn btn-neutral"
                  >Read Docs</a
                >
              </div>
            </div>
          </div>
        </div>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">Get Support</h2>
        <p class="mb-4">
          For the fastest response, we recommend using our community forums
          where you can:
        </p>
        <ul class="mb-6 list-inside list-disc space-y-2">
          <li>Ask questions and get answers from the community</li>
          <li>Report bugs or technical issues</li>
          <li>Request new features</li>
          <li>Share your research and findings</li>
          <li>Find tutorials and how-to guides</li>
        </ul>

        <div class="alert alert-info mb-8">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            class="h-6 w-6 shrink-0 stroke-current"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            ></path>
          </svg>
          <div>
            <h3 class="font-bold">Before Contacting Support</h3>
            <div class="text-sm">
              Please check our documentation and search the community forums for
              existing answers.
            </div>
          </div>
        </div>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">
          Business & Collaboration Inquiries
        </h2>
        <p class="mb-4">
          For business inquiries, partnership opportunities, or custom
          development requests, please reach out through our community platform
          or LinkedIn.
        </p>

        <div class="card bg-base-200 mb-8">
          <div class="card-body">
            <h3 class="card-title">enviPath Ltd.</h3>
            <p>Biodegradation prediction since 2015</p>
            <div class="mt-4 flex gap-4">
              <a
                href="https://envipath.com/"
                target="_blank"
                class="btn btn-outline btn-sm"
              >
                <img
                  src="{% static '/images/logo-square.svg' %}"
                  width="24"
                  height="24"
                />
                enviPath.com
              </a>
              <a
                href="https://www.linkedin.com/company/envipath/"
                target="_blank"
                class="btn btn-outline btn-sm"
              >
                <svg
                  role="img"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-2 h-4 w-4 fill-current"
                >
                  <path
                    d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
                  />
                </svg>
                LinkedIn
              </a>
              <a
                href="https://www.youtube.com/@envipath7231"
                target="_blank"
                class="btn btn-outline btn-sm"
              >
                <svg
                  role="img"
                  viewBox="0 0 24 24"
                  xmlns="http://www.w3.org/2000/svg"
                  class="mr-2 h-4 w-4 fill-current"
                >
                  <path
                    d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814z"
                  />
                </svg>
                YouTube
              </a>
            </div>
          </div>
        </div>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">Report Security Issues</h2>
        <p class="mb-4">
          If you discover a security vulnerability, please report it
          responsibly. Do not post security issues publicly. Instead, please
          contact us directly through the community forums using a private
          message to the administrators.
        </p>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">Media & Press</h2>
        <p class="mb-4">
          For media inquiries, press releases, or interview requests, please
          reach out through our community platform or LinkedIn.
        </p>

        <div class="divider my-8"></div>

        <h2 class="mt-8 mb-4 text-2xl font-semibold">
          Frequently Asked Questions
        </h2>

        <div class="join join-vertical w-full">
          <div class="collapse-arrow join-item border-base-300 collapse border">
            <input type="radio" name="faq-accordion" />
            <div class="collapse-title text-lg font-medium">
              How do I get started with enviPath?
            </div>
            <div class="collapse-content">
              <p>
                Simply visit our homepage and try the prediction tool! For full
                access to all features, create a free account. Check out our
                <a
                  href="https://community.envipath.org/c/documentation"
                  target="_blank"
                  class="link link-primary"
                  >documentation</a
                >
                for detailed guides.
              </p>
            </div>
          </div>

          <div class="collapse-arrow join-item border-base-300 collapse border">
            <input type="radio" name="faq-accordion" />
            <div class="collapse-title text-lg font-medium">
              Is enviPath free to use?
            </div>
            <div class="collapse-content">
              <p>
                Yes! enviPath is free for academic research and educational
                purposes. For commercial use or custom solutions, please contact
                us for licensing options.
              </p>
            </div>
          </div>

          <div class="collapse-arrow join-item border-base-300 collapse border">
            <input type="radio" name="faq-accordion" />
            <div class="collapse-title text-lg font-medium">
              How do I cite enviPath in my research?
            </div>
            <div class="collapse-content">
              <p>
                Please visit our
                <a href="/cite" class="link link-primary">citation page</a> for
                detailed information on how to properly cite enviPath in your
                publications.
              </p>
            </div>
          </div>

          <div class="collapse-arrow join-item border-base-300 collapse border">
            <input type="radio" name="faq-accordion" />
            <div class="collapse-title text-lg font-medium">
              Can I contribute data to enviPath?
            </div>
            <div class="collapse-content">
              <p>
                Yes! We welcome contributions from the scientific community.
                Please visit our
                <a
                  href="https://community.envipath.org/"
                  target="_blank"
                  class="link link-primary"
                  >community forums</a
                >
                to learn about the contribution process.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock main_content %}
