b2in/resources/views/livewire/web/components/sections/origin-section.blade.php

@php
    $hub = $content['hub'] ?? [];
    $hubX = (int) ($hub['x'] ?? 400);
    $hubY = (int) ($hub['y'] ?? 175);
    $steps = array_values(array_filter($content['steps'] ?? [], fn ($step) => is_array($step) && ! empty($step['title'])));
@endphp

<section class="section-padding {{ $bg }}" id="herkunft">
    <div class="container-padding">
        <div class="text-center mb-16 slide-up delay-300">
            <h2 class="text-section-title">{!! $content['title'] ?? '' !!}</h2>
            @if (!empty($content['subtitle']))
                <p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">{{ $content['subtitle'] }}</p>
            @endif
        </div>

        {{-- Ohne gepflegten Fertigungsort bleibt nur die Überschrift und der Ablauf-Block. --}}
        @if ($this->locations !== [])
        <div class="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
            {{-- Schematische Karte: Bielefeld als Drehscheibe, die Standorte als Speichen.
                 Keine Geografie, nur Richtung und Entfernung. Positionen aus OriginSection::MAP_POSITIONS,
                 eine Marke ohne Position steht nur in den Kacheln. Unter md tragen die Kacheln alles. --}}
            <div class="hidden md:block card-elevated rounded-2xl p-6 lg:p-8 slide-left delay-400">
                <svg class="origin-map" viewBox="0 0 640 400" role="img"
                    aria-label="{{ $content['map_alt'] ?? '' }}">
                    @if (!empty($content['region_label']))
                        <ellipse class="origin-map-region" cx="{{ $hubX }}" cy="{{ $hubY - 5 }}" rx="200" ry="165" />
                        <text class="origin-map-region-label" x="{{ $hubX + 115 }}" y="{{ $hubY + 130 }}"
                            text-anchor="end">{{ $content['region_label'] }}</text>
                    @endif

                    @foreach ($this->locations as $index => $location)
                        @continue(empty($location['map']))
                        @php
                            $x = $location['map']['x'];
                            $y = $location['map']['y'];
                            $midX = (int) round(($hubX + $x) / 2);
                            $midY = (int) round(($hubY + $y) / 2);
                        @endphp
                        <line class="origin-map-spoke" x1="{{ $hubX }}" y1="{{ $hubY }}" x2="{{ $x }}" y2="{{ $y }}" />
                        @if (!empty($location['distance']))
                            <text class="origin-map-distance" x="{{ $midX }}" y="{{ $midY + 4 }}">{{ $location['distance'] }}</text>
                        @endif
                    @endforeach

                    @foreach ($this->locations as $index => $location)
                        @continue(empty($location['map']))
                        @php
                            $x = $location['map']['x'];
                            $y = $location['map']['y'];
                            $left = $location['map']['label'] === 'left';
                            $labelX = $left ? $x - 14 : $x + 14;
                        @endphp
                        <circle class="origin-map-dot" cx="{{ $x }}" cy="{{ $y }}" r="7" />
                        <text class="origin-map-label" x="{{ $labelX }}" y="{{ $y + 5 }}"
                            text-anchor="{{ $left ? 'end' : 'start' }}">{{ $location['city'] }}</text>
                        <text class="origin-map-sublabel" x="{{ $labelX }}" y="{{ $y + 23 }}"
                            text-anchor="{{ $left ? 'end' : 'start' }}">{{ $location['brand'] }}</text>
                    @endforeach

                    <circle class="origin-map-hub-ring" cx="{{ $hubX }}" cy="{{ $hubY }}" r="20" />
                    <circle class="origin-map-hub" cx="{{ $hubX }}" cy="{{ $hubY }}" r="10" />
                    <text class="origin-map-label" x="{{ $hubX + 26 }}" y="{{ $hubY + 5 }}">{{ $hub['city'] ?? '' }}</text>
                    @if (!empty($hub['role']))
                        <text class="origin-map-sublabel" x="{{ $hubX + 26 }}" y="{{ $hubY + 23 }}">{{ $hub['role'] }}</text>
                    @endif
                </svg>
            </div>

            {{-- Eine Kachel je Marke mit Fertigungsort --}}
            <div class="grid sm:grid-cols-2 gap-6 slide-right delay-400">
                @foreach ($this->locations as $location)
                    <div class="card-elevated rounded-2xl p-6 flex flex-col gap-2" wire:key="origin-{{ $location['slug'] }}">
                        <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-secondary">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                                aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
                            </svg>
                            {{ $location['city'] }}
                        </span>
                        <h3 class="text-xl font-medium">{{ $location['brand'] }}</h3>
                        @if (!empty($location['role']))
                            <p class="text-muted-foreground leading-relaxed">{{ $location['role'] }}</p>
                        @endif
                        <div class="mt-auto pt-3 flex flex-wrap items-center justify-between gap-2 text-sm">
                            @if (!empty($location['distance']))
                                <span class="text-clay">{{ $location['distance'] }} {{ $content['distance_suffix'] ?? '' }}</span>
                            @endif
                            @if (!empty($location['link']) && !empty($content['link_text']))
                                <a href="{{ $location['link'] }}" class="font-medium text-primary hover:text-secondary transition-colors">
                                    {{ $content['link_text'] }}
                                </a>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @endif

        {{-- Gefertigt oder vertrieben? Der Weg eines Maßmöbels am Beispiel CABINET. --}}
        @if ($steps !== [])
            <div class="mt-16 lg:mt-20 slide-up delay-500">
                <div class="max-w-3xl mx-auto text-center mb-10">
                    <h3 class="text-2xl md:text-3xl font-medium">{!! $content['steps_title'] ?? '' !!}</h3>
                    @if (!empty($content['steps_text']))
                        <p class="text-muted-foreground leading-relaxed mt-4">{{ $content['steps_text'] }}</p>
                    @endif
                </div>

                <ol class="grid md:grid-cols-3 gap-6">
                    @foreach ($steps as $index => $step)
                        <li class="card-elevated rounded-2xl p-6 flex gap-4" wire:key="origin-step-{{ $index }}">
                            <span class="shrink-0 w-10 h-10 rounded-full icon-secondary-linear glow-soft flex items-center justify-center font-semibold">
                                {{ $index + 1 }}
                            </span>
                            <div>
                                <h4 class="font-medium mb-1">{{ $step['title'] }}</h4>
                                @if (!empty($step['description']))
                                    <p class="text-sm text-muted-foreground leading-relaxed">{!! cms_inline($step['description'] ?? '') !!}</p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ol>
            </div>
        @endif
    </div>
</section>