---
import { DEMO_MODE, REDESIGN_MODE, DEMO_VERSION } from "../data/config";
---

{DEMO_MODE && (
  <div id="demo-badge" class="fixed bottom-4 right-4 z-[9997]">
    <div class:list={["backdrop-blur text-white rounded-full shadow-lg px-3 py-1.5 flex items-center gap-1.5 border", REDESIGN_MODE ? "bg-gradient-to-r from-acepla-700 to-acepla-900 border-white/20" : "bg-[#1a1a1a]/90 border-white/10"]}>
      <span class="relative flex h-2 w-2">
        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
        <span class="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
      </span>
      <span class="font-display font-semibold text-[10px] uppercase tracking-wider">
        {REDESIGN_MODE ? "Rediseño" : "Demo"} {DEMO_VERSION}
      </span>
    </div>
  </div>
)}

{/* Script de reveal-on-scroll solo en modo redesign */}
{REDESIGN_MODE && (
  <script is:inline>
    (function () {
      function init() {
        var els = document.querySelectorAll(".rd-reveal");
        if (!els.length) return;

        // Si el observer no está disponible, mostrar todo
        if (!("IntersectionObserver" in window)) {
          els.forEach(function (el) { el.classList.add("is-visible"); });
          return;
        }

        var obs = new IntersectionObserver(function (entries) {
          entries.forEach(function (e) {
            if (e.isIntersecting) {
              e.target.classList.add("is-visible");
              obs.unobserve(e.target);
            }
          });
        }, { threshold: 0.01, rootMargin: "0px 0px -40px 0px" });

        els.forEach(function (el) { obs.observe(el); });

        // Fallback: después de 1.2s, forzar visibilidad de todo (anti-bug)
        setTimeout(function () {
          document.querySelectorAll(".rd-reveal:not(.is-visible)").forEach(function (el) {
            el.classList.add("is-visible");
          });
        }, 1200);
      }

      if (document.readyState === "loading") {
        document.addEventListener("DOMContentLoaded", init);
      } else {
        init();
      }
    })();
  </script>
)}