// Shared visual primitives — video placeholder, eyebrow tag, magnetic CTA.

// Animated CSS placeholder for where video will live.
function VideoPlate({ label = 'VIDEO PLATE', tone = 'dark', children, style }) {
  // Subtle drift gradient + grain. Tone "dark" defaults to near-black, "warm" pulls rust.
  const id = React.useId().replace(/:/g, '');
  return (
    <div className="vp" data-tone={tone} style={style}>
      <div className="vp-grad" />
      <div className="vp-vignette" />
      <svg className="vp-grain" aria-hidden="true">
        <filter id={`grain-${id}`}>
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
          <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0"/>
        </filter>
        <rect width="100%" height="100%" filter={`url(#grain-${id})`} />
      </svg>
      <div className="vp-meta">
        <span className="vp-rec" />
        <span className="vp-lbl">{label}</span>
      </div>
      <div className="vp-tc">— : —</div>
      {children && <div className="vp-content">{children}</div>}
    </div>
  );
}

function Eyebrow({ children, n }) {
  return (
    <div className="eyebrow">
      {n != null && <span className="eyebrow-n">{n}</span>}
      <span className="eyebrow-line" />
      <span className="eyebrow-t">{children}</span>
    </div>
  );
}

// Magnetic-ish button. Subtle translate based on cursor + ring on hover.
function MagButton({ children, onClick, variant = 'solid', className = '', as = 'button', href }) {
  const ref = React.useRef(null);
  const innerRef = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const x = e.clientX - (r.left + r.width / 2);
    const y = e.clientY - (r.top + r.height / 2);
    el.style.transform = `translate(${x * 0.18}px, ${y * 0.18}px)`;
    if (innerRef.current) innerRef.current.style.transform = `translate(${x * 0.06}px, ${y * 0.06}px)`;
  };
  const onLeave = () => {
    if (ref.current) ref.current.style.transform = '';
    if (innerRef.current) innerRef.current.style.transform = '';
  };
  const Tag = as;
  return (
    <Tag
      ref={ref}
      href={href}
      onClick={onClick}
      onMouseMove={onMove}
      onMouseLeave={onLeave}
      className={`mag-btn mag-btn--${variant} ${className}`}
    >
      <span ref={innerRef} className="mag-btn-inner">
        <span className="mag-btn-label">{children}</span>
        <span className="mag-btn-arrow" aria-hidden="true">→</span>
      </span>
    </Tag>
  );
}

// Tiny inline marker — used for section dividers and footers.
function RuleHeavy({ left, right }) {
  return (
    <div className="rule-h">
      <span className="rule-h-l">{left}</span>
      <span className="rule-h-line" />
      <span className="rule-h-r">{right}</span>
    </div>
  );
}

Object.assign(window, { VideoPlate, Eyebrow, MagButton, RuleHeavy });