<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Animit</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8fafc;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 2rem;
            background: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-top: 2rem;
            margin-bottom: 2rem;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
            padding-bottom: 2rem;
            border-bottom: 2px solid #667eea;
        }

        .header h1 {
            color: #667eea;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .header .subtitle {
            color: #666;
            font-size: 1.1rem;
        }

        .back-link {
            display: inline-block;
            margin-bottom: 2rem;
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }

        .back-link:hover {
            text-decoration: underline;
        }

        h2 {
            color: #374151;
            font-size: 1.5rem;
            margin: 2rem 0 1rem 0;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb;
        }

        h3 {
            color: #4b5563;
            font-size: 1.2rem;
            margin: 1.5rem 0 0.5rem 0;
        }

        p {
            margin-bottom: 1rem;
            text-align: justify;
        }

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

        .contact-card {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.2s ease;
        }

        .contact-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .contact-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .contact-card h3 {
            margin: 0 0 1rem 0;
            color: #374151;
        }

        .contact-card p {
            margin: 0.5rem 0;
            text-align: center;
        }

        .contact-link {
            color: #667eea;
            text-decoration: none;
            font-weight: 500;
        }

        .contact-link:hover {
            text-decoration: underline;
        }

        .response-times {
            background: #f0f9ff;
            border: 1px solid #0ea5e9;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
        }

        .support-hours {
            background: #f0fdf4;
            border: 1px solid #10b981;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
        }

        .business-info {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 1.5rem;
            margin: 2rem 0;
        }

        .faq-section {
            margin-top: 3rem;
        }

        .faq-item {
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            margin-bottom: 1rem;
            overflow: hidden;
        }

        .faq-question {
            background: #f1f5f9;
            padding: 1rem 1.5rem;
            cursor: pointer;
            font-weight: 600;
            color: #374151;
            border-bottom: 1px solid #e5e7eb;
        }

        .faq-answer {
            padding: 1rem 1.5rem;
            display: none;
        }

        .faq-answer.active {
            display: block;
        }

        @media (max-width: 768px) {
            .container {
                margin: 1rem;
                padding: 1rem;
            }

            .header h1 {
                font-size: 2rem;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="home.html" class="back-link">← Back to Home</a>
        
        <div class="header">
            <h1>Contact Animit</h1>
            <p class="subtitle">We're here to help you create amazing presentations</p>
        </div>

        <p style="text-align: center; font-size: 1.1rem; margin-bottom: 2rem;">
            Have questions, feedback, or need support? We'd love to hear from you! Choose the best way to reach us below.
        </p>

        <div class="contact-grid">
            <div class="contact-card">
                <div class="contact-icon">📧</div>
                <h3>General Support</h3>
                <p>For technical support, billing questions, and general inquiries</p>
                <p><a href="mailto:support@animit.app" class="contact-link">support@animit.app</a></p>
            </div>

            <div class="contact-card">
                <div class="contact-icon">💼</div>
                <h3>Business Inquiries</h3>
                <p>For partnerships, enterprise solutions, and business opportunities</p>
                <p><a href="mailto:business@animit.app" class="contact-link">business@animit.app</a></p>
            </div>

            <div class="contact-card">
                <div class="contact-icon">💡</div>
                <h3>General Information</h3>
                <p>For general questions, feedback, and feature requests</p>
                <p><a href="mailto:hello@animit.app" class="contact-link">hello@animit.app</a></p>
            </div>

            <div class="contact-card">
                <div class="contact-icon">🔒</div>
                <h3>Security & Privacy</h3>
                <p>For security concerns, data privacy questions, and legal matters</p>
                <p><a href="mailto:privacy@animit.app" class="contact-link">privacy@animit.app</a></p>
            </div>
        </div>

        <div class="response-times">
            <h3>📅 Response Times</h3>
            <p><strong>Support Tickets:</strong> We typically respond within 24-48 hours during business days</p>
            <p><strong>Business Inquiries:</strong> We respond within 2-3 business days</p>
            <p><strong>Security Issues:</strong> We prioritize security concerns and respond within 24 hours</p>
            <p><strong>General Questions:</strong> We aim to respond within 48-72 hours</p>
        </div>

        <div class="support-hours">
            <h3>🕒 Support Hours</h3>
            <p><strong>Email Support:</strong> Available 24/7 - we monitor emails continuously</p>
            <p><strong>Response Schedule:</strong> Monday to Friday, 9:00 AM - 6:00 PM (Local Time)</p>
            <p><strong>Weekend Support:</strong> Limited support available for urgent issues</p>
            <p><strong>Holiday Schedule:</strong> Reduced response times during major holidays</p>
        </div>

        <div class="business-info">
            <h3>📍 Business Information</h3>
            <p><strong>Business Name:</strong> Animit (Sole Proprietorship)</p>
            <p><strong>Website:</strong> <a href="https://animit.app" class="contact-link">animit.app</a></p>
            <p><strong>Service Area:</strong> Global (English & Spanish support)</p>
            <p><strong>Business Structure:</strong> Currently operating as a sole proprietorship with plans for future incorporation</p>
        </div>

        <div class="faq-section">
            <h2>Frequently Asked Questions</h2>
            
            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    What's the best way to contact support?
                </div>
                <div class="faq-answer">
                    For fastest response, email support@animit.app with a clear description of your issue. Include your account email and any relevant screenshots if applicable.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    Do you offer phone support?
                </div>
                <div class="faq-answer">
                    Currently, we provide support exclusively through email to ensure detailed responses and proper documentation. This allows us to provide better quality support and faster resolution times.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    How quickly will I receive a response?
                </div>
                <div class="faq-answer">
                    We aim to respond to all support emails within 24-48 hours during business days. Urgent security issues are prioritized and typically receive responses within 24 hours.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    Can I request new features?
                </div>
                <div class="faq-answer">
                    Absolutely! We love hearing feature requests from our users. Send your ideas to hello@animit.app with detailed descriptions of what you'd like to see. We review all suggestions and consider them for future updates.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question" onclick="toggleFAQ(this)">
                    Do you offer enterprise or bulk pricing?
                </div>
                <div class="faq-answer">
                    Yes! For organizations with multiple users or special requirements, contact business@animit.app to discuss enterprise pricing and custom solutions.
                </div>
            </div>
        </div>

        <h2>Before You Contact Us</h2>
        <p>To help us assist you more effectively, please:</p>
        <ul style="margin: 1rem 0; padding-left: 2rem;">
            <li>Check our <a href="privacy-en.html" class="contact-link">Privacy Policy</a> and <a href="terms-en.html" class="contact-link">Terms & Conditions</a> for policy-related questions</li>
            <li>Review our <a href="refund-en.html" class="contact-link">Refund Policy</a> for billing and subscription questions</li>
            <li>Include your account email address when contacting support</li>
            <li>Provide detailed descriptions of any technical issues</li>
            <li>Attach screenshots if they help explain your question</li>
        </ul>

        <div style="text-align: center; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb;">
            <p><strong>© 2025 Animit. All rights reserved.</strong></p>
            <p>
                <a href="home.html" style="color: #667eea;">Home</a> | 
                <a href="about-us.html" style="color: #667eea;">About Us</a> | 
                <a href="privacy-en.html" style="color: #667eea;">Privacy Policy</a> | 
                <a href="terms-en.html" style="color: #667eea;">Terms & Conditions</a> | 
                <a href="refund-en.html" style="color: #667eea;">Refund Policy</a>
            </p>
        </div>
    </div>

    <script>
        function toggleFAQ(element) {
            const answer = element.nextElementSibling;
            const isActive = answer.classList.contains('active');
            
            // Close all FAQ answers
            document.querySelectorAll('.faq-answer').forEach(item => {
                item.classList.remove('active');
            });
            
            // If this wasn't active, open it
            if (!isActive) {
                answer.classList.add('active');
            }
        }
    </script>
</body>
</html>