function RoleSelect({ onPick }) {
  const roles = [
    { id: 'cook',    color: ROLE_COLORS.cook,    title: 'Повар',              desc: 'План блюд на смену, отметка о готовности',    icon: '🍳' },
    { id: 'store',   color: ROLE_COLORS.store,   title: 'Кладовщик',          desc: 'Выдача продуктов по дням',                    icon: '📦' },
    { id: 'packer',  color: ROLE_COLORS.packer,  title: 'Фасовщик',           desc: 'Раздача порций по больницам и диетам',        icon: '🥡' },
    { id: 'kitchen', color: ROLE_COLORS.kitchen, title: 'Кухонный сотрудник', desc: 'Заготовки: очистка, нарезка, подготовка',     icon: '🔪' },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(180deg, #f8f6f2 0%, #ece8e0 100%)',
    }}>
      <div style={{ textAlign: 'center', padding: '48px 32px 24px' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '6px 16px',
          background: '#111', color: '#fff', borderRadius: 999,
          fontSize: 15, fontWeight: 700, letterSpacing: 1, marginBottom: 18,
        }}>
          <span>ПИЩЕБЛОК</span>
          {window.KITCHEN_BRANCH && (
            <>
              <span style={{ opacity: 0.4 }}>·</span>
              <span style={{ color: '#f5c400' }}>{window.KITCHEN_BRANCH.name.toUpperCase()}</span>
            </>
          )}
        </div>
        <h1 style={{ margin: 0, fontSize: 56, fontWeight: 800, color: '#111', letterSpacing: -1 }}>
          Выберите свою роль
        </h1>
        <p style={{ fontSize: 18, color: '#555', marginTop: 12 }}>
          {window.KITCHEN_BRANCH
            ? (window.KITCHEN_BRANCH.fullName || window.KITCHEN_BRANCH.name)
            : 'Производственная площадка'}
        </p>
      </div>

      <div style={{
        flex: 1, padding: '16px 48px 48px',
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 24,
      }}>
        {roles.map(r => (
          <button
            key={r.id}
            onClick={() => onPick(r.id)}
            style={{
              display: 'flex', flexDirection: 'column',
              padding: 32,
              background: '#fff',
              border: `3px solid ${r.color.main}`,
              borderRadius: 24,
              cursor: 'pointer',
              textAlign: 'left',
              transition: 'transform 120ms, box-shadow 120ms',
              boxShadow: '0 8px 24px rgba(0,0,0,0.06)',
              fontFamily: 'inherit',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 40px rgba(0,0,0,0.12)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.06)'; }}
          >
            <div style={{
              width: 96, height: 96, borderRadius: 24,
              background: r.color.soft, color: r.color.dark,
              display: 'grid', placeItems: 'center',
              fontSize: 52, marginBottom: 24,
            }}>{r.icon}</div>
            <div style={{
              fontSize: 14, fontWeight: 700, letterSpacing: 1,
              color: r.color.dark, textTransform: 'uppercase', marginBottom: 6,
            }}>роль</div>
            <h2 style={{ margin: 0, fontSize: 32, fontWeight: 800, color: '#111' }}>{r.title}</h2>
            <p style={{ fontSize: 17, color: '#555', marginTop: 10, flex: 1, lineHeight: 1.4 }}>{r.desc}</p>
            <div style={{
              marginTop: 20, padding: '14px 20px',
              background: r.color.main, color: '#fff',
              borderRadius: 12, fontSize: 18, fontWeight: 700,
              textAlign: 'center',
            }}>Войти →</div>
          </button>
        ))}
      </div>

      <div style={{ textAlign: 'center', color: '#888', fontSize: 14, paddingBottom: 24 }}>
        Система управления пищеблоком · v2.4
      </div>
    </div>
  );
}

Object.assign(window, { RoleSelect });