@php
	$locale = $locale ?? app()->getLocale();

	// Field-name compatibility keeps existing page-builder data renderable.
	$eyebrow      = $data['eyebrow'][$locale]               ?? $data['subheading'][$locale] ?? '';
	$heading      = $data['heading'][$locale]               ?? '';
	$description  = $data['description'][$locale]           ?? '';
	$primaryText  = $data['primary_button_text'][$locale]   ?? $data['button_text'][$locale] ?? '';
	$primaryUrl   = $data['primary_button_url']             ?? $data['button_url']           ?? route('user.register');
	$secondaryText = $data['secondary_button_text'][$locale] ?? '';
	$secondaryUrl  = $data['secondary_button_url']           ?? route('home');

	// Heading: render optional accent words marked by __word__ wrappers.
	$renderedHeading = preg_replace_callback('/__(.+?)__/u', function ($m) {
		return '<em class="gdk-italic gdk-gold-text">'.e($m[1]).'</em>';
	}, e($heading));
	$renderedHeading = nl2br($renderedHeading);

	$trustBadges = $data['trust_badges'] ?? [];

	$vaultBrand    = $data['vault_brand']    ?? setting('site_title', 'ZilitPay');
	$vaultTier     = $data['vault_tier']     ?? __('VIRTUAL CARD');
	$vaultMonogram = $data['vault_monogram'] ?? strtoupper(substr(preg_replace('/\s+/u', '', (string) setting('site_title', 'ZilitPay')), 0, 2));
@endphp

<section class="gdk-hero" id="home">

	{{-- Art-deco fans --}}
	<div class="gdk-fan gdk-fan--tl" aria-hidden="true">
		<svg viewBox="0 0 200 200" fill="none" stroke="#9575FF" stroke-width="1">
			<g opacity=".6">
				<path d="M0 0 L200 60"/><path d="M0 0 L200 90"/><path d="M0 0 L200 120"/>
				<path d="M0 0 L200 150"/><path d="M0 0 L200 180"/>
				<path d="M0 0 L60 200"/><path d="M0 0 L90 200"/><path d="M0 0 L120 200"/>
				<path d="M0 0 L150 200"/><path d="M0 0 L180 200"/>
			</g>
			<circle cx="0" cy="0" r="40" stroke-opacity=".4"/>
			<circle cx="0" cy="0" r="70" stroke-opacity=".25"/>
		</svg>
	</div>
	<div class="gdk-fan gdk-fan--br" aria-hidden="true">
		<svg viewBox="0 0 200 200" fill="none" stroke="#9575FF" stroke-width="1">
			<g opacity=".6">
				<path d="M0 0 L200 60"/><path d="M0 0 L200 90"/><path d="M0 0 L200 120"/>
				<path d="M0 0 L200 150"/><path d="M0 0 L200 180"/>
				<path d="M0 0 L60 200"/><path d="M0 0 L90 200"/><path d="M0 0 L120 200"/>
			</g>
			<circle cx="0" cy="0" r="40" stroke-opacity=".4"/>
		</svg>
	</div>

	<div class="gdk-container">
		<div class="gdk-hero__grid">
			<div class="gdk-reveal">
				@if($eyebrow)
					<div class="gdk-hero__eyebrow gdk-eyebrow">{{ $eyebrow }}</div>
				@endif

				@if($heading)
					<h1 class="gdk-hero__title gdk-h-display">{!! $renderedHeading !!}</h1>
				@endif

				@if($description)
					<p class="gdk-hero__desc">{!! nl2br(e($description)) !!}</p>
				@endif

				<div class="gdk-hero__ctas">
					@if($primaryText)
						<a href="{{ $primaryUrl }}" class="gdk-btn gdk-btn--filled">
							{{ $primaryText }} <i class="fa-solid fa-arrow-right"></i>
						</a>
					@endif
					@if($secondaryText)
						<a href="{{ $secondaryUrl }}" class="gdk-btn gdk-btn--ghost">{{ $secondaryText }}</a>
					@endif
				</div>

				@if(!empty($trustBadges))
					<div class="gdk-trust">
						@foreach($trustBadges as $idx => $badge)
							@if($idx > 0)
								<span class="gdk-trust__dot"></span>
							@endif
							<span class="gdk-trust__item">
								<i class="{{ $badge['icon'] ?? 'fa-solid fa-shield-halved' }}"></i>{{ $badge['label'] ?? '' }}
							</span>
						@endforeach
					</div>
				@endif
			</div>

			<div class="gdk-vault gdk-reveal" role="img" aria-label="{{ __('Illustrative virtual card. Not for transactions.') }}">
				<div class="gdk-vault__card" aria-hidden="true">
					<div class="gdk-vault__rim"></div>
					<div class="gdk-vault__shine"></div>
					<div class="gdk-vault__head">
						<div class="gdk-vault__logo">
							<span class="gdk-logo__mark"></span>
							<span class="gdk-vault__brand-name">{{ $vaultBrand }}</span>
						</div>
						<div class="gdk-vault__tier">{{ $vaultTier }}</div>
					</div>
					<div class="gdk-vault__chip"><span></span></div>
					<div class="gdk-vault__number">
						<span>••••</span><span>••••</span><span>••••</span><span>••••</span>
					</div>
					<div class="gdk-vault__foot">
						<div class="gdk-vault__name"><small>{{ __('Illustrative card') }}</small>{{ __('Not for transactions') }}</div>
						<div class="gdk-vault__network" aria-hidden="true">
							<span></span><span></span>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</section>