{% extends "base.html" %}

{% block title %}Support - MyWebdav Cloud Storage{% endblock %}

{% block description %}Get help with MyWebdav. Contact our support team or find answers in our knowledge base.{% endblock %}

{% block extra_css %}
<style>
.content-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1565c0;
    text-align: center;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.support-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    border: 2px solid #e0e0e0;
    text-align: center;
    transition: all 0.3s;
}

.support-card:hover {
    border-color: #1976d2;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
    transform: translateY(-2px);
}

.support-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.support-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.support-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.contact-section {
    background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
    color: white;
    padding: 3rem;
    border-radius: 12px;
    margin-top: 3rem;
}

.contact-title {
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-item {
    text-align: center;
    padding: 1rem;
}

.contact-item-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.contact-item-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-item-value {
    opacity: 0.95;
}

.contact-item-value a {
    color: white;
    text-decoration: none;
}

.contact-item-value a:hover {
    text-decoration: underline;
}

.kb-section {
    margin-top: 4rem;
}

.kb-title {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: 2rem;
}

.kb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.kb-category {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    border: 2px solid #e0e0e0;
}

.kb-category-title {
    font-weight: 600;
    color: #1976d2;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.kb-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kb-links li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.kb-links li:last-child {
    border-bottom: none;
}

.kb-links a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}

.kb-links a:hover {
    color: #1976d2;
}

.status-section {
    background: #f5f5f5;
    padding: 2rem;
    border-radius: 12px;
    margin-top: 3rem;
    text-align: center;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #4caf50;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 24px;
    font-weight: 600;
    font-size: 1.125rem;
}

