/**
 * ============================================================
 * YAIDEL HOME — FEATURES INTERACTIONS (REFINED)
 * ============================================================
 */

(function () {
    'use strict';

    // Lucide init
    function initLucide() {
        if (window.lucide && typeof window.lucide.createIcons === 'function') {
            window.lucide.createIcons({
                attrs: { width: 34, height: 34, stroke: 1.55 }
            });
            return true;
        }
        return false;
    }

    if (!initLucide()) {
        window.setTimeout(initLucide, 80);
    }

    const section = document.querySelector('.yaidel-features-section');
    if (!section) return;

    const cards = Array.from(section.querySelectorAll('.yaidel-feature-card'));
    if (!cards.length) return;

    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    // Reveal
    function revealAll() {
        cards.forEach((card) => card.classList.add('yaidel-feature-visible'));
    }

    if (prefersReducedMotion || !('IntersectionObserver' in window)) {
        revealAll();
    } else {
        const io = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting) return;

                const card = entry.target;
                const idx = cards.indexOf(card);

                window.setTimeout(() => {
                    card.classList.add('yaidel-feature-visible');
                }, idx * 50);

                io.unobserve(card);
            });
        }, {
            threshold: 0.14,
            rootMargin: '0px 0px -38px 0px'
        });

        cards.forEach((card) => io.observe(card));
    }

    if (prefersReducedMotion) return;

    // Spotlight follow
    let rafId = null;
    let targetX = 52;
    let targetY = 24;
    let currentX = 52;
    let currentY = 24;

    function animateSpot() {
        currentX += (targetX - currentX) * 0.10;
        currentY += (targetY - currentY) * 0.10;

        section.style.setProperty('--spot-x', currentX.toFixed(2) + '%');
        section.style.setProperty('--spot-y', currentY.toFixed(2) + '%');

        if (Math.abs(targetX - currentX) > 0.05 || Math.abs(targetY - currentY) > 0.05) {
            rafId = window.requestAnimationFrame(animateSpot);
        } else {
            rafId = null;
        }
    }

    function queueSpot() {
        if (rafId !== null) return;
        rafId = window.requestAnimationFrame(animateSpot);
    }

    section.addEventListener('pointermove', (event) => {
        const rect = section.getBoundingClientRect();
        if (!rect.width || !rect.height) return;

        const x = ((event.clientX - rect.left) / rect.width) * 100;
        const y = ((event.clientY - rect.top) / rect.height) * 100;

        targetX = Math.max(0, Math.min(100, x));
        targetY = Math.max(0, Math.min(100, y));
        queueSpot();
    });

    section.addEventListener('pointerleave', () => {
        targetX = 52;
        targetY = 24;
        queueSpot();
    });
})();