@using System.Text.Json
@model List<CarneiroTech.Models.CaseModel>
@{
    ViewData["Title"] = "CarneiroTech SBC - Assistência Técnica Premium e Upgrades";
    ViewData["Description"] = "Não descarte seu notebook. Upgrades de performance e resgate de carcaça em São Bernardo do Campo. Atendimento exclusivo no Golden Square Shopping.";
}

<!-- Masthead-->
<header class="masthead">
    <div class="container">
        <div class="masthead-subheading">Assistência Técnica Premium em SBC</div>
        <br/>
        <div class="masthead-heading text-uppercase">Não descarte seu notebook.</div>
        <div class="masthead-heading text-uppercase">Faça um Upgrade de Elite!</div>
        <a class="btn btn-primary btn-xl text-uppercase shadow" href="#contact">Agendar no Golden Square</a>
    </div>
</header>

<!-- Services-->
<section class="page-section" id="services">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Nossas Especialidades</h2>
            <h3 class="section-subheading text-muted">Tratamos seu equipamento como uma peça de engenharia, não apenas um eletrodoméstico.</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-bolt fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Upgrade de Performance</h4>
                <p class="text-muted">Transformamos máquinas lentas em foguetes com SSDs NVMe e memórias de alta velocidade. Performance superior a um PC novo por uma fração do preço.</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-shield-alt fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Limpeza Técnica & Térmica</h4>
                <p class="text-muted">Troca de pasta térmica industrial e remoção de poeira. Evitamos que seu processador queime por superaquecimento e garantimos silêncio total.</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-tools fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="my-3">Resgate de Carcaça</h4>
                <p class="text-muted">Reparo profissional de dobradiças e plásticos quebrados com resina industrial. Recuperamos o que outras assistências mandam para o lixo.</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">Provas de Ressurreição</h2>
            <h3 class="section-subheading text-muted">Veja como economizamos milhares de reais para nossos clientes de São Bernardo do Campo.</h3>
        </div>
        
        @if (Model != null && Model.Any(m => m.Metadata.Slug.Contains("vostro")))
        {
            var featuredCase = Model.First(m => m.Metadata.Slug.Contains("vostro"));
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card border-0 shadow-lg overflow-hidden" style="border-radius: 15px;">
                        <div class="row g-0">
                            <div class="col-md-6">
                                <img src="/img/Depois.png" 
                                     class="img-fluid h-100" alt="Resultado do Resgate" style="object-fit: cover; min-height: 350px;">
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <div class="card-body p-4 p-lg-5">
                                    <div class="badge bg-danger mb-2">DESTAQUE: RESGATE EM SBC</div>
                                    <h2 class="card-title fw-bold">@featuredCase.Metadata.Title</h2>
                                    <p class="card-text lead text-muted">@featuredCase.Metadata.Summary</p>
                                    <div class="bg-success bg-opacity-10 p-3 rounded border-start border-4 border-success mb-4">
                                        <span class="text-success fw-bold h4 mb-0">Economia Real: R$ @featuredCase.Metadata.EstimatedSavings.ToString("N2")</span>
                                    </div>
                                    <a href="/cases/@featuredCase.Metadata.Slug" class="btn btn-primary btn-xl text-uppercase">Ver como foi feito</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        }

        <div class="row">
            @if (Model != null && Model.Any())
            {
                foreach (var caseItem in Model.Where(m => !m.Metadata.Slug.Contains("vostro")).Take(6))
                {
                    <div class="col-lg-4 col-sm-6 mb-4">
                        <div class="portfolio-item h-100 shadow-sm">
                            <a class="portfolio-link" href="/cases/@caseItem.Metadata.Slug">
                                <div class="portfolio-hover">
                                    <div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
                                </div>
                                @{
                                    var imgPath = !string.IsNullOrEmpty(caseItem.Metadata.Thumbnail) ? caseItem.Metadata.Thumbnail : caseItem.Metadata.Image;
                                }
                                <img class="img-fluid w-100" src="@imgPath" alt="..." style="height: 200px; object-fit: cover;" />
                            </a>
                            <div class="portfolio-caption text-start p-3">
                                <div class="portfolio-caption-heading h6 fw-bold">@caseItem.Metadata.Title</div>
                                <div class="portfolio-caption-subheading text-muted small">@caseItem.Metadata.Category</div>
                                <div class="mt-2 text-success fw-bold small">Economia: R$ @caseItem.Metadata.EstimatedSavings.ToString("N2")</div>
                            </div>
                        </div>
                    </div>
                }
            }
        </div>
    </div>
