{{--
    Astro Cursor Trail Component
    ─────────────────────────────
    Mouse hareketinde astroloji temalı parçacık efekti.
    • Tam ekran canvas, pointer-events: none
    • Mobil / dokunmatik cihazlarda otomatik kapalı
    • prefers-reduced-motion açıksa kapalı
    • Performans optimize (particle limit, throttle, rAF)
    • Harici kütüphane yok — sadece local SVG ikonlar

    Kullanım:  <x-astro-cursor />
--}}

{{-- Canvas katmanı — sayfa en üstüne, tıklamaları engellemez --}}
<canvas id="astroCursorCanvas" style="position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none;"
    aria-hidden="true"></canvas>

<script>
    (function() {
        'use strict';

        /* ───── Erişilebilirlik & Cihaz Kontrolü ───── */

        // Kullanıcı "hareket azalt" tercih ettiyse çık
        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

        // Mobil / dokunmatik cihazlarda kapat (pointer: coarse = parmak)
        if (window.matchMedia('(pointer: coarse)').matches) return;

        /* ───── Ayarlar ───── */
        var CONFIG = {
            MAX_PARTICLES: 35, // Aynı anda ekrandaki maks parçacık
            THROTTLE_MS: 16, // mousemove throttle (≈60fps)
            SPAWN_DISTANCE: 24, // İki parçacık arası min piksel mesafe
            PARTICLE_SIZE: 22, // İkon boyutu (piksel)
            LIFETIME: 1200, // Parçacık ömrü (ms)
            DRIFT_Y: -18, // Yukarı doğru kayma
            DRIFT_X: 8, // Yatay salınım max
            COLORS: [ // Tema renkleri (yeşil uyumlu)
                '#136F63', // --astro-deep-teal
                '#2f8f7a', // --astro-main-green
                '#1f6f5e', // --astro-main-green-hover
                '#E09F3E', // --astro-gold
                '#86BBD8', // --astro-light-blue
                '#CCD5AE' // --astro-sage
            ]
        };

        /* ───── İkon Preload ───── */
        var ICON_NAMES = ['star', 'moon', 'sun', 'saturn', 'sparkle', 'constellation'];
        var BASE_PATH = '{{ asset('assets/icons') }}/';
        var icons = [];
        var iconsReady = false;

        var loaded = 0;
        ICON_NAMES.forEach(function(name) {
            var img = new Image();
            img.src = BASE_PATH + name + '.svg';
            img.onload = img.onerror = function() {
                loaded++;
                if (loaded === ICON_NAMES.length) iconsReady = true;
            };
            icons.push(img);
        });

        /* ───── Canvas Kurulumu ───── */
        var canvas = document.getElementById('astroCursorCanvas');
        if (!canvas) return;
        var ctx = canvas.getContext('2d');

        function resize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resize();
        window.addEventListener('resize', resize);

        /* ───── Parçacık Havuzu ───── */
        var particles = [];

        /**
         * Yeni parçacık oluştur
         * @param {number} x - Mouse X koordinatı
         * @param {number} y - Mouse Y koordinatı
         */
        function spawnParticle(x, y) {
            if (!iconsReady) return;
            if (particles.length >= CONFIG.MAX_PARTICLES) return;

            particles.push({
                x: x,
                y: y,
                born: performance.now(),
                icon: icons[Math.floor(Math.random() * icons.length)],
                color: CONFIG.COLORS[Math.floor(Math.random() * CONFIG.COLORS.length)],
                driftX: (Math.random() - 0.5) * CONFIG.DRIFT_X,
                driftY: CONFIG.DRIFT_Y * (0.7 + Math.random() * 0.6),
                rotation: Math.random() * Math.PI * 2,
                rotSpeed: (Math.random() - 0.5) * 2
            });
        }

        /* ───── Render Döngüsü ───── */
        var running = true;

        function render(now) {
            if (!running) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            var alive = [];
            for (var i = 0; i < particles.length; i++) {
                var p = particles[i];
                var age = now - p.born;
                if (age > CONFIG.LIFETIME) continue;

                var progress = age / CONFIG.LIFETIME; // 0 → 1
                var opacity = 1 - progress; // Yavaşça söner
                var scale = 0.5 + 0.5 * (1 - progress); // Küçülerek kaybolur
                var size = CONFIG.PARTICLE_SIZE * scale;

                // Pozisyon hesapla (yukarı kayma + yatay salınım)
                var px = p.x + p.driftX * progress;
                var py = p.y + p.driftY * progress;
                var rot = p.rotation + p.rotSpeed * progress;

                ctx.save();
                ctx.globalAlpha = opacity * 0.85; // Max %85 opaklık
                ctx.translate(px, py);
                ctx.rotate(rot);

                // SVG ikonunu çiz
                ctx.drawImage(p.icon, -size / 2, -size / 2, size, size);

                // Renk katmanı uygula (ikonun üstüne tema rengi bas)
                ctx.globalCompositeOperation = 'source-atop';
                ctx.fillStyle = p.color;
                ctx.fillRect(-size / 2, -size / 2, size, size);
                ctx.globalCompositeOperation = 'source-over';

                ctx.restore();
                alive.push(p);
            }
            particles = alive;

            requestAnimationFrame(render);
        }
        requestAnimationFrame(render);

        /* ───── Mouse Takibi (throttle + mesafe kontrolü) ───── */
        var lastX = 0,
            lastY = 0,
            lastSpawn = 0;

        document.addEventListener('mousemove', function(e) {
            var now = performance.now();

            // Throttle: min THROTTLE_MS aralık
            if (now - lastSpawn < CONFIG.THROTTLE_MS) return;

            // Mesafe kontrolü: çok yakın noktada yeni parçacık üretme
            var dx = e.clientX - lastX;
            var dy = e.clientY - lastY;
            if (dx * dx + dy * dy < CONFIG.SPAWN_DISTANCE * CONFIG.SPAWN_DISTANCE) return;

            lastX = e.clientX;
            lastY = e.clientY;
            lastSpawn = now;

            spawnParticle(e.clientX, e.clientY);
        });

        /* ───── Sayfa Görünürlük Kontrolü ───── */
        document.addEventListener('visibilitychange', function() {
            if (document.hidden) {
                running = false;
                particles = [];
            } else {
                running = true;
                requestAnimationFrame(render);
            }
        });
    })();
</script>