{% extends "base.html" %}

{% block title %}Contact Support | Crawlio Intelligence{% endblock %}

{% block head %}
<style>
    .contact-form {
        max-width: 600px;
        margin: -4rem auto 0;
        background: white;
        border: 1px solid var(--border-color);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        padding: 3rem;
        border-radius: 8px;
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-weight: 700;
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .form-control {
        width: 100%;
        padding: 0.8rem;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        outline: none;
    }

    .form-control:focus {
        border-color: var(--slack-purple);
    }

    /* Toast Notification */
    #toast-container {
        position: fixed;
        top: 90px;
        right: 24px;
        z-index: 2000;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .toast {
        min-width: 300px;
        background: #fff;
        border-radius: 8px;
        padding: 16px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 12px;
        transform: translateX(120%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        border-left: 4px solid;
    }

    .toast.show {
        transform: translateX(0);
    }

    .toast-success {
        border-left-color: var(--slack-green);
    }

    .toast-error {
        border-left-color: var(--slack-red);
    }

    .toast-icon {
        font-size: 1.2rem;
    }

    .toast-message {
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-dark);
        margin: 0;
    }
</style>
{% endblock %}

{% block content %}
<section class="hero" style="padding-bottom: 8rem;">
    <div class="container">
        <h1>Connect with us</h1>
        <p>Ready to scale your data extraction? Fill out the form below and our team will get back to you within 24
            hours.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="contact-form">
            <form id="contactForm">
                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" id="fullName" class="form-control" placeholder="John" required>
                </div>
                <div class="form-group">
                    <label>Business Email</label>
                    <input type="email" id="email" class="form-control" placeholder="john@company.com" required>
                </div>
                <div class="form-group">
                    <label>Message</label>
                    <textarea id="message" class="form-control" style="height: 150px;"
                        placeholder="Tell us about your data needs..." required></textarea>
                </div>
                <button type="submit" id="submitBtn" class="btn-primary" style="width: 100%;">Send Message</button>
            </form>
        </div>
    </div>
</section>

<!-- Toast Container -->
<div id="toast-container"></div>

<script>
    function showToast(message, type = 'success') {
        const container = document.getElementById('toast-container');
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;

        const icon = type === 'success' ? '✅' : '❌';

        toast.innerHTML = `
            <div class="toast-icon">${icon}</div>
            <p class="toast-message">${message}</p>
        `;

        container.appendChild(toast);

        // Trigger animation
        requestAnimationFrame(() => {
            toast.classList.add('show');
        });

        // Remove after 3 seconds
        setTimeout(() => {
            toast.classList.remove('show');
            setTimeout(() => {
                container.removeChild(toast);
            }, 300);
        }, 3000);
    }

    document.getElementById('contactForm').addEventListener('submit', async (e) => {
        e.preventDefault();
        const submitBtn = document.getElementById('submitBtn');
        const originalText = submitBtn.innerText;

        submitBtn.innerText = 'Sending...';
        submitBtn.disabled = true;

        const data = {
            full_name: document.getElementById('fullName').value,
            email: document.getElementById('email').value,
            message: document.getElementById('message').value
        };

        try {
            const response = await fetch('/contact', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();

            if (response.ok) {
                showToast(result.message || 'Thank you! Your message has been sent.', 'success');
                document.getElementById('contactForm').reset();
            } else {
                showToast('Error: ' + (result.detail || 'Something went wrong. Please try again.'), 'error');
            }
        } catch (error) {
            console.error('Error:', error);
            showToast('Failed to connect to the server. Please check your internet connection.', 'error');
        } finally {
            submitBtn.innerText = originalText;
            submitBtn.disabled = false;
        }
    });
</script>
{% endblock %}