{% extends "base.html" %}

{% block title %}Contact - Project Mycelium{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <h1>Contact ThreeFold</h1>
            <p class="lead">Get in touch with the ThreeFold team and community.</p>
            <hr>

            <section class="mb-5">
                <h2>Join the ThreeFold Ecosystem</h2>
                <p>ThreeFold is an open ecosystem that welcomes contributors, users, and partners from all backgrounds. Whether you're interested in using the platform, contributing to its development, or exploring partnership opportunities, we'd love to hear from you.</p>
            </section>

            <section class="mb-5">
                <h2>Contact Information</h2>
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                                <i class="bi bi-envelope-fill fs-3 text-primary"></i>
                            </div>
                            <div>
                                <h5>Email</h5>
                                <p>For general inquiries: <a href="mailto:info@threefold.io">info@threefold.io</a></p>
                                <p class="mb-0">Please allow 24-48 hours for a response.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                                <i class="bi bi-chat-square-text-fill fs-3 text-primary"></i>
                            </div>
                            <div>
                                <h5>Community Forum</h5>
                                <p>Join discussions, ask questions, and connect with the ThreeFold community:</p>
                                <p class="mb-0"><a href="https://forum.threefold.io" target="_blank" rel="noopener noreferrer">forum.threefold.io</a></p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card mb-4">
                    <div class="card-body">
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                                <i class="bi bi-telegram fs-3 text-primary"></i>
                            </div>
                            <div>
                                <h5>Telegram</h5>
                                <p>Join our Telegram group for real-time community discussions:</p>
                                <p class="mb-0"><a href="https://t.me/threefold" target="_blank" rel="noopener noreferrer">https://t.me/threefold</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-5">
                <h2>Get Involved</h2>
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-code-square me-2"></i>Developers</h5>
                                <p class="card-text">Contribute to the ThreeFold technology stack and help build the peer-to-peer internet infrastructure.</p>
                                <a href="https://github.com/threefoldtech" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary">GitHub</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-hdd-rack me-2"></i>Resource Providers</h5>
                                <p class="card-text">Contribute compute capacity to the ThreeFold Grid and earn through the platform's ecosystem.</p>
                                <a href="/docs" class="btn btn-outline-primary">Learn More</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-building me-2"></i>Organizations</h5>
                                <p class="card-text">Explore partnership opportunities for businesses, nonprofits, and other organizations.</p>
                                <a href="mailto:partnerships@threefold.io" class="btn btn-outline-primary">Contact Partnerships</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title"><i class="bi bi-people me-2"></i>Community</h5>
                                <p class="card-text">Join our growing community of enthusiasts, advocates, and users.</p>
                                <a href="https://forum.threefold.io" target="_blank" rel="noopener noreferrer" class="btn btn-outline-primary">Join Forum</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="mb-5">
                <h2>Frequently Asked Questions</h2>
                <div class="accordion" id="contactFAQ">
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="headingOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                How do I report a bug or technical issue?
                            </button>
                        </h3>
                        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#contactFAQ">
                            <div class="accordion-body">
                                Technical issues can be reported on our <a href="https://github.com/threefoldtech" target="_blank" rel="noopener noreferrer">GitHub repositories</a>. Please check the specific repository related to the component you're experiencing issues with and create a detailed issue report.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                How can I schedule a call with the ThreeFold team?
                            </button>
                        </h3>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#contactFAQ">
                            <div class="accordion-body">
                                For specific inquiries that require a direct conversation, please email <a href="mailto:info@threefold.io">info@threefold.io</a> with details about your request and potential meeting times. Our team will follow up to arrange a call.
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h3 class="accordion-header" id="headingThree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                Where can I find the latest news about ThreeFold?
                            </button>
                        </h3>
                        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#contactFAQ">
                            <div class="accordion-body">
                                Stay updated on ThreeFold developments through our <a href="https://forum.threefold.io" target="_blank" rel="noopener noreferrer">community forum</a>, <a href="https://t.me/threefold" target="_blank" rel="noopener noreferrer">Telegram channel</a>, and by following us on social media platforms.
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <div class="text-center">
                <p class="lead">We look forward to connecting with you and building the decentralized internet together.</p>
                <a href="/" class="btn btn-primary">Back to Home</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}