@extends('layout.headerAndFooter')

@section('headLinks')
    <link rel="stylesheet" href="{{asset('siteStyle/blog.css')}}">
    <meta name="description" content="content description">
@stop

@section('title')
    blogs page
@stop

@section('content')
  <section class="containerB blog-container-centered blog-page-header-bg">
    <div class="blog-universe-bg" aria-hidden="true"></div>
    <div class="blog-universe-stars">
        <canvas data-blog-stars-canvas></canvas>
    </div>
    <div class="blog-universe-nebula" aria-hidden="true"></div>
    <div class="blog-universe-grain" aria-hidden="true"></div>
    <div class="blog-universe-cursor-glow" data-blog-cursor-glow aria-hidden="true"></div>
    <div class="blog-universe-sphere" data-blog-sphere-layer aria-hidden="true">
        <div class="blog-universe-sphere-core"></div>
        <canvas data-blog-sphere-canvas></canvas>
        <span class="blog-universe-orbit-dot blog-universe-orbit-dot--1"></span>
        <span class="blog-universe-orbit-dot blog-universe-orbit-dot--2"></span>
        <span class="blog-universe-orbit-dot blog-universe-orbit-dot--3"></span>
    </div>
    <div class="blog-content-centered">
        <div class="titleAndBtnBlog blog-title-centered">
            <p class="blog-hero-eyebrow"><span></span> Insights marketing</p>
            <h1 class="titleTopSectionBlog">Le <span>Blog</span> d'Atirao</h1>
            <h2 class="underTitleBlog">Lisez les dernières actualités, analyses sectorielles et guides stratégiques pour un marketing axé sur les réseaux sociaux et l'économie des créateurs.</h2>
            <div class="blog-hero-topics" aria-label="Sujets du blog">
                <span>Social media</span>
                <span>SEO</span>
                <span>Data & performance</span>
            </div>
        </div>
    </div>
</section>

    <section class="containerW blog-list-section">
        <div class="searchZone blog-list-search">
            <input class="search" type="text" name="search" id="searchInput" placeholder="Search">
            <button class="searchBTN" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 612.01 612.01" style="enable-background:new 0 0 612.01 612.01;" xml:space="preserve" fill="currentColor">
                    <g><g id="_x34__4_">
                        <g>
                            <path d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0     C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586     l158.624,156.099c7.729,7.614,20.277,7.614,28.006,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8     c-120.326,0-217.869-95.993-217.869-214.407S137.167,38.986,257.493,38.986c120.327,0,217.869,95.993,217.869,214.407     S377.82,467.8,257.493,467.8z"/>
                        </g>
                    </g></g>
                </svg>
            </button>
        </div>
        <div class="listBlogs" id="blogContainer">
            @foreach($blogPosts as $blogPost)
            <a href="{{ route('blog.show', ['id' => $blogPost->id]) }}" class="blogCard">
                    <div class="imageZone">
                        <img src="{{ asset($blogPost->image) }}" alt="">
                    </div>
                    <div class="blogInfo">
                        <time>{{ $blogPost->date }}</time>
                        <h2 class="title">{{ $blogPost->title }}</h2>
                        <span class="arrow-circle-inhover">Lire plus</span>
                    </div>
                </a>
            @endforeach
        </div>
    </section>

@stop

@section('footerScripts')
    <script>
        const data = {!! json_encode($blogPosts) !!};
    </script>
    <script>
        (function() {
            const header = document.querySelector('.blog-page-header-bg');
            if (!header) return;

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

            const reveal = () => header.classList.add('is-blog-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>
    <script src="{{asset('siteScripts/blog.js')}}"></script>
@stop