@page "/auth/login/customer"
@page "/login"
@using WebClientTpos.Client.Components.Auth
@inherits AuthBase

@*
    EN: Customer login page — split panel layout, phone OTP + social login.
    VI: Trang đăng nhập Khách hàng — layout chia đôi, OTP điện thoại + social login.
    Design: pencil-design/src/pages/tPOS/auth/login/customer-desktop.pen
*@

<PageTitle>@L["Auth_Customer_PageTitle"]</PageTitle>

<div class="auth-page--split">
    <BrandPanel PanelClass="auth-brand-panel--dark"
                LogoText="G"
                Title="GoodGo"
                Description="@L["Auth_Customer_BrandDesc"]"
                ShowStats="false"
                Features="@_features" />
    
    <div class="auth-form-panel">
        <AuthCard Title="@L["Auth_Customer_Title"]"
                  Subtitle="@L["Auth_Customer_Subtitle"]"
                  Transparent="true">
            <ChildContent>
                <div class="auth-form">
                    <div class="auth-field">
                        <label class="auth-label">@L["Auth_Customer_PhoneLabel"]</label>
                        <div class="auth-phone-group">
                            <span class="auth-phone-prefix">🇻🇳 +84</span>
                            <input type="tel"
                                   class="auth-phone-input"
                                   placeholder="@L["Auth_Customer_PhonePlaceholder"]"
                                   id="customer-phone"
                                   autocomplete="tel" />
                        </div>
                    </div>
                </div>
                
                <AuthButton Variant="orange" IconName="arrow-right">
                    @L["Auth_Customer_Submit"]
                </AuthButton>
                
                <SocialLogin DividerText="@L["Auth_Customer_SocialDivider"]" ShowZalo="true" />
            </ChildContent>
            <FooterContent>
                <span class="auth-footer-text">
                    @L["Auth_Customer_NoAccount"] <a href="/auth/register/customer">@L["Auth_Customer_Register"]</a>
                </span>
                <p class="auth-disclaimer">
                    @L["Auth_Customer_Disclaimer"]
                    <a href="/terms">@L["Auth_Customer_Terms"]</a> &
                    <a href="/privacy">@L["Auth_Customer_Privacy"]</a>
                </p>
            </FooterContent>
        </AuthCard>
    </div>
</div>

@code {
    private List<string> _features = new();

    protected override void OnInitialized()
    {
        _features = new List<string>
        {
            L["Auth_Customer_Feature1"],
            L["Auth_Customer_Feature2"],
            L["Auth_Customer_Feature3"],
            L["Auth_Customer_Feature4"]
        };
    }
}
