@model List<QRRapidoApp.Models.ArticleMetadata>
@{
    var isEn = (ViewBag.Culture as string) == "en";
    var isEs = (ViewBag.Culture as string) == "es-PY" || (ViewBag.Culture as string) == "es";
    string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;

    ViewData["Title"] = T("Tutoriais QR Code", "Tutoriales Código QR", "QR Code Tutorials");
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container mt-4 mb-5">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-4">
                <i class="fas fa-book"></i>
                @T("Tutoriais QR Code", "Tutoriales Código QR", "QR Code Tutorials")
            </h1>
            <p class="lead text-muted">
                @T("Aprenda tudo sobre QR Codes com nossos tutoriais completos e passo a passo",
                   "Aprende todo sobre códigos QR con nuestros tutoriales completos paso a paso",
                   "Learn everything about QR Codes with our complete step-by-step tutorials")
            </p>
        </div>
    </div>

    <!-- Tutorials Grid -->
    @if (Model.Any())
    {
        <div class="row">
            @foreach (var article in Model)
            {
                <div class="col-md-6 col-lg-4 mb-4">
                    <div class="card h-100 shadow-sm hover-shadow">
                        @if (!string.IsNullOrEmpty(article.Image))
                        {
                            <img src="@article.Image" class="card-img-top" alt="@article.Title" style="height: 200px; object-fit: cover;">
                        }
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">@article.Title</h5>
                            <p class="card-text text-muted flex-grow-1">@article.Description</p>

                            <div class="mb-3">
                                <small class="text-muted">
                                    <i class="fas fa-calendar"></i> @article.Date.ToString("dd MMM yyyy") |
                                    <i class="fas fa-clock"></i> @article.ReadingTimeMinutes min
                                </small>
                            </div>

                            <a href="/@ViewBag.Culture/tutoriais/@article.Slug"
                               class="btn btn-primary btn-block">
                                @T("Ler Tutorial", "Leer Tutorial", "Read Tutorial")
                                <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="alert alert-info" role="alert">
            <i class="fas fa-info-circle"></i>
            @T("Nenhum tutorial disponível no momento. Volte em breve!",
               "No hay tutoriales disponibles en este momento. ¡Vuelve pronto!",
               "No tutorials available at the moment. Check back soon!")
        </div>
    }

    <!-- CTA Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card bg-primary text-white">
                <div class="card-body text-center py-5">
                    <h3 class="mb-3">
                        @T("Pronto para criar seu QR Code?",
                           "¿Listo para crear tu código QR?",
                           "Ready to create your QR Code?")
                    </h3>
                    <p class="lead mb-4">
                        @T("Gere QR codes profissionais em segundos com nossa ferramenta ultrarrápida!",
                           "¡Genera códigos QR profesionales en segundos con nuestra herramienta ultrarrápida!",
                           "Generate professional QR codes in seconds with our ultra-fast tool!")
                    </p>
                    <a href="/@ViewBag.Culture" class="btn btn-light btn-lg">
                        <i class="fas fa-qrcode"></i>
                        @T("Criar QR Code Agora", "Crear Código QR Ahora", "Create QR Code Now")
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-shadow {
        transition: all 0.3s ease;
    }

    .hover-shadow:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important;
    }

    .card-img-top {
        transition: transform 0.3s ease;
    }

    .card:hover .card-img-top {
        transform: scale(1.05);
    }
</style>