@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{ asset('siteStyle/caseStudiesNewOne.css') }}">
    <link rel="stylesheet" href="{{ asset('siteStyle/casestudies.css') }}">
    <meta name="description" content="Études de cas Atirao. Découvrez nos succès clients en marketing digital au Maroc.">
@stop

@section('title')
    Nos Études de Cas | Atirao
@stop

@section('content')

@php
    $imageMap = [
        'agenz'       => 'CaseStudiesImages/agenz.svg',
        'm-automotiv' => 'CaseStudiesImages/AUTOMOTIV.svg',
        'eqdom'       => 'CaseStudiesImages/EQDOM.svg',
        'soge'        => 'CaseStudiesImages/sogeWhite.svg',
        'swisslife'   => 'CaseStudiesImages/SwissLife.svg',
    ];

    $bgMap = [
        'agenz'       => '#eef3fb',
        'm-automotiv' => '#fff5f5',
        'eqdom'       => '#f0f7f5',
        'soge'        => '#111111',
        'swisslife'   => '#f5f5f8',
    ];

    $clientNames = [
        'agenz'       => 'Agenz',
        'm-automotiv' => 'M-Automotiv',
        'eqdom'       => 'EQDOM',
        'soge'        => 'SOGé',
        'swisslife'   => 'SwissLife',
    ];

    $accents = ['red', 'teal', 'red', 'teal', 'red'];

    $industries = collect($caseStudies)->pluck('industry')->unique()->values()->all();
