@props([
    'showCta' => true,
])

@php
    $beliefs = collect(preg_split('/\r\n|\r|\n/', content('home.philosophy.beliefs')))
        ->map(fn (string $line) => trim($line))
        ->filter()
        ->values();
    $conclusion = content('home.philosophy.conclusion');
    $badge = content('home.philosophy.badge');
    $ctaLabel = content('home.philosophy.cta_label');
    $infographic = content('home.philosophy.infographic');
@endphp

<div class="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop">
    <div class="{{ $infographic !== '' ? '' : 'max-w-3xl mx-auto' }}">
        <div class="text-center mb-12 {{ $infographic !== '' ? 'max-w-3xl mx-auto' : '' }}">
            <h2 class="font-display-lg text-display-lg-mobile md:text-display-md text-primary uppercase tracking-wide">{{ content('home.philosophy.heading') }}</h2>
            <div class="flex items-center justify-center gap-2 mt-4 {{ $badge !== '' ? 'mb-6' : '' }}" aria-hidden="true">
                <span class="block w-16 h-px bg-secondary-container"></span>
                <span class="block w-2 h-2 rotate-45 bg-secondary-container"></span>
                <span class="block w-16 h-px bg-secondary-container"></span>
            </div>
            @if ($badge !== '')
                <p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">{{ $badge }}</p>
            @endif
        </div>

        @if ($infographic !== '')
            {{-- Finished infographic supplied per language --}}
            <div>
                <img src="{{ media_url($infographic) }}" alt="{{ content('home.philosophy.heading') }}"
                    class="block w-full h-auto mx-auto" loading="lazy">
            </div>
        @elseif ($beliefs->isNotEmpty())
            <ul class="space-y-4">
                @foreach ($beliefs as $belief)
                    <li class="flex items-start gap-4">
                        <span class="mt-2.5 block size-2 shrink-0 rotate-45 bg-secondary-container" aria-hidden="true"></span>
                        <span class="font-headline-md text-[22px] leading-snug text-on-surface">{{ $belief }}</span>
                    </li>
                @endforeach
            </ul>
        @endif

        @if ($infographic === '' && $conclusion !== '')
            <p class="font-headline-md text-headline-md text-secondary mt-10 leading-snug">{{ $conclusion }}</p>
        @endif

        @if ($showCta && $ctaLabel !== '')
            <div class="text-center mt-10">
                <a href="{{ route('our-philosophy') }}" wire:navigate.hover
                    class="inline-flex items-center gap-2 bg-primary text-white px-10 py-4 rounded-full font-label-md hover:bg-primary-container transition-colors">
                    {{ $ctaLabel }}
                    <span class="material-symbols-outlined text-sm rtl:rotate-180" aria-hidden="true">arrow_forward</span>
                </a>
            </div>
        @endif
    </div>
</div>