</section>

<!-- Como Funciona -->
<section class="page-section" id="about">
    <div class="container">
        <div class="text-center">
            <h2 class="section-heading text-uppercase">Como Funciona nosso Atendimento</h2>
            <h3 class="section-subheading text-muted">Transparência total e engenharia de precisão para seu equipamento.</h3>
            
            <div class="alert alert-primary d-inline-block mb-5 shadow-sm" style="border-radius: 50px; padding: 10px 30px;">
                <i class="fas fa-bolt me-2 text-warning"></i> <strong>Agilidade:</strong> Diagnóstico e orçamento possíveis em até <strong>24 horas</strong> (dependendo da complexidade do caso).
            </div>
        </div>
        <ul class="timeline">
            <li>
                <div class="timeline-image"><i class="fas fa-calendar-check fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>Passo 1</h4>
                        <h4 class="subheading">Agendamento no Golden Square</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Você escolhe o melhor horário para deixar seu equipamento em nosso ponto de atendimento exclusivo no Golden Square Shopping, São Bernardo do Campo.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image"><i class="fas fa-camera fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>Passo 2</h4>
                        <h4 class="subheading">Checklist e Laudo Digital</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Sua segurança em primeiro lugar. Tiramos fotos e emitimos um laudo de recebimento detalhando o estado atual do seu equipamento na hora, enviado direto pro seu WhatsApp.</p></div>
                </div>
            </li>
            <li>
                <div class="timeline-image"><i class="fas fa-microchip fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>Passo 3</h4>
                        <h4 class="subheading">Diagnóstico de Engenharia</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Nada de "tentativa e erro". Analisamos a eletrônica e o software do seu PC com ferramentas avançadas para identificar o problema real e a melhor solução com a maior agilidade possível.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image"><i class="fas fa-file-invoice-dollar fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>Passo 4</h4>
                        <h4 class="subheading">Orçamento Transparente</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Enviamos o diagnóstico e o orçamento detalhado via WhatsApp. Você só aprova se o valor fizer sentido para a vida útil do seu computador.</p></div>
                </div>
            </li>
            <li>
                <div class="timeline-image"><i class="fas fa-shipping-fast fa-3x text-white"></i></div>
                <div class="timeline-panel">
                    <div class="timeline-heading">
                        <h4>Passo 5</h4>
                        <h4 class="subheading">Entrega e Performance</h4>
                    </div>
                    <div class="timeline-body"><p class="text-muted">Você retira sua máquina ressurgida, limpa e com orientações técnicas de uso para garantir que ela dure por mais muitos anos com performance máxima.</p></div>
                </div>
            </li>
            <li class="timeline-inverted">
                <div class="timeline-image">
                    <h4>
                        PC Novo
                        <br />
                        De
                        <br />
                        Novo!
                    </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">Agendar Avaliação</h2>
            <h3 class="section-subheading text-white">Atendimento exclusivo com hora marcada no Golden Square Shopping.</h3>
        </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 WhatsApp (com DDD) *" required />
                    </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="Qual o modelo do seu equipamento e qual o problema principal? *" 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">Solicitar Horário</span>
                    <span id="buttonSpinner" class="spinner-border spinner-border-sm ms-2" style="display: none;" role="status" aria-hidden="true"></span>
                </button>
            </div>
        </form>

        <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/5511976822169?text=Olá! Gostaria de um orçamento para o meu aparelho."
               class="btn btn-success btn-xl text-uppercase shadow-lg"
               target="_blank"
               style="background-color: #25D366; border-color: #25D366;">
                <i class="fab fa-whatsapp me-2"></i> (11) 97682-2169
            </a>
            <div class="mt-2">
                <small class="text-white-50">Atendimento imediato via WhatsApp</small>
            </div>
        </div>
    </div>
</section>

@section Scripts {
<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');

    submitButton.disabled = true;
    buttonText.textContent = 'Enviando...';
    buttonSpinner.style.display = 'inline-block';

    // Simulação de envio (Google Script seria aqui)
    setTimeout(() => {
        alert('Solicitação enviada! Entraremos em contato via WhatsApp em instantes.');
        form.reset();
        submitButton.disabled = false;
        buttonText.textContent = 'Solicitar Horário';
        buttonSpinner.style.display = 'none';
    }, 2000);
});
</script>
}