.status-indicator {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }

    .support-grid,
    .contact-grid,
    .kb-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="content-section">
    <h1 class="page-title">WE'RE HERE TO HELP</h1>
    <p class="page-subtitle">Get the support you need, when you need it</p>

    <div class="support-grid">
        <div class="support-card">
            <div class="support-icon">📧</div>
            <h2 class="support-title">Email Support</h2>
            <p class="support-description">Send us an email and we'll respond within 24 hours.</p>
            <a href="mailto:support@mywebdav.eu" class="btn btn-primary">Email Us</a>
        </div>

        <div class="support-card">
            <div class="support-icon">📚</div>
            <h2 class="support-title">Documentation</h2>
            <p class="support-description">Browse our comprehensive guides and API documentation.</p>
            <a href="#knowledge-base" class="btn btn-secondary">View Docs</a>
        </div>

        <div class="support-card">
            <div class="support-icon">💬</div>
            <h2 class="support-title">Community Forum</h2>
            <p class="support-description">Connect with other users and share knowledge.</p>
            <a href="mailto:community@mywebdav.eu" class="btn btn-secondary">Join Forum</a>
        </div>
    </div>

    <div class="status-section">
        <h2 style="color: #333; margin-bottom: 1rem;">Service Status</h2>
        <div class="status-badge">
            <span class="status-indicator"></span>
            All Systems Operational
        </div>
        <p style="color: #666; margin-top: 1rem;">99.9% uptime over the last 30 days</p>
    </div>

    <div class="contact-section">
        <h2 class="contact-title">Contact Information</h2>
        <div class="contact-grid">
            <div class="contact-item">
                <div class="contact-item-icon">📧</div>
                <div class="contact-item-label">General Support</div>
                <div class="contact-item-value">
                    <a href="mailto:support@mywebdav.eu">support@mywebdav.eu</a>
                </div>
            </div>

            <div class="contact-item">
                <div class="contact-item-icon">🔧</div>
                <div class="contact-item-label">Technical Support</div>
                <div class="contact-item-value">
                    <a href="mailto:tech-support@mywebdav.eu">tech-support@mywebdav.eu</a>
                </div>
            </div>

            <div class="contact-item">
                <div class="contact-item-icon">💰</div>
                <div class="contact-item-label">Billing Inquiries</div>
                <div class="contact-item-value">
                    <a href="mailto:billing@mywebdav.eu">billing@mywebdav.eu</a>
                </div>
            </div>

            <div class="contact-item">
                <div class="contact-item-icon">🔒</div>
                <div class="contact-item-label">Data Protection</div>
                <div class="contact-item-value">
                    <a href="mailto:dpo@mywebdav.eu">dpo@mywebdav.eu</a>
                </div>
            </div>

            <div class="contact-item">
                <div class="contact-item-icon">⚖️</div>
                <div class="contact-item-label">Legal Matters</div>
                <div class="contact-item-value">
                    <a href="mailto:legal@mywebdav.eu">legal@mywebdav.eu</a>
                </div>
            </div>

            <div class="contact-item">
                <div class="contact-item-icon">🏢</div>
                <div class="contact-item-label">Sales & Enterprise</div>
                <div class="contact-item-value">
                    <a href="mailto:sales@mywebdav.eu">sales@mywebdav.eu</a>
                </div>
            </div>
        </div>
    </div>

    <div class="kb-section" id="knowledge-base">
        <h2 class="kb-title">Knowledge Base</h2>
        <div class="kb-grid">
            <div class="kb-category">
                <div class="kb-category-title">Getting Started</div>
                <ul class="kb-links">
                    <li><a href="#kb">Creating your account</a></li>
                    <li><a href="#kb">Uploading your first file</a></li>
                    <li><a href="#kb">Setting up WebDAV</a></li>
                    <li><a href="#kb">Organizing with folders</a></li>
                    <li><a href="#kb">Understanding pricing</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">Account Management</div>
                <ul class="kb-links">
                    <li><a href="#kb">Updating account details</a></li>
                    <li><a href="#kb">Enabling two-factor auth</a></li>
                    <li><a href="#kb">Managing billing</a></li>
                    <li><a href="#kb">Viewing usage statistics</a></li>
                    <li><a href="#kb">Deleting your account</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">File Management</div>
                <ul class="kb-links">
                    <li><a href="#kb">Upload and download files</a></li>
                    <li><a href="#kb">File versioning</a></li>
                    <li><a href="#kb">Sharing files</a></li>
                    <li><a href="#kb">Search and filter</a></li>
                    <li><a href="#kb">Bulk operations</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">WebDAV Setup</div>
                <ul class="kb-links">
                    <li><a href="#kb">Windows setup</a></li>
                    <li><a href="#kb">macOS setup</a></li>
                    <li><a href="#kb">Linux setup</a></li>
                    <li><a href="#kb">Mobile setup</a></li>
                    <li><a href="#kb">Troubleshooting WebDAV</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">Security & Privacy</div>
                <ul class="kb-links">
                    <li><a href="#kb">Understanding encryption</a></li>
                    <li><a href="#kb">Two-factor authentication</a></li>
                    <li><a href="#kb">Data residency</a></li>
                    <li><a href="#kb">GDPR compliance</a></li>
                    <li><a href="#kb">Security best practices</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">API & Integration</div>
                <ul class="kb-links">
                    <li><a href="#kb">API documentation</a></li>
                    <li><a href="#kb">Authentication</a></li>
                    <li><a href="#kb">Code examples</a></li>
                    <li><a href="#kb">Rate limits</a></li>
                    <li><a href="#kb">Webhooks</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">Billing & Pricing</div>
                <ul class="kb-links">
                    <li><a href="#kb">How pricing works</a></li>
                    <li><a href="#kb">Reading your invoice</a></li>
                    <li><a href="#kb">Payment methods</a></li>
                    <li><a href="#kb">Free tier details</a></li>
                    <li><a href="#kb">Enterprise pricing</a></li>
                </ul>
            </div>

            <div class="kb-category">
                <div class="kb-category-title">Troubleshooting</div>
                <ul class="kb-links">
                    <li><a href="#kb">Upload errors</a></li>
                    <li><a href="#kb">Connection issues</a></li>
                    <li><a href="#kb">Performance problems</a></li>
                    <li><a href="#kb">Login issues</a></li>
                    <li><a href="#kb">Common error messages</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div style="background: white; padding: 3rem; border-radius: 12px; border: 2px solid #e0e0e0; margin-top: 3rem; text-align: center;">
        <h2 style="color: #333; margin-bottom: 1rem;">Response Times</h2>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-top: 2rem;">
            <div>
                <div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">24 hours</div>
                <div style="color: #666;">General Inquiries</div>
            </div>
            <div>
                <div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">4 hours</div>
                <div style="color: #666;">Technical Issues</div>
            </div>
            <div>
                <div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">5 days</div>
                <div style="color: #666;">Complaint Response</div>
            </div>
            <div>
                <div style="font-size: 2rem; color: #d32f2f; font-weight: 700;">30 days</div>
                <div style="color: #666;">GDPR Requests</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}