@page "/"
@using TrafagSalesExporter.Services
@inject IUiTextService UiText

<PageTitle>@T("Trafag Cockpit", "Trafag Cockpit")</PageTitle>

<div class="home-shell">
    <div class="home-content">
        <svg class="home-manometer" viewBox="0 0 600 340" role="img" aria-label="Trafag cockpit manometer">
            <rect x="0" y="0" width="600" height="340" fill="#fff" />
            <path d="M70 260 A230 230 0 0 1 530 260" class="gauge-outer" />
            <path d="M115 260 A185 185 0 0 1 485 260" class="gauge-inner" />

            <line x1="126" y1="260" x2="95" y2="260" class="gauge-tick" />
            <line x1="177" y1="137" x2="155" y2="115" class="gauge-tick" />
            <line x1="300" y1="86" x2="300" y2="55" class="gauge-tick" />
            <line x1="423" y1="137" x2="445" y2="115" class="gauge-tick" />
            <line x1="474" y1="260" x2="505" y2="260" class="gauge-tick" />

            <text x="150" y="230" class="gauge-label">0</text>
            <text x="205" y="154" class="gauge-label">25</text>
            <text x="300" y="126" class="gauge-label">50</text>
            <text x="395" y="154" class="gauge-label">75</text>
            <text x="450" y="230" class="gauge-label">100</text>
            <text x="300" y="222" class="gauge-brand">TRAFAG</text>

            <g class="gauge-needle">
                <line x1="300" y1="260" x2="300" y2="96" class="needle-line" />
            </g>
            <circle cx="300" cy="260" r="28" fill="#050505" />
        </svg>
        <div class="home-welcome">@T("Willkommen im Trafag Analyse Dashboard", "Welcome to the Trafag Analytical Dashboard")</div>
    </div>
</div>

<style>
    .home-shell {
        min-height: calc(100vh - 112px);
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
    }

    .home-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .home-manometer {
        width: min(336px, 58vw);
        height: auto;
        display: block;
    }

    .home-welcome {
        color: #050505;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        letter-spacing: 0;
    }

    .gauge-outer,
    .gauge-inner,
    .gauge-tick,
    .needle-line {
        fill: none;
        stroke: #050505;
        stroke-linecap: round;
    }

    .gauge-outer {
        stroke-width: 16;
    }

    .gauge-inner {
        stroke-width: 4;
    }

    .gauge-tick {
        stroke-width: 7;
    }

    .gauge-label {
        fill: #050505;
        font-size: 24px;
        font-weight: 800;
        text-anchor: middle;
        dominant-baseline: middle;
    }

    .gauge-brand {
        fill: #050505;
        font-size: 28px;
        font-weight: 900;
        letter-spacing: 4px;
        text-anchor: middle;
    }

    .needle-line {
        stroke-width: 9;
    }

    .gauge-needle {
        transform-origin: 300px 260px;
        animation: home-gauge-sweep 6.2s infinite cubic-bezier(.42, 0, .2, 1);
    }

    @@keyframes home-gauge-sweep {
        0% { transform: rotate(-58deg); }
        9% { transform: rotate(-12deg); }
        18% { transform: rotate(43deg); }
        31% { transform: rotate(8deg); }
        44% { transform: rotate(68deg); }
        58% { transform: rotate(-35deg); }
        72% { transform: rotate(24deg); }
        86% { transform: rotate(56deg); }
        100% { transform: rotate(-58deg); }
    }
</style>

@code {
    private string T(string german, string english) => UiText.Text(german, english);
}