/* LABSAAS UI Kit — shared primitives. Exports to window. */

// Lucide-backed icon (with a custom 'tooth' glyph Lucide lacks)
function Icon({ name, size = 20, stroke = 2, className = "", color }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (name === "tooth") {
      el.innerHTML = `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${stroke}" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5.5C10.4 4.6 8.9 4 7.4 4 5 4 3.5 5.8 3.5 8.4c0 1.9.5 3 1 5.1.4 1.7.5 4.5 2 4.5 1.2 0 1.3-1.8 1.7-3.3.4-1.4.9-2.2 1.8-2.2"/><path d="M12 5.5C13.6 4.6 15.1 4 16.6 4 19 4 20.5 5.8 20.5 8.4c0 1.9-.5 3-1 5.1-.4 1.7-.5 4.5-2 4.5-1.2 0-1.3-1.8-1.7-3.3-.4-1.4-.9-2.2-1.8-2.2"/><path d="M12 5.5v6.1"/></svg>`;
      return;
    }
    el.innerHTML = "";
    const i = document.createElement("i");
    i.setAttribute("data-lucide", name);
    el.appendChild(i);
    if (window.lucide) window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": stroke } });
  }, [name, size, stroke]);
  return <span ref={ref} className={className} style={{ display: "inline-flex", alignItems: "center", color }} />;
}

function Eyebrow({ children, style }) {
  return <div className="lab-eyebrow" style={style}>{children}</div>;
}

function Button({ variant = "primary", size = "md", children, icon, iconRight, onClick, href, style }) {
  const cls = `lab-btn lab-btn-${variant} lab-btn-${size}`;
  const inner = (
    <>
      {icon && <Icon name={icon} size={size === "lg" ? 19 : 17} />}
      <span>{children}</span>
      {iconRight && <Icon name={iconRight} size={size === "lg" ? 19 : 17} />}
    </>
  );
  if (href) return <a className={cls} href={href} onClick={onClick} style={style}>{inner}</a>;
  return <button className={cls} onClick={onClick} style={style}>{inner}</button>;
}

// Scroll-reveal: fade + rise when element enters viewport (with robust fallbacks)
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { el.classList.add("is-in"); return; }
    const reveal = () => el.classList.add("is-in");
    const inView = () => {
      const r = el.getBoundingClientRect();
      return r.top < (window.innerHeight || document.documentElement.clientHeight) - 40 && r.bottom > 0;
    };
    if (inView()) { reveal(); return; }
    let io;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) { reveal(); io.disconnect(); } });
      }, { threshold: 0, rootMargin: "0px 0px -10% 0px" });
      io.observe(el);
    }
    const onScroll = () => { if (inView()) { reveal(); cleanup(); } };
    const cleanup = () => {
      window.removeEventListener("scroll", onScroll);
      if (io) io.disconnect();
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return cleanup;
  }, []);
  return ref;
}

function Reveal({ children, delay = 0, as = "div", className = "", style }) {
  const ref = useReveal();
  const Tag = as;
  return <Tag ref={ref} className={`lab-reveal ${className}`} style={{ "--rd": `${delay}ms`, ...style }}>{children}</Tag>;
}

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