@endphp

    {{-- ══════════════════════════════════════════
         HERO SECTION — dark universe animation
         ══════════════════════════════════════════ --}}
    <section class="containerB case-studies-page-header-bg" aria-labelledby="cs-hero-title">

        {{-- Animation layers (universe) --}}
        <div class="case-studies-universe-bg" aria-hidden="true"></div>
        <div class="case-studies-universe-stars" aria-hidden="true">
            <canvas data-case-studies-stars-canvas></canvas>
        </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>
            <canvas data-case-studies-sphere-canvas></canvas>
            <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>

        {{-- Hero content --}}
        <div class="cs-hero__body">
            <span class="cs-hero__eyebrow">Nos Succès Clients</span>

            <h1 class="cs-hero__title" id="cs-hero-title">
                Des résultats <span class="cs-red">concrets</span>,<br>
                des campagnes qui <span class="cs-red">performent</span>.
            </h1>

            <p class="cs-hero__desc">
                Découvrez comment nous transformons les défis marketing de nos clients
                en résultats mesurables et durables.
            </p>

            <div class="cs-hero__kpis" aria-label="Chiffres clés">
                <div class="cs-kpi">
                    <strong>{{ count($caseStudies) }}+</strong>
                    <span>Études de cas</span>
                </div>
                <div class="cs-kpi">
                    <strong>+400</strong>
                    <span>Clients accompagnés</span>
                </div>
                <div class="cs-kpi">
                    <strong>22 ans</strong>
                    <span>D'expertise</span>
                </div>
                <div class="cs-kpi">
                    <strong>97%</strong>
                    <span>Satisfaction client</span>
                </div>
            </div>

            <a id="cs-hero-scroll-cta" class="atirao-button atirao-button--outline-light atirao-button--large" href="#cs-grid" aria-label="Voir nos études de cas">
                Découvrir nos réussites
            </a>
        </div>
    </section>

    {{-- ══════════════════════════════════════════
         GRID SECTION — filters + case study cards
         ══════════════════════════════════════════ --}}
    <section class="containerW" id="cs-grid" aria-label="Études de cas">
        <div class="cs-page-wrap">

            {{-- Toolbar: filter pills + search --}}
            <div class="cs-toolbar">
                <div class="cs-filters" role="group" aria-label="Filtrer par secteur">
                    <button class="cs-pill cs-pill--active" data-filter="all" type="button">
                        Tous
                        <span class="cs-pill__count">{{ count($caseStudies) }}</span>
                    </button>
                    @foreach($industries as $industry)
                        <button class="cs-pill" data-filter="{{ $industry }}" type="button">
                            {{ $industry }}
                        </button>
                    @endforeach
                </div>

                <div class="cs-search">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                        <circle cx="11" cy="11" r="8"/>
                        <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                    </svg>
                    <input type="search" id="csSearch" placeholder="Rechercher…" autocomplete="off" aria-label="Rechercher une étude de cas">
                </div>
            </div>

            {{-- Case study cards --}}
            <div class="cs-grid" id="csGrid" role="list">
                @php $i = 0; @endphp
                @foreach($caseStudies as $slug => $cs)
                    @php
                        $accent     = $accents[$i] ?? 'red';
                        $img        = $imageMap[$slug] ?? null;
                        $bg         = $bgMap[$slug] ?? '#f5f5f8';
                        $name       = $clientNames[$slug] ?? ucwords(str_replace('-', ' ', $slug));
                        $isFeatured = ($i === 0);
                        $topResult  = $cs['results'][0] ?? null;
                        $isDarkBg   = ($slug === 'soge');
                        $searchData = strtolower($name . ' ' . $cs['subtitle'] . ' ' . $cs['industry'] . ' ' . implode(' ', $cs['services']));
                    @endphp

                    <article
                        class="cs-card cs-card--{{ $accent }}{{ $isFeatured ? ' cs-card--featured' : '' }}"
                        data-industry="{{ $cs['industry'] }}"
                        data-search="{{ $searchData }}"
                        role="listitem">

                        <a href="{{ route('caseStudieShow', ['client' => $cs['slug']]) }}"
                           class="cs-card__link"
                           aria-label="Lire l'étude de cas {{ $name }}">

                            <div class="cs-card__body">

                                {{-- ── Text content ── --}}
                                <div class="cs-card__info">
                                    <div class="cs-card__top">
                                        <span class="cs-badge cs-badge--{{ $accent }}">{{ $cs['industry'] }}</span>
                                        @if($isFeatured)
                                            <span class="cs-badge cs-badge--featured">Étude phare</span>
                                        @endif
                                    </div>

                                    <h2 class="cs-card__name">{{ $name }}</h2>

                                    <p class="cs-card__subtitle">{{ $cs['subtitle'] }}</p>

                                    <div class="cs-card__services" aria-label="Services">
                                        @foreach(array_slice($cs['services'], 0, 3) as $svc)
                                            <span class="cs-tag">{{ $svc }}</span>
                                        @endforeach
                                    </div>

                                    @if($topResult)
                                        <div class="cs-result cs-result--{{ $accent }}">
                                            <span class="cs-result__label">Résultat clé</span>
                                            <span class="cs-result__value">{{ $topResult }}</span>
                                        </div>
                                    @endif

                                    <span class="cs-link" aria-hidden="true">
                                        Lire la suite
                                        <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>
                                </div>

                                {{-- ── Logo / visual ── --}}
                                @if($img)
                                    <div class="cs-card__visual" style="background-color: {{ $bg }};" aria-hidden="true">
                                        <img
                                            src="{{ asset($img) }}"
                                            alt=""
                                            class="cs-card__img{{ $isDarkBg ? ' cs-card__img--dark-bg' : '' }}"
                                            loading="lazy">
                                    </div>
                                @endif

                            </div>
                        </a>
                    </article>

                    @php $i++; @endphp
                @endforeach

                {{-- No results --}}
                <p class="cs-empty" id="csEmpty" aria-live="polite" style="display:none;">
                    Aucune étude de cas ne correspond à votre recherche.
                </p>
            </div>
        </div>
    </section>

    {{-- ══════════════════════════════════════════
         VALUES SECTION — dark background
         ══════════════════════════════════════════ --}}
    <section class="containerB cs-values" aria-labelledby="cs-values-title">
        <div class="cs-page-wrap">
            <span class="cs-section-eyebrow">Notre engagement</span>
            <h2 class="cs-values__title" id="cs-values-title">
                <span class="cs-red">Atirao</span>,votre partenaire de performance
            </h2>

            <div class="cs-values__grid">

                <div class="cs-value">
                    <div class="cs-value__icon cs-value__icon--red" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                    </div>
                    <h3 class="cs-value__title">Expertise</h3>
                    <p class="cs-value__text">
                        Depuis 2002, nous avons accompagné plus de 400 clients dans 90 pays.
                        Cette expérience nous permet de répondre avec précision à chacun de vos enjeux marketing.
                    </p>
                </div>

                <div class="cs-value">
                    <div class="cs-value__icon cs-value__icon--teal" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                    </div>
                    <h3 class="cs-value__title">Passion</h3>
                    <p class="cs-value__text">
                        Une équipe de passionnés en veille constante sur les évolutions du secteur.
                        Cet état d'esprit vous garantit des consultants pleinement engagés pour votre réussite.
                    </p>
                </div>

                <div class="cs-value">
                    <div class="cs-value__icon cs-value__icon--red" aria-hidden="true">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                        </svg>
                    </div>
                    <h3 class="cs-value__title">Performance</h3>
                    <p class="cs-value__text">
                        Nous vous accompagnons dans la mise en place d'une stratégie ROIste,
                        en vous offrant des relais de croissance durables pour impacter votre business.
                    </p>
                </div>

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

    {{-- ══════════════════════════════════════════
         CTA SECTION
         ══════════════════════════════════════════ --}}
    <section class="containerB cs-cta" aria-labelledby="cs-cta-title">
        <div class="cs-page-wrap">
            <div class="cs-cta__card">
                <span class="cs-section-eyebrow cs-section-eyebrow--dark">Prêt à écrire votre histoire ?</span>
                <h2 class="cs-cta__title" id="cs-cta-title">
                    Votre projet,<br>
                    notre prochaine <span class="cs-red">réussite</span>.
                </h2>
                <a class="cs-cta__btn" href="{{ route('contact') }}">
                    Discutons de votre projet
                    <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>
    </section>

