// WeWire applicant app — shared UI primitives + icons.
// Loaded before screens; exports to window.

const WW = {
  orange: '#FF4D07', orange2: '#FF7139', orangeDeep: '#D63E05', orangeSoft: '#FFE5D8', amber: '#FF7139',
  ink: '#0E0E0E', ink2: '#1E1C1A', cream: '#FBF7F0', sand: '#F1EADD', white: '#FFFFFF',
  green: '#365A33', greenSoft: '#ECF6D6', red: '#C0392B', redSoft: '#F8E5E2',
  blue: '#3256FC', blueSoft: '#F1F3FF', purple: '#5F29B3', purpleSoft: '#D8DCFF',
  muted: '#6A645B', subtle: '#9A938A', line: 'rgba(14,14,14,0.12)', lineStrong: 'rgba(14,14,14,0.20)',
};
const FONT = '"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif';
const DISP = '"Fraunces", Georgia, "Times New Roman", serif';

// ─── Icons (inline, 2px stroke) ───────────────────────────────
const PATHS = {
  back: 'M15 18l-6-6 6-6', next: 'M9 18l6-6-6-6', up: 'M18 15l-6-6-6 6',
  arrow: 'M5 12h14M13 6l6 6-6 6', check: 'M20 6L9 17l-5-5',
  lock: 'M5 11h14v10H5z|M8 11V7a4 4 0 0 1 8 0v4', clock: 'M12 7v5l3 2|',
  flag: 'M4 22V4h13l-2 4 2 4H4', upload: 'M12 16V4M7 9l5-5 5 5|M4 20h16',
  calendar: 'M5 4h14v16H5z|M16 2v4M8 2v4M4 9h16', pin: 'M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12z|',
  edit: 'M12 20h9|M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z', x: 'M18 6L6 18M6 6l12 12',
  user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2|', book: 'M4 19.5V5a2 2 0 0 1 2-2h13v18H6a2 2 0 0 1-2-2.5z|M4 19.5A2 2 0 0 1 6 17h13',
  brain: 'M9 4a3 3 0 0 0-3 3 3 3 0 0 0-1 5 3 3 0 0 0 2 5 3 3 0 0 0 4 1V4z|M15 4a3 3 0 0 1 3 3 3 3 0 0 1 1 5 3 3 0 0 1-2 5 3 3 0 0 1-4 1',
  chart: 'M3 3v18h18|M7 15l3-4 3 3 4-7', scale: 'M12 3v18|M6 7l-3 6h6zM18 7l3 6h-6zM4 7h16',
  chat: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z|',
  brief: 'M3 8h18v12H3z|M8 8V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v3', star: 'M12 3l2.9 6 6.1.9-4.5 4.3 1.1 6.1L12 17.8 6.4 20.3l1.1-6.1L3 9.9 9.1 9z',
  spark: 'M12 3v18M3 12h18M6 6l12 12M18 6L6 18',
};
function Icon({ name, size = 20, color = 'currentColor', sw = 2, style = {} }) {
  const segs = (PATHS[name] || '').split('|').filter(Boolean);
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color}
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {name === 'clock' && <circle cx="12" cy="12" r="9" />}
      {name === 'user' && <circle cx="12" cy="7" r="4" />}
      {name === 'pin' && <circle cx="12" cy="9" r="2.5" />}
      {segs.map((d, i) => <path key={i} d={d} />)}
    </svg>
  );
}

