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

	// Field-name compatibility: pages built with the Classic theme can still
	// render through Golden views. Read the Golden field first, then fall
	// back to the Classic equivalent so existing data is honoured.
	$eyebrow     = $data['eyebrow'][$locale]     ?? $data['subheading'][$locale] ?? '';
	$heading     = $data['heading'][$locale]     ?? '';
	$description = $data['description'][$locale] ?? '';
	$buttonText  = $data['button_text'][$locale] ?? '';
	$buttonUrl   = $data['button_url']           ?? '#';
	$statValue   = $data['stat_value']           ?? '';
	$statLabel   = $data['stat_label'][$locale]  ?? '';
	$statIcon    = $data['stat_icon']            ?? 'fa-solid fa-users';

	$renderedHeading = preg_replace_callback('/__(.+?)__/u', function ($m) {
		return '<em class="gdk-italic gdk-gold-text">'.e($m[1]).'</em>';
	}, e($heading));
@endphp

<section class="gdk-section" id="about">
	<div class="gdk-container">
		<div class="gdk-about__grid">
			<div class="gdk-reveal gdk-about__column">
				<div class="gdk-app-showcase" role="img" aria-label="{{ __('Illustrative ZilitPay mobile banking dashboard.') }}">
					<div class="gdk-app-showcase__glow" aria-hidden="true"></div>
					<div class="gdk-phone">
						<div class="gdk-phone__screen">
							<div class="gdk-phone__status" aria-hidden="true">
								<span>9:41</span><span><i class="fa-solid fa-signal"></i> <i class="fa-solid fa-wifi"></i> <i class="fa-solid fa-battery-three-quarters"></i></span>
							</div>
							<div class="gdk-app__header">
								<div class="gdk-app__brand">
									<span class="gdk-logo__mark" aria-hidden="true"></span>
									<span>{{ setting('site_title', 'ZilitPay') }}</span>
								</div>
								<span class="gdk-app__avatar"><i class="fa-regular fa-user"></i></span>
							</div>
							<div class="gdk-app__balance">
								<span>{{ __('Wallet balance') }}</span>
								<strong>$•••• <small>••</small></strong>
								<div class="gdk-app__balance-note"><i class="fa-solid fa-shield-halved"></i> {{ __('Your money, secured') }}</div>
							</div>
							<div class="gdk-app__quick-actions">
								<div><span><i class="fa-solid fa-arrow-down-to-line"></i></span>{{ __('Deposit') }}</div>
								<div><span><i class="fa-solid fa-arrow-up-from-line"></i></span>{{ __('Withdraw') }}</div>
								<div><span><i class="fa-solid fa-paper-plane"></i></span>{{ __('Transfer') }}</div>
							</div>
							<div class="gdk-app__card">
								<div class="gdk-app__card-top">
									<span>{{ __('VIRTUAL CARD') }}</span>
									<span class="gdk-logo__mark" aria-hidden="true"></span>
								</div>
								<div class="gdk-app__card-number">•••• &nbsp; •••• &nbsp; •••• &nbsp; ••••</div>
								<div class="gdk-app__card-bottom">
									<span>{{ setting('site_title', 'ZilitPay') }}</span>
									<i class="fa-solid fa-wifi" aria-hidden="true"></i>
								</div>
							</div>
							<div class="gdk-app__activity">
								<div class="gdk-app__activity-head">
									<strong>{{ __('Transactions') }}</strong>
									<span>{{ __('View all') }} <i class="fa-solid fa-arrow-right"></i></span>
								</div>
								<div class="gdk-app__activity-row">
									<span class="gdk-app__activity-icon"><i class="fa-solid fa-arrow-down"></i></span>
									<span class="gdk-app__activity-lines"><i></i><i></i></span>
									<span class="gdk-app__activity-value"></span>
								</div>
								<div class="gdk-app__activity-row">
									<span class="gdk-app__activity-icon"><i class="fa-solid fa-arrow-up"></i></span>
									<span class="gdk-app__activity-lines"><i></i><i></i></span>
									<span class="gdk-app__activity-value"></span>
								</div>
							</div>
							<div class="gdk-phone__nav" aria-hidden="true">
								<i class="fa-solid fa-house"></i><i class="fa-regular fa-credit-card"></i><i class="fa-solid fa-chart-pie"></i><i class="fa-regular fa-user"></i>
							</div>
						</div>
					</div>
				</div>
				@if($statValue)
					<div class="gdk-floatstat">
						<div class="gdk-floatstat__ring"><span><i class="{{ $statIcon }}"></i></span></div>
						<div>
							<div class="gdk-floatstat__num">{{ $statValue }}</div>
							<div class="gdk-floatstat__lbl">{{ $statLabel }}</div>
						</div>
					</div>
				@endif
			</div>

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

				@if($heading)
					<h2 class="gdk-about__title gdk-h-section">{!! $renderedHeading !!}</h2>
				@endif

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

				<div class="gdk-about__pillars">
					@foreach($repeatedContents as $repeatedContent)
						@php
							$rc = $repeatedContent->content_data ?? [];

							// Honour Golden field names first, then fall back to Classic.
							$pillarIcon  = $rc['pillar_icon_class']     ?? $rc['about_icon_class']    ?? 'fa-solid fa-shield-halved';
							$pillarTitle = $rc['pillar_title'][$locale] ?? $rc['about_title'][$locale] ?? '';
							$pillarText  = $rc['pillar_text'][$locale]  ?? $rc['about_text'][$locale]  ?? '';
						@endphp

						@if($pillarTitle || $pillarText)
							<div class="gdk-pillar">
								<span class="gdk-iconring"><i class="{{ $pillarIcon }}"></i></span>
								<div>
									<h4 class="gdk-pillar__title">{{ $pillarTitle }}</h4>
									<p class="gdk-pillar__txt">{!! nl2br(e($pillarText)) !!}</p>
								</div>
							</div>
						@endif
					@endforeach
				</div>

				@if($buttonText)
					<a href="{{ $buttonUrl }}" class="gdk-btn gdk-btn--filled gdk-btn--pill">
						{{ $buttonText }} <i class="fa-solid fa-arrow-right"></i>
					</a>
				@endif
			</div>
		</div>
	</div>
</section>