@stop

@section('footerScripts')
<script>
(function () {
    'use strict';

    /* ── Universe animation (stars + 3-D sphere) ─────────────────── */
    var header = document.querySelector('.case-studies-page-header-bg');
    if (!header) return;

    var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var starsCanvas  = header.querySelector('[data-case-studies-stars-canvas]');
    var sphereLayer  = header.querySelector('[data-case-studies-sphere-layer]');
    var sphereCanvas = header.querySelector('[data-case-studies-sphere-canvas]');
    var cursorGlow   = header.querySelector('[data-case-studies-cursor-glow]');

    var reveal = function () { header.classList.add('is-case-studies-universe-ready'); };
    if (document.readyState === 'complete') reveal();
    else window.addEventListener('load', reveal);

    if (!reduceMotion && cursorGlow && window.matchMedia('(hover: hover)').matches) {
        var glowFrame = null;
        header.addEventListener('mousemove', function (e) {
            var rect = header.getBoundingClientRect();
            var x = ((e.clientX - rect.left) / rect.width) * 100;
            var y = ((e.clientY - rect.top)  / rect.height) * 100;
            if (glowFrame) cancelAnimationFrame(glowFrame);
            glowFrame = requestAnimationFrame(function () {
                cursorGlow.style.setProperty('--mx', x + '%');
                cursorGlow.style.setProperty('--my', y + '%');
            });
        });
    }

    /* Stars */
    if (starsCanvas && starsCanvas.getContext) {
        var sCtx = starsCanvas.getContext('2d');
        var sDpr = Math.min(window.devicePixelRatio || 1, 2);
        var stars = [];

        var resizeStars = function () {
            var w = header.clientWidth, h = header.clientHeight;
            starsCanvas.width  = w * sDpr;
            starsCanvas.height = h * sDpr;
            starsCanvas.style.width  = w + 'px';
            starsCanvas.style.height = h + 'px';
            sCtx.setTransform(sDpr, 0, 0, sDpr, 0, 0);
            var n = window.innerWidth < 640 ? 40 : window.innerWidth < 1024 ? 65 : 100;
            stars = Array.from({ length: n }, function () {
                return {
                    x: Math.random() * w,
                    y: Math.random() * h,
                    r: Math.random() * 1.2 + 0.3,
                    baseAlpha: Math.random() * 0.45 + 0.2,
                    speed: Math.random() * 0.15 + 0.02,
                    phase: Math.random() * Math.PI * 2
                };
            });
        };

        var drawStars = function (t) {
            var w = header.clientWidth, h = header.clientHeight;
            sCtx.clearRect(0, 0, w, h);
            stars.forEach(function (s) {
                var twinkle = reduceMotion ? 0 : Math.sin(t * 0.001 * s.speed + s.phase) * 0.22;
                sCtx.beginPath();
                sCtx.fillStyle = 'rgba(255,255,255,' + Math.max(0, s.baseAlpha + twinkle) + ')';
                sCtx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
                sCtx.fill();
            });
            if (!reduceMotion) requestAnimationFrame(drawStars);
        };

        resizeStars();
        requestAnimationFrame(drawStars);
        var starsTimer;
        window.addEventListener('resize', function () {
            clearTimeout(starsTimer);
            starsTimer = setTimeout(resizeStars, 150);
        });
    }

    /* Sphere */
    if (sphereCanvas && sphereCanvas.getContext && sphereLayer) {
        var pCtx = sphereCanvas.getContext('2d');
        var pDpr = Math.min(window.devicePixelRatio || 1, 2);
        var pW = 0, pH = 0, pR = 0, nodes = [];
        var rotX = 0.18, rotY = 0, mX = 0, mY = 0;

        var buildNodes = function () {
            var n = 46, golden = Math.PI * (3 - Math.sqrt(5));
            nodes = Array.from({ length: n }, function (_, idx) {
                var y = 1 - (idx / (n - 1)) * 2;
                var r = Math.sqrt(1 - y * y);
                var theta = golden * idx;
                return { x: Math.cos(theta) * r, y: y, z: Math.sin(theta) * r };
            });
        };

        var resizeSphere = function () {
            var sz = sphereLayer.clientWidth;
            pW = pH = sz; pR = sz * 0.42;
            sphereCanvas.width  = sz * pDpr;
            sphereCanvas.height = sz * pDpr;
            sphereCanvas.style.width  = sz + 'px';
            sphereCanvas.style.height = sz + 'px';
            pCtx.setTransform(pDpr, 0, 0, pDpr, 0, 0);
        };

        var project = function (n) {
            var cY = Math.cos(rotY), sY = Math.sin(rotY);
            var x1 = n.x * cY - n.z * sY;
            var z1 = n.x * sY + n.z * cY;
            var cX = Math.cos(rotX), sX = Math.sin(rotX);
            var y2 = n.y * cX - z1 * sX;
            var z2 = n.y * sX + z1 * cX;
            var sc = 1 / (1.8 - z2 * 0.6);
            return { x: pW / 2 + x1 * pR * sc, y: pH / 2 + y2 * pR * sc, z: z2 };
        };

        var drawSphere = function () {
            pCtx.clearRect(0, 0, pW, pH);
            var proj = nodes.map(project);
            pCtx.lineWidth = 1;
            for (var i = 0; i < proj.length; i++) {
                for (var j = i + 1; j < proj.length; j++) {
                    var dx = nodes[i].x - nodes[j].x;
                    var dy = nodes[i].y - nodes[j].y;
                    var dz = nodes[i].z - nodes[j].z;
                    if (Math.sqrt(dx * dx + dy * dy + dz * dz) < 0.62) {
                        var avgZ = (proj[i].z + proj[j].z) / 2;
                        var al = Math.max(0.02, 0.16 * (avgZ + 1) / 2);
                        pCtx.strokeStyle = 'rgba(255,255,255,' + al + ')';
                        pCtx.beginPath();
                        pCtx.moveTo(proj[i].x, proj[i].y);
                        pCtx.lineTo(proj[j].x, proj[j].y);
                        pCtx.stroke();
                    }
                }
            }
            proj.forEach(function (p) {
                var da = Math.max(0.12, (p.z + 1) / 2);
                pCtx.beginPath();
                pCtx.fillStyle = 'rgba(255,255,255,' + (0.25 + da * 0.55) + ')';
                pCtx.arc(p.x, p.y, 1.1 + da * 1.4, 0, Math.PI * 2);
                pCtx.fill();
            });
            if (!reduceMotion) {
                rotY += 0.0016 + mX * 0.0008;
                rotX += (0.18 + mY * 0.06 - rotX) * 0.02;
                requestAnimationFrame(drawSphere);
            }
        };

        if (window.matchMedia('(hover: hover)').matches) {
            header.addEventListener('mousemove', function (e) {
                var rect = header.getBoundingClientRect();
                mX = ((e.clientX - rect.left) / rect.width  - 0.5) * 2;
                mY = ((e.clientY - rect.top)  / rect.height - 0.5) * 2;
            });
        }

        buildNodes(); resizeSphere(); drawSphere();
        var sphereTimer;
        window.addEventListener('resize', function () {
            clearTimeout(sphereTimer);
            sphereTimer = setTimeout(function () {
                resizeSphere();
                if (reduceMotion) drawSphere();
            }, 150);
        });
    }
})();

