@using QRRapidoApp.Services
@using Microsoft.Extensions.Localization
@inject AdDisplayService AdService
@inject IStringLocalizer<QRRapidoApp.Resources.SharedResource> Localizer

@{
    ViewData["Title"] = Localizer["Contact"];
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container py-5">
    <!-- Hero Section -->
    <div class="row justify-content-center">
        <div class="col-lg-8 text-center">
            <div class="mb-5">
                <h1 class="display-5 fw-bold text-primary mb-3">
                    <i class="fas fa-envelope me-3"></i>@Localizer["ContactUs"]
                </h1>
                <p class="lead text-muted">@Localizer["ContactSubtitle"]</p>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Contact Information -->
        <div class="col-lg-8 mb-5">
            <div class="row">
                <!-- QR Rapido Support -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="text-center mb-3">
                                <i class="fas fa-qrcode fa-3x text-primary"></i>
                            </div>
                            <h4 class="text-center text-primary mb-3">@Localizer["QRRapidoSupport"]</h4>
                            <div class="text-center">
                                <div class="mb-3">
                                    <i class="fas fa-envelope text-primary me-2"></i>
                                    <strong>@Localizer["SupportEmail"]</strong>
                                </div>
                                <a href="mailto:contato@qrrapido.site" class="btn btn-primary btn-lg w-100">
                                    <i class="fas fa-paper-plane me-2"></i>contato@qrrapido.site
                                </a>
                                <div class="mt-3">
                                    <small class="text-muted">
                                        <i class="fas fa-clock me-1"></i>@Localizer["ResponseTime24-48h"]
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Professional Development -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-body p-4">
                            <div class="text-center mb-3">
                                <i class="fas fa-laptop-code fa-3x text-success"></i>
                            </div>
                            <h4 class="text-center text-primary mb-3">@Localizer["ProfessionalProjects"]</h4>
                            <div class="text-center">
                                <div class="mb-3">
                                    <strong class="text-success">@Localizer["CustomDevelopment"]</strong>
                                </div>
                                <p class="small text-muted mb-3">@Localizer["ProfessionalServicesDesc"]</p>
                                <a href="https://jobmaker.com.br" target="_blank" class="btn btn-success btn-lg w-100">
                                    <i class="fas fa-external-link-alt me-2"></i>jobmaker.com.br
                                </a>
                                <div class="mt-3">
                                    <small class="text-muted">@Localizer["ConsultJobMaker"]</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Types -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-question-circle me-2"></i>@Localizer["WhatCanWeHelpWith"]
                            </h5>
                        </div>
                        <div class="card-body p-4">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="text-primary mb-3">
                                        <i class="fas fa-qrcode me-2"></i>QR Rapido @Localizer["Support"]
                                    </h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["TechnicalQuestions"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["BugReports"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["FeatureRequests"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["PremiumSupport"]
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-lg-6">
                                    <h6 class="text-primary mb-3">
                                        <i class="fas fa-briefcase me-2"></i>@Localizer["ProfessionalServices"]
                                    </h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["CustomSystems"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["AIIntegration"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["EnterpriseConsulting"]
                                        </li>
                                        <li class="mb-2">
                                            <i class="fas fa-check text-success me-2"></i>@Localizer["TechnicalAudits"]
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Location Card -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 text-center">
                    <i class="fas fa-map-marker-alt fa-3x text-primary mb-3"></i>
                    <h5 class="text-primary">@Localizer["OurLocation"]</h5>
                    <p class="text-muted mb-3">@Localizer["LocationDetail"]</p>
                    <div class="bg-light rounded p-3">
                        <i class="fas fa-map text-primary me-2"></i>
                        <small class="text-muted">@Localizer["SaoBernardoLocation"]</small>
                    </div>
                </div>
            </div>

            <!-- Response Time -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body p-4 text-center">
                    <i class="fas fa-clock fa-3x text-success mb-3"></i>
                    <h5 class="text-primary">@Localizer["ResponseTimes"]</h5>
                    <div class="list-unstyled">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">@Localizer["TechnicalQuestions"]</span>
                            <span class="badge bg-success">24-48h</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">@Localizer["CustomProjects"]</span>
                            <span class="badge bg-primary">@Localizer["ConsultWebsite"]</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">@Localizer["PremiumSupport"]</span>
                            <span class="badge bg-warning">@Localizer["Priority"]</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Links -->
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-link me-2"></i>@Localizer["QuickLinks"]
                    </h6>
                    <div class="d-grid gap-2">
                        <a href="@Url.Action("FAQ", "Home")" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-question-circle me-2"></i>FAQ
                        </a>
                        <a href="@Url.Action("HowToUse", "Home")" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-book me-2"></i>@Localizer["HowToUse"]
                        </a>
                        <a href="@Url.Action("Upgrade", "Premium")" class="btn btn-outline-warning btn-sm">
                            <i class="fas fa-crown me-2"></i>QR Rapido Premium
                        </a>
                        <a href="https://jobmaker.com.br" target="_blank" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-external-link-alt me-2"></i>JobMaker
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Info -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="alert alert-info border-0">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h6 class="alert-heading">
                            <i class="fas fa-info-circle me-2"></i>@Localizer["BeforeContacting"]
                        </h6>
                        <p class="mb-0">@Localizer["BeforeContactingDescription"]</p>
                    </div>
                    <div class="col-md-4 text-center">
                        <a href="@Url.Action("FAQ", "Home")" class="btn btn-info">
                            <i class="fas fa-search me-2"></i>@Localizer["CheckFAQ"]
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Ad Space Footer (conditional) -->
@await Html.PartialAsync("_AdSpace", new { position = "footer" })

<style>
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}
</style>