@extends('layouts.principal')

@section('titulo', 'MNGD Sistemas - Fale Conosco')
@section('description', 'Entre em contato com a MNGD Sistemas em Apucarana. Especialistas em desenvolvimento de software, sistemas ERP e consultoria de TI. Atendimento personalizado para sua empresa.')
@section('keywords', 'contato MNGD Sistemas, MNGD Sistemas Apucarana, fale conosco MNGD, desenvolvimento software Apucarana, consultoria TI Apucarana')
@section('og_title', 'Contato MNGD Sistemas - Fale Conosco em Apucarana')
@section('og_description', 'Entre em contato com a MNGD Sistemas em Apucarana. Especialistas em desenvolvimento de software e sistemas ERP.')

@section('conteudo')
<div class="contact-hero">
    <div class="container">
        <div class="hero-content" data-aos="fade-up" data-aos-duration="1000">
            <h1 class="hero-title">
                <span class="gradient-text">MNGD Sistemas</span>
            </h1>
            <p class="hero-subtitle">
                Fale conosco e descubra como podemos ajudar sua empresa em Apucarana
            </p>
            <div class="hero-description">
                <p>A <strong>MNGD Sistemas</strong> está pronta para atender sua empresa em <strong>Apucarana</strong> e região. Entre em contato conosco e descubra como nossas soluções em desenvolvimento de software podem transformar seu negócio.</p>
            </div>
        </div>
    </div>
</div>

<div class="contact-section">
    <div class="container">
        <div class="contact-grid">
            <div class="contact-info" data-aos="fade-right" data-aos-duration="800">
                <h2>Informações de Contato da MNGD Sistemas</h2>
                <p>A <strong>MNGD Sistemas</strong> está sempre disponível para atender você e sua empresa em <strong>Apucarana</strong>.</p>

                <div class="contact-items">
                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Empresa</h3>
                            <p><strong>MNGD Sistemas</strong></p>
                            <p>Desenvolvimento de Software em Apucarana</p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-envelope"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Email</h3>
                            <p><a href="mailto:{{$email}}">{{$email}}</a></p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-phone"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Telefone</h3>
                            <p><a href="tel:+554343000000">(43) 99678-2197</a></p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Horário de Atendimento</h3>
                            <p>Segunda a Sexta: 8h às 18h</p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <div class="contact-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="contact-details">
                            <h3>Localização</h3>
                            <p><strong>Apucarana - Paraná</strong></p>
                            <p>Atendimento remoto e presencial</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="contact-form-container" data-aos="fade-left" data-aos-duration="800">
                <div class="form-card">
                    <h2>Envie uma Mensagem para a MNGD Sistemas</h2>
                    <p>Preencha o formulário abaixo e nossa equipe da <strong>MNGD Sistemas</strong> entrará em contato em breve para atender sua empresa em <strong>Apucarana</strong>.</p>

                    <form class="contact-form" id="contactForm" action="{{ route('index.contact.send') }}" method="POST">
                        @csrf
                        <div id="formMessage" style="display: none; margin-bottom: 20px; padding: 15px; border-radius: 5px;"></div>

                        <div class="form-group">
                            <label for="name">Nome Completo</label>
                            <input type="text" id="name" name="name" required>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" required>
                        </div>

                        <div class="form-group">
                            <label for="company">Empresa</label>
                            <input type="text" id="company" name="company">
                        </div>

                        <div class="form-group">
                            <label for="phone">Telefone</label>
                            <input type="tel" id="phone" name="phone">
                        </div>

                        <div class="form-group">
                            <label for="subject">Assunto</label>
                            <select id="subject" name="subject" required>
                                <option value="">Selecione um assunto</option>
                                <option value="consultoria">Consultoria de TI</option>
                                <option value="desenvolvimento">Desenvolvimento de Sistemas</option>
                                <option value="sistemas-erp">Sistemas ERP</option>
                                <option value="suporte">Suporte Técnico</option>
                                <option value="orcamento">Orçamento</option>
                                <option value="outro">Outro</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="message">Mensagem</label>
                            <textarea id="message" name="message" rows="5" required placeholder="Descreva sua necessidade e como a MNGD Sistemas pode ajudar sua empresa..."></textarea>
                        </div>

                        <button type="submit" class="btn-primary btn-large" id="submitBtn">
                            <i class="fas fa-paper-plane"></i>
                            <span>Enviar Mensagem</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="social-section" data-aos="fade-up" data-aos-duration="1000">
    <div class="container">
        <h2>Conecte-se com a MNGD Sistemas</h2>
        <p>Siga-nos nas redes sociais e fique por dentro das novidades da <strong>MNGD Sistemas</strong> em <strong>Apucarana</strong></p>

        <div class="social-links">
            <a href="mailto:{{$email}}" class="social-link">
                <i class="fas fa-envelope"></i>
                <span>Email</span>
            </a>
        </div>
    </div>
