@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{ asset('siteStyle/sectionStyle/topSection.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
    <link rel="stylesheet" href="{{ asset('siteStyle/caseStudiesNewOne.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <link rel="icon" href="{{ asset('images/favicon.ico') }}" type="image/x-icon">
    <meta name="description" content="content description">
@stop
@section('title')
    Nos études de cas
@stop
@section('content')
    <section class="containerB case-studies-page-header-bg">
        <div class="case-studies-universe-bg" aria-hidden="true"></div>
        <div class="case-studies-universe-stars">
            <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>
        <div class="three_wrapper" id="three-container">
            <div id="three-scene"></div>
        </div>
        <div class="topSection">
            <div class="titleAndBtn" style="margin-top: 100px; width:100%">
                {{-- @include('sections.breadcrumbs', [
                    'parentPageLink' => route('home'),
                    'parentPage' => 'Accueil',
                    'childPageLink' => '',
                    'childPage' => 'Expertises',
                    'childPageLink2' => '',
                    'childPage2' => 'Nos études de cas',
                    'fontColor' => 'lightFont',
                ]) --}}
                <h1 class=" title_center" style="align-items: center">Nos études de cas</h1>

            </div>
        </div>
    </section>
    {{-- Section filtre --}}
    <section class="containerW">
        <div class="clientsContainer">
            {{-- AGENZ --}}
            <div class="section1_image_container">
                <div class="section1_shape">
                    <h3 class="title">AGENZ</h3>
                    <p class="description">Booster sa popularité grâce aux réseaux sociaux</p>
                    <div class="expertise-tags">
                        <span class="tag">Génération des réseaux sociaux</span>
                    </div>
                    <p style="font-size: 14px; margin-top: 15px;">Agenz est une plateforme innovante qui réinvente
                        l'immobilier au Maroc en rendant sa vente, l'achat […]</p>
                    <a href="{{ route('caseStudieShow' , ['client' => 'agenz']) }}"
                        style="color: #333; font-size: 14px; text-decoration: none; margin-top: 10px; display: inline-block;">→
                        Lire la suite</a>
                </div>
                <div class="red-accent-section">
                    <img src="{{ asset('CaseStudiesImages/agenz.svg') }}" alt="Projet AGENZ" class="AgenzImage" />
                </div>
            </div>
            {{-- M AUTO --}}
            <div class="section1_image_container left">
                <div class="red-accent-section left">
                    <img src="{{ asset('CaseStudiesImages/AUTOMOTIV.svg') }}" alt="Projet M Auto" class="AgenzImage" />
                </div>
                <div class="section1_shape left">
                    <h3 class="title">M-AUTOMOTIV </h3>
                    <p class="description">Comment augmenter ses acheteurs grâce à la génération de lead</p>
                    <div class="expertise-tags">
                        <span class="tag">Génération de leads</span>
                    </div>
                    <p style="font-size: 14px; margin-top: 15px;">La marque de distributeur de voitures dans et immobile au
                        Maroc dispose d'un réseau de distribution moderne compétent à […]</p>
                    <a href="{{ route('caseStudieShow' , ['client' => 'm-automotiv']) }}"
                        style="color: #333; font-size: 14px; text-decoration: none; margin-top: 10px; display: inline-block;">→
                        Lire la suite</a>
                </div>
            </div>
            {{-- Eqdom --}}
            <div class="section1_image_container">
                <div class="section1_shape">
                    <h3 class="title">EQDOM</h3>
                    <p class="description">Comment multiplier ses résultats avec la génération de leads & la gestion des
                        réseaux sociaux</p>
                    <div class="expertise-tags">
                        <span class="tag">Génération de leads</span>
                        <span class="tag">Gestion des réseaux sociaux</span>
                    </div>
                    <p style="font-size: 14px; margin-top: 15px;">EQDOM est un acteur historique au Maroc dans le domaine du
                        crédit et la consommation […]</p>
                    <a href="{{ route('caseStudieShow' , ['client' => 'eqdom']) }}"
                        style="color: #333; font-size: 14px; text-decoration: none; margin-top: 10px; display: inline-block;">→
                        Lire la suite</a>
                </div>
                <div class="red-accent-section">
                    <img src="{{ asset('CaseStudiesImages/EQDOM.svg') }}" alt="Projet EQDOM" class="AgenzImage" />
                </div>
            </div>
            {{-- soge --}}
            <div class="section1_image_container left">
                <div class="red-accent-section left black" style="background-color: black">
                    <img src="{{ asset('CaseStudiesImages/SoGe.svg') }}" alt="Projet SoGe" class="AgenzImage" />
                </div>
                <div class="section1_shape left">
                    <h3 class="title">SOGé</h3>
                    <p class="description">SoGé : Atteindre 100 % de ses objectifs d'ouverture de comptes et de téléchargements</p>
                    <div class="expertise-tags">
                        <span class="tag">Ouverture de comptes en ligne</span>
                        <span class="tag">Téléchargement d'application</span>
                    </div>
                    <p style="font-size: 14px; margin-top: 15px;">SOGé, la première banque au Maroc qui offre une relation
                        100% à distance de la création du compte […]</p>
                    <a href="{{ route('caseStudieShow' , ['client' => 'soge']) }}"
                        style="color: #333; font-size: 14px; text-decoration: none; margin-top: 10px; display: inline-block;">→
                        Lire la suite</a>
                </div>
            </div>
            {{-- Swiss Life --}}
            <div class="section1_image_container">
                <div class="section1_shape">
                    <h2 class="title">Swisslife</h2>
                    <p class="description">Comment générer des demandes de devis en ligne pour les différents produits
                        swisslife ?</p>
                    <div class="expertise-tags">
                        <span class="tag">Génération de leads</span>
                        <span class="tag">Automation</span>
                        <span class="tag">Automation</span>
                    </div>
                    <p style="font-size: 14px; margin-top: 15px;">SwissLife est un acteur majeur des marchés de l'assurance
                        vie et de la santé prévoyance […]</p>
                    <a href="{{ route('caseStudieShow' , ['client' => 'swisslife']) }}"
                        style="color: #333; font-size: 14px; text-decoration: none; margin-top: 10px; display: inline-block;">→
                        Lire la suite</a>
                </div>
                <div class="red-accent-section">
                    <img src="{{ asset('CaseStudiesImages/SwissLife.svg') }}" alt="Projet SwissLife" class="AgenzImage"
                        height="100%" width="100%" />
                </div>
            </div>
        </div>
    </section>
@section('footerScripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
    <script>
        (function() {
            const header = document.querySelector('.case-studies-page-header-bg');
            if (!header) return;

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

            const reveal = () => 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) {
                let glowFrame = null;
                header.addEventListener('mousemove', (event) => {
                    const rect = header.getBoundingClientRect();
                    const x = ((event.clientX - rect.left) / rect.width) * 100;
                    const y = ((event.clientY - rect.top) / rect.height) * 100;

                    if (glowFrame) cancelAnimationFrame(glowFrame);
                    glowFrame = requestAnimationFrame(() => {
                        cursorGlow.style.setProperty('--mx', `${x}%`);
                        cursorGlow.style.setProperty('--my', `${y}%`);
                    });
                });
            }

            if (starsCanvas && starsCanvas.getContext) {
                const context = starsCanvas.getContext('2d');
                const dpr = Math.min(window.devicePixelRatio || 1, 2);
                let stars = [];

                const resizeStars = () => {
                    const width = header.clientWidth;
                    const height = header.clientHeight;

                    starsCanvas.width = width * dpr;
                    starsCanvas.height = height * dpr;
                    starsCanvas.style.width = `${width}px`;
                    starsCanvas.style.height = `${height}px`;
                    context.setTransform(dpr, 0, 0, dpr, 0, 0);

                    const count = window.innerWidth < 640 ? 40 : (window.innerWidth < 1024 ? 65 : 100);
                    stars = Array.from({ length: count }, () => ({
                        x: Math.random() * width,
                        y: Math.random() * height,
                        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,
                    }));
                };

                const drawStars = (time) => {
                    const width = header.clientWidth;
                    const height = header.clientHeight;
                    context.clearRect(0, 0, width, height);

                    stars.forEach((star) => {
                        const twinkle = reduceMotion ? 0 : Math.sin(time * 0.001 * star.speed + star.phase) * 0.22;
                        context.beginPath();
                        context.fillStyle = `rgba(255,255,255,${Math.max(0, star.baseAlpha + twinkle)})`;
                        context.arc(star.x, star.y, star.r, 0, Math.PI * 2);
                        context.fill();
                    });

                    if (!reduceMotion) requestAnimationFrame(drawStars);
                };

                resizeStars();
                requestAnimationFrame(drawStars);

                let starsResizeTimer;
                window.addEventListener('resize', () => {
                    clearTimeout(starsResizeTimer);
                    starsResizeTimer = setTimeout(resizeStars, 150);
                });
            }

            if (sphereCanvas && sphereCanvas.getContext && sphereLayer) {
                const context = sphereCanvas.getContext('2d');
                const dpr = Math.min(window.devicePixelRatio || 1, 2);
                let width = 0;
                let height = 0;
                let radius = 0;
                let nodes = [];
                let rotX = 0.18;
                let rotY = 0;
                let mouseX = 0;
                let mouseY = 0;

                const buildNodes = () => {
                    const count = 46;
                    const golden = Math.PI * (3 - Math.sqrt(5));

                    nodes = Array.from({ length: count }, (_, index) => {
                        const y = 1 - (index / (count - 1)) * 2;
                        const radiusAtY = Math.sqrt(1 - y * y);
                        const theta = golden * index;

                        return {
                            x: Math.cos(theta) * radiusAtY,
                            y,
                            z: Math.sin(theta) * radiusAtY,
                        };
                    });
                };

                const resizeSphere = () => {
                    const size = sphereLayer.clientWidth;
                    width = size;
                    height = size;
                    radius = size * 0.42;
                    sphereCanvas.width = size * dpr;
                    sphereCanvas.height = size * dpr;
                    sphereCanvas.style.width = `${size}px`;
                    sphereCanvas.style.height = `${size}px`;
                    context.setTransform(dpr, 0, 0, dpr, 0, 0);
                };

                const project = (node) => {
                    const cosY = Math.cos(rotY);
                    const sinY = Math.sin(rotY);
                    const x1 = node.x * cosY - node.z * sinY;
                    const z1 = node.x * sinY + node.z * cosY;
                    const cosX = Math.cos(rotX);
                    const sinX = Math.sin(rotX);
                    const y2 = node.y * cosX - z1 * sinX;
                    const z2 = node.y * sinX + z1 * cosX;
                    const scale = 1 / (1.8 - z2 * 0.6);

                    return {
                        x: width / 2 + x1 * radius * scale,
                        y: height / 2 + y2 * radius * scale,
                        z: z2,
                    };
                };

                const drawSphere = () => {
                    context.clearRect(0, 0, width, height);
                    const projected = nodes.map(project);

                    context.lineWidth = 1;
                    for (let i = 0; i < projected.length; i += 1) {
                        for (let j = i + 1; j < projected.length; j += 1) {
                            const dx = nodes[i].x - nodes[j].x;
                            const dy = nodes[i].y - nodes[j].y;
                            const dz = nodes[i].z - nodes[j].z;
                            const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);

                            if (distance < 0.62) {
                                const avgZ = (projected[i].z + projected[j].z) / 2;
                                const alpha = Math.max(0.02, 0.16 * (avgZ + 1) / 2);
                                context.strokeStyle = `rgba(255,255,255,${alpha})`;
                                context.beginPath();
                                context.moveTo(projected[i].x, projected[i].y);
                                context.lineTo(projected[j].x, projected[j].y);
                                context.stroke();
                            }
                        }
                    }

                    projected.forEach((point) => {
                        const depthAlpha = Math.max(0.12, (point.z + 1) / 2);
                        context.beginPath();
                        context.fillStyle = `rgba(255,255,255,${0.25 + depthAlpha * 0.55})`;
                        context.arc(point.x, point.y, 1.1 + depthAlpha * 1.4, 0, Math.PI * 2);
                        context.fill();
                    });

                    if (!reduceMotion) {
                        rotY += 0.0016 + mouseX * 0.0008;
                        rotX += (0.18 + mouseY * 0.06 - rotX) * 0.02;
                        requestAnimationFrame(drawSphere);
                    }
                };

                if (window.matchMedia('(hover: hover)').matches) {
                    header.addEventListener('mousemove', (event) => {
                        const rect = header.getBoundingClientRect();
                        mouseX = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
                        mouseY = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
                    });
                }

                buildNodes();
                resizeSphere();
                drawSphere();

                let sphereResizeTimer;
                window.addEventListener('resize', () => {
                    clearTimeout(sphereResizeTimer);
                    sphereResizeTimer = setTimeout(() => {
                        resizeSphere();
                        if (reduceMotion) drawSphere();
                    }, 150);
                });
            }
        })();
    </script>
@stop
@endsection