// primitives.jsx — atomic UI elements used across the landing page.
// All inline styles read from CSS custom properties in assets/colors_and_type.css.

const Button = ({ variant = 'primary', size = 'md', children, onClick, as = 'button', href, style: extra, type = 'button', full }) => {
  const base = {
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 600,
    border: 0,
    cursor: 'pointer',
    borderRadius: 8,
    transition: 'background 150ms cubic-bezier(.2,.8,.2,1), color 150ms cubic-bezier(.2,.8,.2,1), transform 150ms cubic-bezier(.2,.8,.2,1)',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    textDecoration: 'none',
    whiteSpace: 'nowrap',
    width: full ? '100%' : undefined,
  };
  const sizes = {
    sm: { padding: '8px 14px', fontSize: 13 },
    md: { padding: '12px 22px', fontSize: 14 },
    lg: { padding: '16px 28px', fontSize: 16 },
  };
  const variants = {
    primary:   { background: 'var(--ue-deep)',   color: '#fff' },
    secondary: { background: 'var(--ue-sky)',    color: '#fff' },
    accent:    { background: 'var(--ue-ember)',  color: '#fff' },
    sun:       { background: 'var(--ue-sun)',    color: 'var(--ue-midnight)' },
    ghost:     { background: 'transparent',      color: 'var(--ue-deep)' },
    outline:   { background: '#fff',             color: 'var(--ue-deep)', boxShadow: 'inset 0 0 0 1.5px var(--ue-deep)' },
    inverse:   { background: '#fff',             color: 'var(--ue-midnight)' },
  };
  const merged = { ...base, ...sizes[size], ...variants[variant], ...extra };
  if (as === 'a') return <a href={href || '#'} style={merged} onClick={onClick}>{children}</a>;
  return <button type={type} style={merged} onClick={onClick}>{children}</button>;
};

const Pill = ({ children, tone = 'sky' }) => {
  const tones = {
    sky:    { bg: 'rgba(46,168,217,0.12)',  fg: 'var(--ue-deep)' },
    deep:   { bg: 'rgba(33,66,139,0.10)',   fg: 'var(--ue-deep)' },
    sun:    { bg: 'rgba(245,212,53,0.22)',  fg: 'var(--ue-midnight)' },
    ember:  { bg: 'rgba(238,131,41,0.14)',  fg: 'var(--ue-ember)' },
    success:{ bg: 'rgba(43,163,122,0.14)',  fg: 'var(--status-success)' },
    inverse:{ bg: 'rgba(255,255,255,0.10)', fg: 'var(--ue-white)' },
  };
  const t = tones[tone] || tones.sky;
  return (
    <span style={{
      fontFamily: 'Montserrat',
      fontWeight: 600,
      fontSize: 11,
      letterSpacing: '0.10em',
      textTransform: 'uppercase',
      padding: '5px 11px',
      borderRadius: 999,
      background: t.bg,
      color: t.fg,
      display: 'inline-block',
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
};

const Field = ({ label, type = 'text', placeholder, value, onChange, required, name, options, theme = 'light' }) => {
  const dark = theme === 'dark';
  const inputStyle = {
    fontFamily: 'Montserrat', fontSize: 15, padding: '12px 14px',
    borderRadius: 4, border: 0,
    background: dark ? 'var(--ue-off-white)' : 'var(--ue-white)',
    color: 'var(--ue-midnight)', outline: 'none',
    boxShadow: dark ? 'none' : 'inset 0 0 0 1px rgba(147,163,180,0.6)',
    width: '100%',
  };
  const input = type === 'select' ? (
    <select name={name} value={value} onChange={onChange} required={required}
      style={{
        ...inputStyle,
        color: value ? 'var(--ue-midnight)' : 'var(--fg-muted)',
        appearance: 'none',
        backgroundImage: 'linear-gradient(45deg, transparent 50%, var(--ue-steel) 50%), linear-gradient(135deg, var(--ue-steel) 50%, transparent 50%)',
        backgroundPosition: 'calc(100% - 18px) 50%, calc(100% - 13px) 50%',
        backgroundSize: '5px 5px, 5px 5px',
        backgroundRepeat: 'no-repeat',
        paddingRight: 36,
      }}
    >
      <option value="" disabled>{placeholder || 'Please Select'}</option>
      {(options || []).map(o => <option key={o} value={o} style={{ color: 'var(--ue-midnight)' }}>{o}</option>)}
    </select>
  ) : type === 'textarea' ? (
    <textarea name={name} rows={4} value={value} onChange={onChange} placeholder={placeholder} required={required}
      style={{ ...inputStyle, resize: 'vertical' }}
    />
  ) : (
    <input name={name} type={type} value={value} onChange={onChange} placeholder={placeholder} required={required} style={inputStyle} />
  );

  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'Montserrat' }}>
      <span style={{
        fontSize: 15, fontWeight: 500,
        color: dark ? 'var(--ue-white)' : 'var(--ue-deep)',
      }}>{label}{required && <span style={{ color: 'var(--status-error)', marginLeft: 2 }}>*</span>}</span>
      {input}
    </label>
  );
};

const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.75 }) => (
  <i data-lucide={name} style={{ width: size, height: size, color, strokeWidth, display: 'inline-block' }} />
);

// Wrapper that re-creates Lucide icons whenever it mounts/updates — for sections rendered after the initial pass.
const IconRefresh = ({ children, deps = [] }) => {
  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons({ attrs: { 'stroke-width': 1.75 } });
  });
  return children;
};

Object.assign(window, { Button, Pill, Field, Icon, IconRefresh });