@if (isBrowser) {
<ngb-carousel #carousel [showNavigationIndicators]="true" [interval]="5000" [pauseOnHover]="false" [keyboard]="true"
    [wrap]="true" class="home_banner-carousel" (slide)="onSlide($event)">
    @for (banner of banners(); track banner.id || $index) {
    <ng-template ngbSlide>
        <div class="home_banner">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="home_banner-a">
                            @if (banner.badges && banner.badges.length > 0) {
                            <span>
                                <mat-icon>workspace_premium</mat-icon> {{ banner.badges[0] }}
                            </span>
                            }
                            <h1>{{ banner.title }}</h1>
                            <p>{{ banner.subtitle }}</p>

                            <ul>
                                <li *ngFor="let item of banner.checklist; let i = index">
                                    <!-- @if (i === 0) {
                                    <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path
                                            d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
                                    </svg>
                                    } @else if (i === 1) {
                                    <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path
                                            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" />
                                    </svg>
                                    } @else if (i === 2) {
                                    <svg class="feature-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round">
                                        <path
                                            d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526" />
                                        <circle cx="12" cy="8" r="6" />
                                    </svg>
                                    } @else {
                                    <mat-icon>check_circle</mat-icon>
                                    } -->
                                    {{ item }}
                                </li>
                            </ul>
                               @if (banner.id === 19) {
                               <button style="margin-right: 10px;" type="button" (click)="openApplyPagebannernew()">Know More
                                <mat-icon>arrow_forward</mat-icon></button>
                               }
                            <button type="button" (click)="openApplyPagebanner(banner.link)">{{ banner.ctaLabel }}
                                <mat-icon>arrow_forward</mat-icon></button>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="home_banner-b">
                            <!-- Main Background Image (Phone/UPI) -->
                            <div class="banner-main-image-wrapper">
                                <img [src]="banner.heroImage2 || 'assets/images/upi-payment-Bz-9uih-.png'"
                                    [attr.alt]="banner.title + ' UPI experience preview'" class="main-img" priority>
                            </div>

                            <!-- Floating Badge: Happy Customers -->
                            @if (banner.label1) {
                            <div class="floating-badge badge-customers">
                                <div class="badge-content">
                                    <span class="highlight-text">{{ banner.label1.split(',')[0] }}</span>
                                    <span class="sub-text">{{ banner.label1.split(',')[1] }}</span>
                                </div>
                            </div>
                            }

                            <!-- Floating Badge: UPI Ready -->
                            @if (banner.label2) {
                            <div class="floating-badge badge-upi">
                                <div class="badge-content">
                                    <span class="highlight-text warning">{{ banner.label2.split(',')[0] }}</span>
                                    <span class="sub-text">{{ banner.label2.split(',')[1] }}</span>
                                </div>
                            </div>
                            }

                            <!-- Floating Card Image -->
                            <div class="floating-card">
                                <img [src]="banner.heroImage" [attr.alt]="banner.title + ' credit card visual'" title="Credit card banner" class="card-img">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ng-template>
    }
</ngb-carousel>
}

@if (!isBrowser) {
<!-- Server-render fallback: render nothing to avoid timers during SSR/hydration -->
<div class="home_banner-placeholder"></div>
}

<div id="offers">
    @if (offerBanner(); as banner) {
    <div class="home_banner-c">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <ul>
                        <li><mat-icon class="big-icon">workspace_premium</mat-icon></li>
                        <li>
                            <p><mat-icon>stars_2</mat-icon> {{ banner.title }}</p>
                            <h4>{{ banner.description }}</h4>
                        </li>
                    </ul>
                </div>
                <div class="col-lg-4 offer-action-col">
                    <button type="button" (click)="openApplyPage(banner.link)">{{ banner.ctaLabel }}
                        <mat-icon>arrow_forward</mat-icon></button>
                </div>
            </div>
        </div>
    </div>
    }
</div>