// ─── Buttons ───────────────────────────────────────────────────
function Btn({ children, variant = 'primary', onClick, disabled, full, style = {}, icon }) {
  const base = {
    height: 54, padding: '0 24px', borderRadius: 999, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
    fontFamily: FONT, fontSize: 16, fontWeight: 600, letterSpacing: '0.01em',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    width: full ? '100%' : undefined, opacity: disabled ? 0.4 : 1, whiteSpace: 'nowrap',
    transition: 'transform 120ms cubic-bezier(.22,1,.36,1), background 220ms',
  };
  const variants = {
    primary: { background: WW.orange, color: '#fff' },
    dark: { background: WW.ink, color: WW.cream },
    soft: { background: WW.orangeSoft, color: WW.orangeDeep },
    ghost: { background: 'transparent', color: WW.ink, boxShadow: `inset 0 0 0 1.5px ${WW.lineStrong}` },
    cream: { background: WW.cream, color: WW.ink },
  };
  return (
    <button onClick={disabled ? undefined : onClick} style={{ ...base, ...variants[variant], ...style }}
      onMouseDown={(e) => !disabled && (e.currentTarget.style.transform = 'scale(0.97)')}
      onMouseUp={(e) => (e.currentTarget.style.transform = 'scale(1)')}
      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}>
      {children}{icon && <Icon name={icon} size={18} />}
    </button>
  );
}

function Eyebrow({ children, color = WW.muted, style = {} }) {
  return <div style={{ fontFamily: FONT, fontSize: 12, fontWeight: 700, letterSpacing: '0.16em',
    textTransform: 'uppercase', color, ...style }}>{children}</div>;
}

// ─── Top bar (sits under the iOS status bar) ───────────────────
function TopBar({ title, onBack, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '8px 4px', minHeight: 40 }}>
      {onBack ? (
        <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 4, color: WW.ink, fontFamily: FONT, fontSize: 15, fontWeight: 600, padding: '6px 8px 6px 0' }}>
          <Icon name="back" size={20} /> Back
        </button>
      ) : <div style={{ width: 40 }} />}
      {title && <div style={{ fontFamily: DISP, fontWeight: 600, fontSize: 16, letterSpacing: '-0.01em' }}>{title}</div>}
      <div style={{ minWidth: 40, display: 'flex', justifyContent: 'flex-end' }}>{right}</div>
    </div>
  );
}

// ─── Progress bar ──────────────────────────────────────────────
function ProgressBar({ value, height = 8, track = WW.sand, fill = WW.orange }) {
  return (
    <div style={{ height, background: track, borderRadius: 999, overflow: 'hidden', width: '100%' }}>
      <div style={{ width: `${Math.round(value * 100)}%`, height: '100%', background: fill,
        borderRadius: 999, transition: 'width 520ms cubic-bezier(.22,1,.36,1)' }} />
    </div>
  );
}

// ─── Card ──────────────────────────────────────────────────────
function Card({ children, style = {}, pad = 20, onClick }) {
  return (
    <div onClick={onClick} style={{ background: WW.white, borderRadius: 22, padding: pad,
      border: `1px solid ${WW.line}`, boxShadow: '0 4px 12px rgba(27,24,19,0.04)',
      cursor: onClick ? 'pointer' : 'default', ...style }}>{children}</div>
  );
}

function Chip({ children, tone = 'neutral', style = {} }) {
  const tones = {
    neutral: { background: WW.sand, color: WW.muted },
    warm: { background: WW.orangeSoft, color: WW.orangeDeep },
    green: { background: WW.greenSoft, color: WW.green },
    red: { background: WW.redSoft, color: WW.red },
    dark: { background: WW.ink, color: WW.cream },
  };
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700,
    padding: '5px 11px', borderRadius: 999, letterSpacing: '0.01em', ...tones[tone], ...style }}>{children}</span>;
}

// ─── Screen scaffold: scrollable body + fixed footer ───────────
function Screen({ children, footer, bg = WW.cream, padTop = 54 }) {
  return (
    <div style={{ minHeight: '100%', height: '100%', background: bg, display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflowY: 'auto', padding: `${padTop}px 20px 16px`, WebkitOverflowScrolling: 'touch' }}>
        {children}
      </div>
      {footer && (
        <div style={{ padding: '12px 20px 30px', background: bg, borderTop: `1px solid ${WW.line}` }}>
          {footer}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { WW, FONT, DISP, Icon, Btn, Eyebrow, TopBar, ProgressBar, Card, Chip, Screen });