@model List<CarneiroTech.Models.CaseModel>
@{
    ViewData["Title"] = ViewData["Title"] ?? "Carneiro Tech - Solution Design & Technical Consulting";
}

<!-- Masthead-->
<header class="masthead">
    <div class="container">
        <div class="masthead-subheading">Solution Design & Technical Consulting</div>
        <div class="masthead-heading text-uppercase">Conectando Negócio e Tecnologia</div>
        <a class="btn btn-primary btn-xl text-uppercase" href="#services">Saiba Mais</a>
    </div>
</header>

<!-- Services-->
<section class="page-section" id="services">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Serviços</h2>
            <h3 class="section-subheading text-muted">20+ anos conectando negócio e tecnologia</h3>
        </div>
        <div class="row text-center">
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fas fa-circle fa-stack-2x text-primary"></i>
                    <i class="fas fa-lightbulb fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Solution Design</h4>
                <p class="text-muted">Desenho de soluções técnicas que conectam objetivos de negócio com arquitetura de sistemas. Experiência com integrações SAP, arquiteturas enterprise e modernização de legados.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fas fa-circle fa-stack-2x text-primary"></i>
                    <i class="fas fa-clipboard-check fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Technical Consulting</h4>
                <p class="text-muted">Assessoria técnica para tomada de decisão: definição de MVP, priorização de backlog, análise de viabilidade técnica e due diligence de produtos digitais.</p>
            </div>
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fas fa-circle fa-stack-2x text-primary"></i>
                    <i class="fas fa-code fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Technical Proposals</h4>
                <p class="text-muted">Elaboração de propostas técnicas detalhadas: estimativas, arquitetura, tecnologias, riscos e roadmap de implementação para projetos complexos.</p>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Grid (Cases)-->
<section class="page-section bg-light" id="portfolio">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Cases</h2>
            <h3 class="section-subheading text-muted">Projetos que transformaram negócios</h3>
        </div>
        <div class="row">
            @if (Model != null && Model.Any())
            {
                foreach (var caseItem in Model.Take(6))
                {
                    <div class="col-lg-4 col-sm-6 mb-4">
                        <!-- Portfolio item -->
                        <div class="portfolio-item">
                            <a class="portfolio-link" href="/cases/@caseItem.Metadata.Slug">
                                <div class="portfolio-hover">
                                    <div class="portfolio-hover-content">
                                        <p class="text-white fw-bold">@caseItem.Metadata.Summary</p>
                                    </div>
                                </div>
                                @if (!string.IsNullOrEmpty(caseItem.Metadata.Image))
                                {
                                    <img class="img-fluid" src="@caseItem.Metadata.Image" alt="@caseItem.Metadata.Title" />
                                }
                                else
                                {
                                    <div style="height: 300px; background: linear-gradient(135deg, #C42127 0%, #8B1E23 100%);"></div>
                                }
                            </a>
                            <div class="portfolio-caption">
                                <div class="portfolio-caption-heading">@caseItem.Metadata.Title</div>
                                <div class="portfolio-caption-subheading text-muted">@caseItem.Metadata.Industry</div>
                            </div>
                        </div>
                    </div>
                }
            }
            else
            {
                <div class="col-12 text-center">
                    <p class="text-muted">Em breve, novos cases serão adicionados.</p>
                </div>
            }
        </div>
        <div class="text-center mt-4">
            <a class="btn btn-primary btn-xl text-uppercase" href="/cases">Ver Todos os Cases</a>
        </div>
    </div>
</section>

<!-- About-->
<section class="page-section" id="about">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Sobre</h2>
            <h3 class="section-subheading text-muted">Ricardo Carneiro - Carneiro Tech</h3>
        </div>
        <ul class="timeline">
            <li>
                <div class="timeline-image"><i class="fas fa-graduation-cap fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>2000-2005</h4>
                        <h4 class="subheading">Início da Jornada</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Primeiros passos na tecnologia: desenvolvimento web, banco de dados e sistemas corporativos. Formação sólida em Engenharia de Software.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image"><i class="fas fa-building fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>2005-2015</h4>
                        <h4 class="subheading">Enterprise & SAP</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Especialização em integrações SAP e arquiteturas enterprise. Projetos em multinacionais nos setores healthcare, varejo e manufatura.</p></div>
                </div>
            </li>
            <li>
                <div class="timeline-image"><i class="fas fa-rocket fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>2015-2020</h4>
                        <h4 class="subheading">Digital Transformation</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Liderança técnica em transformação digital: cloud migration, modernização de legados e implementação de metodologias ágeis.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image"><i class="fas fa-handshake fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>2020-Hoje</h4>
                        <h4 class="subheading">Consultoria Independente</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Fundação da Carneiro Tech: consultoria especializada em Solution Design, Technical Proposals e Due Diligence para empresas de diversos portes.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image">
                    <h4 style="vertical-align:central">
                        Vamos
                        <br />
                        Trabalhar
                        <br />
                        Juntos!
                    </h4>
                </div>
            </li>
        </ul>
    </div>
