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

@{
    ViewData["Title"] = Localizer["About"];
    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-code me-3"></i>@Localizer["AboutQRRapido"]
                </h1>
                <p class="lead text-muted">@Localizer["AboutSubtitle"]</p>
            </div>
        </div>
    </div>

    <!-- Developer Info -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-10">
            <div class="card shadow-lg border-0">
                <div class="card-body p-5">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <h2 class="h3 text-primary mb-4">
                                <i class="fas fa-user-tie me-2"></i>@Localizer["AboutDeveloper"]
                            </h2>
                            <p class="mb-3">@Localizer["DeveloperDescription1"]</p>
                            <p class="mb-4">@Localizer["DeveloperDescription2"]</p>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="fas fa-map-marker-alt text-primary me-3"></i>
                                        <div>
                                            <strong>@Localizer["Location"]</strong><br>
                                            <small class="text-muted">@Localizer["LocationDetail"]</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-center mb-3">
                                        <i class="fas fa-code text-primary me-3"></i>
                                        <div>
                                            <strong>@Localizer["Specialization"]</strong><br>
                                            <small class="text-muted">@Localizer["SpecializationDetail"]</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 text-center">
                            <div class="bg-light rounded p-4">
                                <i class="fas fa-laptop-code fa-4x text-primary mb-3"></i>
                                <h5 class="text-primary">@Localizer["EnterpriseExpert"]</h5>
                                <p class="small text-muted mb-0">@Localizer["EnterpriseExpertDesc"]</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mission & Vision -->
    <div class="row mb-5">
        <div class="col-lg-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-bullseye fa-3x text-primary"></i>
                    </div>
                    <h4 class="text-center text-primary mb-3">@Localizer["OurMission"]</h4>
                    <p class="text-center">@Localizer["MissionDescription"]</p>
                </div>
            </div>
        </div>
        <div class="col-lg-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-lightbulb fa-3x text-warning"></i>
                    </div>
                    <h4 class="text-center text-primary mb-3">@Localizer["WhyWeCreated"]</h4>
                    <p class="text-center">@Localizer["WhyCreatedDescription"]</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Technology Stack -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5">
                    <h3 class="text-center text-primary mb-4">
                        <i class="fas fa-cogs me-2"></i>@Localizer["TechnologyStack"]
                    </h3>
                    <p class="text-center text-muted mb-4">@Localizer["TechStackDescription"]</p>
                    
                    <div class="row text-center">
                        <div class="col-md-3 mb-3">
                            <div class="tech-item p-3">
                                <i class="fab fa-microsoft fa-3x text-primary mb-2"></i>
                                <h6>ASP.NET Core</h6>
                                <small class="text-muted">@Localizer["TechBackend"]</small>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="tech-item p-3">
                                <i class="fas fa-leaf fa-3x text-success mb-2"></i>
                                <h6>MongoDB</h6>
                                <small class="text-muted">@Localizer["TechDatabase"]</small>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="tech-item p-3">
                                <i class="fab fa-bootstrap fa-3x text-purple mb-2"></i>
                                <h6>Bootstrap 5</h6>
                                <small class="text-muted">@Localizer["TechFrontend"]</small>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="tech-item p-3">
                                <i class="fas fa-tachometer-alt fa-3x text-warning mb-2"></i>
                                <h6>@Localizer["HighPerformance"]</h6>
                                <small class="text-muted">@Localizer["TechPerformance"]</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Why QR Rapido -->
    <div class="row mb-5">
        <div class="col-12">
            <div class="card border-primary">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0">
                        <i class="fas fa-star me-2"></i>@Localizer["WhyChooseQRRapido"]
                    </h4>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="feature-list">
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-bolt text-warning me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["LightningFast"]</h6>
                                        <small class="text-muted">@Localizer["FastDescription"]</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-shield-alt text-success me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["SecureReliable"]</h6>
                                        <small class="text-muted">@Localizer["SecureDescription"]</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-mobile-alt text-info me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["MobileFriendly"]</h6>
                                        <small class="text-muted">@Localizer["MobileDescription"]</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="feature-list">
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-language text-primary me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["Multilingual"]</h6>
                                        <small class="text-muted">@Localizer["MultilingualDescription"]</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-user-shield text-secondary me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["PrivacyFirst"]</h6>
                                        <small class="text-muted">@Localizer["PrivacyDescription"]</small>
                                    </div>
                                </div>
                                <div class="d-flex align-items-start mb-3">
                                    <i class="fas fa-heart text-danger me-3 mt-1"></i>
                                    <div>
                                        <h6>@Localizer["MadeWithLove"]</h6>
                                        <small class="text-muted">@Localizer["LoveDescription"]</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Professional Services CTA -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-dark text-white">
                <div class="card-body p-5 text-center">
                    <h4 class="mb-3">@Localizer["NeedCustomDevelopment"]</h4>
                    <p class="mb-4">@Localizer["CustomDevelopmentDescription"]</p>
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <div class="d-flex justify-content-center flex-wrap gap-3">
                                <span class="badge bg-primary p-2">C# / .NET</span>
                                <span class="badge bg-success p-2">RAG Systems</span>
                                <span class="badge bg-info p-2">@Localizer["EnterpriseAI"]</span>
                                <span class="badge bg-warning p-2">@Localizer["ScalableSystems"]</span>
                            </div>
                            <div class="mt-4">
                                <a href="https://jobmaker.com.br" target="_blank" class="btn btn-light btn-lg">
                                    <i class="fas fa-external-link-alt me-2"></i>@Localizer["VisitJobMaker"]
                                </a>
                                <p class="small mt-2 text-light">@Localizer["JobMakerDescription"]</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

<style>
.tech-item {
    transition: transform 0.3s ease;
}

.tech-item:hover {
    transform: translateY(-5px);
}

.feature-list .fas {
    font-size: 1.2em;
}

.card {
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.1) !important;
}
</style>