// Primitives.jsx — shared building blocks for the S.W.O website kit
function Eyebrow({ children, light }) {
  return (
    <span className={'swk-eyebrow' + (light ? ' is-light' : '')}>
      <i className="swk-eyebrow-tick" />{children}
    </span>
  );
}

function Btn({ children, variant = 'primary', size, href = '#', icon, onClick }) {
  const cls = ['swk-btn', 'v-' + variant, size ? 'sz-' + size : ''].join(' ').trim();
  return (
    <a className={cls} href={href} onClick={onClick}>
      <span>{children}</span>
      {icon && <Icon name={icon} size={18} />}
    </a>
  );
}

function Section({ id, tone = 'light', children, style }) {
  return (
    <section id={id} className={'swk-section tone-' + tone} style={style}>
      <div className="swk-container">{children}</div>
    </section>
  );
}

// reveal-on-scroll wrapper (gentle fade-up)
function Reveal({ children, delay = 0, as = 'div', className = '', style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={'swk-reveal ' + (shown ? 'is-in ' : '') + className}
      style={{ transitionDelay: delay + 'ms', ...style }}>
      {children}
    </Tag>
  );
}

Object.assign(window, { Eyebrow, Btn, Section, Reveal });