</section>

<!-- Contact-->
<section class="page-section" id="contact">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Contato</h2>
            <h3 class="section-subheading text-white">Vamos conversar sobre seu desafio técnico</h3>
        </div>

        <!-- Alert messages -->
        <div id="contactAlert" class="alert text-center" style="display: none;"></div>

        <form id="contactForm">
            <div class="row align-items-stretch mb-5">
                <div class="col-md-6">
                    <div class="form-group mb-3">
                        <input class="form-control" id="contactName" name="name" type="text" placeholder="Seu Nome *" required />
                    </div>
                    <div class="form-group mb-3">
                        <input class="form-control" id="contactEmail" name="email" type="email" placeholder="Seu Email *" required />
                    </div>
                    <div class="form-group mb-md-0">
                        <input class="form-control" id="contactPhone" name="phone" type="tel" placeholder="Seu Telefone" />
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group form-group-textarea mb-md-0">
                        <textarea class="form-control" id="contactMessage" name="message" placeholder="Sua Mensagem *" style="height: 100%;" required></textarea>
                    </div>
                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">
                    <span id="buttonText">Enviar Mensagem</span>
                    <span id="buttonSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </form>

        <!-- WhatsApp Contact Option -->
        <div class="text-center mt-5">
            <div class="mb-3">
                <span class="text-white-50" style="font-size: 1.1rem;">OU</span>
            </div>
            <a href="https://wa.me/5511970792602?text=%5BSite%5D%20Ol%C3%A1%21%20Eu%20gostaria%20de%20conversar%20com%20voc%C3%AA%20sobre%20uma%20poss%C3%ADvel%20proposta%20comercial."
               class="btn btn-success btn-xl text-uppercase"
               target="_blank"
               style="background-color: #25D366; border-color: #25D366;">
                <i class="fab fa-whatsapp me-2"></i>
                Falar via WhatsApp
            </a>
            <div class="mt-2">
                <small class="text-white-50">Resposta rápida e direta</small>
            </div>
        </div>
    </div>
</section>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const form = this;
    const submitButton = document.getElementById('submitButton');
    const buttonText = document.getElementById('buttonText');
    const buttonSpinner = document.getElementById('buttonSpinner');
    const alertDiv = document.getElementById('contactAlert');

    // Get form data
    const formData = new FormData(form);
    const data = {
        name: formData.get('name'),
        email: formData.get('email'),
        phone: formData.get('phone') || '',
        message: formData.get('message')
    };

    console.log('Sending form data:', data);

    // Show loading state
    submitButton.disabled = true;
    buttonText.textContent = 'Enviando...';
    buttonSpinner.style.display = 'inline-block';
    alertDiv.style.display = 'none';

    // Create form and submit via POST (Google Apps Script accepts form data)
    const scriptUrl = 'https://script.google.com/macros/s/AKfycbwYIzI1TGYEKYmkUhhdvNDQcrpInwNJ9Olk24KLZYEb4AycMaGao2qbfk2gmPsp9yUZ4A/exec';

    // Create a hidden iframe to submit the form
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.name = 'contact-frame';
    document.body.appendChild(iframe);

    // Create a temporary form
    const tempForm = document.createElement('form');
    tempForm.method = 'POST';
    tempForm.action = scriptUrl;
    tempForm.target = 'contact-frame';

    // Add form fields
    Object.keys(data).forEach(key => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = data[key];
        tempForm.appendChild(input);
    });

    // Add to document and submit
    document.body.appendChild(tempForm);

    // Set timeout to show success message
    const timeout = setTimeout(() => {
        console.log('Form submitted successfully (timeout)');

        // Success - assume it worked after 2 seconds
        alertDiv.className = 'alert alert-success text-center';
        alertDiv.textContent = 'Mensagem enviada com sucesso! Entraremos em contato em breve.';
        alertDiv.style.display = 'block';
        form.reset();

        // Scroll to alert
        alertDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });

        // Reset button state
        submitButton.disabled = false;
        buttonText.textContent = 'Enviar Mensagem';
        buttonSpinner.style.display = 'none';

        // Cleanup
        document.body.removeChild(tempForm);
        document.body.removeChild(iframe);
    }, 2000);

    // Submit the form
    tempForm.submit();
});
</script>