// Primitives.jsx — shared small components + scroll reveal hook
const { useState, useEffect, useRef, useCallback } = React;

// Solid pill button
function Button({ children, variant = "primary", as = "button", className = "", style: customStyle = {}, ...rest }) {
  const base = {
    fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 14.5,
    letterSpacing: ".01em", borderRadius: 999, padding: "13px 24px",
    border: 0, cursor: "pointer", display: "inline-flex", alignItems: "center",
    gap: 8, transition: "transform .14s ease, background .18s ease, color .18s ease",
    lineHeight: 1, whiteSpace: "nowrap",
  };
  const variants = {
    primary: { background: "var(--lime)", color: "var(--on-lime)" },
    outlineLight: { background: "transparent", color: "var(--white)", border: "1.5px solid rgba(255,255,255,.55)" },
    outlineInk: { background: "transparent", color: "var(--ink)", border: "1.5px solid var(--ink)" },
    solid: { background: "var(--aubergine)", color: "var(--lime)" },
  };
  const Tag = as;
  return (
    <Tag
      className={"nm-btn " + variant + " " + className}
      style={{ ...base, ...variants[variant], ...customStyle }}
      {...rest}
    >{children}</Tag>
  );
}

// Small uppercase eyebrow
function Eyebrow({ children, color = "var(--eyebrow)", style }) {
  return (
    <div style={{
      fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 12.5,
      letterSpacing: ".18em", textTransform: "uppercase", color, ...style,
    }}>{children}</div>
  );
}

// Reveal-on-scroll wrapper
function Reveal({ children, delay = 0, as = "div", style, className = "", ...rest }) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.16 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} className={"reveal " + (seen ? "in " : "") + className}
      style={{ transitionDelay: delay + "ms", ...style }} {...rest}>
      {children}
    </Tag>
  );
}

// Asset paths — relative to client/index.html
const IMG = {
  logoInk: "assets/images/logos/logo-primary.png",
  logoCream: "assets/images/logos/logo-cream.png",
  spit: "assets/images/photos/photo-spit-carving.jpg",
  flatbreadTop: "assets/images/photos/photo-flatbread-topdown.jpg",
  burger: "assets/images/photos/photo-burger-phone.jpg",
  wrap: "assets/images/photos/photo-wrap-hand.jpg",
  three: "assets/images/photos/photo-three-flatbreads.jpg",
  foundersIn: "assets/images/photos/photo-founders-indoor.jpg",
  foundersGarden: "assets/images/photos/photo-founders-garden.jpg",
};

Object.assign(window, { Button, Eyebrow, Reveal, IMG, useState, useEffect, useRef, useCallback });