/* @jsx React.createElement */

window.Button = function Button({ children, variant = 'primary', onClick, href, disabled }) {
  const base = {
    fontFamily: 'var(--font-body)', fontWeight: 400, fontSize: 14, lineHeight: 1,
    padding: '14px 22px', borderRadius: 12,
    border: '1px solid transparent',
    cursor: disabled ? 'not-allowed' : 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap',
    transition: 'background 200ms ease, color 200ms ease, opacity 200ms ease',
    textDecoration: 'none',
  };
  const variants = {
    primary: { background: 'var(--accent)', color: 'var(--bg)' },
    ghost: { background: 'transparent', color: 'var(--accent)', borderColor: 'var(--rule)' },
    link: {
      background: 'transparent', color: 'var(--accent)', border: 0,
      padding: 0, fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 16,
    },
  };
  const style = { ...base, ...variants[variant], ...(disabled ? { opacity: 0.5 } : {}) };
  const Tag = href ? 'a' : 'button';
  return <Tag href={href} onClick={onClick} disabled={disabled} style={style}>{children}</Tag>;
};

window.Atmosphere = function Atmosphere() {
  return <div className="zl-atmos" style={{ position: 'absolute', inset: 0, zIndex: 0 }} />;
};

window.Stamp = function Stamp({ children }) {
  return (
    <div style={{
      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mid)',
    }}>{children}</div>
  );
};