</div>

<div class="cta-section" data-aos="fade-up" data-aos-duration="1000">
    <div class="container">
        <h2>Pronto para começar com a MNGD Sistemas?</h2>
        <p>Entre em contato conosco e descubra como a <strong>MNGD Sistemas</strong> pode ajudar sua empresa em <strong>Apucarana</strong></p>
        <div class="cta-actions">
            <a href="https://app.mngd.com.br/register" class="btn-primary btn-large">
                <i class="fas fa-rocket"></i>
                <span>Começar Agora</span>
            </a>
            <a href="tel:+554343000000" class="btn-secondary btn-large">
                <i class="fas fa-phone"></i>
                <span>Ligar Agora</span>
            </a>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const contactForm = document.getElementById('contactForm');
    const formMessage = document.getElementById('formMessage');
    const submitBtn = document.getElementById('submitBtn');

    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const originalText = submitBtn.innerHTML;
            const formData = new FormData(contactForm);

            // Ocultar mensagens anteriores
            formMessage.style.display = 'none';
            formMessage.className = '';

            // Desabilitar botão e mostrar loading
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Enviando...</span>';
            submitBtn.disabled = true;

            // Obter token CSRF
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

            // Enviar requisição AJAX
            fetch(contactForm.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken,
                    'Accept': 'application/json',
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Sucesso
                    formMessage.style.display = 'block';
                    formMessage.className = 'success';
                    formMessage.style.backgroundColor = '#d4edda';
                    formMessage.style.color = '#155724';
                    formMessage.style.border = '1px solid #c3e6cb';
                    formMessage.textContent = data.message;

                    // Limpar formulário
                    contactForm.reset();

                    // Scroll para a mensagem
                    formMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                } else {
                    // Erro de validação ou servidor
                    formMessage.style.display = 'block';
                    formMessage.className = 'error';
                    formMessage.style.backgroundColor = '#f8d7da';
                    formMessage.style.color = '#721c24';
                    formMessage.style.border = '1px solid #f5c6cb';

                    if (data.errors) {
                        // Erros de validação
                        let errorText = data.message + '\n';
                        for (let field in data.errors) {
                            errorText += data.errors[field].join('\n') + '\n';
                        }
                        formMessage.textContent = errorText.trim();
                    } else {
                        formMessage.textContent = data.message;
                    }

                    formMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                }
            })
            .catch(error => {
                // Erro de rede
                formMessage.style.display = 'block';
                formMessage.className = 'error';
                formMessage.style.backgroundColor = '#f8d7da';
                formMessage.style.color = '#721c24';
                formMessage.style.border = '1px solid #f5c6cb';
                formMessage.textContent = 'Ocorreu um erro ao enviar a mensagem. Por favor, tente novamente mais tarde.';
                formMessage.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            })
            .finally(() => {
                // Restaurar botão
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    }
});
</script>
@endsection