// Shared primitives — Button, Eyebrow, Pill, Icon (Lucide), Reveal

const Button = ({ variant = "primary", size = "md", children, icon, iconLeft, href, onClick, type, style, ...rest }) => {
  const cls = `btn btn-${variant}${size === "sm" ? " btn-sm" : ""}`;
  const inner = (
    <>
      {iconLeft && <Icon name={iconLeft} size={16} />}
      {children}
      {icon && <Icon name={icon} size={16} />}
    </>
  );
  if (href) {
    return <a href={href} className={cls} style={style} onClick={onClick} {...rest}>{inner}</a>;
  }
  return <button type={type} className={cls} style={style} onClick={onClick} {...rest}>{inner}</button>;
};

const Eyebrow = ({ children, color }) => (
  <span className="eyebrow" style={color ? { color } : undefined}>{children}</span>
);

const Pill = ({ children, onDark }) => (
  <span className={`pill${onDark ? " pill-onDark" : ""}`}>{children}</span>
);

const Icon = ({ name, size = 20, color = "currentColor", stroke = 2, style }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = "";
      const el = document.createElement("i");
      el.setAttribute("data-lucide", name);
      ref.current.appendChild(el);
      window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": stroke, stroke: color } });
    }
  }, [name, size, color, stroke]);
  return <span ref={ref} style={{ display: "inline-flex", color, lineHeight: 0, ...style }} />;
};

// Scroll-reveal hook
const useReveal = (threshold = 0.12) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("is-in"); obs.unobserve(e.target); } }),
      { threshold }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, [threshold]);
  return ref;
};

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

// Responsive helpers — use in components to adapt inline styles
const useMediaQuery = (query) => {
  const [matches, setMatches] = React.useState(() =>
    typeof window !== "undefined" && window.matchMedia
      ? window.matchMedia(query).matches
      : false
  );
  React.useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const m = window.matchMedia(query);
    const handler = (e) => setMatches(e.matches);
    m.addEventListener ? m.addEventListener("change", handler) : m.addListener(handler);
    return () => {
      m.removeEventListener ? m.removeEventListener("change", handler) : m.removeListener(handler);
    };
  }, [query]);
  return matches;
};

const useIsMobile = () => useMediaQuery("(max-width: 720px)");
const useIsTablet = () => useMediaQuery("(max-width: 1024px)");

Object.assign(window, { Button, Eyebrow, Pill, Icon, useReveal, Reveal, useMediaQuery, useIsMobile, useIsTablet });