/* Start custom CSS *//* ===========================================================
   ECA BIOBANK
   script.js
=========================================================== */

document.addEventListener("DOMContentLoaded", () => {

    /* ===========================
       NAVBAR SCROLL
    =========================== */

    const navbar = document.querySelector(".navbar");

    function navbarScroll() {

        if (window.scrollY > 60) {
            navbar.classList.add("scrolled");
        } else {
            navbar.classList.remove("scrolled");
        }

    }

    navbarScroll();

    window.addEventListener("scroll", navbarScroll);


    /* ===========================
       SMOOTH SCROLL
    =========================== */

    document.querySelectorAll('a[href^="#"]').forEach(anchor => {

        anchor.addEventListener("click", function (e) {

            const target = document.querySelector(this.getAttribute("href"));

            if (!target) return;

            e.preventDefault();

            target.scrollIntoView({
                behavior: "smooth",
                block: "start"
            });

        });

    });


    /* ===========================
       HERO PARALLAX
    =========================== */

    const hero = document.querySelector(".hero");

    window.addEventListener("scroll", () => {

        const y = window.pageYOffset;

        hero.style.backgroundPositionY = `${y * 0.4}px`;

    });


    /* ===========================
       FADE IN
    =========================== */

    const hiddenElements = document.querySelectorAll(".service-card, .intro, .stats, .contact");

    const observer = new IntersectionObserver(entries => {

        entries.forEach(entry => {

            if (entry.isIntersecting) {

                entry.target.style.opacity = "1";

                entry.target.style.transform = "translateY(0)";

            }

        });

    }, {

        threshold: 0.15

    });

    hiddenElements.forEach(el => {

        el.style.opacity = "0";

        el.style.transform = "translateY(50px)";

        el.style.transition = "all .8s ease";

        observer.observe(el);

    });


    /* ===========================
       CARD HOVER EFFECT
    =========================== */

    document.querySelectorAll(".service-card").forEach(card => {

        card.addEventListener("mousemove", e => {

            const rect = card.getBoundingClientRect();

            const x = e.clientX - rect.left;

            const y = e.clientY - rect.top;

            const centerX = rect.width / 2;

            const centerY = rect.height / 2;

            const rotateX = -(y - centerY) / 20;

            const rotateY = (x - centerX) / 20;

            card.style.transform =
                `perspective(900px)
                 rotateX(${rotateX}deg)
                 rotateY(${rotateY}deg)
                 translateY(-10px)`;

        });

        card.addEventListener("mouseleave", () => {

            card.style.transform =
                "perspective(900px) rotateX(0) rotateY(0)";

        });

    });


    /* ===========================
       BUTTON RIPPLE
    =========================== */

    document.querySelectorAll(".btn").forEach(button => {

        button.addEventListener("click", function (e) {

            const circle = document.createElement("span");

            const diameter = Math.max(
                this.clientWidth,
                this.clientHeight
            );

            circle.style.width = circle.style.height = diameter + "px";

            circle.style.left =
                e.clientX - this.getBoundingClientRect().left - diameter / 2 + "px";

            circle.style.top =
                e.clientY - this.getBoundingClientRect().top - diameter / 2 + "px";

            circle.classList.add("ripple");

            const ripple = this.querySelector(".ripple");

            if (ripple) ripple.remove();

            this.appendChild(circle);

        });

    });


    /* ===========================
       CONTADORES ANIMADOS
    =========================== */

    const counters = document.querySelectorAll(".stats h2");

    const animateCounter = counter => {

        const text = counter.innerText;

        const number = parseInt(text.replace(/\D/g, ""));

        if (isNaN(number)) return;

        let start = 0;

        const increment = Math.ceil(number / 100);

        const timer = setInterval(() => {

            start += increment;

            if (start >= number) {

                start = number;

                clearInterval(timer);

            }

            if (text.includes("%")) {

                counter.innerText = start + "%";

            }

            else if (text.includes("+")) {

                counter.innerText = start + "+";

            }

            else {

                counter.innerText = start;

            }

        }, 20);

    };

    const statsObserver = new IntersectionObserver(entries => {

        entries.forEach(entry => {

            if (entry.isIntersecting) {

                entry.target.querySelectorAll("h2").forEach(c => {

                    if (!c.classList.contains("done")) {

                        c.classList.add("done");

                        animateCounter(c);

                    }

                });

            }

        });

    });

    document.querySelectorAll(".stats").forEach(section => {

        statsObserver.observe(section);

    });


    /* ===========================
       HERO FLOATING EFFECT
    =========================== */

    let direction = 1;

    setInterval(() => {

        direction *= -1;

        hero.animate([

            {

                transform: "translateY(0px)"

            },

            {

                transform: `translateY(${direction * 8}px)`

            }

        ], {

            duration: 4000,

            fill: "forwards",

            easing: "ease-in-out"

        });

    }, 4000);


    /* ===========================
       FORM VALIDATION
    =========================== */

    const form = document.querySelector("form");

    if (form) {

        form.addEventListener("submit", e => {

            const required = form.querySelectorAll("input, textarea");

            let valid = true;

            required.forEach(field => {

                if (field.value.trim() === "") {

                    valid = false;

                    field.style.border = "2px solid red";

                } else {

                    field.style.border = "";

                }

            });

            if (!valid) {

                e.preventDefault();

                alert("Por favor complete todos los campos.");

            }

        });

    }

});


/* ===========================================================
   EFECTO RIPPLE
=========================================================== */

const style = document.createElement("style");

style.innerHTML = `

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

background:rgba(255,255,255,.45);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

`;

document.head.appendChild(style);/* End custom CSS */