/* ── Filter + Search ───────────────────────────────────────────── */
(function () {
    'use strict';

    var grid        = document.getElementById('csGrid');
    var emptyMsg    = document.getElementById('csEmpty');
    var searchInput = document.getElementById('csSearch');
    var pills       = document.querySelectorAll('.cs-pill');
    var activeFilter = 'all';

    function applyFilters() {
        var query = searchInput ? searchInput.value.toLowerCase().trim() : '';
        var visible = 0;

        if (!grid) return;

        grid.querySelectorAll('.cs-card').forEach(function (card) {
            var industry   = (card.dataset.industry || '').toLowerCase();
            var searchData = (card.dataset.search || '').toLowerCase();

            var matchFilter = activeFilter === 'all' || industry === activeFilter.toLowerCase();
            var matchSearch = !query || searchData.includes(query);

            if (matchFilter && matchSearch) {
                card.style.display = '';
                visible++;
            } else {
                card.style.display = 'none';
            }
        });

        if (emptyMsg) emptyMsg.style.display = visible === 0 ? 'block' : 'none';
    }

    pills.forEach(function (pill) {
        pill.addEventListener('click', function () {
            pills.forEach(function (p) { p.classList.remove('cs-pill--active'); });
            pill.classList.add('cs-pill--active');
            activeFilter = pill.dataset.filter || 'all';
            applyFilters();
        });
    });

    if (searchInput) {
        searchInput.addEventListener('input', applyFilters);
    }

    /* Smooth scroll for hero CTA */
    var heroCta = document.querySelector('#cs-hero-scroll-cta');
    if (heroCta) {
        heroCta.addEventListener('click', function (e) {
            e.preventDefault();
            var target = document.getElementById('cs-grid');
            if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
        });
    }
})();
</script>
@stop