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

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

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

        <div class="prose max-w-none">
            <p class="text-lg mb-6">
                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="grid md:grid-cols-2 gap-6 mb-8 not-prose">
                <!-- 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-secondary">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://wiki.envipath.org/" target="_blank" class="btn btn-accent">Read Docs</a>
                        </div>
                    </div>
                </div>
            </div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">Get Support</h2>
            <p class="mb-4">
                For the fastest response, we recommend using our community forums where you can:
            </p>
            <ul class="list-disc list-inside mb-6 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="stroke-current shrink-0 w-6 h-6">
                    <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="text-2xl font-semibold mt-8 mb-4">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="flex gap-4 mt-4">
                        <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="w-4 h-4 fill-current mr-2">
                                <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="w-4 h-4 fill-current mr-2">
                                <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="text-2xl font-semibold mt-8 mb-4">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="text-2xl font-semibold mt-8 mb-4">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="text-2xl font-semibold mt-8 mb-4">Frequently Asked Questions</h2>

            <div class="join join-vertical w-full">
                <div class="collapse collapse-arrow join-item border border-base-300">
                    <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://wiki.envipath.org/" target="_blank" class="link link-primary">documentation</a> for detailed guides.</p>
                    </div>
                </div>

                <div class="collapse collapse-arrow join-item border border-base-300">
                    <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 collapse-arrow join-item border border-base-300">
                    <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 collapse-arrow join-item border border-base-300">
                    <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 %}