@model List<QRRapidoApp.Models.ArticleMetadata>
@{
    ViewData["Title"] = ViewBag.Culture == "pt-BR" ? "Tutoriais QR Code" : "Tutoriales Código QR";
    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>
                @(ViewBag.Culture == "pt-BR" ? "Tutoriais QR Code" : "Tutoriales Código QR")
            </h1>
            <p class="lead text-muted">
                @(ViewBag.Culture == "pt-BR"
                    ? "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")
            </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">
                                @(ViewBag.Culture == "pt-BR" ? "Ler Tutorial" : "Leer 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>
            @(ViewBag.Culture == "pt-BR"
                ? "Nenhum tutorial disponível no momento. Volte em breve!"
                : "No hay tutoriales disponibles en este momento. ¡Vuelve pronto!")
        </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">
                        @(ViewBag.Culture == "pt-BR"
                            ? "Pronto para criar seu QR Code?"
                            : "¿Listo para crear tu código QR?")
                    </h3>
                    <p class="lead mb-4">
                        @(ViewBag.Culture == "pt-BR"
                            ? "Gere QR codes profissionais em segundos com nossa ferramenta ultrarrápida!"
                            : "¡Genera códigos QR profesionales en segundos con nuestra herramienta ultrarrápida!")
                    </p>
                    <a href="/@ViewBag.Culture" class="btn btn-light btn-lg">
                        <i class="fas fa-qrcode"></i>
                        @(ViewBag.Culture == "pt-BR" ? "Criar QR Code Agora" : "Crear Código QR Ahora")
                    </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>