/* GEЯE — shared primitives */
const { useState, useEffect, useRef } = React;

/* Lucide icon — renders an <i data-lucide> that lucide.createIcons() upgrades */
function Icon({ name, className }) {
  return <i data-lucide={name} className={className}></i>;
}

function Button({ variant = "primary", icon, iconRight, children, href = "#", onClick }) {
  return (
    <a className={`btn btn-${variant}`} href={href} onClick={onClick}>
      {icon && <Icon name={icon} />}
      {children}
      {iconRight && <Icon name={iconRight} />}
    </a>
  );
}

function Label({ children, center }) {
  return <span className={`label${center ? " center" : ""}`}>{children}</span>;
}

/* Brand lockup: coin + GEЯE wordmark (reversed R) */
function Brand({ size }) {
  return (
    <div className="brand" onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
      <img src="../../assets/gere-coin.png" alt="GEЯE Solutions" />
      <span className="wm">GE<span className="ya">R</span>E</span>
    </div>
  );
}

/* Scroll-position reveal (robust where IntersectionObserver doesn't fire) */
function Reveal({ children, className = "", style, as = "div" }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const check = () => {
      if (done || !el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.92 && r.bottom > 0) {
        el.classList.add("in");
        done = true;
        window.removeEventListener("scroll", check);
        window.removeEventListener("resize", check);
      }
    };
    const raf = requestAnimationFrame(check);
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
    };
  }, []);
  const Tag = as;
  const mergedStyle = style && style.transitionDelay
    ? { ...style, animationDelay: style.transitionDelay }
    : style;
  return <Tag ref={ref} className={`reveal ${className}`} style={mergedStyle}>{children}</Tag>;
}

Object.assign(window, { Icon, Button, Label, Brand, Reveal });