// Shared UI primitives

const Eyebrow = ({ children, className = "" }) => (
  <div className={`eyebrow ${className}`}>{children}</div>
);

const Pill = ({ children, variant = "gold", dot = false, className = "" }) => (
  <span className={`pill pill--${variant} ${className}`}>
    {dot && <i />}
    {children}
  </span>
);

// Tiny color-swatch avatar w/ initial
const Avatar = ({ initial, gradient = "pink-gold", size = 40 }) => {
  const gradients = {
    "pink-gold": "linear-gradient(135deg, #FC298A, #F4C431)",
    "green-pink": "linear-gradient(135deg, #00A65A, #FC298A)",
    "gold-pink": "linear-gradient(135deg, #F4C431, #FC298A)",
    "navy-pink": "linear-gradient(135deg, #0D1530, #FC298A)",
    "green-gold": "linear-gradient(135deg, #00A65A, #F4C431)",
    "pink-green": "linear-gradient(135deg, #FC298A, #00A65A)",
  };
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: gradients[gradient] || gradients["pink-gold"],
      display: "grid", placeItems: "center", color: "#fff",
      fontFamily: "var(--mm-font-serif)", fontSize: size * 0.42, fontWeight: 500, flexShrink: 0
    }}>{initial}</div>
  );
};

// Placeholder photo with art direction caption
const Photo = ({ tone = "warm", aspect = "4/3", caption, children, className = "", style = {} }) => {
  const tones = {
    warm:    ["#E8D5B7", "#C9A77C"],
    linen:   ["#F1EBE1", "#D4C5B0"],
    hands:   ["#E6C8AE", "#B88D68"],
    evening: ["#7D4B5E", "#3E2938"],
    garden:  ["#C9D8B6", "#8FA575"],
    pink:    ["#FFD5E5", "#FC298A"],
    teal:    ["#C3E5DE", "#6FAA9B"],
    gold:    ["#FBEDBD", "#E0B838"],
    navy:    ["#5A6A90", "#1F2948"],
  };
  const [a, b] = tones[tone] || tones.warm;
  return (
    <div
      className={`photo ${className}`}
      style={{ aspectRatio: aspect, "--ph-a": a, "--ph-b": b, ...style }}
    >
      {children}
      {caption && <div className="photo__caption">{caption}</div>}
    </div>
  );
};

// Section header — matches deck eyebrow + serif heading pattern
const SectionHead = ({ eyebrow, title, lede, align = "left", eyebrowClass = "", children }) => (
  <div className={`sec-head sec-head--${align}`} style={{
    display: "flex", flexDirection: "column", gap: 16,
    textAlign: align, alignItems: align === "center" ? "center" : "flex-start",
    maxWidth: align === "center" ? 640 : 720,
    marginInline: align === "center" ? "auto" : undefined
  }}>
    {eyebrow && <Eyebrow className={eyebrowClass}>{eyebrow}</Eyebrow>}
    <h2 className="sec-title">{title}</h2>
    {lede && <p className="lede">{lede}</p>}
    {children}
  </div>
);

// IntersectionObserver-driven reveal
const useReveal = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); });
    }, { rootMargin: "0px 0px -80px 0px" });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return ref;
};

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

Object.assign(window, { Eyebrow, Pill, Avatar, Photo, SectionHead, useReveal, Reveal });