@page "/services"

<div class="services-page">
    <div class="services-header">
        <h1>Our Services</h1>
        <p class="payoff-text">Bespoke technical solutions from infrastructure to the handheld.</p>
    </div>

    <div class="category-nav">
        <button class="nav-btn @(activeTab == "dev" ? "active" : "")" @onclick='() => activeTab = "dev"'>Software Development</button>
        <button class="nav-btn @(activeTab == "infra" ? "active" : "")" @onclick='() => activeTab = "infra"'>Infrastructure & DevOps</button>
        <button class="nav-btn @(activeTab == "expert" ? "active" : "")" @onclick='() => activeTab = "expert"'>Specialized & Advisory</button>
    </div>

    <div class="services-grid">
        @if (activeTab == "dev")
        {
            <div class="service-card border-dev">
                <h3>
                    <svg class="service-icon icon-dev" viewBox="0 0 24 24"><path d="M20,18H4V6H20M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4M12,17L10,15L12,13L14,15L12,17M18,17L16,15L18,13L20,15L18,17M6,17L4,15L6,13L8,15L6,17Z" /></svg>
                    Desktop Applications
                </h3>
                <p>We specialize in engineering high-performance, native desktop software tailored for Windows, macOS, and Linux environments. Our development process prioritizes resource efficiency and hardware integration.</p>
                <ul class="service-benefits">
                    <li>Native performance for Windows, Mac, and Linux.</li>
                    <li>Industrial system automation integration.</li>
                    <li>Zero-bloat architecture for mission-critical tasks.</li>
                </ul>
            </div>
            <div class="service-card border-dev">
                <h3>
                    <svg class="service-icon icon-dev" viewBox="0 0 24 24"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1M12,20A1,1 0 0,1 11,19A1,1 0 0,1 12,18A1,1 0 0,1 13,19A1,1 0 0,1 12,20Z" /></svg>
                    Smartphone Apps
                </h3>
                <p>Modernize your commercial workflows with robust, cross-platform Android and iOS applications. We focus on secure, scalable mobile solutions that empower your workforce with real-time data.</p>
                <ul class="service-benefits">
                    <li>Cross-platform builds for Android and iPhone.</li>
                    <li>Commercial utility focus over consumer gaming.</li>
                    <li>Seamless backend field data synchronization.</li>
                </ul>
            </div>
            <div class="service-card border-dev">
                <h3>
                    <svg class="service-icon icon-dev" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,12.28 18.22,11.78 18.06,11.3L19.07,10.29C20.24,9.12 20.24,7.22 19.07,6.05C17.9,4.88 16,4.88 14.83,6.05L11.29,9.59C10.12,10.76 10.12,12.66 11.29,13.83L10.59,13.41M5.71,19.78C3.76,17.83 3.76,14.66 5.71,12.71L7.22,11.22C7.21,11.72 7.3,12.22 7.46,12.7L6.44,13.71C5.27,14.88 5.27,16.78 6.44,17.95C7.61,19.12 9.5,19.12 10.67,17.95L14.21,14.41C15.38,13.24 15.38,11.34 14.21,10.17L14.92,10.59C14.5,10.2 14.5,9.56 14.92,9.17C15.31,8.78 15.95,8.78 16.34,9.17C18.29,11.12 18.29,14.29 16.34,16.24L12.78,19.78C10.83,21.73 7.66,21.73 5.71,19.78Z" /></svg>
                    Web API & Apps
                </h3>
                <p>We architect scalable digital ecosystems using industry-standard protocols. Our builds feature OIDC authentication and fully interactive documentation for rapid developer integration.</p>
                <ul class="service-benefits">
                    <li>Secure OIDC-backed authentication.</li>
                    <li>High-availability ingestion portals.</li>
                    <li>Architecture designed for horizontal growth.</li>
                </ul>
            </div>
        }
        else if (activeTab == "infra")
        {
            <div class="service-card border-infra">
                <h3>
                    <svg class="service-icon icon-infra" viewBox="0 0 24 24"><path d="M4,17H20V15H4V17M4,13H20V11H4V13M4,9H20V7H4V9M2,3H22V5H2V3M2,19H22V21H2V19Z" /></svg>
                    Server Configuration
                </h3>
                <p>Ensure your virtual infrastructure is hardened and production-ready. We focus on securing client-owned machines through rigorous security audits and proactive hardening.</p>
                <ul class="service-benefits">
                    <li>Deep security auditing and hardening.</li>
                    <li>Comprehensive efficiency sanity checks.</li>
                    <li>Bank-grade self-hosting standards.</li>
                </ul>
            </div>
            <div class="service-card border-infra">
                <h3>
                    <svg class="service-icon icon-infra" viewBox="0 0 24 24"><path d="M3,15V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V15H19V19H5V15H3M12,16L17,11H14V3H10V11H7L12,16Z" /></svg>
                    Docker App Server
                </h3>
                <p>Deploy with confidence using containerized environments. We build robust Docker server instances utilizing Dockhand and Howzer for automated lifecycle management.</p>
                <ul class="service-benefits">
                    <li>Private communication via Pangolin Tunneling.</li>
                    <li>Automated tool-based lifecycle management.</li>
                    <li>Shielded infrastructure architecture.</li>
                </ul>
            </div>
            <div class="service-card border-infra">
                <h3>
                    <svg class="service-icon icon-infra" viewBox="0 0 24 24"><path d="M12,2L4.5,20.29L5.21,21L12,18L18.79,21L19.5,20.29L12,2Z" /></svg>
                    K3s Cluster
                </h3>
                <p>We implement HA K3s orchestrations designed to rival bank infrastructure. Our builds leverage external databases to ensure uptime even during hardware failures.</p>
                <ul class="service-benefits">
                    <li>High Availability (HA) cluster configurations.</li>
                    <li>Open-source visibility through Headlamp.</li>
                    <li>Resilient startup logic and database backends.</li>
                </ul>
            </div>
        }
        else if (activeTab == "expert")
        {
            <div class="service-card border-expert">
                <h3>
                    <svg class="service-icon icon-expert" viewBox="0 0 24 24"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.1,7 14,7.9 14,9C14,10.1 13.1,11 12,11C10.9,11 10,10.1 10,9C10,7.9 10.9,7 12,7M12,13C13.33,13 16,13.67 16,15V16H8V15C8,13.67 10.67,13 12,13Z" /></svg>
                    Identity Services
                </h3>
                <p>Take control of your organization’s security with dedicated identity management. We specialize in Authentik and Keycloak for a centralized "Zero-Trust" gateway.</p>
                <ul class="service-benefits">
                    <li>Private Keycloak and Authentik deployment.</li>
                    <li>Sovereign data management via dedicated backends.</li>
                    <li>Custom corporate branding options.</li>
                </ul>
            </div>
            <div class="service-card border-expert">
                <h3>
                    <svg class="service-icon icon-expert" viewBox="0 0 24 24"><path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21.18L19,17.18V13.18L12,17.18L5,13.18Z" /></svg>
                    Consultation
                </h3>
                <p>Leverage expert advisory for AI integration and cybersecurity. We provide deep-dive code audits and tutorage in Python and C# for academic and professional excellence.</p>
                <ul class="service-benefits">
                    <li>Strategic advisory on AI and Security.</li>
                    <li>Specialized Tutorage for university researchers.</li>
                    <li>Professional code reviews on bank standards.</li>
                </ul>
            </div>
            <div class="service-card spotlight">
                <h3>
                    <svg class="service-icon icon-gold" viewBox="0 0 24 24"><path d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L5,8.09V15.91L12,19.85L19,15.91V8.09L12,4.15Z" /></svg>
                    Enterprise Turn-Key
                </h3>
                <p>Our ultimate service provides a complete digital transformation. We build a unified, high-availability ecosystem from infrastructure to custom applications ready for production.</p>
                <ul class="service-benefits">
                    <li>Full-stack builds from metal to handheld.</li>
                    <li>Integrated cloud clusters and secure tunneling.</li>
                    <li>Single-vendor accountability for the whole stack.</li>
                </ul>
            </div>
        }
    </div>
</div>

@code {
    private string activeTab = "dev";
}