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

@*
    EN: Customer registration page — split panel layout, phone + social registration.
    VI: Trang đăng ký Khách hàng — layout chia đôi, đăng ký bằng SĐT + mạng xã hội.
    Design: pencil-design/src/pages/tPOS/auth/register/customer-desktop.pen
*@

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

<div class="auth-page--split">
    <BrandPanel PanelClass="auth-brand-panel--dark"
                LogoText="G"
                Title="@L["Auth_RegCustomer_BrandTitle"]"
                Description="@L["Auth_RegCustomer_BrandDesc"]"
                ShowStats="false"
                Features="@_features" />
    
    <div class="auth-form-panel">
        <AuthCard Title="@L["Auth_RegCustomer_Title"]"
                  Subtitle="@L["Auth_RegCustomer_Subtitle"]"
                  Transparent="true">
            <ChildContent>
                <div class="auth-form">
                    <AuthInput Label="@L["Auth_RegCustomer_NameLabel"]"
                               InputType="text"
                               Placeholder="@L["Auth_RegCustomer_NamePlaceholder"]"
                               PrefixIcon="user"
                               InputId="reg-name"
                               AutoComplete="name" />
                    
                    <div class="auth-field">
                        <label class="auth-label">@L["Auth_RegCustomer_PhoneLabel"]</label>
                        <div class="auth-phone-group">
                            <span class="auth-phone-prefix">🇻🇳 +84</span>
                            <input type="tel"
                                   class="auth-phone-input"
                                   placeholder="@L["Auth_RegCustomer_PhonePlaceholder"]"
                                   id="reg-phone"
                                   autocomplete="tel" />
                        </div>
                    </div>
                    
                    <AuthInput Label="@L["Auth_RegCustomer_EmailLabel"]"
                               InputType="email"
                               Placeholder="@L["Auth_RegCustomer_EmailPlaceholder"]"
                               PrefixIcon="mail"
                               InputId="reg-email"
                               AutoComplete="email" />
                    
                    <div class="auth-checkbox-row">
                        <input type="checkbox" id="reg-terms" />
                        <label for="reg-terms">
                            @L["Auth_RegCustomer_Terms"] <a href="/terms">@L["Auth_RegCustomer_TermsLink"]</a>
                            & <a href="/privacy">@L["Auth_RegCustomer_PrivacyLink"]</a>
                        </label>
                    </div>
                </div>
                
                <AuthButton Variant="orange" IconName="user-plus">
                    @L["Auth_RegCustomer_Submit"]
                </AuthButton>
                
                <SocialLogin DividerText="@L["Auth_RegCustomer_SocialDivider"]" ShowZalo="true" />
            </ChildContent>
            <FooterContent>
                <span class="auth-footer-text">
                    @L["Auth_RegCustomer_HasAccount"] <a href="/auth/login/customer">@L["Auth_RegCustomer_Login"]</a>
                </span>
            </FooterContent>
        </AuthCard>
    </div>
</div>

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

    protected override void OnInitialized()
    {
        _features = new List<string>
        {
            L["Auth_RegCustomer_Feature1"],
            L["Auth_RegCustomer_Feature2"],
            L["Auth_RegCustomer_Feature3"],
            L["Auth_RegCustomer_Feature4"]
        };
    }
}
