// Shared primitives — forked from the Ideal UI kit
const { useState, useEffect, useRef } = React;

function Kicker({ children, light, style }) {
  return <div style={{
    fontFamily: 'Jost, sans-serif', fontWeight: 500, fontSize: 12,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    color: light ? '#E8C979' : '#9B7E3D', lineHeight: 1, marginBottom: 12,
    ...style,
  }}>{children}</div>;
}

function CrimsonRule({ width = 56, center, style }) {
  return <div style={{
    width, height: 2, background: '#C8102E',
    margin: center ? '14px auto' : '14px 0',
    border: 0, ...style,
  }} />;
}

function GoldRule({ light, style }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 14,
      color: light ? '#E8C979' : '#9B7E3D', margin: '28px 0',
      ...style,
    }}>
      <span style={{ flex: 1, height: 1, background: light ? 'rgba(232,201,121,.4)' : 'rgba(198,165,92,.4)' }} />
      <span style={{ fontSize: 10 }}>◆</span>
      <span style={{ flex: 1, height: 1, background: light ? 'rgba(232,201,121,.4)' : 'rgba(198,165,92,.4)' }} />
    </div>
  );
}

function Button({ children, variant = 'primary', onClick, href, icon, size = 'md', style, block }) {
  const sizes = {
    sm: { padding: '10px 20px', fontSize: 11 },
    md: { padding: '14px 28px', fontSize: 13 },
    lg: { padding: '20px 40px', fontSize: 14 },
  };
  const base = {
    fontFamily: 'Jost, sans-serif', fontWeight: 500,
    letterSpacing: '0.22em', textTransform: 'uppercase',
    borderRadius: 2, border: '1.5px solid transparent',
    display: block ? 'flex' : 'inline-flex',
    width: block ? '100%' : 'auto',
    justifyContent: 'center',
    alignItems: 'center', gap: 10, cursor: 'pointer',
    textDecoration: 'none',
    transition: 'all 180ms cubic-bezier(0.22,0.61,0.36,1)',
    ...sizes[size],
  };
  const variants = {
    primary:      { background: '#C6A55C', color: '#0B0B0C', borderColor: '#C6A55C' },
    crimson:      { background: '#C8102E', color: '#F6F1E6', borderColor: '#C8102E' },
    outline:      { background: 'transparent', color: '#C6A55C', borderColor: '#C6A55C' },
    outlineLight: { background: 'transparent', color: '#E8C979', borderColor: '#E8C979' },
    ghost:        { background: 'transparent', color: '#9B7E3D', border: 0, padding: '14px 0' },
    ghostLight:   { background: 'transparent', color: '#E8C979', border: 0, padding: '14px 0' },
  };
  const s = { ...base, ...variants[variant], ...style };
  const El = href ? 'a' : 'button';
  return <El
    href={href} onClick={onClick} style={s}
    onMouseEnter={(e) => {
      if (variant === 'primary') { e.currentTarget.style.background = '#E8C979'; e.currentTarget.style.borderColor = '#E8C979'; }
      else if (variant === 'crimson') { e.currentTarget.style.background = '#9B0C23'; e.currentTarget.style.borderColor = '#9B0C23'; }
      else if (variant === 'outline') e.currentTarget.style.background = 'rgba(198,165,92,.10)';
      else if (variant === 'outlineLight') e.currentTarget.style.background = 'rgba(232,201,121,.12)';
      else if (variant === 'ghost') e.currentTarget.style.color = '#C6A55C';
      else if (variant === 'ghostLight') e.currentTarget.style.color = '#F6F1E6';
    }}
    onMouseLeave={(e) => Object.assign(e.currentTarget.style, s)}
  >{children}{icon && <span style={{ fontSize: 14 }}>{icon}</span>}</El>;
}

// Small gold label chip — "AVAILABLE", "BONUS", etc.
function Chip({ children, variant = 'gold', style }) {
  const variants = {
    gold:    { color: '#E8C979', border: '1px solid rgba(232,201,121,.45)' },
    crimson: { color: '#F6F1E6', background: '#C8102E', border: '1px solid #C8102E' },
    dark:    { color: '#C6A55C', border: '1px solid rgba(198,165,92,.4)', background: 'rgba(198,165,92,.06)' },
  };
  return <span style={{
    display: 'inline-block',
    fontFamily: 'Jost, sans-serif', fontWeight: 500, fontSize: 10,
    letterSpacing: '0.24em', textTransform: 'uppercase',
    padding: '5px 11px', borderRadius: 999,
    ...variants[variant], ...style,
  }}>{children}</span>;
}

function Marquee({ text, style }) {
  // Vintage theater marquee — bordered with gold studs
  return (
    <div style={{
      position: 'relative',
      background: 'linear-gradient(180deg,#17171A 0%,#0B0B0C 100%)',
      border: '2px solid #C6A55C',
      padding: '28px 36px',
      ...style,
    }}>
      {/* bulbs */}
      {[...Array(14)].map((_, i) => (
        <span key={'t'+i} style={{
          position: 'absolute', top: -5, left: `${(i+0.5) * (100/14)}%`,
          width: 8, height: 8, borderRadius: '50%',
          background: 'radial-gradient(circle at 30% 30%, #FFE6A8, #C6A55C 60%, #7A5F2D)',
          boxShadow: '0 0 8px rgba(232,201,121,.6)',
        }} />
      ))}
      {[...Array(14)].map((_, i) => (
        <span key={'b'+i} style={{
          position: 'absolute', bottom: -5, left: `${(i+0.5) * (100/14)}%`,
          width: 8, height: 8, borderRadius: '50%',
          background: 'radial-gradient(circle at 30% 30%, #FFE6A8, #C6A55C 60%, #7A5F2D)',
          boxShadow: '0 0 8px rgba(232,201,121,.6)',
        }} />
      ))}
      <div style={{ border: '1px solid rgba(198,165,92,.35)', padding: '18px 24px', textAlign: 'center' }}>
        {text}
      </div>
    </div>
  );
}

Object.assign(window, { Kicker, CrimsonRule, GoldRule, Button, Chip, Marquee });