@page "/"
@inject NavigationManager NavigationManager

<section class="hero-section" style="text-align: center; display: flex; flex-direction: column; align-items: center; padding-bottom: 80px;">
    <div class="hero-content">
        <h1 style="font-size: 4rem; font-weight: 800; margin-bottom: 10px;">
            Fast, <span style="color: var(--brand-blue);">Reliable</span> Technology Services
        </h1>
        <p style="color: var(--payoff-color); font-size: 1.25rem; margin-bottom: 50px;">
            Software Builds, Server (VPS) Configuration, Secure Tunnels, Private VPN, Private Cloud Builds
        </p>

        <div class="cta-container">
            <button class="btn-calltoaction-blue" @onclick="NavigateToShop" style="margin-right: 5;">Go to Shop</button>
            <button class="btn-calltoaction-white" @onclick="NavigateToServices">View Services</button>
        </div>
    </div>

    <!-- Highlights Section (The Red Rectangle Area) -->
    <div class="highlights-container">
        <!-- Item 1: Fast Turnaround -->
        <div class="highlight-item">
            <div class="highlight-icon icon-blue">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
            </div>
            <div class="highlight-title">Fast Turnaround</div>
            <div class="highlight-desc">Most builds and configurations deployed same day</div>
        </div>

        <!-- Item 2: Quality Guaranteed -->
        <div class="highlight-item">
            <div class="highlight-icon icon-green">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            </div>
            <div class="highlight-title">Quality Guaranteed</div>
            <div class="highlight-desc">Corporate-grade standards applied to every project</div>
        </div>

        <!-- Item 3: Expert Strategy -->
        <div class="highlight-item">
            <div class="highlight-icon icon-gold">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
            </div>
            <div class="highlight-title">Technical Strategy</div>
            <div class="highlight-desc">Deep expertise in .NET and Kubernetes ecosystems</div>
        </div>
    </div>
</section>

@code {
    private void NavigateToServices()
    {
        // Programmatic navigation to the specified route
        NavigationManager.NavigateTo("/services");
    }

    private void NavigateToShop()
    {
        // Programmatic navigation to the specified route
        NavigationManager.NavigateTo("/shop");
    }
}