@if (modalService.isOpen()) {
<div class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4 transition-all">

    <div
        class="bg-white w-full max-w-3xl rounded-2xl sm:rounded-3xl shadow-2xl border border-slate-100 overflow-hidden flex flex-col max-h-[90vh]">

        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50/50">
            <div class="flex items-center space-x-2">
                @if (modalService.step() === 2) {
                <button (click)="modalService.backToCategories()"
                    class="p-1 rounded-lg hover:bg-slate-200/60 text-slate-600 transition-colors">
                    <svg lucideChevronLeft class="w-5 h-5"></svg>
                </button>
                }
                <h3 class="text-base font-bold text-slate-800">
                    {{ modalService.step() === 1 ? 'Select Your Solution Branch' : (modalService.selectedCategory() ===
                    'event' ? 'Event Management Solutions' : 'Business Management Solutions') }}
                </h3>
            </div>
            <button (click)="modalService.closeModal()"
                class="p-1.5 rounded-lg hover:bg-slate-200/60 text-slate-500 transition-colors">
                <svg lucideX class="w-5 h-5"></svg>
            </button>
        </div>

        <!-- Body -->
        <div class="p-6 overflow-y-auto space-y-6">

            <!-- STEP 1: Main Category Selection -->
            @if (modalService.step() === 1) {
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <div (click)="modalService.selectCategory('event')"
                    class="group relative p-6 rounded-2xl border-2 border-slate-100 bg-white hover:border-primary hover:shadow-lg transition-all cursor-pointer flex flex-col justify-between">
                    <div class="space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-colors">
                            <svg lucideCalendar class="w-6 h-6"></svg>
                        </div>
                        <div>
                            <h4
                                class="text-lg font-extrabold text-slate-900 group-hover:text-primary transition-colors">
                                Event Management</h4>
                            <p class="text-xs text-slate-500 mt-1 leading-relaxed">Conferences, exhibitions, stall
                                layouts, trade fairs, and attendee check-ins.</p>
                        </div>
                    </div>
                    <div class="pt-6 flex items-center text-xs font-bold text-primary">
                        <span>Explore Event Solutions (2)</span>
                        <svg lucideArrowRight
                            class="w-4 h-4 ml-1.5 transform group-hover:translate-x-1 transition-transform"></svg>
                    </div>
                </div>

                <div (click)="modalService.selectCategory('business')"
                    class="group relative p-6 rounded-2xl border-2 border-slate-100 bg-white hover:border-primary hover:shadow-lg transition-all cursor-pointer flex flex-col justify-between">
                    <div class="space-y-4">
                        <div
                            class="w-12 h-12 rounded-xl bg-primary/10 text-primary flex items-center justify-center group-hover:bg-primary group-hover:text-white transition-colors">
                            <svg lucideBuilding2 class="w-6 h-6"></svg>
                        </div>
                        <div>
                            <h4
                                class="text-lg font-extrabold text-slate-900 group-hover:text-primary transition-colors">
                                Business Management</h4>
                            <p class="text-xs text-slate-500 mt-1 leading-relaxed">Digital product catalogues, customer
                                reward systems, and membership workflows.</p>
                        </div>
                    </div>
                    <div class="pt-6 flex items-center text-xs font-bold text-primary">
                        <span>Explore Business Solutions (3)</span>
                        <svg lucideArrowRight
                            class="w-4 h-4 ml-1.5 transform group-hover:translate-x-1 transition-transform"></svg>
                    </div>
                </div>

            </div>
            }

            <!-- STEP 2: Sub-Solution Selection (Auth Guarded) -->
            @if (modalService.step() === 2) {
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                @if (modalService.selectedCategory() === 'event') {
                <div (click)="chooseSolution('registration', '/get-started')"
                    class="p-5 rounded-xl border border-slate-200 hover:border-primary hover:shadow-md transition-all cursor-pointer flex items-start space-x-4">
                    <div class="p-3 rounded-lg bg-emerald-50 text-emerald-600 shrink-0">
                        <svg lucideTicket class="w-5 h-5"></svg>
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-slate-900">Registration & Ticketing</h5>
                        <p class="text-xs text-slate-500 mt-1">Conferences, workshops, and sports events with QR digital
                            passes.</p>
                    </div>
                </div>

                <div (click)="chooseSolution('exhibition', '/get-started')"
                    class="p-5 rounded-xl border border-slate-200 hover:border-primary hover:shadow-md transition-all cursor-pointer flex items-start space-x-4">
                    <div class="p-3 rounded-lg bg-blue-50 text-blue-600 shrink-0">
                        <svg lucideStore class="w-5 h-5"></svg>
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-slate-900">Exhibition & Stall Management</h5>
                        <p class="text-xs text-slate-500 mt-1">Expos, trade fairs, stall layouts, and exhibitor product
                            displays.</p>
                    </div>
                </div>
                }

                @if (modalService.selectedCategory() === 'business') {
                <div (click)="chooseSolution('e-catalogue', '/get-started')"
                    class="p-5 rounded-xl border border-slate-200 hover:border-primary hover:shadow-md transition-all cursor-pointer flex items-start space-x-4">
                    <div class="p-3 rounded-lg bg-purple-50 text-purple-600 shrink-0">
                        <svg lucideBookOpen class="w-5 h-5"></svg>
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-slate-900">E-Catalogue</h5>
                        <p class="text-xs text-slate-500 mt-1">Digital paperless product & service showcasing via QR
                            code.</p>
                    </div>
                </div>

                <div (click)="chooseSolution('reward', '/get-started')"
                    class="p-5 rounded-xl border border-slate-200 hover:border-primary hover:shadow-md transition-all cursor-pointer flex items-start space-x-4">
                    <div class="p-3 rounded-lg bg-amber-50 text-amber-600 shrink-0">
                        <svg lucideGift class="w-5 h-5"></svg>
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-slate-900">Reward System</h5>
                        <p class="text-xs text-slate-500 mt-1">QR points, earn & redeem mechanics, and customer loyalty
                            tracking.</p>
                    </div>
                </div>

                <div (click)="chooseSolution('membership', '/get-started')"
                    class="p-5 rounded-xl border border-slate-200 hover:border-primary hover:shadow-md transition-all cursor-pointer flex items-start space-x-4 md:col-span-2">
                    <div class="p-3 rounded-lg bg-indigo-50 text-indigo-600 shrink-0">
                        <svg lucideUsers class="w-5 h-5"></svg>
                    </div>
                    <div>
                        <h5 class="text-sm font-bold text-slate-900">Membership System</h5>
                        <p class="text-xs text-slate-500 mt-1">Clubs, associations, subscriptions, and digital
                            membership cards.</p>
                    </div>
                </div>
                }

            </div>
            }

        </div>
    </div>
</div>
}

<!-- Embedded Auth Dialog for Unauthenticated Users -->
@if (isAuthModalOpen) {
<app-auth-dialog (authenticated)="onAuthSuccess()" (closed)="closeAuthModal()">
</app-auth-dialog>
}