@php
    $heroResults = array_slice($caseStudy['hero_results'] ?? $caseStudy['results'], 0, 3);
    $accentMap = [
        'agenz' => 'red',
        'm-automotiv' => 'teal',
        'eqdom' => 'red',
        'soge' => 'teal',
        'swisslife' => 'red',
    ];
    $clientNames = [
        'agenz' => 'Agenz',
        'm-automotiv' => 'M-AUTOMOTIV',
        'eqdom' => 'EQDOM',
        'soge' => 'SOGE',
        'swisslife' => 'SwissLife',
    ];
    $logoMap = [
        'agenz' => 'CaseStudiesImages/agenz.svg',
        'm-automotiv' => 'CaseStudiesImages/AUTOMOTIV.svg',
        'eqdom' => 'CaseStudiesImages/EQDOM.svg',
        'soge' => 'CaseStudiesImages/sogeeee.jpg',
        'swisslife' => 'CaseStudiesImages/SwissLife.svg',
    ];
    $bgMap = [
        'agenz' => '#eef3fb',
        'm-automotiv' => '#fff5f5',
        'eqdom' => '#f0f7f5',
        'soge' => '#ffffff',
        'swisslife' => '#f5f5f8',
    ];
    $accent = $accentMap[$caseStudy['slug']] ?? 'red';
    $clientName = $clientNames[$caseStudy['slug']] ?? ucwords(str_replace('-', ' ', $caseStudy['slug']));
    $logo = $logoMap[$caseStudy['slug']] ?? null;
    $brandBg = $bgMap[$caseStudy['slug']] ?? '#f5f5f8';
@endphp

