@props([
    'service',
    'slug',
    'heroCards' => [],
    'contactSlug' => null,
    'locationSuffix' => '',
    'localizedRoute',
])

@php
    use App\Helpers\ServiceHeroCards;
    use Illuminate\Support\Str;

    $splitCard = static function (string $title, string $body = ''): array {
        $title = trim($title);
        $body = trim($body);

        if ($body !== '' && mb_strtolower($body) !== mb_strtolower($title)) {
            return [$title, $body];
        }

        $period = strpos($title, '.');
        if ($period !== false && $period > 0 && $period <= 72) {
            $headline = trim(substr($title, 0, $period));
            $rest = trim(substr($title, $period + 1));

            return [$headline, $rest !== '' ? $rest : $title];
        }

        return [$title, ''];
    };

    $valueCards = array_values(array_filter(
        $service['benefitCards'] ?? [],
        static fn ($card): bool => is_array($card) && trim((string) ($card['title'] ?? ($card['text'] ?? ''))) !== ''
    ));

    if ($valueCards === []) {
        $outcomeTitles = array_values(array_filter(
            ! empty($service['outcomes']) ? $service['outcomes'] : ($service['features'] ?? []),
            static fn ($item): bool => trim((string) $item) !== ''
        ));
        $benefitBodies = array_values($service['benefits'] ?? []);

        foreach (array_slice($outcomeTitles !== [] ? $outcomeTitles : array_filter($service['benefits'] ?? []), 0, 4) as $index => $line) {
            [$headline, $body] = $splitCard((string) $line, (string) ($benefitBodies[$index] ?? ''));
            $valueCards[] = [
                'title' => $headline,
                'text' => $body !== '' ? $body : $headline,
            ];
        }
    }

    $valueCards = array_slice($valueCards, 0, 4);

    $pageHeroCards = array_values($heroCards);
    if ($pageHeroCards === []) {
        $pageHeroCards = ServiceHeroCards::forSlug($slug, $service, 4);
    }

    $heroExclude = array_map(
        static fn (array $card): string => (string) ($card['image'] ?? ''),
        $pageHeroCards
    );

    if (! empty($service['listingImage'])) {
        $heroExclude[] = (string) $service['listingImage'];
    }

    $spotBackgrounds = ServiceHeroCards::spotBackgrounds($slug, $service, $heroExclude, 2);
    $spotBgPrimary = $spotBackgrounds[0] ?? null;
    $spotBgSecondary = $spotBackgrounds[1] ?? null;

    $introFull = trim((string) ($service['intro'] ?? ($service['heroDescription'] ?? '')));
    if ($introFull === '') {
        $introFull = __('messages.service_detail.value_desc', ['service' => strtolower($service['name'])]);
    }

    $introSentences = preg_split('/(?<=[.!?])\s+/u', $introFull, -1, PREG_SPLIT_NO_EMPTY) ?: [$introFull];
    $introHeadline = trim($introSentences[0] ?? $introFull);
    $introSubhead = trim(implode(' ', array_slice($introSentences, 1)));

    $heroStory = $valueCards[0] ?? null;
    $featureStory = $valueCards[1] ?? null;
@endphp

@if(count($valueCards) > 0)
<section id="value" class="svc-section svc-section--value scroll-mt-24" aria-labelledby="svc-value-heading">
    <span id="outcomes" class="svc-value__legacy-anchor" aria-hidden="true"></span>
    <span id="benefits" class="svc-value__legacy-anchor" aria-hidden="true"></span>

    <div class="site-container svc-value">
        <x-service-detail.section-intro
            class="svc-reveal"
            :eyebrow="__('messages.service_detail.value_section_label')"
            :title="$introHeadline"
            :description="$introSubhead !== '' ? $introSubhead : null"
            heading-id="svc-value-heading"
        />

        <div class="svc-value__bento" data-value-bento>
            <div class="svc-value__hero-row">
                @if($heroStory)
                <article @class([
                    'svc-value__spot svc-value__spot--bg svc-reveal',
                    'svc-value__spot--bg-fallback' => $spotBgPrimary === null,
                ])>
                    @if($spotBgPrimary)
                    <div class="svc-value__spot-bg" style="background-image: url('{{ e($spotBgPrimary) }}');" aria-hidden="true"></div>
                    @endif
                    <div class="svc-value__spot-scrim" aria-hidden="true"></div>
                    <div class="svc-value__spot-inner">
                        <p class="svc-value__spot-eyebrow">{{ __('messages.service_detail.value_spot_plan_label') }}</p>
                        <div class="svc-value__spot-content">
                            <h3 class="svc-value__spot-title">{{ $heroStory['title'] }}</h3>
                            @if(! empty($heroStory['text']))
                            <p class="svc-value__spot-text">{{ $heroStory['text'] }}</p>
                            @endif
                        </div>
                    </div>
                </article>
                @endif

                @if($featureStory)
                <article @class([
                    'svc-value__spot svc-value__spot--bg svc-reveal svc-reveal--delay-1',
                    'svc-value__spot--bg-fallback svc-value__spot--bg-fallback-alt' => $spotBgSecondary === null,
                ])>
                    @if($spotBgSecondary)
                    <div class="svc-value__spot-bg" style="background-image: url('{{ e($spotBgSecondary) }}');" aria-hidden="true"></div>
                    @endif
                    <div class="svc-value__spot-scrim" aria-hidden="true"></div>
                    <div class="svc-value__spot-inner">
                        <p class="svc-value__spot-eyebrow">{{ __('messages.service_detail.value_spot_experience_label') }}</p>
                        <div class="svc-value__spot-content">
                            <h3 class="svc-value__spot-title">{{ $featureStory['title'] }}</h3>
                            <p class="svc-value__spot-text">{{ $featureStory['text'] }}</p>
                        </div>
                    </div>
                </article>
                @endif
            </div>

            <div class="svc-value__tiles-block">
                <header class="svc-section__header svc-value__tiles-head svc-reveal svc-reveal--delay-2">
                    <h3 class="svc-section__title">{{ __('messages.service_detail.value_tiles_label') }}</h3>
                    <p class="svc-section__desc">{{ __('messages.service_detail.value_tiles_desc') }}</p>
                </header>
                <div class="svc-value__tiles">
                    @foreach($valueCards as $i => $card)
                    <article class="svc-value__tile svc-reveal {{ $i > 0 ? 'svc-reveal--delay-' . min($i, 3) : '' }}"
                             data-value-tile
                             style="--tile-i: {{ $i }};">
                        <h3 class="svc-value__tile-title">{{ $card['title'] }}</h3>
                        <p class="svc-value__tile-text">{{ $card['text'] }}</p>
                    </article>
                    @endforeach
                </div>
            </div>
        </div>

        <p class="svc-value__action svc-reveal svc-reveal--delay-3">
            <a href="{{ $localizedRoute('contact.index') }}?service={{ $contactSlug ?? $slug }}" class="svc-link !mt-0">
                {{ $service['ctaText'] ?? __('messages.service_detail.start_your_project', ['location_suffix' => '']) }}
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </p>
    </div>
</section>
@endif