// Shared UI primitives for the Na Escala landing page
const { useState, useEffect, useLayoutEffect, useRef } = React;

/* ---------- Scroll reveal ----------
   Bulletproof: content is VISIBLE by default. In-view elements get a one-shot
   CSS entrance animation (reliable). Only elements confirmed below the fold are
   hidden (before paint, no flash) and revealed via observer + scroll + timeout. */
function Reveal({ children, delay = 0, y = 24, as = "div", className = "", style = {} }) {
  const ref = useRef(null);
  // mode: "load" = visible w/ entrance anim | "hidden" = below fold, waiting | "shown" = revealed on scroll
  const [mode, setMode] = useState("load");

  useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;
    const vh = window.innerHeight || document.documentElement.clientHeight;
    const r = el.getBoundingClientRect();
    const belowFold = r.top >= vh * 0.92;
    if (!belowFold) return; // in view (or above) → keep visible with load animation
    setMode("hidden");
    let io;
    const inView = () => {
      const rr = el.getBoundingClientRect();
      return rr.top < vh * 0.9 && rr.bottom > 0;
    };
    const reveal = () => { setMode("shown"); cleanup(); };
    const onScroll = () => { if (inView()) reveal(); };
    function cleanup() {
      if (io) io.disconnect();
      window.removeEventListener("scroll", onScroll);
      clearTimeout(t);
    }
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => { if (e.isIntersecting) reveal(); }),
        { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
      );
      io.observe(el);
    }
    window.addEventListener("scroll", onScroll, { passive: true });
    const t = setTimeout(reveal, 2500); // ultimate safety net
    return cleanup;
  }, []);

  const Tag = as;
  const hidden = mode === "hidden";
  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        ...style,
        opacity: hidden ? 0 : 1,
        transform: hidden ? `translateY(${y}px)` : "none",
        transition: mode === "load" ? undefined : `opacity .7s cubic-bezier(.22,.61,.36,1) ${delay}ms, transform .7s cubic-bezier(.22,.61,.36,1) ${delay}ms`,
      }}
    >
      {children}
    </Tag>
  );
}

/* ---------- Eyebrow label ---------- */
function Eyebrow({ children, light = false }) {
  return (
    <span className={"eyebrow" + (light ? " eyebrow--light" : "")}>
      <span className="eyebrow__dot" />
      {children}
    </span>
  );
}

/* ---------- Button ---------- */
function Button({ children, variant = "primary", size = "md", href = "#demo", icon = true, className = "", onClick }) {
  return (
    <a
      href={href}
      onClick={onClick}
      className={`btn btn--${variant} btn--${size} ${className}`}
    >
      <span>{children}</span>
      {icon && (
        <svg className="btn__arrow" width="18" height="18" viewBox="0 0 24 24" fill="none">
          <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      )}
    </a>
  );
}

