@model QRRapidoApp.Models.ViewModels.ArticleViewModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewData["Title"] = Model.Metadata.Title;
    var isEn = (ViewBag.Culture as string) == "en";
    var isEs = (ViewBag.Culture as string) == "es";
    string T(string pt, string es, string en) => isEn ? en : isEs ? es : pt;
    var baseUrl = "https://qrrapido.site";
    var articleUrl = $"{baseUrl}/{ViewBag.Culture}/tutoriais/{ViewBag.Slug}";
}

<!DOCTYPE html>
<html lang="@ViewBag.Culture">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@Model.Metadata.Title - QR Rapido</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="@Model.Metadata.Description">
    <meta name="keywords" content="@Model.Metadata.Keywords">
    <meta name="author" content="@Model.Metadata.Author">
    <meta name="robots" content="index, follow">

    <!-- Canonical URL -->
    <link rel="canonical" href="@articleUrl">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="@articleUrl">
    <meta property="og:title" content="@Model.Metadata.Title">
    <meta property="og:description" content="@Model.Metadata.Description">
    <meta property="og:image" content="@baseUrl@Model.Metadata.Image">
    <meta property="og:site_name" content="QR Rapido">
    <meta property="article:published_time" content="@Model.Metadata.Date.ToString("yyyy-MM-ddTHH:mm:ssZ")">
    <meta property="article:modified_time" content="@Model.Metadata.LastMod.ToString("yyyy-MM-ddTHH:mm:ssZ")">
    <meta property="article:author" content="@Model.Metadata.Author">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="@articleUrl">
    <meta name="twitter:title" content="@Model.Metadata.Title">
    <meta name="twitter:description" content="@Model.Metadata.Description">
    <meta name="twitter:image" content="@baseUrl@Model.Metadata.Image">

    <!-- Schema.org Article Structured Data -->
    <script type="application/ld+json">
    {
        "@@context": "https://schema.org",
        "@@type": "Article",
        "headline": "@Model.Metadata.Title",
        "description": "@Model.Metadata.Description",
        "image": "@baseUrl@Model.Metadata.Image",
        "author": {
            "@@type": "Person",
            "name": "@Model.Metadata.Author"
        },
        "publisher": {
            "@@type": "Organization",
            "name": "QR Rapido",
            "logo": {
                "@@type": "ImageObject",
                "url": "@baseUrl/images/logo.png"
            }
        },
        "datePublished": "@Model.Metadata.Date.ToString("yyyy-MM-dd")",
        "dateModified": "@Model.Metadata.LastMod.ToString("yyyy-MM-dd")",
        "mainEntityOfPage": {
            "@@type": "WebPage",
            "@@id": "@articleUrl"
        }
    }
    </script>

    <!-- Breadcrumb Schema -->
    <script type="application/ld+json">
    {
        "@@context": "https://schema.org",
        "@@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "@baseUrl"
            },
            {
                "@@type": "ListItem",
                "position": 2,
                "name": "@T("Tutoriais", "Tutoriales", "Tutorials")",
                "item": "@baseUrl/@ViewBag.Culture/tutoriais"
            },
            {
                "@@type": "ListItem",
                "position": 3,
                "name": "@Model.Metadata.Title",
                "item": "@articleUrl"
            }
        ]
    }
    </script>
