@inject Microsoft.Extensions.Options.IOptions<BCards.Web.Configuration.TenantSettings> TenantConfig
@{
    var tenant = TenantConfig.Value;
    ViewData["Title"] = $"{tenant.SiteName} - {tenant.Tagline}";
    var categories = ViewBag.Categories as List<BCards.Web.Models.Category> ?? new List<BCards.Web.Models.Category>();
    var recentPages = ViewBag.RecentPages as List<BCards.Web.Models.UserPage> ?? new List<BCards.Web.Models.UserPage>();
    Layout = "_Layout";
    var featuresHeadline = tenant.FeaturesHeadline.Replace("{SiteName}", tenant.SiteName);
}

<div class="hero-section text-white py-5 mb-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold mb-4">
                    @tenant.HeroHeadline
                </h1>
                <p class="lead mb-4">
                    @tenant.HeroDescription
                </p>
                <div class="d-flex gap-3 flex-wrap mb-4 mb-lg-0">
                    @if (User.Identity?.IsAuthenticated == true)
                    {
                        <a asp-controller="Admin" asp-action="Dashboard" class="btn btn-light btn-lg px-4">
                            Acessar Dashboard
                        </a>
                    }
                    else
                    {
                        <a asp-controller="Auth" asp-action="Login" class="btn btn-light btn-lg px-4">
                            @tenant.HeroCtaText
                        </a>
                    }
                    <a asp-controller="Home" asp-action="Pricing" class="btn btn-outline-light btn-lg px-4">
                        Ver Planos
                    </a>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <img src="~/images/hero-mockup.svg" alt="Exemplo de página @tenant.SiteName" class="img-fluid rounded shadow-lg" style="max-height: 400px;">
            </div>
        </div>
    </div>
</div>

<div class="container">
    <!-- Categorias Populares -->
    @if (categories.Any())
    {
        <section class="mb-5">
            <h2 class="text-center mb-4">Categorias Populares</h2>
            <div class="row g-3">
                @foreach (var category in categories.Take(8))
                {
                    <div class="col-6 col-md-3">
                        <a href="@Url.Action("Category", "Home", new { categorySlug = category.Slug })"
                           class="text-decoration-none">
                            <div class="card h-100 border-0 shadow-sm hover-card">
                                <div class="card-body text-center">
                                    <div class="fs-1 mb-2">@category.Icon</div>
                                    <h6 class="card-title mb-0 text-dark">@category.Name</h6>
                                </div>
                            </div>
                        </a>
                    </div>
                }
            </div>
        </section>
    }

    <!-- Funcionalidades -->
    @if (tenant.Features.Any())
    {
        <section class="mb-5">
            <h2 class="text-center mb-4">@featuresHeadline</h2>
            <div class="row g-4">
                @foreach (var feature in tenant.Features)
                {
                    <div class="col-md-4">
                        <div class="text-center">
                            <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                                <i class="fs-2 text-primary">@feature.Icon</i>
                            </div>
                            <h5>@feature.Title</h5>
                            <p class="text-muted">@feature.Description</p>
                        </div>
                    </div>
                }
            </div>
        </section>
    }

    <!-- Páginas Recentes -->
    @if (recentPages.Any())
    {
        <section class="mb-5">
            <h2 class="text-center mb-4">Quem já usa o @tenant.SiteName</h2>
            <div class="row g-3">
                @foreach (var page in recentPages)
                {
                    <div class="col-md-4">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body text-center">
                                @if (!string.IsNullOrEmpty(page.ProfileImageId))
                                {
                                    <img src="@(page.ProfileImageUrl)" alt="@(page.DisplayName)"
                                         class="rounded-circle mb-3" style="width: 60px; height: 60px; object-fit: cover;">
                                }
                                else
                                {
                                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3"
                                         style="width: 60px; height: 60px;">
                                        <i class="fas fa-id-card text-primary"></i>
                                    </div>
                                }
                                <h6 class="card-title">@(page.DisplayName)</h6>
                                <small class="text-muted text-capitalize">@(page.Category)</small>
                                <div class="mt-2">
                                    <a href="~/@(page.Category)/@(page.Slug)" target="_blank"
                                       class="btn btn-sm btn-outline-primary">
                                        Ver Página
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </section>
    }

    <!-- CTA Final -->
    <section class="text-center py-5 bg-light rounded-3 mb-5">
        <div class="container">
            <h2 class="mb-3">@tenant.CtaHeadline</h2>
            <p class="lead mb-4 text-muted">
                @tenant.CtaDescription
            </p>
            @if (User.Identity?.IsAuthenticated == true)
            {
                <a asp-controller="Admin" asp-action="Dashboard" class="btn btn-primary btn-lg">
                    @tenant.CtaButtonText
                </a>
            }
            else
            {
                <a asp-controller="Auth" asp-action="Login" class="btn btn-primary btn-lg">
                    @tenant.CtaButtonText
                </a>
            }
        </div>
    </section>
</div>

@section Styles {
    <style>
        .hero-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .hover-card {
            transition: transform 0.2s ease-in-out;
        }

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