@{
    var isPreview = ViewBag.IsPreview as bool? ?? false;
    ViewData["Title"] = "BCards - Crie seu LinkTree Profissional";
    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 = isPreview ? "_Layout" : "_UserPageLayout";
}

<div class="hero-section bg-primary bg-gradient 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">
                    Crie sua página profissional em minutos
                </h1>
                <p class="lead mb-4">
                    A melhor alternativa ao LinkTree para profissionais e empresas no Brasil. 
                    Organize todos os seus links em uma página única e profissional.
                </p>
                <div class="d-flex gap-3 flex-wrap">
                    @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">
                            Começar Grátis
                        </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 BCards" 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 -->
    <section class="mb-5">
        <h2 class="text-center mb-4">Por que escolher o BCards?</h2>
        <div class="row g-4">
            <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">🎨</i>
                    </div>
                    <h5>Temas Profissionais</h5>
                    <p class="text-muted">Escolha entre diversos temas profissionais ou personalize as cores da sua página.</p>
                </div>
            </div>
            <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">📊</i>
                    </div>
                    <h5>Analytics Avançado</h5>
                    <p class="text-muted">Acompanhe quantas pessoas visitaram sua página e clicaram nos seus links.</p>
                </div>
            </div>
            <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">🔗</i>
                    </div>
                    <h5>URLs Organizadas</h5>
                    <p class="text-muted">Suas URLs são organizadas por categoria: vcart.me/corretor/seu-nome</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Páginas Recentes -->
    @if (recentPages.Any())
    {
        <section class="mb-5">
            <h2 class="text-center mb-4">Profissionais que confiam no BCards</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.ProfileImage))
                                {
                                    <img src="@(page.ProfileImage)" 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="fs-4 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">Pronto para começar?</h2>
            <p class="lead mb-4 text-muted">
                Crie sua página profissional agora mesmo e comece a organizar seus links.
            </p>
            @if (User.Identity?.IsAuthenticated == true)
            {
                <a asp-controller="Admin" asp-action="Dashboard" class="btn btn-primary btn-lg">
                    Criar Minha Página
                </a>
            }
            else
            {
                <a asp-controller="Auth" asp-action="Login" class="btn btn-primary btn-lg">
                    Começar Grátis
                </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>
}