@php
    $_zpClassicAbout = function_exists('activeTheme') && activeTheme() === \App\Enums\Theme::Classic;
@endphp
<section class="about-section section-padding {{ $_zpClassicAbout ? 'zp-cl-about' : 'pt-0' }}" id="about">
    <div class="container">
        <div class="about-wrapper {{ $_zpClassicAbout ? 'zp-cl-about__wrapper' : '' }}">
            <div class="row g-4 {{ $_zpClassicAbout ? 'align-items-center' : '' }}">
                <div class="col-lg-6 {{ $_zpClassicAbout ? 'order-2 order-lg-1' : '' }}">
                    <div class="about-image-items wow fadeInUp {{ $_zpClassicAbout ? 'zp-cl-about__visual' : '' }}" data-wow-delay=".3s">
	                    @if (!$_zpClassicAbout && !empty($data['content_shape_image']))
		                    <div class="content-shape">
			                    <img src="{{ asset($data['content_shape_image']) }}" alt="shape-img" loading="lazy">
		                    </div>
	                    @endif

	                    @if (!$_zpClassicAbout && !empty($data['bg_shape_image']))
		                    <div class="bg-shape">
			                    <img src="{{ asset($data['bg_shape_image']) }}" alt="bg-shape-img" loading="lazy">
		                    </div>
	                    @endif

	                    @if ($_zpClassicAbout)
		                    <div class="about-image zp-cl-about__image">
			                    <img src="{{ asset('frontend/images/zilitpay-classic/about-wallet-mockup.svg') }}" alt="{{ __('Zilitpay digital wallet app') }}" loading="lazy">
		                    </div>
	                    @elseif (!empty($data['main_image']))
		                    <div class="about-image">
			                    <img src="{{ asset($data['main_image']) }}" alt="about-main-img" loading="lazy">

			                    @if (!empty($data['about_tool_shape_image']))
				                    <div class="about-shape">
					                    <img src="{{ asset($data['about_tool_shape_image']) }}" alt="about-tool-shape" loading="lazy">
				                    </div>
			                    @endif
		                    </div>
	                    @endif
                    </div>
                </div>

	            <div class="col-lg-6 {{ $_zpClassicAbout ? 'order-1 order-lg-2' : '' }}">
                    <div class="about-content {{ $_zpClassicAbout ? 'zp-cl-about__content' : '' }}">
                        <div class="section-title">

	                        @if (!empty($data['title_bar_image']))
		                        <span class="sub-title wow fadeInUp">
                                    <img src="{{ asset($data['title_bar_image']) }}" alt="title-bar" loading="lazy">
                                    {{ $data['subheading'][$locale] ?? '' }}
                                </span>
	                        @endif

	                        @if (!empty($data['heading'][$locale]))
		                        <h2 class="wow fadeInUp" data-wow-delay=".3s">
			                        {{ $data['heading'][$locale] }}
		                        </h2>
	                        @endif

	                        @if (!empty($data['description'][$locale]))
		                        <p class="wow fadeInUp" data-wow-delay=".5s">
			                        {!! nl2br(e($data['description'][$locale])) !!}
		                        </p>
	                        @endif

                        </div>

	                    {{-- Repeated About Icons --}}
                        <div class="about-icon-area mt-4 mt-md-0 {{ $_zpClassicAbout ? 'zp-cl-about__features' : '' }}">
	                        @foreach($repeatedContents as $repeatedContent)
		                        @php
			                        $contentData = $repeatedContent->content_data ?? [];
		                        @endphp

		                        <div class="icon-item wow fadeInUp" data-wow-delay=".3s">
			                        <div class="icon">
				                        @if (!empty($contentData['about_icon_class']))
					                        <i class="{{ $contentData['about_icon_class'] }}"></i>
				                        @endif
			                        </div>
			                        <div class="content">
				                        @if (!empty($contentData['about_title'][$locale]))
					                        <h5>{{ $contentData['about_title'][$locale] }}</h5>
				                        @endif

				                        @if (!empty($contentData['about_text'][$locale]))
					                        <p>{!! nl2br(e($contentData['about_text'][$locale])) !!}</p>
				                        @endif
			                        </div>
		                        </div>
	                        @endforeach
                        </div>

	                    @if (!empty($data['additional_description'][$locale]))
		                    <p class="wow fadeInUp" data-wow-delay=".3s">
			                    {!! nl2br(e($data['additional_description'][$locale])) !!}
		                    </p>
	                    @endif

	                    @if (!empty($data['button_url']) && !empty($data['button_text'][$locale]))
		                    <div class="about-button wow fadeInUp" data-wow-delay=".5s">
			                    <a href="{{ $data['button_url'] }}" class="theme-btn">
				                    {{ $data['button_text'][$locale] }}
			                    </a>
		                    </div>
	                    @endif

                    </div>
                </div>

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