@using Indotalent.Shared.Consts
@inherits LayoutComponentBase
@inject NavigationManager Navigation

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudPopoverProvider />

<style>
    @@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;450;500;600;700;800&display=swap');

    *, *::before, *::after { box-sizing: border-box; }

    /* ===== SPLIT CONTAINER ===== */
    .auth-split-container {
        display: flex;
        min-height: 100vh;
        font-family: "Poppins", sans-serif;
    }

    /* ===== LEFT PANEL - BRANDING ===== */
    .auth-left-panel {
        display: none;
        position: relative;
        overflow: hidden;
        background: linear-gradient(135deg, #7C3AED, #8B5CF6, #6D28D9);
    }

    .auth-left-panel::before {
        content: '';
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        top: -120px;
        right: -180px;
    }

    .auth-left-panel::after {
        content: '';
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.04);
        bottom: -60px;
        left: -80px;
    }

    .auth-left-content {
        position: relative;
        z-index: 1;
        max-width: 26rem;
        padding: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
    }

    .auth-brand-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .auth-brand-icon {
        width: 3rem;
        height: 3rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
        cursor: pointer;
        transition: background 0.2s;
        flex-shrink: 0;
    }

    .auth-brand-icon:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .auth-brand-icon svg {
        width: 1.75rem;
        height: 1.75rem;
        color: #ffffff;
    }

    .auth-brand-name {
        font-size: 1.375rem;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.2;
    }

    .auth-brand-subtitle {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.65);
    }

    .auth-welcome-title {
        font-size: 1.75rem;
        font-weight: 700;
        color: #ffffff;
        line-height: 1.3;
        margin: 0;
    }

    .auth-feature-list {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .auth-feature-item {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.875rem;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 0.5rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .auth-feature-icon {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 0.375rem;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .auth-feature-icon svg {
        width: 0.875rem;
        height: 0.875rem;
        color: #ffffff;
    }

    .auth-feature-text-title {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #ffffff;
    }

    .auth-feature-text-desc {
        font-size: 0.71875rem;
        color: rgba(255, 255, 255, 0.65);
        margin-top: 0.0625rem;
    }

    /* ===== RIGHT PANEL - FORM AREA ===== */
    .auth-right-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 1.5rem;
    }

    .auth-form-wrapper {
        width: 100%;
        max-width: 28rem;
    }

    .auth-card {
        border-radius: 1rem !important;
        border: 1px solid #E2E8F0 !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02) !important;
        overflow: visible !important;
    }

    .auth-card .mud-card-content {
        padding: 2rem !important;
    }

    .auth-card-footer {
        text-align: center;
        padding: 1.25rem 1rem 0.5rem 1rem;
    }

    .auth-card-footer-text {
        font-size: 0.75rem;
        color: #94A3B8;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    /* ===== MOBILE BRAND STRIP ===== */
    .auth-mobile-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
        padding: 0.75rem 1rem;
        margin-bottom: 1.5rem;
    }

    .auth-mobile-brand-icon {
        width: 2.5rem;
        height: 2.5rem;
        background: #8B5CF6;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .auth-mobile-brand-icon svg {
        width: 1.5rem;
        height: 1.5rem;
        color: #ffffff;
    }

    .auth-mobile-brand-name {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1E293B;
    }

    /* ===== RESPONSIVE ===== */
    @@media (min-width: 1024px) {
        .auth-left-panel {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
        }

        .auth-right-panel {
            width: 50%;
            padding: 3rem 4rem;
        }

        .auth-mobile-brand {
            display: none;
        }
    }

    @@media (min-width: 1280px) {
        .auth-right-panel {
            padding: 4rem 5rem;
        }

        .auth-left-content {
            padding: 4rem;
        }
    }
</style>

<div class="auth-split-container">

    <!-- ===== LEFT PANEL: BRANDING ===== -->
    <div class="auth-left-panel">
        <div class="auth-left-content">
            <div class="auth-brand-row">
                <div class="auth-brand-icon" @onclick="NavigateToHome">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <div>
                    <div class="auth-brand-name">@GlobalConsts.AppName</div>
                    <div class="auth-brand-subtitle">Enterprise Application Platform</div>
                </div>
            </div>

            <h2 class="auth-welcome-title">One Platform,<br/>All Your Business</h2>

            <div class="auth-feature-list">
                <div class="auth-feature-item">
                    <div class="auth-feature-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25A2.25 2.25 0 0113.5 8.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="auth-feature-text-title">Inventory & Procurement</div>
                        <div class="auth-feature-text-desc">Products, warehouses, purchase orders</div>
                    </div>
                </div>
                <div class="auth-feature-item">
                    <div class="auth-feature-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5 0h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375M20.25 18v-.75c0-.414.336-.75.75-.75h.75M6 12h.008v.008H6V12zm3 0h.008v.008H9V12zm3 0h.008v.008H12V12z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="auth-feature-text-title">Sales & Orders</div>
                        <div class="auth-feature-text-desc">Invoices, payments, customer management</div>
                    </div>
                </div>
                <div class="auth-feature-item">
                    <div class="auth-feature-icon">
                        <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z"/>
                        </svg>
                    </div>
                    <div>
                        <div class="auth-feature-text-title">Reports & Analytics</div>
                        <div class="auth-feature-text-desc">Real-time dashboards and data insights</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== RIGHT PANEL: FORM AREA ===== -->
    <div class="auth-right-panel">
        <div class="auth-form-wrapper">

            <!-- Mobile Brand Strip -->
            <div class="auth-mobile-brand">
                <div class="auth-mobile-brand-icon">
                    <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                    </svg>
                </div>
                <span class="auth-mobile-brand-name">@GlobalConsts.AppName</span>
            </div>

            <!-- Form Card -->
            <MudCard Elevation="0" Class="auth-card">
                <MudCardContent>
                    @Body
                </MudCardContent>
            </MudCard>

            <!-- Footer Copyright -->
            <div class="auth-card-footer">
                <span class="auth-card-footer-text">
                    © @DateTime.Now.Year @GlobalConsts.AppInitial. ALL RIGHTS RESERVED.
                </span>
            </div>
        </div>
    </div>
</div>

@code {
    private void NavigateToHome()
    {
        Navigation.NavigateTo("/", forceLoad: true);
    }
}