@page "/"
@inject IStringLocalizer<Home> L

<PageTitle>GoodGo - Enterprise AI Solutions</PageTitle>

<!-- Hero Section -->
<section class="hero-section">
    <h1 class="hero-headline">
        @((MarkupString)L["HeroHeadline"].Value)
    </h1>
    
    <p class="hero-subtext">
        @L["HeroSubtext"]
    </p>
    
    <div class="hero-actions">
        <a href="/solutions" class="btn-enterprise-primary">@L["ExploreSolutions"]</a>
        <a href="/contact" class="btn-enterprise-secondary">@L["ContactSales"]</a>
    </div>

    <div class="image-placeholder hero-image-placeholder">
        <span>Hero Image Placeholder</span>
    </div>
</section>

<!-- Trust Section -->
<section class="trust-section">
    <div class="trust-label">@L["TrustedBy"]</div>
    <div class="d-flex justify-center gap-8 mt-4" style="opacity: 0.5;">
        <MudText Typo="Typo.h5" Style="font-weight: 700; color: var(--text-tertiary);">ACME Corp</MudText>
        <MudText Typo="Typo.h5" Style="font-weight: 700; color: var(--text-tertiary);">GlobalTech</MudText>
        <MudText Typo="Typo.h5" Style="font-weight: 700; color: var(--text-tertiary);">Nebula</MudText>
        <MudText Typo="Typo.h5" Style="font-weight: 700; color: var(--text-tertiary);">Vertex</MudText>
    </div>
</section>

<!-- Solutions Grid -->
<section class="container">
    <div class="solutions-grid">
        
        <!-- Service 1: AI & Blockchain -->
        <div class="solution-card">
            <div class="image-placeholder service-icon-placeholder">
                <MudIcon Icon="@Icons.Material.Filled.Security" Size="Size.Large" />
            </div>
            <h3 class="solution-title">@L["Solution_AI_Title"]</h3>
            <p class="solution-desc">@L["Solution_AI_Desc"]</p>
            <a href="/solutions/core" class="nav-overlay-link" style="font-size: 1rem;">@L["LearnMore"] &rarr;</a>
        </div>

        <!-- Service 2: Data-Driven Marketing -->
        <div class="solution-card">
            <div class="image-placeholder service-icon-placeholder">
                <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Size="Size.Large" />
            </div>
            <h3 class="solution-title">@L["Solution_Marketing_Title"]</h3>
            <p class="solution-desc">@L["Solution_Marketing_Desc"]</p>
            <a href="/solutions/marketing" class="nav-overlay-link" style="font-size: 1rem;">@L["LearnMore"] &rarr;</a>
        </div>

        <!-- Service 3: Next-Gen Rewards -->
        <div class="solution-card">
            <div class="image-placeholder service-icon-placeholder">
                <MudIcon Icon="@Icons.Material.Filled.Loyalty" Size="Size.Large" />
            </div>
            <h3 class="solution-title">@L["Solution_Rewards_Title"]</h3>
            <p class="solution-desc">@L["Solution_Rewards_Desc"]</p>
            <a href="/solutions/rewards" class="nav-overlay-link" style="font-size: 1rem;">@L["LearnMore"] &rarr;</a>
        </div>

        <!-- Service 4: Multi-Industry POS -->
        <div class="solution-card">
            <div class="image-placeholder service-icon-placeholder">
                <MudIcon Icon="@Icons.Material.Filled.PointOfSale" Size="Size.Large" />
            </div>
            <h3 class="solution-title">@L["Solution_POS_Title"]</h3>
            <p class="solution-desc">@L["Solution_POS_Desc"]</p>
            <a href="/solutions/pos" class="nav-overlay-link" style="font-size: 1rem;">@L["LearnMore"] &rarr;</a>
        </div>
    </div>
</section>

<!-- Simple Footer -->
<footer style="border-top: 1px solid var(--border-subtle); padding: var(--space-8) 0; text-align: center; margin-top: var(--space-16); color: var(--text-tertiary);">
    <p>@L["FooterCopyright"]</p>
</footer>



