/* global React */
// Primitives — buttons, badge, eyebrow, ambient orbs.
// Color + type tokens come from ../../colors_and_type.css.

const BtnPrimary = ({ children, href = '#', onClick, large = true, style }) => (
  <a
    href={href}
    onClick={(e) => { if (onClick) onClick(e); }}
    className="mlc-btn-primary"
    style={{
      display: 'inline-block',
      background: 'var(--mlc-cream)',
      color: 'var(--mlc-bg)',
      fontSize: large ? 15 : 13,
      fontWeight: 600,
      textDecoration: 'none',
      borderRadius: 24,
      padding: large ? '14px 32px' : '10px 20px',
      border: 'none',
      cursor: 'pointer',
      transition: 'background .2s, color .2s, box-shadow .2s',
      whiteSpace: 'nowrap',
      ...style,
    }}
  >
    {children}
  </a>
);

const BtnGhost = ({ children, href = '#', onClick, large = true, style }) => (
  <a
    href={href}
    onClick={(e) => { if (onClick) onClick(e); }}
    className="mlc-btn-ghost"
    style={{
      display: 'inline-block',
      background: 'rgba(254,255,238,0.03)',
      color: 'var(--mlc-cream)',
      fontSize: large ? 15 : 13,
      fontWeight: 600,
      textDecoration: 'none',
      borderRadius: 24,
      padding: large ? '14px 32px' : '10px 20px',
      border: '1px solid rgba(254,255,238,0.18)',
      cursor: 'pointer',
      transition: 'background .2s, border-color .2s',
      whiteSpace: 'nowrap',
      ...style,
    }}
  >
    {children}
  </a>
);

const Badge = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      fontSize: 12,
      fontWeight: 500,
      letterSpacing: '0.04em',
      textTransform: 'uppercase',
      color: 'var(--mlc-gold)',
      background: 'rgba(244,205,99,0.08)',
      border: '1px solid rgba(244,205,99,0.25)',
      borderRadius: 999,
      padding: '6px 14px',
      marginBottom: 24,
    }}
  >
    {children}
  </div>
);

const Eyebrow = ({ children, style }) => (
  <p
    style={{
      fontSize: 11,
      fontWeight: 600,
      letterSpacing: '0.08em',
      color: 'rgba(244,205,99,0.9)',
      textTransform: 'uppercase',
      margin: '0 0 16px 0',
      ...style,
    }}
  >
    {children}
  </p>
);

// Ambient blurred color orbs — present on every long-scroll page.
const Orbs = () => (
  <>
    <div
      aria-hidden
      style={{
        position: 'fixed',
        top: '-200px',
        left: '-200px',
        width: 600, height: 600,
        borderRadius: '50%',
        background: 'rgba(33,88,164,0.18)',
        filter: 'blur(140px)',
        pointerEvents: 'none',
        zIndex: 0,
      }}
    />
    <div
      aria-hidden
      style={{
        position: 'fixed',
        bottom: '-150px',
        right: '-150px',
        width: 500, height: 500,
        borderRadius: '50%',
        background: 'rgba(244,205,99,0.10)',
        filter: 'blur(140px)',
        pointerEvents: 'none',
        zIndex: 0,
      }}
    />
  </>
);

Object.assign(window, { BtnPrimary, BtnGhost, Badge, Eyebrow, Orbs });