@php
	$heading = $data['heading'][$locale] ?? '';
	$highlightedHeading = highlightWord($heading);
	$_zpClassicBanner = function_exists('activeTheme') && activeTheme() === \App\Enums\Theme::Classic;
@endphp

<section class="hero-section hero-1 fix bg-cover {{ $_zpClassicBanner ? 'zp-cl-hero' : '' }}" style="background-image: url('{{ $_zpClassicBanner ? '' : asset($data['background_image'] ?? '') }}');" id="home">
	@if (!$_zpClassicBanner && !empty($data['shape_image_1']))
		<div class="hero-shape-1">
			<img src="{{ asset($data['shape_image_1']) }}" alt="Shape Image 1" loading="lazy">
		</div>
	@endif

	@if (!$_zpClassicBanner && !empty($data['shape_image_2']))
		<div class="hero-shape-2">
			<img src="{{ asset($data['shape_image_2']) }}" alt="Shape Image 2" loading="lazy">
		</div>
	@endif

	@if (!$_zpClassicBanner && !empty($data['shape_image_3']))
		<div class="hero-shape-3">
			<img src="{{ asset($data['shape_image_3']) }}" alt="Shape Image 3" loading="lazy">
		</div>
	@endif

	<div class="container">
		<div class="row g-4 align-items-center justify-content-between">
			<div class="col-lg-4">
				<div class="hero-content">
					<h6 class="wow fadeInUp">
						{{ $data['subheading'][$locale] ?? '' }}
					</h6>
					<h1 class="wow fadeInUp" data-wow-delay=".3s">
						{!! $highlightedHeading !!}
					</h1>
					<p class="wow fadeInUp" data-wow-delay=".5s">
						{!! nl2br(e($data['description'][$locale] ?? '')) !!}
					</p>
					@if (!empty($data['button_url']) && !empty($data['button_text'][$locale]))
						<div class="hero-button wow fadeInUp" data-wow-delay=".7s">
							<a href="{{ $data['button_url'] }}" class="theme-btn">
								{{ $data['button_text'][$locale] }}
							</a>
						</div>
					@endif
				</div>
			</div>
			<div class="col-lg-8 wow fadeInUp" data-wow-delay=".4s">
				@if($_zpClassicBanner)
					<div class="zp-cl-hero-visual" aria-label="Zilitpay premium virtual card">
						<div class="zp-cl-orbit" aria-hidden="true"></div>
						<div class="zp-cl-orbit zp-cl-orbit--two" aria-hidden="true"></div>
						<div class="zp-cl-card-stage">
							<div class="zp-cl-card-rotator">
								<div class="zp-cl-bank-card">
									<div class="zp-cl-card-face front">
										<div class="zp-cl-card-top">
											<span class="zp-cl-card-brand"><span class="zp-cl-brand__symbol" aria-hidden="true"><i></i><i></i><i></i></span>Zilitpay</span>
											<span class="zp-cl-tier">VIRTUAL CARD</span>
										</div>
										<div class="zp-cl-chip" aria-hidden="true"><span></span></div>
										<div class="zp-cl-number">5241&nbsp;8800&nbsp;2416&nbsp;7718</div>
										<div class="zp-cl-card-bottom">
											<div><small>CARDHOLDER</small><strong>ZILITPAY MEMBER</strong></div>
											<div class="zp-cl-network" aria-label="Card network"><i></i><i></i></div>
										</div>
										<div class="zp-cl-glint" aria-hidden="true"></div>
									</div>
									<div class="zp-cl-card-face back">
										<div class="zp-cl-magstripe"></div>
										<div class="zp-cl-signature"><span>ILLUSTRATIVE PREVIEW</span><i></i></div>
										<div class="zp-cl-card-brand" style="align-self:flex-end;">Zilitpay<span style="color:var(--zp-cl-lime)">.</span></div>
									</div>
								</div>
							</div>
						</div>
						<div class="zp-cl-float spend"><span class="zp-cl-float-mark">↗</span><span><small>SECURE PAYMENTS</small><strong>Premium fintech experience</strong></span></div>
						<div class="zp-cl-float balance"><span class="zp-cl-float-mark">Z</span><span><small>ZILITPAY CARD</small><strong>Fast • Secure • Modern</strong></span></div>
					</div>
				@else
					<div class="hero-image">
						<img src="{{ asset($data['hero_main_image']) }}" alt="Hero Main Image" loading="lazy">
					</div>
				@endif
			</div>
		</div>
	</div>
</section>