// Shared atoms for applicant site
const { useState, useEffect, useRef } = React;

function Icon({ name, size = 16, stroke = 1.75, style = {} }) {
  const ref = useRef(null);
  useEffect(() => {
    if (ref.current && window.lucide) {
      ref.current.innerHTML = '';
      const kebabToPascal = s => s.split('-').map(x => x[0].toUpperCase()+x.slice(1)).join('');
      const svg = window.lucide.createElement(window.lucide.icons[kebabToPascal(name)] || window.lucide.icons.Circle);
      svg.setAttribute('width', size);
      svg.setAttribute('height', size);
      svg.setAttribute('stroke-width', stroke);
      ref.current.appendChild(svg);
    }
  }, [name, size, stroke]);
  return <span ref={ref} style={{ display:'inline-flex', ...style }} />;
}

function Button({ variant='primary', size='md', icon, iconRight, children, onClick, style={} }) {
  const base = {
    fontFamily:'var(--font-sans)', fontWeight: 600, borderRadius: 8,
    border: '1px solid transparent', cursor:'pointer',
    display:'inline-flex', alignItems:'center', gap: 6, lineHeight: 1.2,
    transition: 'all 120ms var(--ease-out)',
    whiteSpace: 'nowrap',
  };
  const sizes = {
    sm: { fontSize: 12, padding: '7px 12px' },
    md: { fontSize: 14, padding: '10px 16px' },
    lg: { fontSize: 15, padding: '13px 22px' },
  };
  const variants = {
    primary: { background: 'var(--brand-500)', color: '#fff' },
    secondary: { background: 'var(--neutral-0)', color: 'var(--fg-1)', borderColor: 'var(--border-strong)' },
    ghost: { background: 'transparent', color: 'var(--fg-1)' },
  };
  return (
    <button onClick={onClick} style={{...base, ...sizes[size], ...variants[variant], ...style}}
      onMouseEnter={e => { if (variant==='primary') e.currentTarget.style.background='var(--brand-600)'; else e.currentTarget.style.background='var(--neutral-50)'; }}
      onMouseLeave={e => e.currentTarget.style.background = variants[variant].background}>
      {icon && <Icon name={icon} size={size==='lg'?16:14} />}
      {children}
      {iconRight && <Icon name={iconRight} size={size==='lg'?16:14} />}
    </button>
  );
}

function Chip({ children, active }) {
  return (
    <span style={{
      padding: '6px 12px',
      border: `1px solid ${active ? 'var(--brand-500)' : 'var(--border-strong)'}`,
      background: active ? 'var(--brand-50)' : 'var(--neutral-0)',
      color: active ? 'var(--brand-700)' : 'var(--fg-2)',
      borderRadius: 999, fontSize: 12.5, fontWeight: 500, cursor:'pointer',
    }}>{children}</span>
  );
}

function TagLine({ children }) {
  return <div style={{ fontSize: 11.5, color: 'var(--fg-3)', letterSpacing:'0.08em', textTransform:'uppercase', fontWeight: 500 }}>{children}</div>;
}

Object.assign(window, { Icon, Button, Chip, TagLine });