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

	// Field-name compatibility (Classic → Golden fallbacks).
	$eyebrow       = $data['eyebrow'][$locale]        ?? $data['subheading'][$locale] ?? '';
	$heading       = $data['heading'][$locale]        ?? '';
	$description   = $data['description'][$locale]    ?? '';
	$renderedHeading = preg_replace_callback('/__(.+?)__/u', function ($m) {
		return '<em class="gdk-italic gdk-gold-text">'.e($m[1]).'</em>';
	}, e($heading));

	$leftItems  = $repeatedContents->slice(0, 3);
	$rightItems = $repeatedContents->slice(3, 3);

	// Resolve a triptych blurb's icon, title and text from either Golden or
	// Classic field names. Classic stores `feature_icon` as an image path; if
	// only that is present we emit it as <img>, otherwise we emit the FA class.
	$gdkResolveBlurb = function (array $rc, string $locale): array {
		$title = $rc['spfeat_title'][$locale] ?? $rc['feature_title'][$locale] ?? '';
		$text  = $rc['spfeat_text'][$locale]  ?? $rc['feature_text'][$locale]  ?? '';
		$icon  = $rc['spfeat_icon_class'] ?? null;
		$image = null;
		if (! $icon && ! empty($rc['feature_icon'])) {
			$candidate = $rc['feature_icon'];
			if (is_string($candidate) && str_contains($candidate, '/')) {
				$image = $candidate;
			} else {
				$icon = $candidate;
			}
		}

		return [
			'title' => $title,
			'text'  => $text,
			'icon'  => $icon ?? 'fa-solid fa-fingerprint',
			'image' => $image,
		];
	};
@endphp

<section class="gdk-section gdk-special">
	<div class="gdk-container">
		<div class="gdk-special__head gdk-reveal">
			@if($eyebrow)
				<div class="gdk-eyebrow">{{ $eyebrow }}</div>
			@endif
			@if($heading)
				<h2 class="gdk-h-section gdk-section-head__title">{!! $renderedHeading !!}</h2>
			@endif
			@if($description)
				<p class="gdk-lead gdk-lead--centered">{!! nl2br(e($description)) !!}</p>
			@endif
		</div>

		<div class="gdk-special__grid">
			{{-- Left column --}}
			<div class="gdk-special__col gdk-reveal">
				@foreach($leftItems as $repeatedContent)
					@php $b = $gdkResolveBlurb($repeatedContent->content_data ?? [], $locale); @endphp
					@if($b['title'] || $b['text'])
						<div class="gdk-spfeat gdk-spfeat--right">
							<span class="gdk-iconring">
								@if($b['image'])
									<img src="{{ asset($b['image']) }}" alt="" loading="lazy" width="22" height="22">
								@else
									<i class="{{ $b['icon'] }}"></i>
								@endif
							</span>
							<div>
								<h4 class="gdk-spfeat__title">{{ $b['title'] }}</h4>
								<p class="gdk-spfeat__txt">{!! nl2br(e($b['text'])) !!}</p>
							</div>
						</div>
					@endif
				@endforeach
			</div>

			{{-- Centre: illustrative virtual card, with no account or balance data --}}
			<div class="gdk-phone gdk-reveal" aria-hidden="true">
				<div class="gdk-phone__notch"></div>
				<div class="gdk-phone__screen">
					<div class="gdk-phone__head"><span>{{ setting('site_title', 'ZilitPay') }}</span><i class="fa-solid fa-shield-halved"></i></div>
					<div class="gdk-phone__hello">{{ __('Virtual card') }}</div>
					<div class="gdk-phone__name">{{ __('Illustrative preview') }}</div>
					<div class="gdk-phone__card gdk-phone__card--illustrative">
						<div class="gdk-phone__bal">{{ setting('site_title', 'ZilitPay') }}</div>
						<div class="gdk-phone__num">{{ __('VIRTUAL') }}</div>
						<div class="gdk-phone__illustration-number">•••• &nbsp; •••• &nbsp; •••• &nbsp; ••••</div>
						<div class="gdk-phone__bal">{{ __('Not for transactions') }}</div>
					</div>
					<div class="gdk-phone__list">
						<span><i class="fa-solid fa-arrow-right-arrow-left"></i> {{ __('Transfers') }}</span>
						<span><i class="fa-solid fa-wallet"></i> {{ __('Wallet') }}</span>
						<span><i class="fa-solid fa-lock"></i> {{ __('Security') }}</span>
					</div>
				</div>
			</div>

			{{-- Right column --}}
			<div class="gdk-special__col gdk-reveal">
				@foreach($rightItems as $repeatedContent)
					@php $b = $gdkResolveBlurb($repeatedContent->content_data ?? [], $locale); @endphp
					@if($b['title'] || $b['text'])
						<div class="gdk-spfeat">
							<span class="gdk-iconring">
								@if($b['image'])
									<img src="{{ asset($b['image']) }}" alt="" loading="lazy" width="22" height="22">
								@else
									<i class="{{ $b['icon'] }}"></i>
								@endif
							</span>
							<div>
								<h4 class="gdk-spfeat__title">{{ $b['title'] }}</h4>
								<p class="gdk-spfeat__txt">{!! nl2br(e($b['text'])) !!}</p>
							</div>
						</div>
					@endif
				@endforeach
			</div>
		</div>
	</div>
</section>