</head>
<body>
    <div class="container mt-4 mb-5">
        <!-- Breadcrumbs -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/@ViewBag.Culture">Home</a></li>
                <li class="breadcrumb-item"><a href="/@ViewBag.Culture/tutoriais">@T("Tutoriais", "Tutoriales", "Tutorials")</a></li>
                <li class="breadcrumb-item active" aria-current="page">@Model.Metadata.Title</li>
            </ol>
        </nav>

        <div class="row">
            <!-- Main Article Content -->
            <article class="col-lg-8">
                <!-- Article Header -->
                <header class="mb-4">
                    <h1 class="display-4 mb-3">@Model.Metadata.Title</h1>

                    <div class="text-muted mb-3">
                        <span><i class="fas fa-user"></i> @Model.Metadata.Author</span> |
                        <span><i class="fas fa-calendar"></i> @Model.Metadata.Date.ToString("dd MMM yyyy")</span> |
                        <span><i class="fas fa-clock"></i> @Model.Metadata.ReadingTimeMinutes min @T("de leitura", "de lectura", "read")</span>
                    </div>

                    @if (!string.IsNullOrEmpty(Model.Metadata.Image))
                    {
                        <img src="@Model.Metadata.Image" alt="@Model.Metadata.Title" class="img-fluid rounded mb-4" />
                    }

                    <p class="lead">@Model.Metadata.Description</p>
                </header>

                <!-- Article Body -->
                <div class="article-content">
                    @Html.Raw(Model.HtmlContent)
                </div>

                <!-- Article Footer -->
                <footer class="mt-5 pt-4 border-top">
                    <p class="text-muted">
                        <small>
                            @T("Última atualização:", "Última actualización:", "Last updated:")
                            @Model.Metadata.LastMod.ToString("dd MMM yyyy HH:mm")
                        </small>
                    </p>
                </footer>

                <!-- Ad Slot (if ads enabled) -->
                @if (ViewBag.ShowAds == true)
                {
                    <div class="my-4">
                        <div class="alert alert-light text-center" role="alert">
                            <!-- Ad placement -->
                            <ins class="adsbygoogle"
                                 style="display:block"
                                 data-ad-client="@ViewBag.AdSenseClientId"
                                 data-ad-slot="@ViewBag.ArticleAdSlot"
                                 data-ad-format="auto"
                                 data-full-width-responsive="true"></ins>
                        </div>
                    </div>
                }
            </article>

            <!-- Sidebar -->
            <aside class="col-lg-4">
                <!-- Related Articles -->
                @if (Model.RelatedArticles.Any())
                {
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-book"></i>
                                @T("Artigos Relacionados", "Artículos Relacionados", "Related Articles")
                            </h5>
                        </div>
                        <div class="list-group list-group-flush">
                            @foreach (var related in Model.RelatedArticles)
                            {
                                <a href="/@ViewBag.Culture/tutoriais/@related.Slug"
                                   class="list-group-item list-group-item-action">
                                    <h6 class="mb-1">@related.Title</h6>
                                    <p class="mb-1 text-muted small">@related.Description</p>
                                </a>
                            }
                        </div>
                    </div>
                }

                <!-- CTA Premium (if not premium) -->
                @if (ViewBag.IsPremium != true)
                {
                    <div class="card bg-primary text-white mb-4">
                        <div class="card-body">
                            <h5 class="card-title">
                                <i class="fas fa-crown"></i>
                                @T("Seja Premium!", "¡Hazte Premium!", "Go Premium!")
                            </h5>
                            <p class="card-text">
                                @T("QR codes ilimitados, sem anúncios e recursos avançados.",
                                   "Códigos QR ilimitados, sin anuncios y características avanzadas.",
                                   "Unlimited QR codes, no ads and advanced features.")
                            </p>
                            <a href="/@ViewBag.Culture/Pagamento/SelecaoPlano" class="btn btn-light btn-block">
                                @T("Conhecer Planos", "Conocer Planes", "View Plans")
                            </a>
                        </div>
                    </div>
                }

                <!-- Quick Links -->
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">
                            <i class="fas fa-link"></i>
                            @T("Links Úteis", "Enlaces Útiles", "Useful Links")
                        </h5>
                    </div>
                    <div class="list-group list-group-flush">
                        <a href="/@ViewBag.Culture" class="list-group-item list-group-item-action">
                            <i class="fas fa-qrcode"></i>
                            @T("Gerar QR Code", "Generar Código QR", "Generate QR Code")
                        </a>
                        <a href="/@ViewBag.Culture/FAQ" class="list-group-item list-group-item-action">
                            <i class="fas fa-question-circle"></i>
                            @T("Perguntas Frequentes", "Preguntas Frecuentes", "FAQ")
                        </a>
                        <a href="/@ViewBag.Culture/Contact" class="list-group-item list-group-item-action">
                            <i class="fas fa-envelope"></i>
                            @T("Contato", "Contacto", "Contact")
                        </a>
                    </div>
                </div>
            </aside>
        </div>
    </div>

    <style>
        .article-content {
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .article-content h2 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .article-content h3 {
            margin-top: 1.5rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
        }

        .article-content img {
            max-width: 100%;
            height: auto;
            margin: 1.5rem 0;
            border-radius: 8px;
        }

        .article-content pre {
            background: #f4f4f4;
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
        }

        .article-content code {
            background: #f4f4f4;
            padding: 0.2rem 0.4rem;
            border-radius: 3px;
            font-size: 0.9em;
        }

        .article-content blockquote {
            border-left: 4px solid #007bff;
            padding-left: 1rem;
            margin-left: 0;
            font-style: italic;
            color: #6c757d;
        }

        .breadcrumb {
            background-color: transparent;
            padding: 0.5rem 0;
        }
    </style>
</body>
</html>