<main class="cs-detail cs-detail--{{ $accent }}">
    <section class="containerB case-studies-page-header-bg cs-detail-hero" aria-labelledby="case-detail-title">
        <div class="case-studies-universe-bg" aria-hidden="true"></div>
        <div class="case-studies-universe-stars" aria-hidden="true"></div>
        <div class="case-studies-universe-nebula" aria-hidden="true"></div>
        <div class="case-studies-universe-grain" aria-hidden="true"></div>
        <div class="case-studies-universe-cursor-glow" data-case-studies-cursor-glow aria-hidden="true"></div>
        <div class="case-studies-universe-sphere" data-case-studies-sphere-layer aria-hidden="true">
            <div class="case-studies-universe-sphere-core"></div>
            <span class="case-studies-universe-orbit-dot case-studies-universe-orbit-dot--1"></span>
            <span class="case-studies-universe-orbit-dot case-studies-universe-orbit-dot--2"></span>
            <span class="case-studies-universe-orbit-dot case-studies-universe-orbit-dot--3"></span>
        </div>

        <div class="cs-detail-hero__body">
            <div class="cs-detail-hero__content">
                <div class="cs-detail-hero__meta">
                    <span class="cs-hero__eyebrow">{{ $caseStudy['industry'] }}</span>
                </div>

                <h1 class="cs-detail-hero__title" id="case-detail-title">{!! $caseStudy['title'] !!}</h1>
                <p class="cs-detail-hero__subtitle">{!! $caseStudy['subtitle'] !!}</p>

                <div class="cs-detail-hero__services" aria-label="Services">
                    @foreach($caseStudy['services'] as $service)
                        <span>{{ $service }}</span>
                    @endforeach
                </div>

                <div class="cs-detail-hero__actions">
                    <a class="cs-cta__btn" href="{{ route('contact') }}">
                        Parler a un expert
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                            <line x1="5" y1="12" x2="19" y2="12"/>
                            <polyline points="12 5 19 12 12 19"/>
                        </svg>
                    </a>
                    <a class="atirao-button atirao-button--outline-light atirao-button--large" href="#case-results">Voir les resultats</a>
                </div>
            </div>

            <aside class="cs-detail-hero__proof" aria-label="Identite client et chiffres forts">
                @if($logo)
                    <div class="cs-detail-hero__brand" style="background-color: {{ $brandBg }};">
                        <img src="{{ asset($logo) }}" alt="{{ $clientName }}" loading="eager">
                    </div>
                @endif

                <div class="cs-detail-hero__metrics" aria-label="Chiffres forts">
                    @foreach($heroResults as $result)
                        @php
                            $plainResult = Str::ascii($result);
                            $metricParts = preg_split('/\s+(?:de|sur|des|du|en|par|atteints|generes|gagnes|envoyes|concretisation|ouvertures|nouveaux)\s+/iu', $plainResult, 2);
                            $metricValue = $metricParts[0] ?? $plainResult;
                            $metricLabel = $metricParts[1] ?? $plainResult;
                        @endphp
                        <div class="cs-detail-metric">
                            <strong>{{ $metricValue }}</strong>
                            <span>{{ $metricLabel }}</span>
                        </div>
                    @endforeach
                </div>
            </aside>
        </div>
    </section>

    <section class="containerW cs-detail-section cs-detail-section--intro" aria-labelledby="case-context-title">
        <div class="cs-detail-wrap">
            <div class="cs-detail-intro">
                <span class="cs-section-eyebrow cs-section-eyebrow--dark">Le contexte</span>
                <h2 id="case-context-title">Un enjeu business clair, une strategie digitale mesurable.</h2>
                <p>{!! $caseStudy['context'] !!}</p>
            </div>
        </div>
    </section>

    <section class="containerW cs-detail-section" aria-label="Objectifs et approche">
        <div class="cs-detail-wrap cs-detail-split">
            <article class="cs-detail-panel">
                <span class="cs-detail-panel__number">01</span>
                <h2>Objectifs</h2>
                <ul class="cs-detail-list">
                    @foreach($caseStudy['objectives'] as $objective)
                        <li>{{ $objective }}</li>
                    @endforeach
                </ul>
            </article>

            <article class="cs-detail-panel cs-detail-panel--dark">
                <span class="cs-detail-panel__number">02</span>
                <h2>Notre approche</h2>
                <ul class="cs-detail-list">
                    @foreach($caseStudy['approach'] as $approach)
                        <li>{{ $approach }}</li>
                    @endforeach
                </ul>
            </article>
        </div>
    </section>

    <section class="containerB cs-detail-section cs-detail-section--dark cs-detail-section--performance" id="case-results" aria-labelledby="case-actions-title">
        <div class="cs-detail-wrap">
            <div class="cs-detail-performance-grid">
                <div class="cs-detail-performance-col">
                    <div class="cs-detail-heading">
                        <span class="cs-section-eyebrow">Execution</span>
                        <h2 id="case-actions-title">Les actions qui ont transforme la performance.</h2>
                    </div>

                    <div class="cs-detail-actions">
                        @foreach($caseStudy['key_actions'] as $index => $action)
                            <article class="cs-detail-action">
                                <button class="cs-detail-action__header" type="button" aria-expanded="{{ $loop->first ? 'true' : 'false' }}">
                                    <span>{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
                                    <strong>{!! $action['title'] !!}</strong>
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                                        <line x1="12" y1="5" x2="12" y2="19"/>
                                        <line x1="5" y1="12" x2="19" y2="12"/>
                                    </svg>
                                </button>
                                <div class="cs-detail-action__content" {{ $loop->first ? '' : 'hidden' }}>
                                    <p>{!! $action['description'] !!}</p>
                                </div>
                            </article>
                        @endforeach
                    </div>
                </div>

                <div class="cs-detail-performance-col cs-detail-performance-col--results">
                    <div class="cs-detail-heading cs-detail-heading--results">
                        <span class="cs-section-eyebrow">Resultats</span>
                        <h2 id="case-results-title">Des indicateurs lisibles, directement relies aux objectifs.</h2>
                    </div>

                    <div class="cs-detail-results__grid">
                        @foreach($caseStudy['results'] as $result)
                            <article class="cs-detail-result">
                                <span aria-hidden="true"></span>
                                <strong>{{ $result }}</strong>
                            </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if($otherCaseStudies->count() > 0)
        <section class="containerW cs-detail-section" aria-labelledby="other-cases-title">
            <div class="cs-detail-wrap">
                <div class="cs-detail-heading">
                    <span class="cs-section-eyebrow cs-section-eyebrow--dark">A lire aussi</span>
                    <h2 id="other-cases-title">Autres études de cas</h2>
                </div>

                <div class="cs-detail-related">
                    @foreach($otherCaseStudies as $otherCase)
                        @php
                            $otherAccent = $accentMap[$otherCase['slug']] ?? 'red';
                            $otherName = $clientNames[$otherCase['slug']] ?? ucwords(str_replace('-', ' ', $otherCase['slug']));
                        @endphp
                        <article class="cs-detail-related__card cs-card--{{ $otherAccent }}">
                            <a href="{{ route('caseStudieShow', $otherCase['slug']) }}">
                                <span class="cs-badge cs-badge--{{ $otherAccent }}">{{ $otherCase['industry'] }}</span>
                                <h3>{{ $otherName }}</h3>
                                <p>{{ Str::limit(strip_tags($otherCase['subtitle']), 120) }}</p>
                                @if(!empty($otherCase['hero_results'][0]))
                                    <strong>{{ $otherCase['hero_results'][0] }}</strong>
                                @endif
                                <span class="cs-link">
                                    Lire l'etude
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                                        <line x1="5" y1="12" x2="19" y2="12"/>
                                        <polyline points="12 5 19 12 12 19"/>
                                    </svg>
                                </span>
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="containerB cs-detail-section cs-detail-cta" aria-labelledby="case-cta-title">
        <div class="cs-detail-wrap">
            <div class="cs-detail-cta__inner">
                <div class="cs-detail-cta__copy">
                    <span class="cs-section-eyebrow">Votre tour</span>
                    <h2 id="case-cta-title">Vous souhaitez des resultats similaires ?</h2>
                    <p>Discutons de votre projet et des leviers prioritaires pour accelerer votre croissance.</p>
                    <a class="cs-cta__btn" href="{{ route('contact') }}">
                        Contactez-nous
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
                            <line x1="5" y1="12" x2="19" y2="12"/>
                            <polyline points="12 5 19 12 12 19"/>
                        </svg>
                    </a>
                </div>

                <div class="cs-detail-cta__panel" aria-label="Prochaine etape">
                    <div>
                        <span>01</span>
                        <strong>Diagnostic</strong>
                    </div>
                    <div>
                        <span>02</span>
                        <strong>Plan d'action</strong>
                    </div>
                    <div>
                        <span>03</span>
                        <strong>Priorites ROI</strong>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>