<section class="auth-visual relative hidden min-h-screen overflow-hidden lg:block lg:w-[54%]" aria-label="BrandX ERP platform benefits">
    <img src="{{ asset('images/auth/govix-dubai-auth.png') }}" alt="Bright Dubai office overlooking the Downtown skyline" class="absolute inset-0 h-full w-full object-cover object-[58%_center]">
    <div class="auth-visual-wash absolute inset-0"></div>
    <div class="auth-wave-lines absolute -left-24 -top-24 h-64 w-[38rem] opacity-40"></div>
    <div class="auth-visual-curve absolute inset-y-0 right-0 w-32"></div>

    <div class="relative z-10 flex min-h-screen flex-col px-[8.5%] py-[7vh]">
        <div class="my-auto max-w-[560px] -translate-y-4">
            <h1 class="text-[clamp(2rem,3vw,3.05rem)] font-bold leading-[1.12] tracking-[-0.035em] text-[#0b1f38]">
                Powering Typing Centers.
                <span class="mt-1 block text-emerald-600">Delivering Government Services.</span>
            </h1>
            <p class="mt-6 max-w-[500px] text-[clamp(.95rem,1.15vw,1.2rem)] leading-7 text-slate-600">
                BrandX ERP is built for UAE typing centers to manage government services, operations and customer experience—effortlessly.
            </p>

            <div class="mt-8 max-w-[400px] space-y-2">
                <div class="auth-benefit flex items-center gap-4 border-b border-slate-300/80 pb-3">
                    <span class="auth-benefit-icon">✓</span>
                    <span><strong>Secure & Compliant</strong><small>UAE data privacy aligned and enterprise-grade security.</small></span>
                </div>
                <div class="auth-benefit flex items-center gap-4 border-b border-slate-300/80 py-3">
                    <span class="auth-benefit-icon">◇</span>
                    <span><strong>All-in-One Operations</strong><small>Services, documents, payments, staff and reports in one place.</small></span>
                </div>
                <div class="auth-benefit flex items-center gap-4 pt-3">
                    <span class="auth-benefit-icon">◎</span>
                    <span><strong>Built for Every Role</strong><small>Branches, receptionists, typists, cashiers and admins.</small></span>
                </div>
            </div>
        </div>

        <div class="auth-trust-badge inline-flex w-fit items-center gap-4 rounded-2xl border border-white/80 bg-white/90 px-5 py-4 text-xs text-[#0b1f38] shadow-xl backdrop-blur">
            <span class="grid h-10 w-10 place-items-center rounded-xl border border-emerald-100 bg-emerald-50 text-lg font-bold text-emerald-600">✓</span>
            <span class="font-semibold leading-5">Trusted by typing centers<br>across the UAE</span>
            <span class="h-9 w-px bg-slate-300"></span>
            <span class="relative h-9 w-9 overflow-hidden rounded-full border border-slate-200 bg-white" aria-label="United Arab Emirates">
                <span class="absolute inset-y-0 left-0 w-1/3 bg-red-600"></span>
                <span class="absolute right-0 top-0 h-1/3 w-2/3 bg-green-600"></span>
                <span class="absolute right-0 top-1/3 h-1/3 w-2/3 bg-white"></span>
                <span class="absolute bottom-0 right-0 h-1/3 w-2/3 bg-black"></span>
            </span>
        </div>
    </div>
</section>