/* ---------- Icon set (stroke, 24px) ---------- */
const Icon = ({ name, size = 24, stroke = 2 }) => {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "calendar":
      return (<svg {...p}><rect x="3" y="4.5" width="18" height="16" rx="2.5" /><path d="M3 9h18M8 2.5v4M16 2.5v4" /><path d="M7.5 13l1.6 1.6 3-3" /></svg>);
    case "swap":
      return (<svg {...p}><path d="M4 8h13l-3-3M20 16H7l3 3" /></svg>);
    case "coffee":
      return (<svg {...p}><path d="M4 9h13v4a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5V9Z" /><path d="M17 10h2.2a2.3 2.3 0 0 1 0 4.6H17" /><path d="M8 3.5c-.6.8-.6 1.7 0 2.5M12 3.5c-.6.8-.6 1.7 0 2.5" /></svg>);
    case "absence":
      return (<svg {...p}><circle cx="9.5" cy="7.5" r="3.4" /><path d="M3.5 20.5c0-3.6 2.7-6 6-6 1.4 0 2.7.4 3.7 1.1" /><path d="M16 15.5l5 5M21 15.5l-5 5" /></svg>);
    case "clock":
      return (<svg {...p}><circle cx="12" cy="12" r="8.5" /><path d="M12 7.5V12l3 2" /></svg>);
    case "screen":
      return (<svg {...p}><rect x="3" y="4" width="18" height="12.5" rx="2" /><path d="M8 20.5h8M12 16.5v4" /><path d="M7 11l2.5-2.5 2.5 2 3-3.5" /></svg>);
    case "shield":
      return (<svg {...p}><path d="M12 3l7 3v5c0 4.4-3 7.6-7 9-4-1.4-7-4.6-7-9V6l7-3Z" /><path d="M9 12l2 2 4-4" /></svg>);
    case "check":
      return (<svg {...p}><path d="M4 12.5l5 5 11-12" /></svg>);
    case "spark":
      return (<svg {...p}><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6L12 3Z" /></svg>);
    case "plus":
      return (<svg {...p}><path d="M12 5v14M5 12h14" /></svg>);
    case "minus":
      return (<svg {...p}><path d="M5 12h14" /></svg>);
    case "globe":
      return (<svg {...p}><circle cx="12" cy="12" r="9" /><path d="M3 12h18" /><path d="M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18Z" /></svg>);
    case "settings":
      return (<svg {...p}><circle cx="12" cy="12" r="3.2" /><path d="M12 2.5v2.4M12 19.1v2.4M21.5 12h-2.4M4.9 12H2.5M18.7 5.3l-1.7 1.7M7 17l-1.7 1.7M18.7 18.7L17 17M7 7L5.3 5.3" /></svg>);
    case "calclock":
      return (<svg {...p}><rect x="3" y="4.5" width="18" height="16" rx="2.5" /><path d="M3 9h18M8 2.5v4M16 2.5v4" /><path d="M12 12v2.2l1.6 1" /></svg>);
    case "flag":
      return (<svg {...p}><path d="M6 21V4" /><path d="M6 4.5h11l-2.2 3.2L17 11H6" /></svg>);
    case "broadcast":
      return (<svg {...p}><circle cx="12" cy="12" r="2" /><path d="M8.5 8.5a5 5 0 0 0 0 7M15.5 15.5a5 5 0 0 0 0-7M5.8 5.8a9 9 0 0 0 0 12.4M18.2 18.2a9 9 0 0 0 0-12.4" /></svg>);
    case "userplus":
      return (<svg {...p}><circle cx="9.5" cy="8" r="3.4" /><path d="M3.5 20c0-3.3 2.7-5.8 6-5.8 1 0 2 .25 2.8.7" /><path d="M17.5 14v6M20.5 17h-6" /></svg>);
    case "distribute":
      return (<svg {...p}><circle cx="5" cy="12" r="2.2" /><circle cx="19" cy="5.5" r="2.2" /><circle cx="19" cy="18.5" r="2.2" /><path d="M7 11l10-4.5M7 13l10 4.5" /></svg>);
    case "shuffle":
      return (<svg {...p}><path d="M3 7h3.5l11 10H21M3 17h3.5l3-2.7M14.5 9.7l3-2.7H21" /><path d="M18 4l3 3-3 3M18 14l3 3-3 3" /></svg>);
    case "building":
      return (<svg {...p}><rect x="4.5" y="3" width="15" height="18" rx="2" /><path d="M9 7h2M13 7h2M9 11h2M13 11h2M10.5 21v-3.5h3V21" /></svg>);
    case "play":
      return (<svg {...p}><circle cx="12" cy="12" r="9" /><path d="M10 8.5l5.5 3.5L10 15.5Z" fill="currentColor" stroke="none" /></svg>);
    case "sliders":
      return (<svg {...p}><path d="M4 8h8M16 8h4M4 16h2M10 16h10" /><circle cx="14" cy="8" r="2.2" /><circle cx="8" cy="16" r="2.2" /></svg>);
    case "mail":
      return (<svg {...p}><rect x="3" y="5" width="18" height="14" rx="2.5" /><path d="M4 7l8 6 8-6" /></svg>);
    case "whatsapp":
      return (<svg {...p}><path d="M3.5 20.5l1.3-3.7A8 8 0 1 1 7.6 19.3L3.5 20.5Z" /><path d="M9 9.4c.15-.4.32-.4.52-.4h.45c.16 0 .35-.03.53.42l.65 1.6c.05.12.02.27-.07.39l-.37.46c-.1.13-.22.27-.09.51.5.95 1.2 1.4 2.1 1.74.23.09.36.07.5-.08l.55-.66c.12-.14.25-.12.41-.06l1.5.72c.18.09.3.13.34.2.05.08.05.45-.13.88-.18.43-1 .82-1.4.85-.4.04-.78.2-2.6-.55-2.2-.92-3.55-3.2-3.65-3.35-.1-.15-.86-1.18-.86-2.25s.55-1.6.75-1.82Z" fill="currentColor" stroke="none" /></svg>);
    case "instagram":
      return (<svg {...p}><rect x="3.5" y="3.5" width="17" height="17" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="16.8" cy="7.2" r="1.05" fill="currentColor" stroke="none" /></svg>);
    case "card":
      return (<svg {...p}><rect x="2.5" y="5" width="19" height="14" rx="2.5" /><path d="M2.5 9.5h19" /><path d="M6 14.5h4" /></svg>);
    case "pix":
      return (<svg {...p}><path d="M12 3.2l3.4 3.4a3 3 0 0 0 2.1.9H18l2.8 2.8a2 2 0 0 1 0 2.8L18 18.9h-.5a3 3 0 0 0-2.1.9L12 23.2l-3.4-3.4a3 3 0 0 0-2.1-.9H6L3.2 16a2 2 0 0 1 0-2.8L6 10.5h.5a3 3 0 0 0 2.1-.9L12 3.2Z" /></svg>);
    case "barcode":
      return (<svg {...p}><path d="M4 6v12M7 6v12M10 6v12M13.5 6v12M17 6v12M20 6v12" /></svg>);
    case "lock":
      return (<svg {...p}><rect x="5" y="10.5" width="14" height="9.5" rx="2.2" /><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" /><circle cx="12" cy="15" r="1.1" fill="currentColor" stroke="none" /></svg>);
    case "bolt":
      return (<svg {...p}><path d="M13 3L5 13h6l-1 8 8-10h-6l1-8Z" /></svg>);
    default:
      return null;
  }
};

/* ---------- Brand logo lockup ---------- */
function Logo({ light = false }) {
  return (
    <a href="index.html" className={"logo" + (light ? " logo--light" : "")}>
      <img src={(window.__resources && window.__resources.logo) || "assets/logo-ne-v2.png"} alt="Na Escala" className="logo__mark" />
      <span className="logo__word">Na&nbsp;Escala</span>
    </a>
  );
}

Object.assign(window, { Reveal, Eyebrow, Button, Icon, Logo });